Astra is an advanced landing page crafted for an AI-powered website builder SaaS. With the tagline "Build your next idea and ship your dream site," Astra showcases how to present an AI tool using a rich, animated landing page, pricing tiers, automated testimonials, and interactive 3D elements.
The project is a front-end UI shell built on Next.js 14, complete with scaffolded authentication pages prepared for a seamless Clerk integration.
Astra landing page preview — the dark-first hero introduces the AI website builder and leads into the product sections.
What this project demonstrates
Astra is best understood as a conversion-focused SaaS front door: a polished marketing page, a reusable section system, and auth pages that are already shaped for Clerk even before the backend is connected.
Core Features & Functionality
The marketing site (/) is meticulously designed with dynamic sections: *
Hero: Features an animated CTA, a glowing dashboard preview, and an
animated BorderBeam overlay. * Features & Bento Grid: Modernly
showcases tools like SEO optimization, scalable hosting, and responsive
design. * Testimonials: Employs an infinite scrolling marquee to display
user reviews effortlessly. * Newsletter: An animated LampContainer
draws focus to the subscription CTA.
Dedicated scalable auth scaffolding under the (auth) route group. *
Separated layout removes marketing navigation to ensure focus. * Form logic
managed using react-hook-form with Zod schema validations. *
Built-in toast notifications using sonner to alert users of login states.
Astra heavily emphasizes a dark-first aesthetic powered by sophisticated animations: * Three.js & React Three Fiber: Lays the foundation for 3D background elements like an interactive globe. * Framer Motion 11: Drives smooth scroll reveals, complex state animations, and layout shifting.
Technology Stack
Astra is packed with a high-fidelity frontend toolchain focused on speed, aesthetics, and DX (Developer Experience).
Next.js 14 & React 18
App Router, React Server Components, and seamless route grouping functionality.
Tailwind CSS & shadcn/ui
Systematic utility-first styles coupled with fully accessible Radix UI primitives.
Three.js & Framer Motion
Bringing the site to life through high-performance WebGL renders and math-based layout animations.
React Hook Form & Zod
Enforcing strict authentication boundaries via heavily typed form schema validations.
Architecture & Implementation Details
Route Groups Configuration The standard Next.js directory is bifurcated
cleanly into (marketing) and (auth). * The (marketing) segmentation
binds the standard Navbar and Footer to the homepage elements. * The
(auth) grouping entirely strips away the marketing wrapper, providing
users an empty canvas to log in or register securely.
Centralized Data Models Astra operates off a static data-drive model.
src/constants/index.ts dictates the content mapping for: * perks &
features * pricingCards — Includes embedded Stripe priceId metrics. *
reviews arrays fed straight into the Marquee components.
Dark-Mode UX & Metadata The underlying user experience defaults to
dark-mode logic utilizing next-themes and a suppressHydrationWarning
bound to the HTML root. Simultaneously, SEO attributes are aggressively
mapped through a SITE_CONFIG central metadata generator.
Folder Structure
Here's an overarching map of Astra's structural boundaries:
Extensibility & Integrations
The pricing section is already structured for future checkout wiring: the UI presents tiers today, while the constants include Stripe-ready price identifiers.
Authentication Screens
The auth route group removes the marketing chrome entirely, giving sign-in and sign-up their own focused onboarding surface. Both forms are scaffolded with react-hook-form, Zod validation, and toast feedback, so the visual flow is ready before Clerk is connected.
Sign in screen — minimal layout, branded card, and validation-ready form fields.
Sign up screen — the same isolated auth shell, tuned for first-time onboarding.
Remaining Screenshot Slot
| Path to add | Screenshot needed |
|---|---|
/public/images/projects/astra/features.webp | Feature grid or newsletter CTA with the animated lamp effect |
Live Demo
Explore the Astra landing page, including interactive 3D structures and dynamic UI lighting. Visit Astra Live
