Build a high-craft, dark-themed product development landing page with a fixed glassmorphism navbar, complex UI mockups, bento grids, and scrollytelling sections. Use Next.js + TypeScript + Tailwind CSS v4 + motion (Framer Motion). Install `lucide-react`, `motion`, and `clsx`. Load the site's font (Inter Variable) via `next/font/google`. ### 0. Measured Layout (Forensic Analysis) - **Container:** `max-w-[1200px]` [EST], side gutters `24px` (Desktop) / `20px` (Mobile). - **Navbar:** Height `64px`. Fixed top. - **Section Padding:** Hero `pt-[120px] pb-[80px]`; Feature sections `py-[120px]` (Desktop) / `py-[80px]` (Mobile). - **Type Scale (1440px / 390px):** - **H1:** `80px` / `1.0` / `500` / `-0.04em` → `48px` / `1.1` (Mobile). - **H2:** `56px` / `1.1` / `500` / `-0.03em` → `32px` (Mobile). - **Body:** `18px` / `1.6` / `400` → `16px` (Mobile). - **Small/Label:** `14px` / `1.4` / `500` / `uppercase`. - **Radii:** Cards `12px` [EST], Buttons `999px` (pill). - **Colors:** Background `#08090a`, Primary `#5e6ad2`, Border `rgba(255,255,255,0.08)`. ### 1. Theme & Design Tokens (globals.css) ```css @import "tailwindcss"; :root { --background: 220 14% 4%; --foreground: 0 0% 100%; --primary: 234 58% 60%; --primary-foreground: 0 0% 100%; --muted: 220 14% 10%; --muted-foreground: 220 10% 60%; --border: 220 14% 12%; --radius: 0.75rem; --edge-glow-tint: rgba(255, 255, 255, 0.03); } @theme { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-border: hsl(var(--border)); --font-sans: var(--font-inter), sans-serif; --radius-lg: var(--radius); } /* Tailwind v4 preflight fix */ .mx-auto { margin-inline: auto !important; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .animate-marquee { animation: marquee 40s linear infinite; } .glass-nav { background: rgba(8, 9, 10, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge-glow-tint); } ``` ### 2. Root Layout (app/layout.tsx) ```tsx import { Inter } from 'next/font/google'; import "./globals.css"; const inter = Inter({ subsets: ['latin'], variable: '--font-inter', weight: ['400', '500', '600'] }); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ### 3. Navbar (components/navbar.tsx) ```tsx "use client"; import { useState, useEffect } from "react"; import { Menu, X, ChevronDown } from "lucide-react"; const LINKS = ["Product", "Resources", "Customers", "Pricing", "Now", "Contact"]; export function Navbar() { const [scrolled, setScrolled] = useState(false); useEffect(() => { const h = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", h); return () => window.removeEventListener("scroll", h); }, []); return ( ); } ``` ### 4. Hero Section (components/hero.tsx) ```tsx "use client"; import { motion } from "motion/react"; import { ArrowRight } from "lucide-react"; export function Hero() { return (
New Loops

The product development system for teams and agents

Purpose-built for planning and building products. Designed for the AI era.

