Redesign: Contact Page — Multi-Section, Component-Driven Architecture

[kunalverma2512]

Page: /contact → frontend/src/pages/Contact.jsx
Live URL: https://codelensx.vercel.app/contact

---

🔍 Problem Statement

The current contact page is a minimal single-form layout with no contextual information, no alternative contact channels, and no visual hierarchy. It does not reflect the quality of the rest of the CodeLens product and fails to:

• Tell the user who they are contacting and what to expect
• Offer developer-preferred channels like GitHub Issues or Discord
• Provide a smart, context-aware form experience
• Communicate project status or trust signals
• Handle the success state with any delight or feedback

---

✅ Goal

Rebuild the Contact page as a multi-section, component-driven layout.

Each section must live in its own .jsx file inside a new folder:

frontend/src/components/contact/
├── ContactHero.jsx
├── ContactChannelCards.jsx
├── ContactForm.jsx
├── ContactSidebar.jsx
├── ContactFAQ.jsx
└── ContactSuccessState.jsx

Contact.jsx should only import and compose these components — no UI logic inside the page file.

---

🏗️ Required Sections & Components

1. ContactHero.jsx

• Heading: something specific like "Reach out — we respond fast" (not "Contact Us")
• Subtext: one line describing what kinds of messages are welcome
• Response time badge:
  • Animated green dot
  • "Usually replies within 24 hours"
• Minimal left-aligned layout
• No center-aligned hero block

---

2. ContactChannelCards.jsx

Create 4 cards:

• Email → mailto: link
• Bug Report → GitHub Issues
• Feature Request → GitHub Discussions
• Discord / Community → invite link (or placeholder)

Styling requirements:

• Thin border
• Subtle hover lift
• No colored card backgrounds

---

3. ContactForm.jsx

Add a category selector:

• Bug Report
• Feature Request
• Partnership
• General

Fields should change based on selected category.

Bug Report

• Platform selector
• Steps to Reproduce
• Expected Behavior
• Actual Behavior

Feature Request

• Platform
• Description

General

• Name
• Email
• Message

Additional requirements:

• Real-time email validation
• Green checkmark when valid
• Character counter on textarea
• Successful submit replaces form with ContactSuccessState

---

4. ContactSidebar.jsx

Include:

Availability Signal

• Green / yellow / grey status dot
• Current availability message

Timezone

• IST (UTC +5:30)

GitHub Stats

Fetch from:

https://api.github.com/repos/kunalverma2512/CodeLens

Display:

• Stars
• Forks
• Open Issues

Builder Card

Show:

• Avatar
• Name
• Short bio

Example:

Built by a developer, for developers.

---

5. ContactFAQ.jsx

Accordion component with smooth transitions.

Minimum questions:

1. Is CodeLens free to use?
2. How do I report a security vulnerability?
3. Can I contribute to the project?
4. How do I request a new platform integration?
5. Where is my data stored?

Requirements:

• Expand / collapse behavior
• Smooth interaction experience

---

6. ContactSuccessState.jsx

Shown after successful submission.

Display:

• Animated checkmark
• Submitted category
• Estimated response time

Suggested actions:

• Explore your Dashboard →
• Check open issues →

Include:

• Send another message button
• Reset form state

---

🎨 Design Direction

Styling Requirement

• Use Tailwind CSS only
• Do not use custom CSS files, CSS modules, styled-components, SCSS, or other styling solutions
• All styling, layout, spacing, responsiveness, animations, and states should be implemented using Tailwind utility classes

Color Palette

Black & white should make up roughly 98% of the interface.

Use one accent color only for:

• Active category state
• Availability dot
• Submit button
• Success checkmark
• Focus ring

No gradients.

---

Typography

Use:

• font-mono for:
  • Labels
  • Badges
  • Metadata
  • GitHub stats

Use:

• Clean sans-serif for:
  • Headings
  • Body text

---

Layout

Desktop:

• 60% Form
• 40% Sidebar

Mobile:

• Single column

---

Borders

Rules:

• Thin borders only
• Subtle opacity
• No colored borders
• No side accent borders

---

Hover States

Use:

• Subtle shadow elevation
• Slight scale transitions where appropriate
• Minimal motion

Avoid:

• Heavy visual effects
• Color-filled hover backgrounds

---

Animations

• Keep animations lightweight
• Respect prefers-reduced-motion
• Prioritize usability over visual effects

---

📁 File Structure After Completion

frontend/src/
├── components/
│   └── contact/
│       ├── ContactHero.jsx
│       ├── ContactChannelCards.jsx
│       ├── ContactForm.jsx
│       ├── ContactSidebar.jsx
│       ├── ContactFAQ.jsx
│       └── ContactSuccessState.jsx
│
└── pages/
    └── Contact.jsx

Requirements:

• Contact.jsx only composes components
• No UI logic inside page file

---

📋 Acceptance Criteria

• Create frontend/src/components/contact/
• Add all 6 contact components
• Contact.jsx only imports and composes components
• Use Tailwind CSS exclusively for styling
• Category-based progressive disclosure implemented
• GitHub API stats load correctly
• FAQ accordion works
• Success state replaces form after submission
• Responsive at 375px and 1280px
• No console warnings or errors

---

🎯 Expected Outcome

After implementation:

• Contact experience feels significantly more professional
• Users understand where messages go and expected response times
• Alternative support channels become discoverable
• Trust and transparency improve through GitHub/project signals
• Form experience becomes more context-aware and efficient
• Success state provides meaningful feedback after submission
• Overall UI quality becomes consistent with the rest of the CodeLens product

---

📝 Additional Notes

• Follow a component-driven architecture
• Keep components reusable and isolated
• Use Tailwind CSS only
• No unrelated repository modifications should be included in this PR

---

[Shivangi1515]

Hi @kunalverma2512

I'd like to work on this under Gssoc'26. Kindly assign it to me .

[kunalverma2512]

Hi @Shivangi1515

Consider it as assigned , Proceed....

This issue represents a substantial opportunity to elevate the overall product experience. Approach it with meticulous attention to detail, unflinching adherence to the proposed architecture, and a pragmatic focus on long-term maintainability.

Aim for a cohesive, precision-built implementation where every component serves a deliberate purpose and contributes to a unified user experience. Prioritize clarity, craftsmanship, scalability, and executional excellence over unnecessary complexity or visual excess.

Maintain strong architectural integrity, rigorous consistency, and thoughtful component isolation throughout the implementation. The objective is not merely to satisfy the acceptance criteria, but to deliver a refined, robust, extensible, and production-ready experience that feels intentional in every aspect.

Remember that some of the most impactful contributions are not the ones that add the most code, but the ones that elevate the quality bar of the entire project. Treat this as an opportunity to showcase technical depth, product thinking, and attention to detail. A well-executed solution here will leave a lasting signal of craftsmanship, ownership, and engineering maturity.

A formidable submission is rarely defined by volume, but by precision, cohesion, and conviction in execution. Focus on refinement, elevate the details, and ensure every interaction contributes meaningful value to the overall experience.

Looking forward to the PR.