About sec

[nitinmohan18]

Pull Request

Summary

This PR significantly upgrades the landing page's mobile responsiveness and overall visual design. It fixes vertical space issues on mobile devices by introducing iOS-style lists and horizontal snap-scroll carousels, and upgrades multiple components to a highly premium glassmorphism aesthetic.

---

Related Issue

Closes #1

---

Type of Change

• Feature
• Bug Fix
• Documentation
• Refactor
• Performance Improvement
• CI / Build
• Other

---

What Changed?

• Stats & Metrics Section Refactor: Upgraded the mobile layout to a sleek 2x2 grid to save vertical space. The bottom feature strip was converted to a tight horizontal flex layout on mobile.
• AI Chat Demo Premium Mobile View: Completely re-engineered the feature tabs on mobile into a premium, horizontal snap-scrolling carousel (saving massive vertical screen space), while retaining the vertical list on desktop. Reduced fixed height of the chat mockup from 520px to 380px on mobile.
• Unified Features Architecture: Replaced stacked, separated cards on mobile with an ultra-compact, iOS Settings-style unified list (flush with faint dividers) to dramatically reduce padding and vertical scrolling fatigue.
• Glassmorphism Icon Upgrades: Upgraded the standard solid-colored feature icons to high-end translucent glass containers with a dynamic glowing ambient backdrop on hover.
• Testimonials Social Proof Badge: Replaced the basic "500+" stats box with an ultra-premium, interactive Avatar Cluster pill featuring micro-animations, star ratings, and optimized dark-mode contrast.
• FAQ Accordion Optimization: Shrunk massive padding blocks in the FAQ section to a much tighter px-5 py-4 mobile spacing for better scannability.

---

Screenshots (UI Changes Only)

(Attach your before/after screenshots here showcasing the new horizontal carousel and unified lists on mobile, as well as the new glassmorphism icons)

---

Testing

• Tested layouts extensively across multiple responsive breakpoints (mobile, tablet, desktop) using Chrome DevTools.
• Verified that horizontal swipe scrolling on the AI feature tabs works smoothly on touch devices.
• Validated contrast ratios and visual hierarchy in both Light and Dark themes.

---

Checklist

• My branch is up to date with the latest main.
• My code follows the project's coding standards.
• I have formatted the modified files (npx prettier --write <file>).
• npm run format:check passes.
• npm run lint passes.
• npm run typecheck passes.
• npm run build passes.
• I have updated documentation if required.
• I have tested my changes locally.
• This Pull Request focuses on a single feature or fix.

---

Additional Notes

The changes utilize Tailwind CSS and Framer Motion heavily. Pay special attention to the new scrollbar-hide and snap-x utilities added to the AI Demo section to achieve the native mobile feel.

Summary by CodeRabbit

• New Features

  • Added a more interactive AI demo with selectable feature cards and richer chat previews.
  • Animated key landing page stats so numbers count up as they come into view.
  • Updated testimonials with a smoother scrolling experience and a refreshed social-proof badge.

• UI Updates

  • Refreshed the hero, features, FAQ, and chat sections with new layouts, styling, and motion effects.
  • Improved scrolling behavior and tightened the overall visual theme across the landing page.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyper-learning-tech	Ready	Preview, Comment	Jul 9, 2026 8:49am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e17c604f-d9bf-4702-a1ea-c599f2304a52

📥 Commits

Reviewing files that changed from the base of the PR and between 11f81db and ba7c03b.

📒 Files selected for processing (9)

• app/globals.css
• app/layout.tsx
• components/ai/chat-mockup.tsx
• features/landing/ai-demo.tsx
• features/landing/faq.tsx
• features/landing/features.tsx
• features/landing/hero.tsx
• features/landing/stats.tsx
• features/landing/testimonials.tsx

---

📝 Walkthrough

Walkthrough

This PR wires Tailwind theme tokens into globals.css, converts the ChatMockup component into a typed, prop-driven client component, and adds an interactive AI demo section on the landing page. It also restyles and re-animates the FAQ, features, hero, stats, and testimonials sections with new Framer Motion variants and visual treatments.

Changes

Landing UI redesign and interactive AI demo

Layer / File(s)	Summary
Global theme tokens and layout scroll class app/globals.css, app/layout.tsx	Adds a @theme block mapping CSS custom properties to Tailwind color tokens; updates root <html> className to add overflow-y-scroll.
Data-driven ChatMockup component components/ai/chat-mockup.tsx	Converts ChatMockup to a client component accepting topic, messages, pyqs, id props; adds ChatMessage/ChatMockupProps types, message-driven rendering with conditional AI UI blocks, animated transitions, and an optional PYQs panel.
Interactive AI demo section features/landing/ai-demo.tsx	Adds aiFeatures data with chat payloads, stateful activeIndex, animated feature-selector buttons, and wires selected feature data into ChatMockup.
FAQ accordion refactor features/landing/faq.tsx	Replaces FAQItem with an inlined accordion controlled by openIndex, updates motion variants, and redesigns the bottom CTA with contact/signup links.
Features section restyle features/landing/features.tsx	Introduces shared stagger/item motion variants, restyles section background and header, and replaces per-card animation with a themed card list keyed by index.
Hero background blob update features/landing/hero.tsx	Replaces light-mode gradient blob layers with two repositioned/restyled gradient blobs.
Animated stats counters and layout features/landing/stats.tsx	Adds a Counter component animating numeric text on scroll-into-view, a getNumberInfo title parser, and restyled card/feature-strip layout.
CSS marquee testimonials redesign features/landing/testimonials.tsx	Replaces framer-motion scrolling with a CSS custom-marquee animation toggled via isPaused/useReducedMotion, restyles cards, and replaces the bottom stats block with a glassmorphism social proof badge.

Estimated code review effort: 3 (Moderate) | ~30 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant AIDemo
  participant ChatMockup

  User->>AIDemo: click feature motion.button
  AIDemo->>AIDemo: setActiveIndex(index)
  AIDemo->>ChatMockup: pass topic, messages, pyqs, id
  ChatMockup->>ChatMockup: render messages via map, apply uiComponent blocks
  ChatMockup->>User: display animated chat bubbles and PYQs panel

Loading

Possibly related PRs

• imuniqueshiv/HyperLearningTech#24: Both PRs modify app/globals.css and features/landing/hero.tsx, touching shared theme styling and hero/mock-chat visuals.

Suggested reviewers: imuniqueshiv, RamuuXfree

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch about-sec

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

🎉 Congratulations @nitinmohan18!

Thank you for contributing to HyperLearningTech.

Your pull request has been successfully merged into main.

📦 Merge Summary

• PR: About sec #76 - About sec
• Status: ✅ Merged
• Repository: HyperLearningTech

🚀 Keep Contributing

• Follow the CONTRIBUTING.md guidelines.
• Keep each Pull Request focused on a single feature or fix.
• Run formatting, linting, type checking, and a production build before opening a PR.

Thank you for helping make HyperLearningTech better.

Happy Coding! 🚀