Luro AI is a polished marketing website and authenticated dashboard built with Next.js 14. Designed for an AI-driven social media marketing product, it includes sign-in / sign-up flows and a comprehensive dashboard visualizing campaign performance, reach, engagement, and recent sales.
The project is heavily focused on presentation quality, showcasing animated hero sections, spotlight effects, border beams, retro grids, and Framer Motion transitions, all composed with a reusable shadcn-style UI library.
Luro AI marketing preview — the public site introduces the social-media automation product before pushing users into pricing or auth.
Portfolio angle
Luro AI shows how a marketing site and dashboard shell can share one product language: public pages build trust, auth pages reduce friction, and the dashboard visualizes social growth metrics with charts and campaign cards.
Core Features & Functionality
The public-facing (marketing) route highlights product capabilities via
animated sections: * Hero & Connect: Features spotlight lighting, a
dynamic background, and platform integration showcases. * Features &
Perks: A robust product capabilities grid and 6 key value propositions. *
Pricing & Reviews: Free / Pro / Enterprise tiers with billing toggles
and customer testimonials.
Dedicated authentication routes stripped of marketing navigation: * Sign-in and Sign-up pages feature strict validation using Zod and React Hook Form. * Designed for an optimal onboarding experience with immediate visual feedback via Sonner toasts.
The application core (/app) reserved for authenticated users: * Metrics
& Analytics: Visualizes Total Reach, Engagement Rate, and Active
Campaigns. * Interactive Charts: Employs Recharts for dual gradient fill
area/line charts mapping reach and engagement. * Navigation: Collapsible
desktop sidebar and a sheet-based mobile sidebar.
Technology Stack
Built for maximum visual impact, maintainability, and responsiveness.
Next.js 14 & React 18
App Router, React Server Components, and route groups for clean layout isolation.
Tailwind CSS & shadcn/ui
Utility-first styling with dark mode support and custom theme tokens.
Framer Motion & Recharts
Delivering smooth page transitions, element unveils, and complex data visualizations.
React Hook Form & Zod
Client-side form state orchestration alongside bulletproof schema validations.
Architecture & Implementation Details
Route Groups Geometry Luro AI cleanly separates its visual domains
without affecting URL paths: * (marketing): Wraps public landing pages
with navigation and footers. * auth: Provides a focused, minimal layout
for login/signup flows. * (main): The authenticated app grouping for the
dashboard and internal management tools.
Visual Effects Library A highly reusable custom UI library lives in
components/ui, providing next-level aesthetics: * Decorative Backgrounds:
dot-pattern, retro-grid, and particles. * Enhancements: border-beam,
magic-card, spotlight, and progress-slider.
Global Theming and Styling Custom configured Tailwind CSS combined
with CSS variables controls the comprehensive dark/light styling paradigm. Typography relies on Inter as the default and Satoshi for display elements.
Folder Structure
A standardized map of the Luro AI directory architecture:
Additional Systems
The dashboard view visualizes campaign health: reach, engagement, active campaigns, and chart-driven trend data.
Pricing & Authentication
Pricing is constants-driven, so tiers can be connected to Stripe later without changing the surrounding section architecture.
The authentication screen keeps onboarding visually aligned with the marketing site while isolating the form experience from page navigation.
Live Demo
Explore the Luro AI landing page, interactive dashboard, and bespoke animations. Visit Luro AI Live
