Srinu Bricks — Hero & Services

A premium, Awwwards-style two-page experience for a brick manufacturing company, built with Next.js 15 (App Router), TypeScript, Tailwind CSS, GSAP

• ScrollTrigger, Framer Motion, and React Three Fiber.

Pages

• / — Hero: full-viewport hero with a scroll-scrubbed SVG storyline (Factory → Loading → Transport → Construction), built entirely from scratch with GSAP timelines (no video, fully interactive, reverses perfectly on scroll-up).
• /services — Services: six premium interactive service cards with hover micro-interactions, a GSAP scroll-stagger reveal, and a subtle Three.js particle background.

Getting started

npm install
npm run dev

Open http://localhost:3000.

To build for production:

npm run build
npm start

Project structure

app/
  layout.tsx          Root layout (nav + footer shell, metadata)
  page.tsx             Hero page
  services/page.tsx    Services page
components/
  common/              Nav, Footer (shared across both pages)
  hero/                HeroSection, FactoryScene (scroll storyline), JourneyTeaser
  services/            ServicesSection, ServiceCard, ParticleField, CTA
lib/
  gsapSetup.ts         Shared GSAP + ScrollTrigger registration helper
  servicesData.ts      Service card content

Notes

• Fonts: the project ships with a system font stack (zero network dependency at build time). To use "Inter" / "Space Grotesk" via Google Fonts, swap in next/font/google inside app/layout.tsx — this requires network access during next build.
• Animation: all storyline motion in FactoryScene.tsx is driven by a single scrubbed GSAP timeline attached to a tall (500vh) sticky track, so it always stays in sync with scroll position in both directions. Idle loops (smoke, clouds, dust, wheels) run independently and continuously.
• Performance: SVGs are hand-optimized (no images), animations use transform/opacity only, and the Three.js particle field is dynamically imported client-side only.