From ff8b808fb4cd22b9f36d242dffa247d605456f19 Mon Sep 17 00:00:00 2001 From: Joe Wee Date: Thu, 21 May 2026 12:33:21 +0100 Subject: [PATCH] Initial: landing-page template via tAI --- .claude/settings.json | 13 ++ .tai-manifest.tn | 13 ++ CLAUDE.md | 23 ++ README.md | 3 + index.html | 12 + src/components/Footer.tsx | 9 + src/components/Header.tsx | 12 + src/index.css | 3 + src/main.tsx | 10 + src/pages/Index.tsx | 471 ++++++++++++++++++++++++++++++++++++++ 10 files changed, 569 insertions(+) create mode 100644 .claude/settings.json create mode 100644 .tai-manifest.tn create mode 100644 CLAUDE.md create mode 100644 README.md create mode 100644 index.html create mode 100644 src/components/Footer.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/index.css create mode 100644 src/main.tsx create mode 100644 src/pages/Index.tsx diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..dba91da --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,13 @@ +{ + "permissions": { + "allow": [ + "Read", + "Write", + "Edit", + "Bash", + "Glob", + "Grep" + ] + }, + "model": "claude-sonnet-4-20250514" +} \ No newline at end of file diff --git a/.tai-manifest.tn b/.tai-manifest.tn new file mode 100644 index 0000000..258f8ff --- /dev/null +++ b/.tai-manifest.tn @@ -0,0 +1,13 @@ +# .tai-manifest.tn — landing-page (vite-react) +# Auto-generated by tAI manifest generator +# tN (tAI Notation) — compact template encoding + +σ:template|landing-page|vite-react|8 files|29KB +σ:docs|CLAUDE.md|791B|imports:1 +σ:docs|README.md|47B +σ:entry|index.html|281B|title="Landing Page" +σ:component|src/components/Footer.tsx|246B +σ:component|src/components/Header.tsx|434B|imports:1|uses:[Button] +σ:style|src/index.css|59B +σ:bootstrap|src/main.tsx|236B|imports:3|uses:[React,App] +σ:page|src/pages/Index.tsx|27343B|imports:12 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..03adfbb --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,23 @@ +# Luminary +SaaS marketing landing page with hero, features, stats, pricing, testimonials, FAQ +Stack: React 18 / TypeScript / Vite / Tailwind CSS / shadcn/ui +Pages: Index (single page) +Palette: violet-950/indigo-950 dark gradient hero + +## Files +- src/pages/Index.tsx (27KB) +- src/components/Header.tsx (0KB) +- src/components/Footer.tsx (0KB) + +## Imports +UI: @/components/ui/{button,card,badge,input,textarea,tabs,accordion,dialog,sheet} +Icons: lucide-react +Toast: import { toast } from "sonner" +Theme: ThemeToggle in headers (next-themes) +Router: react-router-dom BrowserRouter + +## Rules +- MODIFY existing files — never rebuild from scratch +- Pages import Header + Footer from @/components/ +- Tailwind only — no inline styles +- Use existing shadcn components — don't create custom ones diff --git a/README.md b/README.md new file mode 100644 index 0000000..f4b8bec --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# template-landing-page + +Template: landing-page \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..af77193 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + + Landing Page + + +
+ + + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..650e1d0 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,9 @@ +export default function Footer() { + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..e1bb545 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,12 @@ +import { Button } from "@/components/ui/button"; + +export default function Header() { + return ( +
+
+ Luminary + +
+
+ ); +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..9b67590 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")!).render( + + + +); diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx new file mode 100644 index 0000000..261f61f --- /dev/null +++ b/src/pages/Index.tsx @@ -0,0 +1,471 @@ +import { useState, useEffect } from "react"; +import { toast } from "sonner"; +import { Button } from "@/components/ui/button"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +import { Input } from "@/components/ui/input"; +import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { + Menu, ArrowRight, Check, X, Quote, ChevronLeft, ChevronRight, + Github, Twitter, Linkedin, Instagram, + Sparkles, TrendingUp, Users, Award, Clock, Shield, Zap, Heart, Lock +} from "lucide-react"; +import { Switch } from "@/components/ui/switch"; +import { ThemeToggle } from "@/components/ThemeToggle"; + +export default function LandingPage() { + const [mobileOpen, setMobileOpen] = useState(false); + const [scrolled, setScrolled] = useState(false); + const [activeTestimonial, setActiveTestimonial] = useState(0); + const [email, setEmail] = useState(""); + + useEffect(() => { + const onScroll = () => setScrolled(window.scrollY > 20); + window.addEventListener("scroll", onScroll); + return () => window.removeEventListener("scroll", onScroll); + }, []); + + const testimonials = [ + { quote: "Luminary replaced four tools for us. Our product team finally has a single source of truth — from customer feedback to shipped features.", name: "Elena Rodriguez", title: "VP Product", company: "Notion" }, + { quote: "The insights engine alone justified the switch. We discovered three critical pain points that our NPS surveys completely missed.", name: "David Chen", title: "CPO", company: "Loom" }, + { quote: "Our roadmap used to live in five different spreadsheets. Now the entire company can see what we are building and why it matters.", name: "Priya Patel", title: "Head of Product", company: "Figma" }, + ]; + + const navLinks = [ + { label: "Features", href: "#features" }, + { label: "Results", href: "#stats" }, + { label: "Pricing", href: "#pricing" }, + { label: "Stories", href: "#testimonials" }, + ]; + + return ( +
+ {/* ── HEADER ── */} +
+
+ + Luminary + + +
+ + +
+ + + + + + + + +
+
+ + {/* ── HERO ── */} +
+ {/* Grid dots pattern */} +
+
+
+
+
+
+
+ + Launching Summer 2026 + +

+ Transform how your team builds products that customers love +

+

+ The all-in-one platform that brings together product strategy, customer insights, and execution — so you can focus on what matters most. +

+
+ + +
+
+ No credit card required +
+ {/* Social proof row */} +
+
+ {["A", "B", "C", "D"].map((letter, i) => ( + + {letter} + + ))} +
+

Joined by 2,400+ product teams this month

+
+
+
+ + {/* ── SOCIAL PROOF BAR ── */} +
+
+
+ {[ + { value: "12K+", label: "Active Teams" }, + { value: "4.9/5", label: "Average Rating" }, + { value: "98%", label: "Retention Rate" }, + { value: "150+", label: "Countries" }, + ].map((s, i) => ( +
+ {s.value} + {s.label} +
+ ))} +
+
+
+ + {/* ── FEATURES ── */} +
+
+
+ Why Luminary +

Built for teams that refuse to settle

+

Three core capabilities that change the way you work, from ideation to impact.

+
+ {[ + { + icon: , title: "Instant insights from every customer touchpoint", desc: "Automatically capture, organize, and surface customer feedback from support tickets, interviews, and surveys in real time.", + bullets: ["AI-powered sentiment analysis across all channels", "Automated tagging and theme detection", "Real-time alerting for emerging trends"], gradient: "from-indigo-500 to-violet-600" + }, + { + icon: , title: "Roadmaps that align your entire organization", desc: "Create living roadmaps that connect strategy to execution. Keep stakeholders informed and teams focused on the highest-impact work.", + bullets: ["Visual timeline and kanban views", "Automatic dependency mapping", "Stakeholder sharing with custom permissions"], gradient: "from-emerald-500 to-teal-600" + }, + { + icon: , title: "Measure impact, not just output", desc: "Track how every feature affects your core metrics. Know exactly which bets paid off and where to double down.", + bullets: ["Built-in OKR and KPI tracking", "Feature-level impact attribution", "Executive dashboards with one-click export"], gradient: "from-amber-500 to-orange-600" + }, + ].map((feature, i) => ( +
+ {/* Image placeholder */} +
+
+
+
+
{i + 1}
+
+
Live demo →
+
+
+
+ {/* Content */} +
+ + {feature.icon} + Feature {i + 1} + +

{feature.title}

+

{feature.desc}

+
    + {feature.bullets.map((b, j) => ( +
  • + + {b} +
    • + ))} +
+
+
+ ))} +
+
+ + {/* ── STATS ── */} +
+
+
+

The numbers speak for themselves

+
+ {[ + { icon: , value: "2.4M+", label: "Insights Captured" }, + { icon: , value: "37%", label: "Faster Time-to-Market" }, + { icon: , value: "#1", label: "on G2 for Product Mgmt" }, + { icon: , value: "< 2 min", label: "Average Setup Time" }, + ].map((s, i) => ( +
+
+ {s.icon} +
+
{s.value}
+
{s.label}
+
+ ))} +
+
+
+ + {/* ── TESTIMONIALS ── */} +
+
+

What product leaders are saying

+
+ +
+

+ "{testimonials[activeTestimonial].quote}" +

+
+ + + {testimonials[activeTestimonial].name.split(" ").map((n: string) => n[0]).join("")} + + +
+
{testimonials[activeTestimonial].name}
+
{testimonials[activeTestimonial].title}
+
{testimonials[activeTestimonial].company}
+
+
+ {/* Navigation dots */} +
+ + {testimonials.map((_, i) => ( + +
+
+
+
+
+ + {/* ── PRICING ── */} +
+
+
+ Pricing +

Simple, transparent pricing

+

Start free, scale as you grow. No hidden fees, cancel anytime.

+
+
+ Monthly + + Annual + Save 20% +
+
+ {[ + { + name: "Free", price: "$0", period: "/month", desc: "For individuals and small teams getting started.", + features: ["Up to 10 team members", "1,000 insights/month", "Basic roadmaps", "Community support"], + missing: ["Advanced analytics", "Custom integrations"], + cta: "Get Started Free", popular: false, + }, + { + name: "Pro", price: "$29", period: "/user/month", desc: "For growing teams that need advanced features.", + features: ["Unlimited team members", "Unlimited insights", "Advanced roadmaps & OKRs", "Priority support", "All integrations"], + missing: [], + cta: "Start Free Trial", popular: true, + }, + { + name: "Enterprise", price: "Custom", period: "", desc: "For organizations with advanced security and compliance needs.", + features: ["Everything in Pro", "SSO & SAML", "Dedicated account manager", "Custom SLA", "Audit logs & compliance", "On-premise deployment"], + missing: [], + cta: "Contact Sales", popular: false, + }, + ].map((plan, i) => ( + + {plan.popular && ( +
+ Most Popular +
+ )} + + {plan.name} +
+ {plan.price} + {plan.period} +
+

{plan.desc}

+ + +
    + {plan.features.map((f, j) => ( +
  • + {f} +
    • + ))} + {plan.missing.map((m, j) => ( +
  • + {m} +
    • + ))} +
+ + + + ))} +
+
+
+ + {/* ── FAQ ── */} +
+
+
+

Frequently asked questions

+

Everything you need to know about the platform.

+
+ + + + {[ + { q: "How does the free plan work?", a: "The free plan includes up to 10 team members and 1,000 insights per month. No credit card required to get started." }, + { q: "Can I change plans later?", a: "Absolutely. You can upgrade, downgrade, or cancel your plan at any time. Changes take effect at the start of your next billing cycle." }, + { q: "What integrations do you support?", a: "We integrate with Slack, Jira, Linear, Notion, Intercom, Zendesk, and 50+ more tools. Custom integrations are available on Enterprise plans." }, + { q: "Is my data secure?", a: "Yes. We are SOC 2 Type II certified, GDPR compliant, and all data is encrypted at rest and in transit. Enterprise plans include additional security features." }, + { q: "Do you offer a trial period?", a: "Yes, all paid plans come with a 14-day free trial. You can explore all features before committing." }, + { q: "How do I get support?", a: "Free plans get community support. Pro plans include priority email support with 4-hour response times. Enterprise gets dedicated account management and phone support." }, + ].map((faq, i) => ( + + {faq.q} + {faq.a} + + ))} + + + +
+

Still have questions?

+ +
+
+
+ + {/* ── CTA ── */} +
+
+

Ready to build products your customers love?

+

Join thousands of product teams who ship better, faster, and with more confidence.

+
{ e.preventDefault(); if (email.includes("@")) { toast.success("You're in! Check your inbox."); setEmail(""); } }} className="mt-8 flex flex-col sm:flex-row items-center gap-3 max-w-md mx-auto"> + setEmail(e.target.value)} + placeholder="Enter your work email" + className="h-12 rounded-full bg-white/95 text-foreground border-0 px-6 flex-1" + /> + +
+

Free for teams up to 10. No credit card required.

+
+
+ + {/* ── FOOTER ── */} + +
+ ); +} \ No newline at end of file