{
  "id": "landing-page",
  "name": "Landing Page Builder",
  "category": "software-builder",
  "tags": ["landing", "marketing", "hero", "cta", "website"],
  "description": "Landing page builder with hero section, features grid, and call-to-action.",
  "triggers": ["landing page", "marketing page", "sales page", "hero section", "website"],
  "defaultSize": { "w": 5, "h": 6 },
  "source": "const LandingPage = () => {\n  const [email, setEmail] = React.useState('');\n  const [submitted, setSubmitted] = React.useState(false);\n\n  const features = [\n    { icon: '\u26A1', title: 'Lightning Fast', desc: 'Optimized performance out of the box with zero config required.' },\n    { icon: '\uD83D\uDD12', title: 'Enterprise Security', desc: 'Bank-grade encryption and compliance built into every layer.' },\n    { icon: '\uD83D\uDCCA', title: 'Real-time Analytics', desc: 'Track what matters with live dashboards and insights.' },\n    { icon: '\uD83D\uDD04', title: 'Auto Scaling', desc: 'Infrastructure that grows with you from day one to millions.' }\n  ];\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (email.trim()) setSubmitted(true);\n  };\n\n  const styles = {\n    page: {\n      fontFamily: 'system-ui, -apple-system, sans-serif',\n      color: '#1e293b',\n      background: '#fff'\n    },\n    navbar: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '16px 24px',\n      borderBottom: '1px solid #f1f5f9'\n    },\n    logo: {\n      fontSize: 20,\n      fontWeight: 800,\n      color: '#0f172a'\n    },\n    navLinks: {\n      display: 'flex',\n      gap: 20,\n      fontSize: 14,\n      fontWeight: 500,\n      color: '#475569'\n    },\n    hero: {\n      textAlign: 'center',\n      padding: '56px 24px',\n      background: 'linear-gradient(180deg, #eff6ff 0%, #fff 100%)'\n    },\n    heroTitle: {\n      fontSize: 36,\n      fontWeight: 800,\n      lineHeight: 1.15,\n      marginBottom: 16,\n      color: '#0f172a'\n    },\n    heroSubtitle: {\n      fontSize: 17,\n      color: '#475569',\n      maxWidth: 520,\n      margin: '0 auto 28px',\n      lineHeight: 1.6\n    },\n    ctaRow: {\n      display: 'flex',\n      justifyContent: 'center',\n      gap: 12,\n      flexWrap: 'wrap'\n    },\n    btnPrimary: {\n      padding: '12px 24px',\n      borderRadius: 10,\n      border: 'none',\n      background: '#2563eb',\n      color: '#fff',\n      fontWeight: 700,\n      fontSize: 15,\n      cursor: 'pointer'\n    },\n    btnSecondary: {\n      padding: '12px 24px',\n      borderRadius: 10,\n      border: '1px solid #cbd5e1',\n      background: '#fff',\n      color: '#334155',\n      fontWeight: 700,\n      fontSize: 15,\n      cursor: 'pointer'\n    },\n    featuresSection: {\n      padding: '48px 24px',\n      background: '#f8fafc'\n    },\n    sectionTitle: {\n      fontSize: 22,\n      fontWeight: 700,\n      textAlign: 'center',\n      marginBottom: 28\n    },\n    grid: {\n      display: 'grid',\n      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n      gap: 20,\n      maxWidth: 900,\n      margin: '0 auto'\n    },\n    featureCard: {\n      background: '#fff',\n      borderRadius: 12,\n      padding: 24,\n      boxShadow: '0 1px 3px rgba(0,0,0,0.06)',\n      border: '1px solid #e2e8f0',\n      textAlign: 'center'\n    },\n    featureIcon: {\n      fontSize: 32,\n      marginBottom: 12\n    },\n    featureTitle: {\n      fontSize: 15,\n      fontWeight: 700,\n      marginBottom: 8\n    },\n    featureDesc: {\n      fontSize: 13,\n      color: '#64748b',\n      lineHeight: 1.5\n    },\n    ctaSection: {\n      padding: '48px 24px',\n      textAlign: 'center'\n    },\n    ctaCard: {\n      background: '#0f172a',\n      color: '#fff',\n      borderRadius: 16,\n      padding: '40px 24px',\n      maxWidth: 560,\n      margin: '0 auto'\n    },\n    ctaTitle: {\n      fontSize: 22,\n      fontWeight: 700,\n      marginBottom: 12\n    },\n    ctaText: {\n      fontSize: 15,\n      color: '#cbd5e1',\n      marginBottom: 20,\n      lineHeight: 1.5\n    },\n    emailForm: {\n      display: 'flex',\n      gap: 8,\n      justifyContent: 'center',\n      flexWrap: 'wrap'\n    },\n    emailInput: {\n      padding: '10px 14px',\n      borderRadius: 8,\n      border: '1px solid #334155',\n      background: '#1e293b',\n      color: '#fff',\n      fontSize: 14,\n      outline: 'none',\n      minWidth: 220\n    },\n    footer: {\n      textAlign: 'center',\n      padding: 20,\n      fontSize: 12,\n      color: '#94a3b8',\n      borderTop: '1px solid #f1f5f9'\n    }\n  };\n\n  return (\n    <div style={styles.page}>\n      <nav style={styles.navbar}>\n        <div style={styles.logo}>Titan</div>\n        <div style={styles.navLinks}>\n          <span>Product</span>\n          <span>Pricing</span>\n          <span>Docs</span>\n        </div>\n      </nav>\n\n      <section style={styles.hero}>\n        <div style={styles.heroTitle}>Build faster with Titan</div>\n        <div style={styles.heroSubtitle}>\n          The all-in-one platform for shipping software. From idea to production in minutes, not months.\n        </div>\n        <div style={styles.ctaRow}>\n          <button style={styles.btnPrimary}>Get Started Free</button>\n          <button style={styles.btnSecondary}>View Demo</button>\n        </div>\n      </section>\n\n      <section style={styles.featuresSection}>\n        <div style={styles.sectionTitle}>Why teams choose Titan</div>\n        <div style={styles.grid}>\n          {features.map((f, i) => (\n            <div key={i} style={styles.featureCard}>\n              <div style={styles.featureIcon}>{f.icon}</div>\n              <div style={styles.featureTitle}>{f.title}</div>\n              <div style={styles.featureDesc}>{f.desc}</div>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      <section style={styles.ctaSection}>\n        <div style={styles.ctaCard}>\n          <div style={styles.ctaTitle}>Ready to launch?</div>\n          <div style={styles.ctaText}>Join 10,000+ builders shipping with Titan today.</div>\n          {submitted ? (\n            <div style={{ fontSize: 16, fontWeight: 600, color: '#4ade80' }}>\u2713 You are on the list!</div>\n          ) : (\n            <form style={styles.emailForm} onSubmit={handleSubmit}>\n              <input\n                style={styles.emailInput}\n                placeholder=\"you@company.com\"\n                value={email}\n                onChange={e => setEmail(e.target.value)}\n              />\n              <button style={styles.btnPrimary} type=\"submit\">Join Waitlist</button>\n            </form>\n          )}\n        </div>\n      </section>\n\n      <footer style={styles.footer}>\n        \u00A9 2025 Titan Inc. All rights reserved.\n      </footer>\n    </div>\n  );\n};\nrender(<LandingPage/>);",
  "placeholders": [{ "name": "REPLACE_WITH_BRAND_NAME", "description": "Brand name shown in navbar and footer", "default": "Titan" }]
}