{/* Dashboard Mockup */}
{[1,2,3,4].map(i =>
)}
); } ``` ### 5. Logo Marquee (components/logos.tsx) ```tsx const LOGOS = ["OpenAI", "Vercel", "Salesforce", "Figma", "Cursor", "Coinbase", "Ramp"]; export function Logos() { return (

Powering the companies building the future

{[...LOGOS, ...LOGOS].map((logo, i) => ( {logo} ))}
); } ``` ### 6. Bento Features (components/bento-features.tsx) ```tsx export function BentoFeatures() { return (

A new species of product tool. Purpose-built for modern teams with AI workflows at its core.

{/* Abstract SVG Stack from screenshot */}

Purpose-built

Linear is shaped by the practices and principles of world-class product teams.

{/* Repeat for other 2 cards with different icons/text */}

Powered by agents

Designed for workflows shared by humans and agents. From drafting PRDs to pushing PRs.

Designed for speed

Reduces noise and restores momentum to help teams ship with high velocity and focus.

); } ``` ### 7. Feature Sections (components/feature-section.tsx) ```tsx "use client"; import { motion } from "motion/react"; import { ArrowRight } from "lucide-react"; interface FeatureProps { title: string; description: string; label: string; children: React.ReactNode; reverse?: boolean; } export function FeatureSection({ title, description, label, children, reverse }: FeatureProps) { return (
{label}

{title}

{description}

Learn more
{children}
); } ``` ### 8. Testimonials (components/testimonials.tsx) ```tsx const TESTIMONIALS = [ { quote: "You'll probably build a better product, just because of the craft that using Linear infuses on your brain.", author: "Gabriel Peal", company: "OpenAI", bg: "bg-[#e0e7ff]", color: "text-black" }, { quote: "Our speed is intense and Linear helps us be action biased.", author: "Nik Kotlov", company: "Ramp", bg: "bg-[#facc15]", color: "text-black" } ]; export function Testimonials() { return (
{TESTIMONIALS.map((t, i) => (

“{t.quote}”

{t.author}
{t.company}
))}
); } ``` ### 9. Footer (components/footer.tsx) ```tsx export function Footer() { return ( ); } ``` ### 10. Main Page (app/page.tsx) ```tsx import { Navbar } from "@/components/navbar"; import { Hero } from "@/components/hero"; import { Logos } from "@/components/logos"; import { BentoFeatures } from "@/components/bento-features"; import { FeatureSection } from "@/components/feature-section"; import { Testimonials } from "@/components/testimonials"; import { Footer } from "@/components/footer"; export default function Page() { return (
{[1,2,3,4,5].map(i =>
)}

Built for the future.
Available today.

); } ``` ### Responsive Breakdown - **Mobile (390px):** - H1 reduces to `text-5xl`. - Bento grid stacks to `grid-cols-1`. - Feature sections stack vertically (text above visual). - Navbar links hide behind a hamburger menu. - Testimonials become a horizontal scroll container. - **Tablet (768px):** - Bento grid remains `grid-cols-1` or `grid-cols-2`. - Side-by-side feature sections activate. - **Desktop (1440px):** - Full `max-w-[1200px]` container. - `grid-cols-3` for bento. - Large `80px` typography. ════════════════════════════════════════════════════════════ ## COMPLETE IMPLEMENTATION CODE ════════════════════════════════════════════════════════════ ```ts // next.config.ts import type { NextConfig } from "next"; const nextConfig: NextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'cdn.prod.website-files.com', }, { protocol: 'https', hostname: 'framerusercontent.com', }, ], }, }; export default nextConfig; ``` ```css /* app/globals.css */ @import "tailwindcss"; @theme { --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; --color-background: #08090a; --color-foreground: #ffffff; --color-primary: #5e6ad2; --color-muted: #151618; --color-muted-foreground: #8a8f98; --color-border: rgba(255, 255, 255, 0.08); --radius-lg: 12px; --radius-xl: 24px; --radius-2xl: 32px; @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } --animation-marquee: marquee 40s linear infinite; } @layer base { body { background-color: var(--color-background); color: var(--color-foreground); -webkit-font-smoothing: antialiased; } } /* Tailwind v4 mx-auto fix */ .mx-auto { margin-inline: auto !important; } .glass-nav { background: rgba(8, 9, 10, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .mask-fade-out { mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); } ``` ```tsx // app/layout.tsx import { Inter } from 'next/font/google'; import "./globals.css"; const inter = Inter({ subsets: ['latin'], variable: '--font-inter', weight: ['400', '500', '600'] }); export const metadata = { title: 'Linear - The product development system', description: 'Purpose-built for planning and building products.', }; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ```tsx // components/navbar.tsx "use client"; import { useState, useEffect } from "react"; import { Menu, ChevronDown, X } from "lucide-react"; import { motion, AnimatePresence } from "motion/react"; const LINKS = [ { name: "Product", hasDropdown: true }, { name: "Resources", hasDropdown: true }, { name: "Customers", hasDropdown: false }, { name: "Pricing", hasDropdown: false }, { name: "Now", hasDropdown: false }, { name: "Contact", hasDropdown: false }, ]; export function Navbar() { const [scrolled, setScrolled] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); useEffect(() => { const handleScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); return ( ); } ``` ```tsx // components/hero.tsx "use client"; import { motion } from "motion/react"; import { ArrowRight, Search, Plus, Star, MoreHorizontal, ChevronRight, MessageSquare, Link2, GitBranch, Maximize2, X } from "lucide-react"; export function Hero() { return (

The product development system for teams and agents

Purpose-built for planning and building products. Designed for the AI era.

New Loops
{/* Dashboard Mockup - Forensic Reproduction */}
{/* Sidebar */}
L
Linear
{["Pulse", "Inbox", "My Issues", "Reviews"].map((item, i) => (
{item}
))}
Workspace
{["Initiatives", "Projects", "More"].map(item => (
{item}
))}
{/* Main Content */}
DRV-8852 Faster app launch
1 / 84
↑
↓

Faster app launch

Render UI before vehicle_state sync when minimum required state is present, instead of blocking on full refresh during iOS startup.

Activity
Linear created the issue via Slack on behalf of Karri • 2min ago
Triage Intelligence added the labels Performance and iOS • 2min ago
{/* Floating PR Card */}
Linear Opus 5.5
Fix the dimmed ride rows that never reset and open a PR
DRV-364 added to context
); } ``` ```tsx // components/logos.tsx "use client"; const LOGOS = [ { name: "OpenAI", weight: 700 }, { name: "Vercel", weight: 900, italic: true }, { name: "Salesforce", weight: 800 }, { name: "Figma", weight: 600 }, { name: "Cursor", weight: 700 }, { name: "Coinbase", weight: 700 }, { name: "Ramp", weight: 900, italic: true } ]; export function Logos() { return (

