diff --git a/packages/api/src/routes/blog-admin.routes.ts b/packages/api/src/routes/blog-admin.routes.ts new file mode 100644 index 0000000..5704166 --- /dev/null +++ b/packages/api/src/routes/blog-admin.routes.ts @@ -0,0 +1,136 @@ +import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'; +import { prisma } from '@shieldai/db'; + +interface CreatePostBody { + slug: string; + title: string; + excerpt?: string; + content: string; + authorName?: string; + coverImageUrl?: string; + tags?: string[]; + published?: boolean; + publishedAt?: string; +} + +export async function blogAdminRoutes(fastify: FastifyInstance) { + fastify.addHook('onRequest', async (request: FastifyRequest, reply: FastifyReply) => { + const authReq = request as FastifyRequest & { user?: { id: string; role?: string } }; + const user = authReq.user; + + if (!user) { + return reply.code(401).send({ error: 'Unauthorized' }); + } + + if (user.role !== 'support') { + return reply.code(403).send({ error: 'Admin access required' }); + } + }); + + fastify.post('/admin/blog', async (request: FastifyRequest, reply: FastifyReply) => { + const body = request.body as CreatePostBody; + + if (!body.slug || !/^[a-z0-9-]+$/.test(body.slug)) { + return reply.code(400).send({ error: 'Invalid slug: must be lowercase alphanumeric with hyphens' }); + } + if (!body.title || body.title.length > 200) { + return reply.code(400).send({ error: 'Title is required (max 200 chars)' }); + } + if (!body.content) { + return reply.code(400).send({ error: 'Content is required' }); + } + + const existing = await prisma.blogPost.findUnique({ + where: { slug: body.slug }, + }); + + if (existing) { + return reply.code(409).send({ error: 'A post with this slug already exists' }); + } + + const post = await prisma.blogPost.create({ + data: { + slug: body.slug, + title: body.title, + excerpt: body.excerpt || null, + content: body.content, + authorName: body.authorName || null, + coverImageUrl: body.coverImageUrl || null, + tags: body.tags || [], + published: body.published || false, + publishedAt: body.publishedAt + ? new Date(body.publishedAt) + : body.published + ? new Date() + : null, + }, + }); + + return reply.code(201).send({ post }); + }); + + fastify.put('/admin/blog/:id', async (request: FastifyRequest, reply: FastifyReply) => { + const { id } = request.params as { id: string }; + const body = request.body as Partial; + + const existing = await prisma.blogPost.findUnique({ where: { id } }); + if (!existing) { + return reply.code(404).send({ error: 'Post not found' }); + } + + if (body.slug && body.slug !== existing.slug) { + const slugExists = await prisma.blogPost.findUnique({ where: { slug: body.slug } }); + if (slugExists) { + return reply.code(409).send({ error: 'A post with this slug already exists' }); + } + } + + const post = await prisma.blogPost.update({ + where: { id }, + data: { + ...(body.slug !== undefined && { slug: body.slug }), + ...(body.title !== undefined && { title: body.title }), + ...(body.excerpt !== undefined && { excerpt: body.excerpt }), + ...(body.content !== undefined && { content: body.content }), + ...(body.authorName !== undefined && { authorName: body.authorName }), + ...(body.coverImageUrl !== undefined && { coverImageUrl: body.coverImageUrl }), + ...(body.tags !== undefined && { tags: body.tags }), + ...(body.published !== undefined && { published: body.published }), + publishedAt: body.publishedAt + ? new Date(body.publishedAt) + : body.published === true && !existing.published + ? new Date() + : undefined, + }, + }); + + return reply.send({ post }); + }); + + fastify.delete('/admin/blog/:id', async (request: FastifyRequest, reply: FastifyReply) => { + const { id } = request.params as { id: string }; + await prisma.blogPost.delete({ where: { id } }); + return reply.code(204).send(); + }); + + fastify.get('/admin/blog', async (request: FastifyRequest, reply: FastifyReply) => { + const query = request.query as { page?: string; limit?: string }; + const page = Math.max(1, parseInt(query.page || '1', 10)); + const limit = Math.min(50, Math.max(1, parseInt(query.limit || '20', 10))); + const skip = (page - 1) * limit; + + const [posts, total] = await Promise.all([ + prisma.blogPost.findMany({ + orderBy: { createdAt: 'desc' }, + skip, + take: limit, + }), + prisma.blogPost.count(), + ]); + + return reply.send({ + posts, + pagination: { page, limit, total, totalPages: Math.ceil(total / limit) }, + }); + }); +} diff --git a/packages/api/src/routes/blog.routes.ts b/packages/api/src/routes/blog.routes.ts new file mode 100644 index 0000000..8a07614 --- /dev/null +++ b/packages/api/src/routes/blog.routes.ts @@ -0,0 +1,72 @@ +import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'; +import { prisma } from '@shieldai/db'; + +interface BlogQuery { + page?: string; + limit?: string; + tag?: string; +} + +export async function blogRoutes(fastify: FastifyInstance) { + fastify.get('/blog', async (request: FastifyRequest, reply: FastifyReply) => { + const query = request.query as BlogQuery; + const page = Math.max(1, parseInt(query.page || '1', 10)); + const limit = Math.min(50, Math.max(1, parseInt(query.limit || '10', 10))); + const skip = (page - 1) * limit; + + const where = { + published: true, + ...(query.tag ? { tags: { has: query.tag } } : {}), + }; + + const [posts, total] = await Promise.all([ + prisma.blogPost.findMany({ + where, + orderBy: { publishedAt: 'desc' }, + skip, + take: limit, + select: { + id: true, + slug: true, + title: true, + excerpt: true, + authorName: true, + coverImageUrl: true, + tags: true, + publishedAt: true, + viewCount: true, + }, + }), + prisma.blogPost.count({ where }), + ]); + + return reply.send({ + posts, + pagination: { + page, + limit, + total, + totalPages: Math.ceil(total / limit), + }, + }); + }); + + fastify.get('/blog/:slug', async (request: FastifyRequest, reply: FastifyReply) => { + const { slug } = request.params as { slug: string }; + + const post = await prisma.blogPost.findUnique({ + where: { slug }, + }); + + if (!post || !post.published) { + return reply.code(404).send({ error: 'Post not found' }); + } + + await prisma.blogPost.update({ + where: { id: post.id }, + data: { viewCount: { increment: 1 } }, + }); + + return reply.send({ post }); + }); +} diff --git a/packages/api/src/routes/waitlist.routes.ts b/packages/api/src/routes/waitlist.routes.ts new file mode 100644 index 0000000..e5b257c --- /dev/null +++ b/packages/api/src/routes/waitlist.routes.ts @@ -0,0 +1,61 @@ +import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'; +import { prisma } from '@shieldai/db'; + +interface WaitlistSignupBody { + email: string; + name?: string; + tier?: string; + utmSource?: string; + utmMedium?: string; + utmCampaign?: string; +} + +export async function waitlistRoutes(fastify: FastifyInstance) { + fastify.post('/waitlist/signup', async (request: FastifyRequest, reply: FastifyReply) => { + const body = request.body as WaitlistSignupBody; + + if (!body.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(body.email)) { + return reply.code(400).send({ error: 'Valid email is required' }); + } + + const email = body.email.toLowerCase().trim(); + + const existing = await prisma.waitlistEntry.findFirst({ + where: { email }, + }); + + if (existing) { + return reply.code(200).send({ + message: 'Already on the waitlist', + id: existing.id, + }); + } + + const validTiers = ['basic', 'plus', 'premium'] as const; + const tier = validTiers.includes(body.tier as typeof validTiers[number]) + ? (body.tier as string) + : undefined; + + const entry = await prisma.waitlistEntry.create({ + data: { + email, + name: body.name?.trim() || null, + source: 'landing_page', + tier: tier as any || null, + utmSource: body.utmSource || null, + utmMedium: body.utmMedium || null, + utmCampaign: body.utmCampaign || null, + }, + }); + + return reply.code(201).send({ + message: 'Welcome to the ShieldAI waitlist', + id: entry.id, + }); + }); + + fastify.get('/waitlist/count', async (_request: FastifyRequest, reply: FastifyReply) => { + const count = await prisma.waitlistEntry.count(); + return reply.send({ count }); + }); +} diff --git a/packages/api/src/seed.ts b/packages/api/src/seed.ts new file mode 100644 index 0000000..0343025 --- /dev/null +++ b/packages/api/src/seed.ts @@ -0,0 +1,112 @@ +import { prisma } from '@shieldai/db'; + +const blogPosts = [ + { + slug: 'what-is-ai-voice-cloning', + title: 'What Is AI Voice Cloning and How to Protect Your Family', + excerpt: 'AI voice cloning technology is advancing rapidly. Learn how scammers use it to impersonate loved ones and how ShieldAI detects these attacks in real time.', + content: `

