7a336e6e ποΈ Scaffolding Frontend
Set up the Next.js + Tailwind + Framer Motion project foundation for an immersive storybook landing page.
Prerequisites
- Node.js 18+
- npm or pnpm
Step 1 β Create the Next.js Project
npx create-next-app@latest my-landing \
--typescript \
--tailwind \
--app \
--eslint \
--src-dir=false \
--import-alias="@/*"
This gives you:
- App Router (
app/directory) - TypeScript
- Tailwind CSS 3+
- Path alias
@/*mapping to project root
Step 2 β Install Core Dependencies
# Animation engine
npm install framer-motion
# Icon library (tree-shakeable)
npm install lucide-react
# UI primitives (shadcn/ui)
npx shadcn@latest init
# Choose: dark theme, New York style, zinc/slate base
# Install specific shadcn components you'll need
npx shadcn@latest add badge button card accordion
Optional Dependencies (use as needed)
# Smooth scrolling (for non-hijacked pages)
npm install lenis
# Form handling (for signup/contact sections)
npm install react-hook-form @hookform/resolvers zod
# Charts (for stats/data visualization sections)
npm install recharts
Step 3 β Project Structure
app/
layout.tsx β Root layout: fonts, metadata, body classes
page.tsx β Mounts the Journey component (thin wrapper)
globals.css β ALL custom CSS: theme vars, utilities, keyframes
components/
journey/
journey.tsx β Main storybook orchestrator (single file)
star-field.tsx β Background ambience (optional)
landing/
faq-section.tsx β Embeddable content sections
signup-form-section.tsx
footer-section.tsx
shared/
navbar.tsx β Navigation bar (optional, can overlay)
logo.tsx β Brand logo component
ui/
badge.tsx β shadcn/ui primitives
button.tsx
...
lib/
utils.ts β cn() helper from shadcn
public/
fonts/ β Custom fonts if needed
images/ β Static assets
Step 4 β Configure Tailwind
// tailwind.config.ts
import type { Config } from "tailwindcss"
const config: Config = {
darkMode: ["class"],
content: [
"./app/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
],
theme: {
extend: {
colors: {
// Map your brand colors here
brand: {
primary: "var(--color-primary)",
accent: "var(--color-accent)",
bg: "var(--color-bg-dark)",
},
},
// shadcn/ui HSL color system
// ... (auto-generated by shadcn init)
},
},
plugins: [],
}
export default config
Step 5 β Root Layout
// app/layout.tsx
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
const inter = Inter({ subsets: ["latin"], variable: "--font-body" })
export const metadata: Metadata = {
title: "Your Product Name",
description: "Your product description",
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<body className={`${inter.variable} font-sans antialiased`}>
{children}
</body>
</html>
)
}
Step 6 β Page Entry Point
// app/page.tsx
"use client"
import Journey from "@/components/journey/journey"
export default function Home() {
return <Journey />
}
The "use client" directive is placed here because the Journey needs browser APIs (scroll events, sessionStorage, mouse tracking).
Step 7 β Next.js Configuration
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: { ignoreDuringBuilds: true }, // speed up builds
typescript: { ignoreBuildErrors: true }, // prototype fast, fix later
images: { unoptimized: true }, // static export friendly
}
export default nextConfig
Verification
npm run dev
# Should see a blank dark page at localhost:3000
# No errors in terminal or browser console
Next Step
β Building Components β Set up the theme, build scenes, create the mascot.