Powering the companies building the future

{[...LOGOS, ...LOGOS, ...LOGOS].map((logo, i) => ( {logo.name} ))}
); } ``` ```tsx // components/bento-features.tsx "use client"; import { motion } from "motion/react"; export function BentoFeatures() { return (

A new species of product tool. Purpose-built for modern teams with AI workflows at its core.

{/* Card 1 */}

Purpose-built

Linear is shaped by the practices and principles of world-class product teams.

{/* Card 2 */}

Powered by agents

Designed for workflows shared by humans and agents. From drafting PRDs to pushing PRs.

{/* Card 3 */}

Designed for speed

Reduces noise and restores momentum to help teams ship with high velocity and focus.

); } ``` ```tsx // components/feature-section.tsx "use client"; import { motion } from "motion/react"; import { ArrowRight } from "lucide-react"; interface FeatureProps { title: string; description: string; label: string; children: React.ReactNode; reverse?: boolean; sublinks?: string[]; } export function FeatureSection({ title, description, label, children, reverse, sublinks }: FeatureProps) { return (
{label}

{title}

{description}

Learn more
{children}
{sublinks && (
{sublinks.map(link => ( {link} ))}
)}
); } ``` ```tsx // components/changelog.tsx "use client"; import { motion } from "motion/react"; import { ArrowRight } from "lucide-react"; const LOGS = [ { title: "Slack and GitHub loop triggers", description: "Loops automate product work by responding to changes in Linear and connected tools.", date: "OCT 22, 2024" }, { title: "Stacked pull requests", description: "Stacked pull requests are now displayed in Linear Diffs. Move through a stack and see...", date: "OCT 8, 2024" } ]; export function Changelog() { return (

Changelog

{LOGS.map((log, i) => (
{log.date}

{log.title}

{log.description}

))}
View all
); } import { Plus } from "lucide-react"; ``` ```tsx // components/testimonials.tsx "use client"; const TESTIMONIALS = [ { quote: "You'll probably build a better product, just because of the craft that using Linear infuses on your brain.", author: "Gabriel Peal", company: "OpenAI", bg: "bg-[#e0e7ff]", color: "text-black", logo: "OpenAI" }, { quote: "Our speed is intense and Linear helps us be action biased.", author: "Nik Kotlov", company: "Ramp", bg: "bg-[#facc15]", color: "text-black", logo: "Ramp" }, { quote: "Linear is the only tool that feels like it was built for the way we actually work.", author: "Sarah Drasner", company: "Netlify", bg: "bg-[#00d1b2]", color: "text-black", logo: "Netlify" } ]; export function Testimonials() { return (
{TESTIMONIALS.map((t, i) => (

“{t.quote}”

{t.author}
{t.company}
{t.logo}
))}
); } ``` ```tsx // components/footer.tsx "use client"; import { X, GitBranch, Link2, Rss } from "lucide-react"; export function Footer() { return ( ); } ``` ```tsx // app/page.tsx import { Navbar } from "@/components/navbar"; import { Hero } from "@/components/hero"; import { Logos } from "@/components/logos"; import { BentoFeatures } from "@/components/bento-features"; import { FeatureSection } from "@/components/feature-section"; import { Changelog } from "@/components/changelog"; import { Testimonials } from "@/components/testimonials"; import { Footer } from "@/components/footer"; // SECTION COUNT: 11 sections identified export default function Page() { return (
{/* Section 1: Navbar */} {/* Section 2: Hero */} {/* Section 3: Logos */} {/* Section 4: Bento Features */} {/* Section 5: Intake Feature */}
andreas 4:22 PM
Feels like we could render sooner...
@Linear create issues and assign to me
{/* Section 6: Planning Feature */}
Cycle time by agent
{/* Abstract Timeline Mockup */}
{[1,2,3,4].map(i =>
)}
{/* Section 7: AI Feature */}
Assign to...
{[ { name: "Codex", type: "Agent", color: "bg-primary" }, { name: "Steven", type: "Human", color: "bg-white/10" }, { name: "Ema", type: "Human", color: "bg-white/10" }, { name: "GitHub Copilot", type: "Agent", color: "bg-primary" }, { name: "Cursor", type: "Agent", color: "bg-primary" } ].map(item => (
{item.name}
{item.type === "Agent" && Agent}
))}
{/* Section 8: Build Feature */}
kinetic-ios/src/screens/Home/HomeScreen.tsx
01 import React from 'react'
02 - A slow and fragmented code review
03 + A fast and integrated experience
04 export const CodeReview = () => {
{/* Section 9: Changelog */} {/* Section 10: Testimonials */} {/* Section 11: CTA */}

Built for the future.
Available today.

{/* Section 12: Footer */}
); } ```