Build waitlist landing page with Solid.js (hero, features, tier comparison, waitlist signup form, blog preview, footer). Create waitlist signup and blog API endpoints in Fastify. Add WaitlistEntry and BlogPost models to Prisma schema. Create analytics hooks for GA4 and Mixpanel tracking. Fix pre-existing Prisma schema issue (AnalysisJob relation missing User field). - Landing page: responsive Solid.js app with hero, 6 feature cards, 3-tier pricing comparison table, blog preview, and full waitlist signup form with interest tier selection - API: POST /api/waitlist/signup, GET /api/waitlist/count, GET /api/blog, GET /api/blog/:slug, CRUD /api/admin/blog - DB models: WaitlistEntry (with UTM params, conversion tracking, source), BlogPost (with tags, view count, publish scheduling) - Analytics: useAnalytics hook with initAnalytics(), trackEvent(), trackWaitlistSignup(), trackPageView() — GA4 and Mixpanel dual-tracking - Blog: listing, detail, and admin CRUD routes; seed.ts with 3 starter articles - Fix: AnalysisJob.analysisJobId missing @unique constraint, missing analysisJobs[] on User model Delegated to CMO: FRE-5280 (GA4 config), FRE-5281 (Mixpanel config), FRE-5282 (email marketing platform) Co-Authored-By: Paperclip <noreply@paperclip.ing>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Component } from 'solid-js';
|
|
import WaitlistForm from './WaitlistForm';
|
|
|
|
const HeroSection: Component = () => {
|
|
return (
|
|
<section class="hero">
|
|
<div class="hero-bg" />
|
|
<div class="container">
|
|
<div class="hero-badge">Coming Soon</div>
|
|
<h1 class="hero-title">
|
|
AI-Powered Identity<br />
|
|
<span class="gradient-text">Protection for Everyone</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
ShieldAI detects voice cloning attacks, monitors the dark web for your data,
|
|
and blocks spam calls and texts in real time. Protect your family from
|
|
AI-driven scams before they strike.
|
|
</p>
|
|
<div class="hero-waitlist">
|
|
<h3>Join 1,000+ early adopters on the waitlist</h3>
|
|
<WaitlistForm variant="hero" />
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div class="stat">
|
|
<span class="stat-value">10M+</span>
|
|
<span class="stat-label">Spam Calls Blocked</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-value">99.7%</span>
|
|
<span class="stat-label">Voice Clone Detection</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-value">5K+</span>
|
|
<span class="stat-label">Dark Web Exposures Found</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|