Landing Page Builder -- @Web3Matters

This is a one-shot personal landing page generator built for Loveable + GPT-5. Drop in your details, run it once, and you’ll get: Sleek, minimal, premium-feel design Fully responsive Next.js + Tailwind + shadcn build Smooth, tasteful animations via Framer Motion All copy written in your voice (based on your placeholders) SEO + performance best practices baked in Perfect for: founders, freelancers, writers, designers, developers, or anyone who wants a professional personal site without touching a blank canvas. How to use: Replace every #placeholder with your own info (job, projects, skills, CTA, etc.) Paste into Cursor (GPT-5 Max mode recommended) Watch it output a working, complete codebase — ready to run and tweak This is tuned for one-shot generation. No extra prompting or guesswork required. Remix it as much as you like.

You are building #[name's personal landing page] #[name] = #[job_or_desired_role] , #[core_skills_or_niche] (list 2–4), #[personal_descriptor_or_title] ; #[background_or_origin;] #[personal_details_or_values] ; runs on #[motivators_or_drivers] ; forward-thinking; #[tone_preference] (e.g., casual but professional, Gen-Z tone, etc.); clean taste; hates clutter; wants subtle, premium motion. Site must be simple, minimal, fast, and animated — think Apple-esque minimal with tasteful micro-motion, not agency-dribbble soup. Tech & Project Setup Framework: Next.js 14 (App Router) + TypeScript. Styling: Tailwind CSS (already in project). Respect a11y + prefers-reduced-motion. UI: shadcn/ui (Cards, Button, Input), lucide-react icons. Animation: Framer Motion (staggered fade/slide, micro-interactions on hover/focus, parallax hero). State: React Context + Hooks (keep it light). Fonts: System + one variable display font via next/font (e.g., Inter for body, optional display for headings). Theme: Light/dark with smooth toggle; high contrast; no neon—sleek & mature. SEO: next/metadata, OG image route, structured data (Person + WebSite). Performance: Target Lighthouse 95+ across the board. Brand & Voice Voice: direct, sharp, a little playful; no filler; no fluff. Tagline vibe: “#[primary_skill] × #[secondary_skill] . I #[impact_statement.] ” Subtle values: #[core_values_or_principles] . CTA tone: confident, not thirsty. Pages & Sections (single-page for now) Hero Tagline + one-liner: who they are, what they do (#[job_or_role_summary] ). Two primary CTAs: “#[primary_cta_text] ” (anchor to contact) and “#[secondary_cta_text] ” (newsletter, portfolio, etc.). Subtle parallax background shapes (CSS or MotionValue), 60fps-friendly. Proof / Highlights Quick grid of credibility: #[project_or_role_1] , #[project_or_role_2] , #[project_or_role_3] , #[project_or_role_4] , #[project_or_role_5] . Each = small card with 1-sentence outcome (“Shipped X”, “Grew Y”, “Automated Z”), icon, and hover micro-lift. What I Do 3 columns: #[service_1] , #[service_2,] #[service_3] . Bullet points only; keep it punchy. Include “no-BS engagement: scope → ship → iterate.” Selected Work Minimal case tiles (3–6). Each: title, 1-liner, tags (#[industry_tags] ), link if public. Placeholder data ok; make it easy to swap JSON. Notes / Newsletter Tease “#[newsletter_name] ” with one featured micro-post (<= 120 chars). Email capture (shadcn Input + Button) → stub handler. About Short paragraph (not a memoir): #[origin_story,] #[personal_values] , #[what_drives_them] . Contact Form (name, email, message) + mailto fallback; social icons (#social_platforms). Add anti-spam honeypot. Footer Ultra minimal. Theme toggle. Copyright. Design System Colors: Neutral grayscale + one accent (#[accent_color] ) used sparingly. Spacing: Generous white space; max-width container; clear rhythm. Components: Reusable <Section>, <SectionHeading>, <Card>, <CTAGroup>. Accessibility: Focus states, reduced motion support, semantic landmarks, alt text, label inputs. Animation Rules Page load: staggered fade-up for hero elements (80–120ms intervals). Cards: hover micro-lift + shadow ease (no bounce). In-view sections: once, 12% translateY with opacity → 0. Parallax hero shapes driven by scroll, clamped, perf-safe. Respect prefers-reduced-motion: reduce → disable nonessential motion. Content (write it for me) Write all copy in #tone_preference voice. Keep lines tight. No clichés. Examples: Hero H1: “I #[primary_skill] . I #[secondary_skill] . I ship.” Sub: “#[value_proposition.] ” CTAs: “#[primary_cta_text”] / “#[secondary_cta_text”] One-liners for highlights should be outcome-centric (metrics if available). About: 4–6 sentences max. Honest, grounded, confident. Files to Generate app/layout.tsx (metadata, fonts, theme provider) app/page.tsx (the whole landing page) app/opengraph-image/route.ts (OG image) components/* (section.tsx, navbar.tsx, footer.tsx, card.tsx, cta-group.tsx, theme-toggle.tsx) lib/projects.ts (JSON-ish data for work highlights) styles/globals.css (minimal additions if needed) README.md (how to edit content, where to swap links) Optional: components/particles.tsx or simple SVG shapes for hero parallax Acceptance Criteria Build runs with zero TypeScript errors. Lighthouse >= 95 on Performance, A11y, Best Practices, SEO. Animations feel premium and subtle; nothing distracts from reading. Copy feels like an adult who ships, not a LinkedIn course ad. Easy to swap highlights via lib/projects.ts. Start Now Scaffold the files above with working code and placeholder content. Write the full copy in-line. Use shadcn components where tasteful (Buttons, Cards, Input). Implement framer-motion for hero, sections, and cards. Add metadata + OG image route using the hero tagline. Show me the complete code output.