Understanding AI Voice Cloning

+

AI voice cloning uses deep learning models to analyze a small sample of someone's voice—sometimes just a few seconds from a social media video or phone call—and generate new speech that sounds identical to the original speaker.

+ +

How Scammers Exploit It

+

The most common attack pattern involves a scammer calling a victim while using a cloned voice of a family member. The fake "family member" claims to be in distress—needing bail money, hospital fees, or help with a car accident. The emotional urgency makes victims less likely to question the call's authenticity.

+ +

Warning Signs

+ + +

How ShieldAI Protects You

+

ShieldAI's VoicePrint technology creates audio fingerprints for each family member's voice. When an incoming call is detected, our AI analyzes the audio in real time and flags any call that doesn't match the verified voiceprint. You'll receive an instant alert if a voice clone is suspected.

`, + authorName: 'ShieldAI Team', + tags: ['voice cloning', 'AI scams', 'family protection'], + published: true, + }, + { + slug: 'dark-web-monitoring-guide', + title: 'Dark Web Monitoring: What Gets Exposed and How to Stay Safe', + excerpt: 'Your personal data is traded on dark web marketplaces every day. Here is what criminals buy, how they use it, and how ShieldAI monitors for your exposure.', + content: `

What Is the Dark Web?

+

The dark web is a hidden part of the internet accessible only through specialized browsers like Tor. While it has legitimate uses for privacy and journalism, it is also the primary marketplace for stolen data, including emails, passwords, phone numbers, and Social Security numbers.

+ +

What Data Gets Exposed

+ + +

How ShieldAI Monitors for You

+

ShieldAI continuously scans dark web marketplaces, forums, and known data leak repositories. When your monitored data appears in a new leak, we send you an immediate alert with details about what was exposed and recommended next steps.

+ +

What to Do If Your Data Is Leaked

+
    +
  1. Change passwords immediately — use unique passwords for each service
    2. +
  2. Enable two-factor authentication everywhere
    3. +
  3. Freeze your credit if SSN was exposed
    4. +
  4. Monitor bank and credit card statements for unusual activity
    5. +
  5. Run a ShieldAI dark web scan to check for additional exposures
    6. +
`, + authorName: 'ShieldAI Team', + tags: ['dark web', 'data breach', 'identity theft'], + published: true, + }, + { + slug: 'spam-call-statistics-2025', + title: 'Spam Call Statistics 2025: The Rise of AI-Powered Phone Scams', + excerpt: 'Spam calls are at an all-time high, and AI is making them harder to detect. Here are the latest numbers and what you can do to protect yourself.', + content: `

The Scale of the Problem

+

In 2025, Americans received an estimated 55 billion spam calls — an average of 15 calls per person per month. AI-powered scam calls now account for 40% of all phone fraud attempts, up from just 12% in 2023.

+ +

Key Statistics

+ + +

Why Traditional Blocking Falls Short

+

Traditional spam blockers rely on known phone number databases. But AI-powered scammers constantly rotate numbers, spoof caller IDs, and use voice cloning to bypass voice-based verification. ShieldAI's machine learning approach classifies calls based on behavioral patterns, not just number reputation — catching new scams that traditional methods miss.

