From 18c78020ab4a765c0c3959bc6572ea16cbd1a428 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 2 Mar 2026 02:39:18 +0000 Subject: [PATCH] fix: kill the CSS specificity bug and fully redesign the landing page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Root cause: globals.css had `* { margin: 0; padding: 0 }` as unlayered CSS. In Tailwind v4, all utilities live in @layer — unlayered rules always win, so mx-auto, px-*, py-*, p-*, gap-* were all silently overridden. That's why everything was left-aligned with the right half empty. Fix in globals.css: - Keep only `box-sizing: border-box` on * (Tailwind Preflight handles the rest — no need to fight it) - Remove overflow-x: hidden from html/body (was hiding valid content) - Add .page-wrap as an unlayered centering helper that can't be broken by Tailwind layer ordering Landing page redesign: - Every section uses .page-wrap for reliable 1280px centered layout - Hero: full-screen gradient, large 5xl–7xl headline, stats row - Featured agents: rich 3-column cards with icon, stats bar, rating - Category pills: horizontal scrollable tag cloud - Trust section: 2-col (copy + live metrics panel) - Testimonials: 3-col with attribution - Pricing: 3 plans, properly full-width to max-w-5xl - Final CTA: full-bleed glass card with ambient glow - All responsive: 1→2→3→4 col grids at sm/lg breakpoints https://claude.ai/code/session_01S9BUbPuwYCRbbtqiSvAARX --- grammi-ai/src/app/globals.css | 17 +- grammi-ai/src/app/page.tsx | 736 ++++++++++++++++++---------------- 2 files changed, 411 insertions(+), 342 deletions(-) diff --git a/grammi-ai/src/app/globals.css b/grammi-ai/src/app/globals.css index 06c7dd7..f68a8da 100644 --- a/grammi-ai/src/app/globals.css +++ b/grammi-ai/src/app/globals.css @@ -21,17 +21,28 @@ --foreground: #F1F5F9; } -* { box-sizing: border-box; padding: 0; margin: 0; } +/* box-sizing only — never put margin/padding on * in Tailwind v4. + Unlayered CSS wins over @layer utilities, which kills mx-auto, px-*, py-*, etc. */ +*, *::before, *::after { box-sizing: border-box; } html, body { - max-width: 100vw; - overflow-x: hidden; + width: 100%; font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; } +/* Safe centering helper — unlayered so it can't be overridden */ +.page-wrap { + width: 100%; + max-width: 1280px; + margin-left: auto; + margin-right: auto; + padding-left: 1.5rem; + padding-right: 1.5rem; +} + ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: rgba(99,135,180,0.3); border-radius: 2px; } diff --git a/grammi-ai/src/app/page.tsx b/grammi-ai/src/app/page.tsx index 25b1233..607d68c 100644 --- a/grammi-ai/src/app/page.tsx +++ b/grammi-ai/src/app/page.tsx @@ -4,144 +4,143 @@ import { useState } from "react"; import { Zap, ArrowRight, CheckCircle2, TrendingUp, Bot, BarChart3, ShieldCheck, Play, Star, ChevronRight, Sparkles, - DollarSign, Target, Activity, Lock, + DollarSign, Target, Activity, Lock, Users, Globe, } from "lucide-react"; -// Realistic early-stage numbers for a pre-launch platform +const NAV_LINKS = ["Marketplace", "Pricing", "Developers", "Enterprise"]; + const STATS = [ - { value: "1,240+", label: "Active deployments" }, - { value: "$840K+", label: "Revenue generated" }, - { value: "99.7%", label: "Uptime SLA" }, - { value: "47", label: "Verified agents" }, + { value: "1,240+", label: "Active deployments", icon: Globe }, + { value: "$840K+", label: "Revenue generated", icon: TrendingUp }, + { value: "99.7%", label: "Platform uptime", icon: Activity }, + { value: "47", label: "Verified agents", icon: Bot }, ]; -const CATEGORIES = [ - { name: "Revenue Generation", icon: DollarSign, count: 12, color: "text-teal-400", bg: "bg-teal-500/10 border-teal-500/20" }, - { name: "Lead Acquisition", icon: Target, count: 8, color: "text-blue-400", bg: "bg-blue-500/10 border-blue-500/20" }, - { name: "Content Amplification", icon: Activity, count: 7, color: "text-amber-400", bg: "bg-amber-500/10 border-amber-500/20" }, - { name: "Arbitrage Detection", icon: TrendingUp, count: 4, color: "text-orange-400", bg: "bg-orange-500/10 border-orange-500/20" }, - { name: "Brand Monitoring", icon: ShieldCheck, count: 5, color: "text-violet-400", bg: "bg-violet-500/10 border-violet-500/20" }, - { name: "Research Automation", icon: Bot, count: 7, color: "text-cyan-400", bg: "bg-cyan-500/10 border-cyan-500/20" }, - { name: "Workflow Optimization", icon: Zap, count: 4, color: "text-pink-400", bg: "bg-pink-500/10 border-pink-500/20" }, +const FEATURES = [ + { + icon: ShieldCheck, + title: "Verified & Audited", + body: "Every agent passes a technical review before listing. Performance metrics, access requirements, and risk disclosures are public.", + color: "text-teal-400", + bg: "bg-teal-500/10 border-teal-500/20", + }, + { + icon: Lock, + title: "Permission Sandboxing", + body: "Agents only touch the systems you explicitly approve. Fine-grained permissions with a real-time kill-switch from your dashboard.", + color: "text-blue-400", + bg: "bg-blue-500/10 border-blue-500/20", + }, + { + icon: BarChart3, + title: "Measurable ROI", + body: "Every agent reports what it did, what it earned, and what it cost — in plain numbers. No black boxes, no vague 'efficiency gains'.", + color: "text-violet-400", + bg: "bg-violet-500/10 border-violet-500/20", + }, ]; const FEATURED_AGENTS = [ { name: "RevenueMaxx", - tagline: "Autonomous eCommerce revenue optimizer that reprices SKUs and triggers upsell sequences.", + tagline: "Autonomous eCommerce optimizer that reprices SKUs, triggers upsell flows, and recovers abandoned carts.", category: "Revenue Generation", - roi: "34%", - roiLabel: "avg lift", - price: "12% of profit", + stat1: { value: "34%", label: "avg revenue lift" }, + stat2: { value: "280", label: "deployed" }, + price: "12% of profit generated", rating: 4.9, - deployments: "280", + reviews: 61, badge: "Top Earner", - badgeColor: "bg-teal-500/15 text-teal-300 border-teal-500/25", + badgeColor: "bg-teal-500/15 text-teal-300 border-teal-500/30", + accentColor: "border-teal-500/20", + iconColor: "from-teal-500 to-teal-700", }, { name: "LeadHunter Pro", - tagline: "Crawls LinkedIn and company databases to identify and enrich high-intent B2B buyers.", + tagline: "Crawls LinkedIn, Apollo, and company databases to find, enrich, and score high-intent B2B buyers.", category: "Lead Acquisition", - roi: "$0.08", - roiLabel: "per verified lead", + stat1: { value: "$0.08", label: "per verified lead" }, + stat2: { value: "142", label: "deployed" }, price: "Usage-based", rating: 4.8, - deployments: "142", + reviews: 44, badge: "Trending", - badgeColor: "bg-blue-500/15 text-blue-300 border-blue-500/25", + badgeColor: "bg-blue-500/15 text-blue-300 border-blue-500/30", + accentColor: "border-blue-500/20", + iconColor: "from-blue-500 to-blue-700", }, { name: "FlowOptimizer", - tagline: "Maps your existing workflows, finds bottlenecks, and builds automation bridges between your tools.", - category: "Workflow Optimization", - roi: "6+ hrs", - roiLabel: "saved per week", + tagline: "Maps your existing workflows, identifies bottlenecks, and builds automations across 500+ integrations.", + category: "Workflow Automation", + stat1: { value: "6 hrs", label: "saved per week" }, + stat2: { value: "390", label: "deployed" }, price: "$149 / month", - rating: 4.6, - deployments: "390", + rating: 4.7, + reviews: 88, badge: "Most Deployed", - badgeColor: "bg-violet-500/15 text-violet-300 border-violet-500/25", + badgeColor: "bg-violet-500/15 text-violet-300 border-violet-500/30", + accentColor: "border-violet-500/20", + iconColor: "from-violet-500 to-violet-700", }, ]; -const HOW_IT_WORKS = [ - { - step: "01", - title: "Browse the Marketplace", - body: "Find agents by function. Every listing includes real performance data, integration requirements, and risk disclosures.", - icon: Target, - }, - { - step: "02", - title: "Connect Your Accounts", - body: "Grant sandboxed permissions to the platforms your agent needs. Agents only access exactly what you approve.", - icon: Lock, - }, - { - step: "03", - title: "Define Your Objective", - body: "Set a concrete goal, daily budget, and performance thresholds. Every constraint is enforced at runtime.", - icon: ShieldCheck, - }, - { - step: "04", - title: "Launch & Monitor", - body: "Your agent executes at machine speed. Watch results in the Command Dashboard with full audit trails.", - icon: Activity, - }, +const CATEGORIES = [ + { name: "Revenue Generation", icon: DollarSign, count: 12, color: "text-teal-400", ring: "ring-teal-500/20 hover:ring-teal-500/40" }, + { name: "Lead Acquisition", icon: Target, count: 8, color: "text-blue-400", ring: "ring-blue-500/20 hover:ring-blue-500/40" }, + { name: "Content & Growth", icon: Activity, count: 7, color: "text-amber-400", ring: "ring-amber-500/20 hover:ring-amber-500/40" }, + { name: "Research & Intel", icon: TrendingUp, count: 6, color: "text-orange-400", ring: "ring-orange-500/20 hover:ring-orange-500/40" }, + { name: "Brand Monitoring", icon: ShieldCheck, count: 5, color: "text-violet-400", ring: "ring-violet-500/20 hover:ring-violet-500/40" }, + { name: "Workflow Automation", icon: Zap, count: 5, color: "text-pink-400", ring: "ring-pink-500/20 hover:ring-pink-500/40" }, + { name: "Market Research", icon: Bot, count: 4, color: "text-cyan-400", ring: "ring-cyan-500/20 hover:ring-cyan-500/40" }, +]; + +const STEPS = [ + { n: "01", title: "Browse the Marketplace", body: "Find agents by use case. Every listing shows real performance data, integration requirements, and what access it needs.", icon: Target }, + { n: "02", title: "Grant Permissions", body: "Connect only the platforms your agent needs. Permissions are sandboxed and revocable at any time from your dashboard.", icon: Lock }, + { n: "03", title: "Set Your Objective", body: "Define a goal, daily budget cap, and performance floor. Your agent works within those constraints — always.", icon: ShieldCheck }, + { n: "04", title: "Launch & Track", body: "Watch it run in real time. Full audit log of every action taken, every dollar touched, every decision made.", icon: Activity }, ]; const PRICING = [ { name: "Starter", price: "$0", - period: "/ month", - color: "border-slate-600/40", - buttonClass: "bg-slate-700 hover:bg-slate-600 text-white w-full py-3 rounded-xl font-semibold text-sm transition-all cursor-pointer", - features: ["3 active agents", "1,000 tasks / month", "Basic dashboard", "Email support"], - popular: false, + period: "/mo", + highlight: false, + cta: "Start for free", + features: ["3 active agents", "1,000 tasks / month", "Standard marketplace access", "Basic analytics dashboard", "Email support"], }, { name: "Pro", price: "$99", - period: "/ month", - color: "border-teal-500/40", - popular: true, - buttonClass: "gradient-brand text-white w-full py-3 rounded-xl font-semibold text-sm hover:opacity-90 transition-opacity cursor-pointer", - features: ["20 active agents", "50,000 tasks / month", "Full ROI analytics", "Priority support", "500+ integrations", "90-day audit logs"], + period: "/mo", + highlight: true, + cta: "Get started", + features: ["20 active agents", "50,000 tasks / month", "Full marketplace + early access", "ROI analytics & audit logs", "Priority support", "500+ integrations", "90-day history"], }, { name: "Enterprise", price: "Custom", period: "", - color: "border-blue-500/30", - buttonClass: "bg-blue-600/80 hover:bg-blue-600 text-white w-full py-3 rounded-xl font-semibold text-sm transition-all cursor-pointer", - features: ["Unlimited agents", "Unlimited tasks", "Private agent clusters", "Dedicated manager", "SOC2 + HIPAA", "Custom SLA"], - popular: false, + highlight: false, + cta: "Talk to sales", + features: ["Unlimited agents & tasks", "Private agent clusters", "Dedicated success manager", "SOC2 Type II + HIPAA", "White-label option", "Custom SLA & uptime guarantee"], }, ]; const TESTIMONIALS = [ { - quote: "RevenueMaxx paid for itself in the first week. Revenue is up 28% and I haven't touched pricing manually since.", - name: "Sarah K.", - role: "Shopify store owner", - avatar: "S", - color: "bg-teal-600", + quote: "RevenueMaxx paid for itself inside the first week. Revenue is up 28% and I haven't touched pricing manually since I deployed it.", + name: "Sarah K.", role: "Shopify store owner", avatar: "S", bg: "bg-teal-600", }, { - quote: "LeadHunter fills my CRM with better-qualified leads than my previous agency — at a fraction of the cost.", - name: "Marcus T.", - role: "Founder, B2B SaaS", - avatar: "M", - color: "bg-blue-600", + quote: "LeadHunter fills my CRM with better-qualified leads than my previous agency did — for a fraction of the cost per lead.", + name: "Marcus T.", role: "Founder, B2B SaaS", avatar: "M", bg: "bg-blue-600", }, { - quote: "FlowOptimizer connected our CRM, billing, and Slack in a day. That used to take a developer two weeks.", - name: "Priya R.", - role: "Head of Ops, startup", - avatar: "P", - color: "bg-violet-600", + quote: "FlowOptimizer connected our CRM, billing, and Slack in a single afternoon. That would have taken a developer two weeks.", + name: "Priya R.", role: "Head of Operations", avatar: "P", bg: "bg-violet-600", }, ]; @@ -149,409 +148,468 @@ export default function LandingPage() { const [email, setEmail] = useState(""); return ( -
+
- {/* Navbar */} -