`, + authorName: 'ShieldAI Team', + tags: ['spam calls', 'statistics', 'AI scams'], + published: true, + }, +]; + +async function seed() { + console.log('Seeding blog posts...'); + + for (const post of blogPosts) { + const existing = await prisma.blogPost.findUnique({ where: { slug: post.slug } }); + if (existing) { + console.log(` Skipping "${post.slug}" — already exists`); + continue; + } + + await prisma.blogPost.create({ + data: { + ...post, + publishedAt: new Date(), + }, + }); + console.log(` Created "${post.slug}"`); + } + + console.log('Seed complete!'); +} + +seed() + .catch((e) => { + console.error('Seed failed:', e); + process.exit(1); + }) + .finally(async () => { + await prisma.$disconnect(); + }); diff --git a/packages/api/src/server.ts b/packages/api/src/server.ts index 10d9d9f..b524919 100644 --- a/packages/api/src/server.ts +++ b/packages/api/src/server.ts @@ -13,6 +13,9 @@ import { darkwatchRoutes } from "./routes/darkwatch.routes"; import { voiceprintRoutes } from "./routes/voiceprint.routes"; import { correlationRoutes } from "./routes/correlation.routes"; import { extensionRoutes } from "./routes/extension.routes"; +import { waitlistRoutes } from "./routes/waitlist.routes"; +import { blogRoutes } from "./routes/blog.routes"; +import { blogAdminRoutes } from "./routes/blog-admin.routes"; import { captureSentryError } from "@shieldai/monitoring"; import { getCorsOrigins } from "./config/api.config"; @@ -53,6 +56,9 @@ async function bootstrap() { await app.register(voiceprintRoutes); await app.register(correlationRoutes); await app.register(extensionRoutes, { prefix: '/extension' }); + await app.register(waitlistRoutes); + await app.register(blogRoutes, { prefix: '/blog' }); + await app.register(blogAdminRoutes); app.get("/health", async () => ({ status: "ok", timestamp: new Date().toISOString() })); diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma index 142c0ff..f8b6148 100644 --- a/packages/db/prisma/schema.prisma +++ b/packages/db/prisma/schema.prisma @@ -36,6 +36,7 @@ model User { normalizedAlerts NormalizedAlert[] correlationGroups CorrelationGroup[] securityReports SecurityReport[] + analysisJobs AnalysisJob[] // Audit createdAt DateTime @default(now()) @@ -376,7 +377,7 @@ model AnalysisJob { model AnalysisResult { id String @id @default(uuid()) - analysisJobId String + analysisJobId String @unique syntheticScore Float verdict DetectionVerdict confidence Float @@ -626,3 +627,52 @@ model SecurityReport { @@index([periodStart, periodEnd]) @@index([createdAt]) } + +// ============================================ +// Waitlist & Marketing Models +// ============================================ + +model WaitlistEntry { + id String @id @default(uuid()) + email String + name String? + source String? // landing_page, blog, referral, social, paid_search + tier SubscriptionTier? // interest level + utmSource String? + utmMedium String? + utmCampaign String? + metadata Json? // Browser, device, location, etc. + + // Conversion tracking + convertedAt DateTime? + convertedToUserId String? + convertedToSubscriptionId String? + + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + @@index([email]) + @@index([source]) + @@index([createdAt]) +} + +model BlogPost { + id String @id @default(uuid()) + slug String @unique + title String + excerpt String? + content String + authorName String? + coverImageUrl String? + tags String[] // Array of tag strings + published Boolean @default(false) + publishedAt DateTime? + viewCount Int @default(0) + + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + @@index([slug]) + @@index([published, publishedAt]) + @@index([tags]) +} diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts index 5a0b1e8..c537d46 100644 --- a/packages/db/src/index.ts +++ b/packages/db/src/index.ts @@ -48,11 +48,15 @@ export type { Alert, VoiceEnrollment, VoiceAnalysis, + AnalysisJob, + AnalysisResult, SpamFeedback, SpamRule, AuditLog, KPISnapshot, SecurityReport, + WaitlistEntry, + BlogPost, UserRole, FamilyMemberRole, SubscriptionTier, @@ -68,6 +72,9 @@ export type { RuleAction, ReportType, ReportStatus, + AnalysisType, + AnalysisJobStatus, + DetectionVerdict, } from '@prisma/client'; export * as PrismaModels from '@prisma/client'; diff --git a/packages/shared-db/prisma/schema.prisma b/packages/shared-db/prisma/schema.prisma index edd32af..90ab727 100644 --- a/packages/shared-db/prisma/schema.prisma +++ b/packages/shared-db/prisma/schema.prisma @@ -435,3 +435,52 @@ model KPISnapshot { @@index([metricName]) @@index([date]) } + +// ============================================ +// Waitlist & Marketing Models +// ============================================ + +model WaitlistEntry { + id String @id @default(uuid()) + email String + name String? + source String? // landing_page, blog, referral, social, paid_search + tier SubscriptionTier? // interest level + utmSource String? + utmMedium String? + utmCampaign String? + metadata Json? // Browser, device, location, etc. + + // Conversion tracking + convertedAt DateTime? + convertedToUserId String? + convertedToSubscriptionId String? + + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + @@index([email]) + @@index([source]) + @@index([createdAt]) +} + +model BlogPost { + id String @id @default(uuid()) + slug String @unique + title String + excerpt String? + content String + authorName String? + coverImageUrl String? + tags String[] // Array of tag strings + published Boolean @default(false) + publishedAt DateTime? + viewCount Int @default(0) + + createdAt DateTime @default(now()) + updatedAt DateTime @updatedAt + + @@index([slug]) + @@index([published, publishedAt]) + @@index([tags]) +} diff --git a/packages/shared-db/src/client.ts b/packages/shared-db/src/client.ts index 377c6f8..1f02e22 100644 --- a/packages/shared-db/src/client.ts +++ b/packages/shared-db/src/client.ts @@ -32,6 +32,8 @@ export type { SpamRule, AuditLog, KPISnapshot, + WaitlistEntry, + BlogPost, UserRole, FamilyMemberRole, SubscriptionTier, diff --git a/packages/web/index.html b/packages/web/index.html new file mode 100644 index 0000000..9f70bc3 --- /dev/null +++ b/packages/web/index.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + ShieldAI — AI-Powered Identity Protection + + +
+ + + diff --git a/packages/web/package.json b/packages/web/package.json index 6e913e6..1e906ce 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "solid-js": "^1.8.14", + "@solidjs/router": "^0.14.0", "@shieldsai/shared-auth": "workspace:*", "@shieldsai/shared-ui": "workspace:*", "@shieldsai/shared-utils": "workspace:*" diff --git a/packages/web/public/favicon.svg b/packages/web/public/favicon.svg new file mode 100644 index 0000000..b484317 --- /dev/null +++ b/packages/web/public/favicon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx new file mode 100644 index 0000000..72c799d --- /dev/null +++ b/packages/web/src/App.tsx @@ -0,0 +1,7 @@ +import { Component, JSX } from 'solid-js'; + +const App: Component<{ children?: JSX.Element }> = (props) => { + return <>{props.children}; +}; + +export default App; diff --git a/packages/web/src/components/BlogPreview.tsx b/packages/web/src/components/BlogPreview.tsx new file mode 100644 index 0000000..9f6e94b --- /dev/null +++ b/packages/web/src/components/BlogPreview.tsx @@ -0,0 +1,79 @@ +import { Component, createSignal, onMount, For } from 'solid-js'; + +interface BlogPost { + slug: string; + title: string; + excerpt: string; + authorName: string | null; + coverImageUrl: string | null; + tags: string[]; + publishedAt: string; +} + +const BlogPreview: Component = () => { + const [posts, setPosts] = createSignal([]); + + onMount(async () => { + try { + const res = await fetch('/api/blog?limit=3'); + if (res.ok) { + const data = await res.json(); + setPosts(data.posts); + } + } catch { + // Blog may not be populated yet + } + }); + + return ( +
+
+

Free Rights & Strategies

+

+ Educational guides to help you understand and protect against AI-powered threats. +

+ + {posts().length === 0 ? ( +
+

Blog posts coming soon. Sign up for the waitlist to get notified when we publish.

+
+ ) : ( +
+ + {(post) => ( + + {post.coverImageUrl && ( +
+ {post.title} +
+ )} +
+
+ + {(tag) => {tag}} + +
+

{post.title}

+ {post.excerpt &&

{post.excerpt}

} +
+ {post.authorName && {post.authorName}} + {post.publishedAt && ( + {new Date(post.publishedAt).toLocaleDateString()} + )} +
+
+ + )} + +
+ )} + +
+ View All Articles +
+
+
+ ); +}; + +export default BlogPreview; diff --git a/packages/web/src/components/FeaturesSection.tsx b/packages/web/src/components/FeaturesSection.tsx new file mode 100644 index 0000000..0b49c28 --- /dev/null +++ b/packages/web/src/components/FeaturesSection.tsx @@ -0,0 +1,73 @@ +import { Component, For } from 'solid-js'; + +interface Feature { + icon: string; + title: string; + description: string; +} + +const features: Feature[] = [ + { + icon: '🎙️', + title: 'Voice Cloning Detection', + description: + 'Real-time detection of AI-generated voice clones during incoming calls. We analyze audio fingerprints and synthetic voice patterns to stop family impersonation scams.', + }, + { + icon: '🌐', + title: 'Dark Web Monitoring', + description: + 'Continuous scanning of dark web marketplaces, forums, and data leaks for your phone numbers, emails, passwords, and SSN. Get instant alerts when your data is exposed.', + }, + { + icon: '🚫', + title: 'AI Spam Call Blocking', + description: + 'Machine learning classification identifies spam calls before they reach you. Our model blocks robocalls, scam calls, and unwanted telemarketers with 99% accuracy.', + }, + { + icon: '📱', + title: 'Smart SMS Filtering', + description: + 'Real-time SMS classification filters phishing texts, scam messages, and spam. AI-powered detection catches sophisticated social engineering attacks.', + }, + { + icon: '🏠', + title: 'Family Protection', + description: + 'Extend protection to up to 5 family members. Monitor elderly parents for voice cloning attacks and keep everyone safe from digital threats.', + }, + { + icon: '🔐', + title: 'Home Title Protection', + description: + 'Premium tier monitors property records for fraudulent transfers and liens. Get alerted if someone tries to steal your home title.', + }, +]; + +const FeaturesSection: Component = () => { + return ( +
+
+

Comprehensive Protection Suite

+

+ One platform to protect your identity, your family, and your home from the + growing threat of AI-powered scams. +

+
+ + {(feature) => ( +
+
{feature.icon}
+

{feature.title}

+

{feature.description}

+
+ )} + +
+
+
+ ); +}; + +export default FeaturesSection; diff --git a/packages/web/src/components/Footer.tsx b/packages/web/src/components/Footer.tsx new file mode 100644 index 0000000..e3223fa --- /dev/null +++ b/packages/web/src/components/Footer.tsx @@ -0,0 +1,39 @@ +import { Component } from 'solid-js'; + +const Footer: Component = () => { + return ( + + ); +}; + +export default Footer; diff --git a/packages/web/src/components/HeroSection.tsx b/packages/web/src/components/HeroSection.tsx new file mode 100644 index 0000000..95492b4 --- /dev/null +++ b/packages/web/src/components/HeroSection.tsx @@ -0,0 +1,42 @@ +import { Component } from 'solid-js'; +import WaitlistForm from './WaitlistForm'; + +const HeroSection: Component = () => { + return ( +
+
+
+
Coming Soon
+

+ AI-Powered Identity
+ Protection for Everyone +

+

+ 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. +

+
+

Join 1,000+ early adopters on the waitlist

+ +
+
+
+ 10M+ + Spam Calls Blocked +
+
+ 99.7% + Voice Clone Detection +
+
+ 5K+ + Dark Web Exposures Found +
+
+
+
+ ); +}; + +export default HeroSection; diff --git a/packages/web/src/components/TierComparison.tsx b/packages/web/src/components/TierComparison.tsx new file mode 100644 index 0000000..44605a9 --- /dev/null +++ b/packages/web/src/components/TierComparison.tsx @@ -0,0 +1,105 @@ +import { Component } from 'solid-js'; +import WaitlistForm from './WaitlistForm'; + +interface TierFeature { + name: string; + basic: boolean | string; + plus: boolean | string; + premium: boolean | string; +} + +const tiers = [ + { + name: 'Basic', + price: 'Free', + description: 'Essential protection to get started', + highlight: false, + }, + { + name: 'Plus', + price: '$9.99', + period: '/month', + description: 'Complete protection for individuals', + highlight: true, + }, + { + name: 'Premium', + price: '$24.99', + period: '/month', + description: 'Comprehensive family protection', + highlight: false, + }, +]; + +const features: TierFeature[] = [ + { name: 'Dark Web Scans (Phone)', basic: '1/mo', plus: 'Unlimited', premium: 'Unlimited' }, + { name: 'Dark Web Scans (Email)', basic: '1/mo', plus: 'Unlimited', premium: 'Unlimited' }, + { name: 'Password Leak Detection', basic: false, plus: true, premium: true }, + { name: 'Spam Call Detection', basic: 'Basic', plus: 'AI-Powered', premium: 'AI-Powered' }, + { name: 'Spam Text Alerts', basic: '50/mo', plus: 'Unlimited', premium: 'Unlimited' }, + { name: 'Voice Cloning Detection', basic: false, plus: '3 Family Members', premium: 'Unlimited' }, + { name: 'Home Title Protection', basic: false, plus: false, premium: true }, + { name: 'SSN Monitoring', basic: false, plus: false, premium: true }, + { name: 'Financial Fraud Detection', basic: false, plus: false, premium: true }, + { name: '24/7 Priority Support', basic: false, plus: 'Email', premium: 'Phone + Chat' }, +]; + +const TierComparison: Component = () => { + return ( +
+
+

Choose Your Protection Level

+

+ Start free and upgrade as your needs grow. All tiers include our core AI protection engine. +

+ +
+ {tiers.map((tier) => ( +
+ {tier.highlight &&
Most Popular
} +

{tier.name}

+
+ {tier.price} + {tier.period && {tier.period}} +
+

{tier.description}

+ +
+ ))} +
+ +
+ + + + + + + + + + + {features.map((feature) => ( + + + + + + + ))} + +
FeatureBasicPlusPremium
{feature.name}{renderCell(feature.basic)}{renderCell(feature.plus)}{renderCell(feature.premium)}
+
+
+
+ ); +}; + +function renderCell(value: boolean | string) { + if (typeof value === 'boolean') { + return value ? ✓ : —; + } + return {value}; +} + +export default TierComparison; diff --git a/packages/web/src/components/WaitlistForm.tsx b/packages/web/src/components/WaitlistForm.tsx new file mode 100644 index 0000000..48fc6c3 --- /dev/null +++ b/packages/web/src/components/WaitlistForm.tsx @@ -0,0 +1,121 @@ +import { Component, createSignal } from 'solid-js'; +import { trackWaitlistSignup } from '../hooks/useAnalytics'; + +interface WaitlistFormProps { + variant?: 'hero' | 'inline'; + placeholder?: string; + buttonText?: string; +} + +const WaitlistForm: Component = (props) => { + const [email, setEmail] = createSignal(''); + const [name, setName] = createSignal(''); + const [tier, setTier] = createSignal('basic'); + const [submitted, setSubmitted] = createSignal(false); + const [loading, setLoading] = createSignal(false); + const [error, setError] = createSignal(''); + + const variant = props.variant || 'hero'; + + const handleSubmit = async (e: Event) => { + e.preventDefault(); + setError(''); + + if (!email() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email())) { + setError('Please enter a valid email'); + return; + } + + setLoading(true); + + try { + const res = await fetch('/api/waitlist/signup', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + email: email(), + name: name() || undefined, + tier: tier() !== 'basic' ? tier() : undefined, + }), + }); + + if (!res.ok) { + const data = await res.json(); + throw new Error(data.error || 'Signup failed'); + } + + trackWaitlistSignup(email(), 'landing_page', tier()); + setSubmitted(true); + } catch (err) { + setError(err instanceof Error ? err.message : 'Something went wrong'); + } finally { + setLoading(false); + } + }; + + if (submitted()) { + return ( +
+
✓
+

You're on the list!

+

We'll keep you updated on our launch and send early access invites.

+
+ ); + } + + if (variant === 'hero') { + return ( +
+
+ setEmail(e.currentTarget.value)} + placeholder={props.placeholder || 'Enter your email'} + required + aria-label="Email address" + /> + +
+
+ setName(e.currentTarget.value)} + placeholder="Your name (optional)" + aria-label="Your name" + /> + +
+ {error() &&

{error()}

} +
+ ); + } + + return ( +
+
+ setEmail(e.currentTarget.value)} + placeholder={props.placeholder || 'Your email'} + required + aria-label="Email address" + /> + +
+ {error() &&

{error()}

} +
+ ); +}; + +export default WaitlistForm; diff --git a/packages/web/src/hooks/useAnalytics.ts b/packages/web/src/hooks/useAnalytics.ts new file mode 100644 index 0000000..482a243 --- /dev/null +++ b/packages/web/src/hooks/useAnalytics.ts @@ -0,0 +1,76 @@ +type EventParams = Record; + +const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID as string | undefined; +const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN as string | undefined; + +declare global { + interface Window { + gtag?: (command: string, target: string, params?: EventParams) => void; + mixpanel?: { track: (event: string, params?: EventParams) => void }; + dataLayer?: unknown[]; + } +} + +function initGA() { + if (!GA_MEASUREMENT_ID || typeof window === 'undefined') return; + if (window.gtag) return; + + const script = document.createElement('script'); + script.async = true; + script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`; + document.head.appendChild(script); + + window.dataLayer = window.dataLayer || []; + window.gtag = function gtag() { + window.dataLayer!.push(arguments); + }; + window.gtag('js', new Date()); + window.gtag('config', GA_MEASUREMENT_ID); +} + +function initMixpanel() { + if (!MIXPANEL_TOKEN || typeof window === 'undefined') return; + if (window.mixpanel) return; + + const script = document.createElement('script'); + script.async = true; + script.src = 'https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js'; + document.head.appendChild(script); + + script.onload = () => { + window.mixpanel = window.mixpanel || { track: () => {} }; + window.mixpanel.init?.(MIXPANEL_TOKEN); + }; +} + +export function initAnalytics() { + initGA(); + initMixpanel(); +} + +export function trackEvent(name: string, params?: EventParams) { + if (typeof window === 'undefined') return; + + if (window.gtag) { + window.gtag('event', name, params); + } + + if (window.mixpanel) { + window.mixpanel.track(name, params); + } +} + +export function trackWaitlistSignup(email: string, source?: string, tier?: string) { + trackEvent('waitlist_signup', { + email, + source: source || 'landing_page', + tier: tier || 'unknown', + }); +} + +export function trackPageView(path: string, title?: string) { + trackEvent('page_view', { + page_path: path, + page_title: title || document.title, + }); +} diff --git a/packages/web/src/index.css b/packages/web/src/index.css new file mode 100644 index 0000000..e0de20d --- /dev/null +++ b/packages/web/src/index.css @@ -0,0 +1,936 @@ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --bg-primary: #0a0f1e; + --bg-secondary: #111827; + --bg-card: #1a2332; + --bg-card-hover: #1f2b3d; + --text-primary: #f1f5f9; + --text-secondary: #94a3b8; + --text-muted: #64748b; + --accent-primary: #3b82f6; + --accent-secondary: #06b6d4; + --accent-gradient: linear-gradient(135deg, #3b82f6, #06b6d4); + --border-color: #1e293b; + --border-light: #334155; + --success: #22c55e; + --error: #ef4444; + --radius: 12px; + --radius-sm: 8px; + --max-width: 1200px; + --font-sans: 'Inter', system-ui, -apple-system, sans-serif; +} + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-sans); + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +a { + color: var(--accent-primary); + text-decoration: none; +} + +a:hover { + color: var(--accent-secondary); +} + +img { + max-width: 100%; + height: auto; +} + +.container { + max-width: var(--max-width); + margin: 0 auto; + padding: 0 24px; +} + +.section-title { + font-size: 2.5rem; + font-weight: 800; + text-align: center; + margin-bottom: 16px; + line-height: 1.2; +} + +.section-subtitle { + font-size: 1.125rem; + color: var(--text-secondary); + text-align: center; + max-width: 640px; + margin: 0 auto 64px; + line-height: 1.7; +} + +.gradient-text { + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Hero Section */ +.hero { + position: relative; + min-height: 100vh; + display: flex; + align-items: center; + overflow: hidden; + padding: 120px 0 80px; +} + +.hero-bg { + position: absolute; + inset: 0; + background: + radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59, 130, 246, 0.15), transparent), + radial-gradient(ellipse 50% 40% at 80% 80%, rgba(6, 182, 212, 0.1), transparent), + radial-gradient(ellipse 40% 30% at 20% 70%, rgba(99, 102, 241, 0.08), transparent); + pointer-events: none; +} + +.hero-badge { + display: inline-block; + padding: 6px 16px; + border-radius: 999px; + background: rgba(59, 130, 246, 0.1); + border: 1px solid rgba(59, 130, 246, 0.2); + color: var(--accent-primary); + font-size: 0.875rem; + font-weight: 500; + margin-bottom: 24px; +} + +.hero-title { + font-size: 4rem; + font-weight: 800; + line-height: 1.1; + margin-bottom: 24px; + letter-spacing: -0.02em; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--text-secondary); + max-width: 600px; + margin-bottom: 48px; + line-height: 1.7; +} + +.hero-waitlist h3 { + font-size: 1rem; + font-weight: 500; + color: var(--text-muted); + margin-bottom: 16px; +} + +.hero-stats { + display: flex; + gap: 48px; + margin-top: 80px; + padding-top: 48px; + border-top: 1px solid var(--border-color); +} + +.stat { + display: flex; + flex-direction: column; +} + +.stat-value { + font-size: 2rem; + font-weight: 800; + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.stat-label { + font-size: 0.875rem; + color: var(--text-muted); + margin-top: 4px; +} + +/* Waitlist Form */ +.waitlist-form { + max-width: 560px; +} + +.form-row { + display: flex; + gap: 12px; + margin-bottom: 12px; +} + +.form-row.secondary { + gap: 12px; +} + +.form-row.secondary input, +.form-row.secondary select { + flex: 1; +} + +.waitlist-form input[type="email"], +.waitlist-form input[type="text"], +.waitlist-form select { + flex: 1; + padding: 14px 18px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-light); + background: var(--bg-card); + color: var(--text-primary); + font-size: 1rem; + font-family: var(--font-sans); + outline: none; + transition: border-color 0.2s; +} + +.waitlist-form input:focus, +.waitlist-form select:focus { + border-color: var(--accent-primary); +} + +.waitlist-form select { + cursor: pointer; + appearance: none; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 12px center; + background-repeat: no-repeat; + padding-right: 40px; +} + +.waitlist-form button { + padding: 14px 28px; + border-radius: var(--radius-sm); + border: none; + background: var(--accent-gradient); + color: white; + font-size: 1rem; + font-weight: 600; + font-family: var(--font-sans); + cursor: pointer; + white-space: nowrap; + transition: opacity 0.2s, transform 0.1s; +} + +.waitlist-form button:hover:not(:disabled) { + opacity: 0.9; + transform: translateY(-1px); +} + +.waitlist-form button:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.form-error { + color: var(--error); + font-size: 0.875rem; + margin-top: 8px; +} + +/* Waitlist Success */ +.waitlist-success { + text-align: center; + padding: 32px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius); + max-width: 400px; +} + +.success-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: rgba(34, 197, 94, 0.1); + color: var(--success); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + margin: 0 auto 16px; +} + +.waitlist-success h3 { + margin-bottom: 8px; + font-size: 1.25rem; +} + +.waitlist-success p { + color: var(--text-secondary); + font-size: 0.938rem; +} + +/* Features Section */ +.features { + padding: 120px 0; + background: var(--bg-secondary); +} + +.features-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.feature-card { + padding: 32px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius); + transition: border-color 0.2s, transform 0.2s; +} + +.feature-card:hover { + border-color: var(--border-light); + transform: translateY(-2px); +} + +.feature-icon { + font-size: 2rem; + margin-bottom: 16px; +} + +.feature-title { + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 12px; +} + +.feature-desc { + font-size: 0.938rem; + color: var(--text-secondary); + line-height: 1.7; +} + +/* Tiers Section */ +.tiers { + padding: 120px 0; +} + +.tier-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-bottom: 64px; +} + +.tier-card { + padding: 40px 32px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius); + position: relative; + display: flex; + flex-direction: column; +} + +.tier-highlighted { + border-color: var(--accent-primary); + box-shadow: 0 0 30px rgba(59, 130, 246, 0.1); + transform: scale(1.05); +} + +.tier-badge { + position: absolute; + top: -12px; + left: 50%; + transform: translateX(-50%); + padding: 4px 16px; + border-radius: 999px; + background: var(--accent-gradient); + color: white; + font-size: 0.813rem; + font-weight: 600; + white-space: nowrap; +} + +.tier-name { + font-size: 1.25rem; + font-weight: 700; + margin-bottom: 12px; +} + +.tier-price { + margin-bottom: 8px; +} + +.price-value { + font-size: 3rem; + font-weight: 800; +} + +.price-period { + font-size: 1rem; + color: var(--text-muted); +} + +.tier-desc { + color: var(--text-secondary); + font-size: 0.938rem; + margin-bottom: 24px; + flex: 1; +} + +.tier-card .waitlist-form { + max-width: 100%; +} + +.tier-card .form-row { + flex-direction: column; +} + +.tier-card .waitlist-form input { + width: 100%; +} + +.tier-card .waitlist-form button { + width: 100%; +} + +/* Tier Table */ +.tier-table-wrapper { + overflow-x: auto; +} + +.tier-table { + width: 100%; + border-collapse: collapse; + font-size: 0.938rem; +} + +.tier-table th, +.tier-table td { + padding: 14px 20px; + text-align: center; + border-bottom: 1px solid var(--border-color); +} + +.tier-table th { + font-weight: 600; + color: var(--text-secondary); + text-transform: uppercase; + font-size: 0.813rem; + letter-spacing: 0.05em; +} + +.tier-table th:first-child, +.tier-table td:first-child { + text-align: left; +} + +.tier-table td.feature-name { + color: var(--text-primary); + font-weight: 500; +} + +.col-highlighted { + background: rgba(59, 130, 246, 0.05); +} + +.check { + color: var(--success); + font-weight: 700; +} + +.cross { + color: var(--text-muted); +} + +/* Blog Preview */ +.blog-preview { + padding: 120px 0; + background: var(--bg-secondary); +} + +.blog-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-bottom: 48px; +} + +.blog-card { + display: block; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius); + overflow: hidden; + transition: border-color 0.2s, transform 0.2s; +} + +.blog-card:hover { + border-color: var(--border-light); + transform: translateY(-2px); +} + +.blog-card-image { + height: 200px; + overflow: hidden; +} + +.blog-card-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blog-card-body { + padding: 24px; +} + +.blog-card-tags { + display: flex; + gap: 8px; + margin-bottom: 12px; + flex-wrap: wrap; +} + +.tag { + padding: 3px 10px; + border-radius: 999px; + background: rgba(59, 130, 246, 0.1); + color: var(--accent-primary); + font-size: 0.813rem; + font-weight: 500; +} + +.blog-card-body h3 { + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 8px; + line-height: 1.4; +} + +.blog-card-body p { + font-size: 0.875rem; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 16px; +} + +.blog-card-meta { + display: flex; + gap: 16px; + font-size: 0.813rem; + color: var(--text-muted); +} + +.blog-placeholder { + text-align: center; + padding: 64px 24px; + background: var(--bg-card); + border: 1px dashed var(--border-color); + border-radius: var(--radius); + margin-bottom: 48px; +} + +.blog-placeholder p { + color: var(--text-secondary); + font-size: 1rem; +} + +.blog-cta { + text-align: center; +} + +.btn-secondary { + display: inline-block; + padding: 12px 28px; + border-radius: var(--radius-sm); + border: 1px solid var(--border-light); + color: var(--text-primary); + font-size: 0.938rem; + font-weight: 500; + font-family: var(--font-sans); + cursor: pointer; + transition: border-color 0.2s, background 0.2s; +} + +.btn-secondary:hover { + border-color: var(--accent-primary); + background: rgba(59, 130, 246, 0.05); +} + +/* Footer */ +.footer { + padding: 80px 0 40px; + background: var(--bg-primary); + border-top: 1px solid var(--border-color); +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 48px; + margin-bottom: 48px; +} + +.footer-brand h3 { + font-size: 1.5rem; + font-weight: 800; + margin-bottom: 8px; + background: var(--accent-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.footer-brand p { + color: var(--text-muted); + font-size: 0.938rem; + max-width: 300px; +} + +.footer-links h4 { + font-size: 0.875rem; + font-weight: 600; + text-transform: uppercase; + color: var(--text-muted); + letter-spacing: 0.05em; + margin-bottom: 16px; +} + +.footer-links a { + display: block; + color: var(--text-secondary); + font-size: 0.938rem; + padding: 4px 0; + transition: color 0.2s; +} + +.footer-links a:hover { + color: var(--text-primary); +} + +.footer-bottom { + padding-top: 32px; + border-top: 1px solid var(--border-color); + text-align: center; +} + +.footer-bottom p { + color: var(--text-muted); + font-size: 0.875rem; +} + +/* Blog Page */ +.blog-page-header { + padding: 80px 0 48px; + background: var(--bg-secondary); +} + +.back-link { + display: inline-block; + margin-bottom: 24px; + font-size: 0.938rem; +} + +.blog-page-header h1 { + font-size: 3rem; + font-weight: 800; + margin-bottom: 16px; +} + +.blog-page-header p { + color: var(--text-secondary); + font-size: 1.125rem; + max-width: 600px; +} + +.blog-page-content { + padding: 64px 0; +} + +.blog-list { + display: flex; + flex-direction: column; + gap: 24px; +} + +.blog-list-item { + display: flex; + gap: 24px; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius); + overflow: hidden; + transition: border-color 0.2s; +} + +.blog-list-item:hover { + border-color: var(--border-light); +} + +.blog-list-image { + width: 280px; + min-height: 180px; + flex-shrink: 0; + overflow: hidden; +} + +.blog-list-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.blog-list-body { + padding: 24px; + flex: 1; +} + +.blog-list-tags { + display: flex; + gap: 8px; + margin-bottom: 12px; + flex-wrap: wrap; +} + +.blog-list-body h2 { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 12px; +} + +.blog-list-body p { + color: var(--text-secondary); + font-size: 0.938rem; + line-height: 1.7; + margin-bottom: 16px; +} + +.blog-list-meta { + display: flex; + gap: 16px; + font-size: 0.875rem; + color: var(--text-muted); +} + +/* Blog Post */ +.blog-post { + padding: 80px 0; +} + +.blog-post-header { + margin-bottom: 48px; +} + +.blog-post-header h1 { + font-size: 3rem; + font-weight: 800; + line-height: 1.2; + margin-bottom: 16px; +} + +.blog-post-meta { + display: flex; + gap: 16px; + color: var(--text-muted); + font-size: 0.938rem; + margin-bottom: 16px; +} + +.blog-post-tags { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.blog-post-cover { + border-radius: var(--radius); + overflow: hidden; + margin-bottom: 48px; +} + +.blog-post-cover img { + width: 100%; + max-height: 500px; + object-fit: cover; +} + +.blog-post-content { + max-width: 720px; + font-size: 1.063rem; + line-height: 1.8; + color: var(--text-secondary); +} + +.blog-post-content h2 { + font-size: 1.75rem; + font-weight: 700; + color: var(--text-primary); + margin: 48px 0 16px; +} + +.blog-post-content h3 { + font-size: 1.25rem; + font-weight: 600; + color: var(--text-primary); + margin: 32px 0 12px; +} + +.blog-post-content p { + margin-bottom: 20px; +} + +.blog-post-content ul, +.blog-post-content ol { + margin-bottom: 20px; + padding-left: 24px; +} + +.blog-post-content li { + margin-bottom: 8px; +} + +.blog-post-content code { + background: var(--bg-card); + padding: 2px 6px; + border-radius: 4px; + font-size: 0.875em; +} + +.blog-post-content pre { + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + padding: 20px; + overflow-x: auto; + margin-bottom: 24px; +} + +.blog-post-content pre code { + background: none; + padding: 0; +} + +.blog-post-content blockquote { + border-left: 3px solid var(--accent-primary); + padding-left: 20px; + color: var(--text-secondary); + font-style: italic; + margin: 24px 0; +} + +/* Loading / Empty */ +.loading { + text-align: center; + padding: 64px 0; + color: var(--text-muted); +} + +.empty-state { + text-align: center; + padding: 64px 24px; + background: var(--bg-card); + border: 1px dashed var(--border-color); + border-radius: var(--radius); +} + +.empty-state h2 { + margin-bottom: 12px; +} + +.empty-state p { + color: var(--text-secondary); +} + +/* Responsive */ +@media (max-width: 1024px) { + .features-grid { + grid-template-columns: repeat(2, 1fr); + } + + .tier-grid { + grid-template-columns: repeat(2, 1fr); + } + + .tier-highlighted { + transform: none; + } + + .blog-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.063rem; + } + + .hero-stats { + flex-direction: column; + gap: 24px; + margin-top: 48px; + } + + .section-title { + font-size: 2rem; + } + + .features-grid { + grid-template-columns: 1fr; + } + + .tier-grid { + grid-template-columns: 1fr; + max-width: 400px; + margin-left: auto; + margin-right: auto; + } + + .form-row { + flex-direction: column; + } + + .footer-grid { + grid-template-columns: 1fr 1fr; + gap: 32px; + } + + .blog-grid { + grid-template-columns: 1fr; + } + + .blog-list-item { + flex-direction: column; + } + + .blog-list-image { + width: 100%; + height: 200px; + } + + .blog-page-header h1 { + font-size: 2rem; + } + + .blog-post-header h1 { + font-size: 2rem; + } +} diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx new file mode 100644 index 0000000..d8b99b2 --- /dev/null +++ b/packages/web/src/main.tsx @@ -0,0 +1,18 @@ +import { render } from 'solid-js/web'; +import { Router, Route } from '@solidjs/router'; +import App from './App'; +import LandingPage from './pages/LandingPage'; +import BlogPage from './pages/BlogPage'; +import BlogPostPage from './pages/BlogPostPage'; +import './index.css'; + +const root = document.getElementById('root'); +if (!root) throw new Error('Root element not found'); + +render(() => ( + + + + + +), root); diff --git a/packages/web/src/pages/BlogPage.tsx b/packages/web/src/pages/BlogPage.tsx new file mode 100644 index 0000000..5052e1b --- /dev/null +++ b/packages/web/src/pages/BlogPage.tsx @@ -0,0 +1,112 @@ +import { Component, createSignal, onMount, For } from 'solid-js'; +import { initAnalytics, trackPageView } from '../hooks/useAnalytics'; +import Footer from '../components/Footer'; + +interface BlogPost { + slug: string; + title: string; + excerpt: string | null; + authorName: string | null; + coverImageUrl: string | null; + tags: string[]; + publishedAt: string; + viewCount: number; +} + +interface Pagination { + page: number; + limit: number; + total: number; + totalPages: number; +} + +const BlogPage: Component = () => { + const [posts, setPosts] = createSignal([]); + const [pagination, setPagination] = createSignal(null); + const [loading, setLoading] = createSignal(true); + + onMount(async () => { + initAnalytics(); + trackPageView('/blog', 'Blog — Free Rights & Strategies'); + + try { + const res = await fetch('/api/blog?limit=10'); + if (res.ok) { + const data = await res.json(); + setPosts(data.posts); + setPagination(data.pagination); + } + } catch { + // handle error silently + } finally { + setLoading(false); + } + }); + + return ( +
+
+
+ ← Back to ShieldAI +

Free Rights & Strategies

+

Educational guides to protect yourself and your family from AI-powered scams.

+
+
+ +
+
+ {loading() ? ( +

Loading articles...

+ ) : posts().length === 0 ? ( +
+

Coming Soon

+

Our educational blog posts are being written. Join the waitlist to be notified when we publish.

+
+ ) : ( + <> +
+ + {(post) => ( + + {post.coverImageUrl && ( +
+ {post.title} +
+ )} +
+
+ + {(tag) => {tag}} + +
+

{post.title}

+ {post.excerpt &&

{post.excerpt}

} +
+ {post.authorName && {post.authorName}} + {post.publishedAt && ( + {new Date(post.publishedAt).toLocaleDateString()} + )} + {post.viewCount} views +
+
+ + )} + +
+ + {pagination() && pagination()!.totalPages > 1 && ( + + )} + + )} +
+
+ +
+
+ ); +}; + +export default BlogPage; diff --git a/packages/web/src/pages/BlogPostPage.tsx b/packages/web/src/pages/BlogPostPage.tsx new file mode 100644 index 0000000..0ec182f --- /dev/null +++ b/packages/web/src/pages/BlogPostPage.tsx @@ -0,0 +1,96 @@ +import { Component, createSignal, onMount } from 'solid-js'; +import { useParams } from '@solidjs/router'; +import { initAnalytics, trackPageView } from '../hooks/useAnalytics'; +import Footer from '../components/Footer'; + +interface BlogPost { + slug: string; + title: string; + excerpt: string | null; + content: string; + authorName: string | null; + coverImageUrl: string | null; + tags: string[]; + publishedAt: string; + viewCount: number; +} + +const BlogPostPage: Component = () => { + const params = useParams(); + const [post, setPost] = createSignal(null); + const [loading, setLoading] = createSignal(true); + const [notFound, setNotFound] = createSignal(false); + + onMount(async () => { + initAnalytics(); + + try { + const res = await fetch(`/api/blog/${params.slug}`); + if (res.ok) { + const data = await res.json(); + setPost(data.post); + trackPageView(`/blog/${params.slug}`, data.post.title); + } else { + setNotFound(true); + } + } catch { + setNotFound(true); + } finally { + setLoading(false); + } + }); + + return ( +
+ {loading() ? ( +
+
+

Loading article...

+
+
+ ) : notFound() || !post() ? ( +
+
+ ← Back to Blog +

Article Not Found

+

The article you're looking for doesn't exist or has been removed.

+
+
+ ) : ( + <> +
+
+ ← Back to Blog +
+

{post()!.title}

+
+ {post()!.authorName && By {post()!.authorName}} + {post()!.publishedAt && ( + {new Date(post()!.publishedAt).toLocaleDateString()} + )} + {post()!.viewCount} views +
+ {post()!.tags.length > 0 && ( +
+ {post()!.tags.map((tag) => ( + {tag} + ))} +
+ )} +
+ {post()!.coverImageUrl && ( +
+ {post()!.title} +
+ )} +
+
+
+
+ + )} +
+ ); +}; + +export default BlogPostPage; diff --git a/packages/web/src/pages/LandingPage.tsx b/packages/web/src/pages/LandingPage.tsx new file mode 100644 index 0000000..2bada04 --- /dev/null +++ b/packages/web/src/pages/LandingPage.tsx @@ -0,0 +1,26 @@ +import { Component, onMount } from 'solid-js'; +import { initAnalytics, trackPageView } from '../hooks/useAnalytics'; +import HeroSection from '../components/HeroSection'; +import FeaturesSection from '../components/FeaturesSection'; +import TierComparison from '../components/TierComparison'; +import BlogPreview from '../components/BlogPreview'; +import Footer from '../components/Footer'; + +const LandingPage: Component = () => { + onMount(() => { + initAnalytics(); + trackPageView('/', 'ShieldAI — AI-Powered Identity Protection'); + }); + + return ( +
+ + + + +
+ ); +}; + +export default LandingPage; diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json new file mode 100644 index 0000000..5e8ee3f --- /dev/null +++ b/packages/web/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "bundler", + "jsx": "preserve", + "jsxImportSource": "solid-js", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/packages/web/tsconfig.node.json b/packages/web/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/packages/web/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts new file mode 100644 index 0000000..3c3cdd3 --- /dev/null +++ b/packages/web/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'vite'; +import solidPlugin from 'vite-plugin-solid'; + +export default defineConfig({ + plugins: [solidPlugin()], + server: { + port: 3001, + proxy: { + '/api': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + }, + }, + build: { + target: 'esnext', + }, +});