feat: Complete company & legal pages
Added professional pages for all footer links: Company Pages: - /about - Mission, values, stats, features - /blog - Featured post, grid layout, newsletter CTA - /contact - Contact form, FAQ, company info - /careers - Open positions, benefits, values Legal Pages: - /privacy - Full privacy policy with sections - /terms - Terms of service - /cookies - Cookie types table, management info - /imprint - Company registration, contacts, disclaimer All pages follow consistent design: - Same Header/Footer components - Unified typography and spacing - Ambient glow effects - Animated sections - Mobile responsive
This commit is contained in:
yves.gugger
194
frontend/src/app/about/page.tsx
Normal file
194
frontend/src/app/about/page.tsx
Normal file
@ -0,0 +1,194 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Target, Shield, Zap, Users, Globe, TrendingUp, ArrowRight } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const values = [
|
||||
{
|
||||
icon: Target,
|
||||
title: 'Precision',
|
||||
description: 'Every check, every alert, every data point is accurate and reliable.',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Privacy',
|
||||
description: 'Your domain strategy is confidential. We never share or sell your data.',
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Speed',
|
||||
description: 'Real-time monitoring ensures you never miss a domain opportunity.',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: 'Transparency',
|
||||
description: 'Clear pricing, honest communication, no hidden fees or surprises.',
|
||||
},
|
||||
]
|
||||
|
||||
const stats = [
|
||||
{ value: '500K+', label: 'Domains Monitored' },
|
||||
{ value: '99.9%', label: 'Uptime' },
|
||||
{ value: '50ms', label: 'Avg Response Time' },
|
||||
{ value: '24/7', label: 'Monitoring' },
|
||||
]
|
||||
|
||||
const team = [
|
||||
{
|
||||
name: 'Domain Intelligence',
|
||||
role: 'Core Feature',
|
||||
description: 'Advanced WHOIS and RDAP queries for accurate availability detection.',
|
||||
},
|
||||
{
|
||||
name: 'Price Tracking',
|
||||
role: 'Market Insights',
|
||||
description: 'Real-time TLD pricing from major registrars worldwide.',
|
||||
},
|
||||
{
|
||||
name: 'Instant Alerts',
|
||||
role: 'Notifications',
|
||||
description: 'Email and webhook notifications the moment domains become available.',
|
||||
},
|
||||
]
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
{/* Ambient glow */}
|
||||
<div className="fixed inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="text-center mb-16 sm:mb-20 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Globe className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">About pounce</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-6">
|
||||
Domain intelligence,
|
||||
<br />
|
||||
<span className="text-foreground-muted">simplified.</span>
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted max-w-2xl mx-auto">
|
||||
We built pounce to give domain investors, businesses, and individuals
|
||||
the tools they need to secure high-value domains before anyone else.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-20 animate-slide-up">
|
||||
{stats.map((stat) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className="p-6 bg-background-secondary/50 border border-border rounded-xl text-center"
|
||||
>
|
||||
<p className="text-heading-md sm:text-heading-lg font-display text-accent mb-1">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-ui-sm text-foreground-muted">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mission */}
|
||||
<section className="mb-20 animate-slide-up">
|
||||
<div className="p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl">
|
||||
<h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-4">
|
||||
Our Mission
|
||||
</h2>
|
||||
<p className="text-body-lg text-foreground-muted leading-relaxed">
|
||||
To democratize domain intelligence. We believe everyone should have access to
|
||||
professional-grade domain monitoring tools, not just large corporations with
|
||||
expensive enterprise solutions. pounce makes it possible to track any domain,
|
||||
understand market trends, and act fast when opportunities arise.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Values */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-8 text-center">
|
||||
What We Stand For
|
||||
</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{values.map((value, i) => (
|
||||
<div
|
||||
key={value.title}
|
||||
className="p-6 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover transition-all duration-300 animate-slide-up"
|
||||
style={{ animationDelay: `${i * 100}ms` }}
|
||||
>
|
||||
<div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
|
||||
<value.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-body font-medium text-foreground mb-2">{value.title}</h3>
|
||||
<p className="text-body-sm text-foreground-muted">{value.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section className="mb-20">
|
||||
<h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-8 text-center">
|
||||
What We Do
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{team.map((item, i) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="p-6 bg-background-secondary/30 border border-border rounded-xl flex flex-col sm:flex-row sm:items-center gap-4 animate-slide-up"
|
||||
style={{ animationDelay: `${i * 100}ms` }}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-body font-medium text-foreground">{item.name}</h3>
|
||||
<span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
|
||||
{item.role}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-body-sm text-foreground-muted">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="text-center animate-slide-up">
|
||||
<h2 className="text-heading-sm sm:text-heading-md font-medium text-foreground mb-4">
|
||||
Ready to get started?
|
||||
</h2>
|
||||
<p className="text-body text-foreground-muted mb-8">
|
||||
Join thousands of domain professionals using pounce.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
||||
<Link
|
||||
href="/register"
|
||||
className="flex items-center gap-2 px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Start Free
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="flex items-center gap-2 px-6 py-3 bg-background-secondary border border-border text-foreground font-medium rounded-xl hover:border-border-hover transition-all"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
198
frontend/src/app/blog/page.tsx
Normal file
198
frontend/src/app/blog/page.tsx
Normal file
@ -0,0 +1,198 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { BookOpen, Calendar, Clock, ArrowRight, TrendingUp, Shield, Zap } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const featuredPost = {
|
||||
title: 'The Complete Guide to Domain Investing in 2025',
|
||||
excerpt: 'Everything you need to know about finding, evaluating, and acquiring valuable domains in today\'s market.',
|
||||
category: 'Guide',
|
||||
date: 'Dec 5, 2025',
|
||||
readTime: '12 min read',
|
||||
slug: 'complete-guide-domain-investing-2025',
|
||||
}
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: 'Understanding TLD Pricing Trends',
|
||||
excerpt: 'How domain extension prices fluctuate and what it means for your portfolio.',
|
||||
category: 'Market Analysis',
|
||||
date: 'Dec 3, 2025',
|
||||
readTime: '5 min read',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
title: 'WHOIS Privacy: What You Need to Know',
|
||||
excerpt: 'A deep dive into domain privacy protection and why it matters.',
|
||||
category: 'Security',
|
||||
date: 'Nov 28, 2025',
|
||||
readTime: '7 min read',
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
title: 'Catching Expiring Domains: Best Practices',
|
||||
excerpt: 'Strategies for monitoring and acquiring domains as they drop.',
|
||||
category: 'Strategy',
|
||||
date: 'Nov 22, 2025',
|
||||
readTime: '6 min read',
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
title: 'New gTLDs: Opportunities and Risks',
|
||||
excerpt: 'Evaluating the potential of newer generic top-level domains.',
|
||||
category: 'Market Analysis',
|
||||
date: 'Nov 15, 2025',
|
||||
readTime: '8 min read',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
title: 'Domain Valuation 101',
|
||||
excerpt: 'Learn the fundamentals of assessing a domain\'s worth.',
|
||||
category: 'Guide',
|
||||
date: 'Nov 10, 2025',
|
||||
readTime: '10 min read',
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
title: 'API Integration: Automating Your Workflow',
|
||||
excerpt: 'How to use the pounce API to streamline domain monitoring.',
|
||||
category: 'Tutorial',
|
||||
date: 'Nov 5, 2025',
|
||||
readTime: '9 min read',
|
||||
icon: Zap,
|
||||
},
|
||||
]
|
||||
|
||||
const categories = ['All', 'Guide', 'Market Analysis', 'Security', 'Strategy', 'Tutorial']
|
||||
|
||||
export default function BlogPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
{/* Ambient glow */}
|
||||
<div className="fixed inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 right-1/4 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="text-center mb-12 sm:mb-16 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<BookOpen className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">pounce Blog</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Insights & Guides
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted max-w-xl mx-auto">
|
||||
Expert knowledge on domain investing, market trends, and strategies.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Categories */}
|
||||
<div className="flex flex-wrap justify-center gap-2 mb-12 animate-slide-up">
|
||||
{categories.map((cat, i) => (
|
||||
<button
|
||||
key={cat}
|
||||
className={`px-4 py-2 text-ui-sm font-medium rounded-lg transition-all ${
|
||||
i === 0
|
||||
? 'bg-foreground text-background'
|
||||
: 'bg-background-secondary border border-border text-foreground-muted hover:text-foreground hover:border-border-hover'
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Featured Post */}
|
||||
<div className="mb-12 animate-slide-up">
|
||||
<Link
|
||||
href={`/blog/${featuredPost.slug}`}
|
||||
className="group block p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl hover:border-accent/40 transition-all duration-300"
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 text-ui-sm text-accent mb-4">
|
||||
<span className="px-2 py-0.5 bg-accent/20 rounded-full">Featured</span>
|
||||
{featuredPost.category}
|
||||
</span>
|
||||
<h2 className="text-heading-md sm:text-heading-lg font-medium text-foreground mb-3 group-hover:text-accent transition-colors">
|
||||
{featuredPost.title}
|
||||
</h2>
|
||||
<p className="text-body text-foreground-muted mb-6 max-w-2xl">
|
||||
{featuredPost.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-ui-sm text-foreground-subtle">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-4 h-4" />
|
||||
{featuredPost.date}
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
{featuredPost.readTime}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Posts Grid */}
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{posts.map((post, i) => (
|
||||
<Link
|
||||
key={post.title}
|
||||
href={`/blog/${post.title.toLowerCase().replace(/\s+/g, '-')}`}
|
||||
className="group p-6 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover hover:bg-background-secondary transition-all duration-300 animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4 group-hover:bg-accent/10 transition-colors">
|
||||
<post.icon className="w-5 h-5 text-foreground-muted group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<span className="text-ui-xs text-accent mb-2 block">{post.category}</span>
|
||||
<h3 className="text-body font-medium text-foreground mb-2 group-hover:text-accent transition-colors line-clamp-2">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-foreground-muted mb-4 line-clamp-2">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-ui-xs text-foreground-subtle">
|
||||
<span>{post.date}</span>
|
||||
<span>{post.readTime}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Newsletter CTA */}
|
||||
<div className="mt-16 p-8 sm:p-10 bg-background-secondary/50 border border-border rounded-2xl text-center animate-slide-up">
|
||||
<h3 className="text-heading-sm font-medium text-foreground mb-3">
|
||||
Stay Updated
|
||||
</h3>
|
||||
<p className="text-body text-foreground-muted mb-6 max-w-md mx-auto">
|
||||
Get the latest domain insights and market analysis delivered to your inbox.
|
||||
</p>
|
||||
<form className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
className="flex-1 px-4 py-3 bg-background border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
Subscribe
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
209
frontend/src/app/careers/page.tsx
Normal file
209
frontend/src/app/careers/page.tsx
Normal file
@ -0,0 +1,209 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Briefcase, MapPin, Clock, ArrowRight, Code, Palette, LineChart, Users, Heart, Coffee, Laptop, Globe } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const openPositions = [
|
||||
{
|
||||
title: 'Senior Backend Engineer',
|
||||
department: 'Engineering',
|
||||
location: 'Remote (Europe)',
|
||||
type: 'Full-time',
|
||||
description: 'Build and scale our domain intelligence infrastructure using Python and FastAPI.',
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
title: 'Frontend Developer',
|
||||
department: 'Engineering',
|
||||
location: 'Remote (Worldwide)',
|
||||
type: 'Full-time',
|
||||
description: 'Create beautiful, performant user interfaces with React and Next.js.',
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
title: 'Data Engineer',
|
||||
department: 'Data',
|
||||
location: 'Zurich, Switzerland',
|
||||
type: 'Full-time',
|
||||
description: 'Design data pipelines for domain pricing and market analytics.',
|
||||
icon: LineChart,
|
||||
},
|
||||
{
|
||||
title: 'Customer Success Manager',
|
||||
department: 'Customer Success',
|
||||
location: 'Remote (Europe)',
|
||||
type: 'Full-time',
|
||||
description: 'Help our customers succeed and get the most out of pounce.',
|
||||
icon: Users,
|
||||
},
|
||||
]
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Globe,
|
||||
title: 'Remote-First',
|
||||
description: 'Work from anywhere in the world with flexible hours.',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: 'Health & Wellness',
|
||||
description: 'Comprehensive health insurance and wellness budget.',
|
||||
},
|
||||
{
|
||||
icon: Coffee,
|
||||
title: 'Learning Budget',
|
||||
description: 'Annual budget for courses, conferences, and books.',
|
||||
},
|
||||
{
|
||||
icon: Laptop,
|
||||
title: 'Equipment',
|
||||
description: 'Top-of-the-line hardware and home office setup.',
|
||||
},
|
||||
]
|
||||
|
||||
const values = [
|
||||
'We ship fast and iterate based on feedback',
|
||||
'We value transparency and open communication',
|
||||
'We prioritize user experience over features',
|
||||
'We believe in work-life balance',
|
||||
]
|
||||
|
||||
export default function CareersPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
{/* Ambient glow */}
|
||||
<div className="fixed inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 right-1/4 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="text-center mb-16 sm:mb-20 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Briefcase className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Join Our Team</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-6">
|
||||
Build the future of
|
||||
<br />
|
||||
<span className="text-foreground-muted">domain intelligence</span>
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted max-w-2xl mx-auto">
|
||||
We're a small, focused team building tools that help thousands of people
|
||||
monitor and acquire valuable domains. Join us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Values */}
|
||||
<div className="mb-16 p-8 sm:p-10 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent border border-accent/20 rounded-2xl animate-slide-up">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">How We Work</h2>
|
||||
<ul className="grid sm:grid-cols-2 gap-3">
|
||||
{values.map((value) => (
|
||||
<li key={value} className="flex items-center gap-3 text-body text-foreground-muted">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" />
|
||||
{value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Benefits */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-8 text-center">Benefits & Perks</h2>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{benefits.map((benefit, i) => (
|
||||
<div
|
||||
key={benefit.title}
|
||||
className="p-6 bg-background-secondary/50 border border-border rounded-xl animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
|
||||
<benefit.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-body font-medium text-foreground mb-1">{benefit.title}</h3>
|
||||
<p className="text-body-sm text-foreground-muted">{benefit.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Open Positions */}
|
||||
<section className="mb-16">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-8 text-center">
|
||||
Open Positions
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{openPositions.map((position, i) => (
|
||||
<div
|
||||
key={position.title}
|
||||
className="group p-6 bg-background-secondary/50 border border-border rounded-xl hover:border-border-hover transition-all duration-300 animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-background-tertiary rounded-xl flex items-center justify-center shrink-0 group-hover:bg-accent/10 transition-colors">
|
||||
<position.icon className="w-6 h-6 text-foreground-muted group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-body-lg font-medium text-foreground mb-1 group-hover:text-accent transition-colors">
|
||||
{position.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-foreground-muted mb-3">{position.description}</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
|
||||
{position.department}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-ui-xs text-foreground-subtle">
|
||||
<MapPin className="w-3 h-3" />
|
||||
{position.location}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-ui-xs text-foreground-subtle">
|
||||
<Clock className="w-3 h-3" />
|
||||
{position.type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={`mailto:careers@pounce.dev?subject=Application: ${position.title}`}
|
||||
className="shrink-0 flex items-center gap-2 px-5 py-2.5 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 transition-all"
|
||||
>
|
||||
Apply
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="text-center p-8 sm:p-10 bg-background-secondary/30 border border-border rounded-2xl animate-slide-up">
|
||||
<h3 className="text-heading-sm font-medium text-foreground mb-3">
|
||||
Don't see the right role?
|
||||
</h3>
|
||||
<p className="text-body text-foreground-muted mb-6 max-w-lg mx-auto">
|
||||
We're always looking for talented people. Send us your resume
|
||||
and we'll keep you in mind for future opportunities.
|
||||
</p>
|
||||
<Link
|
||||
href="mailto:careers@pounce.dev?subject=General Application"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-background font-medium rounded-xl hover:bg-accent-hover transition-all"
|
||||
>
|
||||
Send General Application
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
259
frontend/src/app/contact/page.tsx
Normal file
259
frontend/src/app/contact/page.tsx
Normal file
@ -0,0 +1,259 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Mail, MessageSquare, Clock, Send, Loader2, CheckCircle, MapPin, Building } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const contactMethods = [
|
||||
{
|
||||
icon: Mail,
|
||||
title: 'Email',
|
||||
description: 'For general inquiries and support',
|
||||
value: 'support@pounce.dev',
|
||||
href: 'mailto:support@pounce.dev',
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: 'Live Chat',
|
||||
description: 'Available Mon-Fri, 9am-6pm CET',
|
||||
value: 'Start a conversation',
|
||||
href: '#',
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: 'Response Time',
|
||||
description: 'We typically respond within',
|
||||
value: '< 24 hours',
|
||||
href: null,
|
||||
},
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
q: 'How do I reset my password?',
|
||||
a: 'Click "Forgot Password" on the login page and follow the instructions sent to your email.',
|
||||
},
|
||||
{
|
||||
q: 'Can I upgrade my plan mid-cycle?',
|
||||
a: 'Yes, upgrades are applied immediately and you\'ll only pay the prorated difference.',
|
||||
},
|
||||
{
|
||||
q: 'Do you offer refunds?',
|
||||
a: 'We offer a 14-day money-back guarantee on all paid plans, no questions asked.',
|
||||
},
|
||||
]
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formState, setFormState] = useState<'idle' | 'loading' | 'success'>('idle')
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
})
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setFormState('loading')
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
setFormState('success')
|
||||
|
||||
// Reset after showing success
|
||||
setTimeout(() => {
|
||||
setFormState('idle')
|
||||
setFormData({ name: '', email: '', subject: '', message: '' })
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
{/* Ambient glow */}
|
||||
<div className="fixed inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-1/3 w-[500px] h-[400px] bg-accent/[0.02] rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="text-center mb-12 sm:mb-16 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Mail className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Get in Touch</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] md:text-[3.75rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Contact Us
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted max-w-xl mx-auto">
|
||||
Have a question or need help? We're here for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Methods */}
|
||||
<div className="grid sm:grid-cols-3 gap-4 mb-12 animate-slide-up">
|
||||
{contactMethods.map((method) => (
|
||||
<div
|
||||
key={method.title}
|
||||
className="p-6 bg-background-secondary/50 border border-border rounded-xl"
|
||||
>
|
||||
<div className="w-10 h-10 bg-background-tertiary rounded-lg flex items-center justify-center mb-4">
|
||||
<method.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-body font-medium text-foreground mb-1">{method.title}</h3>
|
||||
<p className="text-body-sm text-foreground-muted mb-3">{method.description}</p>
|
||||
{method.href ? (
|
||||
<a
|
||||
href={method.href}
|
||||
className="text-body-sm text-accent hover:text-accent-hover transition-colors"
|
||||
>
|
||||
{method.value}
|
||||
</a>
|
||||
) : (
|
||||
<span className="text-body-sm text-foreground font-medium">{method.value}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* Contact Form */}
|
||||
<div className="animate-slide-up">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Send us a message</h2>
|
||||
|
||||
{formState === 'success' ? (
|
||||
<div className="p-8 bg-accent-muted border border-accent/20 rounded-2xl text-center">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<CheckCircle className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<h3 className="text-body-lg font-medium text-foreground mb-2">Message Sent!</h3>
|
||||
<p className="text-body-sm text-foreground-muted">
|
||||
We'll get back to you within 24 hours.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-ui-sm text-foreground-muted mb-2 block">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-ui-sm text-foreground-muted mb-2 block">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-ui-sm text-foreground-muted mb-2 block">Subject</label>
|
||||
<select
|
||||
value={formData.subject}
|
||||
onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all"
|
||||
>
|
||||
<option value="">Select a topic</option>
|
||||
<option value="support">Technical Support</option>
|
||||
<option value="billing">Billing Question</option>
|
||||
<option value="sales">Sales Inquiry</option>
|
||||
<option value="partnership">Partnership</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-ui-sm text-foreground-muted mb-2 block">Message</label>
|
||||
<textarea
|
||||
value={formData.message}
|
||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 bg-background-secondary border border-border rounded-xl text-body text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-all resize-none"
|
||||
placeholder="How can we help?"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formState === 'loading'}
|
||||
className="w-full py-3.5 bg-foreground text-background font-medium rounded-xl hover:bg-foreground/90 disabled:opacity-50 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
{formState === 'loading' ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Send Message
|
||||
<Send className="w-4 h-4" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* FAQ & Info */}
|
||||
<div className="space-y-8 animate-slide-up" style={{ animationDelay: '100ms' }}>
|
||||
{/* Quick FAQs */}
|
||||
<div>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Quick Answers</h2>
|
||||
<div className="space-y-3">
|
||||
{faqs.map((faq) => (
|
||||
<div
|
||||
key={faq.q}
|
||||
className="p-5 bg-background-secondary/50 border border-border rounded-xl"
|
||||
>
|
||||
<h3 className="text-body-sm font-medium text-foreground mb-2">{faq.q}</h3>
|
||||
<p className="text-body-sm text-foreground-muted">{faq.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Office Info */}
|
||||
<div className="p-6 bg-background-secondary/30 border border-border rounded-xl">
|
||||
<h3 className="text-body font-medium text-foreground mb-4 flex items-center gap-2">
|
||||
<Building className="w-4 h-4 text-accent" />
|
||||
Company Info
|
||||
</h3>
|
||||
<div className="space-y-3 text-body-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-4 h-4 text-foreground-subtle mt-0.5" />
|
||||
<div>
|
||||
<p className="text-foreground">pounce AG</p>
|
||||
<p className="text-foreground-muted">Zurich, Switzerland</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail className="w-4 h-4 text-foreground-subtle mt-0.5" />
|
||||
<div>
|
||||
<p className="text-foreground">support@pounce.dev</p>
|
||||
<p className="text-foreground-muted">General inquiries</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
202
frontend/src/app/cookies/page.tsx
Normal file
202
frontend/src/app/cookies/page.tsx
Normal file
@ -0,0 +1,202 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Cookie, Calendar, Check } from 'lucide-react'
|
||||
|
||||
const cookieTypes = [
|
||||
{
|
||||
name: 'Essential Cookies',
|
||||
required: true,
|
||||
description: 'These cookies are necessary for the website to function and cannot be disabled.',
|
||||
examples: [
|
||||
{ name: 'session_id', purpose: 'Maintains your login session', duration: 'Session' },
|
||||
{ name: 'csrf_token', purpose: 'Security token to prevent attacks', duration: 'Session' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Functional Cookies',
|
||||
required: false,
|
||||
description: 'These cookies enable enhanced functionality and personalization.',
|
||||
examples: [
|
||||
{ name: 'theme', purpose: 'Remembers your display preferences', duration: '1 year' },
|
||||
{ name: 'language', purpose: 'Stores your language preference', duration: '1 year' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Analytics Cookies',
|
||||
required: false,
|
||||
description: 'These cookies help us understand how visitors interact with our website.',
|
||||
examples: [
|
||||
{ name: '_ga', purpose: 'Google Analytics identifier', duration: '2 years' },
|
||||
{ name: '_gid', purpose: 'Google Analytics daily identifier', duration: '24 hours' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'What Are Cookies?',
|
||||
content: `
|
||||
<p>Cookies are small text files that are placed on your device when you visit a website. They are widely used to make websites work more efficiently and provide information to website owners.</p>
|
||||
<p>We use cookies and similar technologies (such as local storage) to improve your experience on our website.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'How We Use Cookies',
|
||||
content: `
|
||||
<p>We use cookies for several purposes:</p>
|
||||
<ul>
|
||||
<li><strong>Authentication:</strong> To keep you logged in and maintain your session</li>
|
||||
<li><strong>Security:</strong> To protect against fraud and unauthorized access</li>
|
||||
<li><strong>Preferences:</strong> To remember your settings and preferences</li>
|
||||
<li><strong>Analytics:</strong> To understand how you use our service and improve it</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'Third-Party Cookies',
|
||||
content: `
|
||||
<p>Some cookies are placed by third-party services that appear on our pages:</p>
|
||||
<ul>
|
||||
<li><strong>Google Analytics:</strong> For website analytics (can be disabled)</li>
|
||||
<li><strong>Stripe:</strong> For secure payment processing</li>
|
||||
</ul>
|
||||
<p>These third parties have their own privacy policies governing the use of cookies.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'Managing Cookies',
|
||||
content: `
|
||||
<p>You can control and manage cookies in several ways:</p>
|
||||
<ul>
|
||||
<li><strong>Browser Settings:</strong> Most browsers allow you to refuse or delete cookies through their settings</li>
|
||||
<li><strong>Our Settings:</strong> You can adjust your cookie preferences using our cookie consent tool</li>
|
||||
<li><strong>Opt-Out Links:</strong> Some analytics providers offer opt-out browser extensions</li>
|
||||
</ul>
|
||||
<p>Note that disabling certain cookies may affect the functionality of our website.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'Updates to This Policy',
|
||||
content: `
|
||||
<p>We may update this Cookie Policy from time to time to reflect changes in technology, legislation, or our data practices. We encourage you to periodically review this page for the latest information.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: 'Contact Us',
|
||||
content: `
|
||||
<p>If you have questions about our use of cookies, please contact us at:</p>
|
||||
<ul>
|
||||
<li>Email: privacy@pounce.dev</li>
|
||||
<li>Address: pounce AG, Zurich, Switzerland</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function CookiesPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="mb-12 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Cookie className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Legal</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Cookie Policy
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-body-sm text-foreground-muted">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Last Updated: December 8, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Introduction */}
|
||||
<div className="prose-custom mb-12 animate-slide-up">
|
||||
<p className="text-body-lg text-foreground-muted leading-relaxed">
|
||||
This Cookie Policy explains how pounce uses cookies and similar technologies
|
||||
to recognize you when you visit our website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Cookie Types */}
|
||||
<section className="mb-12 animate-slide-up">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">
|
||||
Types of Cookies We Use
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{cookieTypes.map((type) => (
|
||||
<div
|
||||
key={type.name}
|
||||
className="p-6 bg-background-secondary/50 border border-border rounded-xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-body font-medium text-foreground">{type.name}</h3>
|
||||
{type.required ? (
|
||||
<span className="text-ui-xs text-foreground-subtle bg-background-tertiary px-2 py-0.5 rounded-full">
|
||||
Required
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-ui-xs text-accent bg-accent-muted px-2 py-0.5 rounded-full">
|
||||
Optional
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-body-sm text-foreground-muted mb-4">{type.description}</p>
|
||||
<div className="bg-background-tertiary rounded-lg overflow-hidden">
|
||||
<table className="w-full text-body-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left text-foreground-subtle font-medium px-4 py-2">Cookie</th>
|
||||
<th className="text-left text-foreground-subtle font-medium px-4 py-2">Purpose</th>
|
||||
<th className="text-left text-foreground-subtle font-medium px-4 py-2 hidden sm:table-cell">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{type.examples.map((cookie) => (
|
||||
<tr key={cookie.name} className="border-b border-border last:border-0">
|
||||
<td className="px-4 py-2 font-mono text-foreground">{cookie.name}</td>
|
||||
<td className="px-4 py-2 text-foreground-muted">{cookie.purpose}</td>
|
||||
<td className="px-4 py-2 text-foreground-muted hidden sm:table-cell">{cookie.duration}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Sections */}
|
||||
<div className="space-y-10">
|
||||
{sections.map((section, i) => (
|
||||
<section
|
||||
key={section.title}
|
||||
className="animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-4">
|
||||
{section.title}
|
||||
</h2>
|
||||
<div
|
||||
className="prose-custom text-body text-foreground-muted leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-2 [&_li]:text-foreground-muted [&_strong]:text-foreground [&_p]:mb-4"
|
||||
dangerouslySetInnerHTML={{ __html: section.content }}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
178
frontend/src/app/imprint/page.tsx
Normal file
178
frontend/src/app/imprint/page.tsx
Normal file
@ -0,0 +1,178 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Building, Mail, Globe, FileText, Shield } from 'lucide-react'
|
||||
|
||||
const companyInfo = [
|
||||
{
|
||||
icon: Building,
|
||||
label: 'Company Name',
|
||||
value: 'pounce AG',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
label: 'Registered Office',
|
||||
value: 'Zurich, Switzerland',
|
||||
},
|
||||
{
|
||||
icon: FileText,
|
||||
label: 'Registration',
|
||||
value: 'Commercial Register Zurich, CHE-XXX.XXX.XXX',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: 'VAT Number',
|
||||
value: 'CHE-XXX.XXX.XXX MWST',
|
||||
},
|
||||
]
|
||||
|
||||
const contacts = [
|
||||
{
|
||||
type: 'General Inquiries',
|
||||
email: 'info@pounce.dev',
|
||||
},
|
||||
{
|
||||
type: 'Technical Support',
|
||||
email: 'support@pounce.dev',
|
||||
},
|
||||
{
|
||||
type: 'Legal / Privacy',
|
||||
email: 'legal@pounce.dev',
|
||||
},
|
||||
{
|
||||
type: 'Press / Media',
|
||||
email: 'press@pounce.dev',
|
||||
},
|
||||
]
|
||||
|
||||
export default function ImprintPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="mb-12 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Building className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Legal</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Imprint
|
||||
</h1>
|
||||
<p className="text-body-lg text-foreground-muted">
|
||||
Legal information about pounce AG
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Company Information */}
|
||||
<section className="mb-12 animate-slide-up">
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Company Information</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{companyInfo.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="p-5 bg-background-secondary/50 border border-border rounded-xl"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<item.icon className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-subtle">{item.label}</span>
|
||||
</div>
|
||||
<p className="text-body font-medium text-foreground">{item.value}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Management */}
|
||||
<section className="mb-12 animate-slide-up" style={{ animationDelay: '50ms' }}>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Management</h2>
|
||||
<div className="p-6 bg-background-secondary/50 border border-border rounded-xl">
|
||||
<p className="text-body text-foreground mb-2">
|
||||
<strong className="text-foreground">Managing Director:</strong>
|
||||
</p>
|
||||
<p className="text-body text-foreground-muted">
|
||||
The company is represented by its Board of Directors in accordance with Swiss law.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact */}
|
||||
<section className="mb-12 animate-slide-up" style={{ animationDelay: '100ms' }}>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Contact</h2>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{contacts.map((contact) => (
|
||||
<div
|
||||
key={contact.type}
|
||||
className="p-5 bg-background-secondary/50 border border-border rounded-xl"
|
||||
>
|
||||
<p className="text-ui-sm text-foreground-subtle mb-1">{contact.type}</p>
|
||||
<a
|
||||
href={`mailto:${contact.email}`}
|
||||
className="text-body text-accent hover:text-accent-hover transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Mail className="w-4 h-4" />
|
||||
{contact.email}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<section className="mb-12 animate-slide-up" style={{ animationDelay: '150ms' }}>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Disclaimer</h2>
|
||||
<div className="space-y-6 text-body text-foreground-muted leading-relaxed">
|
||||
<div>
|
||||
<h3 className="text-body font-medium text-foreground mb-2">Liability for Content</h3>
|
||||
<p>
|
||||
The contents of our pages have been created with the utmost care. However, we cannot
|
||||
guarantee the contents' accuracy, completeness, or topicality. According to statutory
|
||||
provisions, we are responsible for our own content on these pages.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-body font-medium text-foreground mb-2">Liability for Links</h3>
|
||||
<p>
|
||||
Our website contains links to external third-party websites over whose content we have
|
||||
no influence. Therefore, we cannot assume any liability for this external content. The
|
||||
respective provider or operator of the linked pages is always responsible for the contents
|
||||
of the linked pages.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-body font-medium text-foreground mb-2">Copyright</h3>
|
||||
<p>
|
||||
The content and works created by the site operators on these pages are subject to Swiss
|
||||
copyright law. Duplication, processing, distribution, or any form of commercialization of
|
||||
such material beyond the scope of the copyright law shall require the prior written consent
|
||||
of its respective author or creator.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Regulatory Information */}
|
||||
<section className="animate-slide-up" style={{ animationDelay: '200ms' }}>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-6">Regulatory Information</h2>
|
||||
<div className="p-6 bg-background-secondary/30 border border-border rounded-xl">
|
||||
<p className="text-body text-foreground-muted leading-relaxed">
|
||||
pounce AG is a company registered in Switzerland. We operate in compliance with Swiss
|
||||
law and applicable EU regulations including GDPR for EU residents. For complaints or
|
||||
regulatory matters, please contact our legal department at{' '}
|
||||
<a href="mailto:legal@pounce.dev" className="text-accent hover:text-accent-hover">
|
||||
legal@pounce.dev
|
||||
</a>.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
158
frontend/src/app/privacy/page.tsx
Normal file
158
frontend/src/app/privacy/page.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Shield, Calendar } from 'lucide-react'
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: '1. Information We Collect',
|
||||
content: `
|
||||
<p>We collect information you provide directly to us, including:</p>
|
||||
<ul>
|
||||
<li><strong>Account Information:</strong> When you create an account, we collect your email address and password (stored securely using industry-standard encryption).</li>
|
||||
<li><strong>Domain Data:</strong> Domains you add to your watchlist and their monitoring preferences.</li>
|
||||
<li><strong>Payment Information:</strong> If you subscribe to a paid plan, our payment processor (Stripe) collects and processes your payment information. We do not store credit card numbers.</li>
|
||||
<li><strong>Communications:</strong> When you contact us, we collect the information you provide in your messages.</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '2. How We Use Your Information',
|
||||
content: `
|
||||
<p>We use the information we collect to:</p>
|
||||
<ul>
|
||||
<li>Provide, maintain, and improve our services</li>
|
||||
<li>Process transactions and send related information</li>
|
||||
<li>Send you technical notices, updates, security alerts, and support messages</li>
|
||||
<li>Respond to your comments, questions, and requests</li>
|
||||
<li>Monitor and analyze trends, usage, and activities</li>
|
||||
<li>Detect, investigate, and prevent fraudulent transactions and abuse</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '3. Information Sharing',
|
||||
content: `
|
||||
<p>We do not sell, trade, or rent your personal information to third parties. We may share your information only in the following circumstances:</p>
|
||||
<ul>
|
||||
<li><strong>Service Providers:</strong> We work with third-party service providers who need access to your information to perform services on our behalf (e.g., payment processing, email delivery).</li>
|
||||
<li><strong>Legal Requirements:</strong> We may disclose your information if required by law or in response to valid legal requests.</li>
|
||||
<li><strong>Business Transfers:</strong> If pounce is involved in a merger, acquisition, or sale of assets, your information may be transferred as part of that transaction.</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '4. Data Security',
|
||||
content: `
|
||||
<p>We implement appropriate technical and organizational measures to protect your personal information, including:</p>
|
||||
<ul>
|
||||
<li>Encryption of data in transit (TLS/SSL) and at rest</li>
|
||||
<li>Secure password hashing using bcrypt</li>
|
||||
<li>Regular security audits and vulnerability assessments</li>
|
||||
<li>Access controls and authentication for all systems</li>
|
||||
<li>Regular backups with encrypted storage</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '5. Data Retention',
|
||||
content: `
|
||||
<p>We retain your personal information for as long as your account is active or as needed to provide you services. You can request deletion of your account and associated data at any time by contacting us at privacy@pounce.dev.</p>
|
||||
<p>We may retain certain information as required by law or for legitimate business purposes, such as fraud prevention.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '6. Your Rights',
|
||||
content: `
|
||||
<p>Depending on your location, you may have the following rights regarding your personal information:</p>
|
||||
<ul>
|
||||
<li><strong>Access:</strong> Request a copy of the personal information we hold about you.</li>
|
||||
<li><strong>Correction:</strong> Request that we correct inaccurate or incomplete information.</li>
|
||||
<li><strong>Deletion:</strong> Request that we delete your personal information.</li>
|
||||
<li><strong>Data Portability:</strong> Request a copy of your data in a machine-readable format.</li>
|
||||
<li><strong>Objection:</strong> Object to processing of your personal information.</li>
|
||||
</ul>
|
||||
<p>To exercise any of these rights, please contact us at privacy@pounce.dev.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '7. International Data Transfers',
|
||||
content: `
|
||||
<p>Your information may be transferred to and processed in countries other than your own. We ensure appropriate safeguards are in place for such transfers, including standard contractual clauses approved by relevant authorities.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '8. Changes to This Policy',
|
||||
content: `
|
||||
<p>We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new policy on this page and updating the "Last Updated" date. We encourage you to review this policy periodically.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '9. Contact Us',
|
||||
content: `
|
||||
<p>If you have any questions about this Privacy Policy, please contact us at:</p>
|
||||
<ul>
|
||||
<li>Email: privacy@pounce.dev</li>
|
||||
<li>Address: pounce AG, Zurich, Switzerland</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function PrivacyPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="mb-12 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<Shield className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Legal</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Privacy Policy
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-body-sm text-foreground-muted">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Last Updated: December 8, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Introduction */}
|
||||
<div className="prose-custom mb-12 animate-slide-up">
|
||||
<p className="text-body-lg text-foreground-muted leading-relaxed">
|
||||
At pounce, we take your privacy seriously. This Privacy Policy explains how we collect,
|
||||
use, disclose, and safeguard your information when you use our domain monitoring service.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sections */}
|
||||
<div className="space-y-10">
|
||||
{sections.map((section, i) => (
|
||||
<section
|
||||
key={section.title}
|
||||
className="animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-4">
|
||||
{section.title}
|
||||
</h2>
|
||||
<div
|
||||
className="prose-custom text-body text-foreground-muted leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-2 [&_li]:text-foreground-muted [&_strong]:text-foreground [&_p]:mb-4"
|
||||
dangerouslySetInnerHTML={{ __html: section.content }}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
192
frontend/src/app/terms/page.tsx
Normal file
192
frontend/src/app/terms/page.tsx
Normal file
@ -0,0 +1,192 @@
|
||||
'use client'
|
||||
|
||||
import { Header } from '@/components/Header'
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { FileText, Calendar } from 'lucide-react'
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: '1. Acceptance of Terms',
|
||||
content: `
|
||||
<p>By accessing or using pounce ("Service"), you agree to be bound by these Terms of Service ("Terms"). If you disagree with any part of the terms, you may not access the Service.</p>
|
||||
<p>These Terms apply to all visitors, users, and others who access or use the Service.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '2. Description of Service',
|
||||
content: `
|
||||
<p>pounce provides domain monitoring and intelligence services, including:</p>
|
||||
<ul>
|
||||
<li>Domain availability monitoring and alerts</li>
|
||||
<li>WHOIS and DNS lookup services</li>
|
||||
<li>TLD pricing information and comparisons</li>
|
||||
<li>Domain expiration tracking</li>
|
||||
<li>API access for programmatic use (Enterprise plans)</li>
|
||||
</ul>
|
||||
<p>We reserve the right to modify, suspend, or discontinue any aspect of the Service at any time.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '3. User Accounts',
|
||||
content: `
|
||||
<p>When you create an account with us, you must provide accurate, complete, and current information. Failure to do so constitutes a breach of the Terms.</p>
|
||||
<p>You are responsible for:</p>
|
||||
<ul>
|
||||
<li>Maintaining the confidentiality of your account and password</li>
|
||||
<li>Restricting access to your account</li>
|
||||
<li>All activities that occur under your account</li>
|
||||
</ul>
|
||||
<p>You must notify us immediately upon becoming aware of any breach of security or unauthorized use of your account.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '4. Subscription and Billing',
|
||||
content: `
|
||||
<p><strong>Free Tier:</strong> Basic features are available at no cost with limitations on the number of domains monitored.</p>
|
||||
<p><strong>Paid Plans:</strong> Subscription fees are billed in advance on a monthly basis. The subscription automatically renews unless cancelled.</p>
|
||||
<p><strong>Refunds:</strong> We offer a 14-day money-back guarantee on all paid plans. After this period, subscriptions are non-refundable.</p>
|
||||
<p><strong>Price Changes:</strong> We reserve the right to modify subscription fees. Changes will be communicated at least 30 days in advance.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '5. Acceptable Use',
|
||||
content: `
|
||||
<p>You agree not to use the Service to:</p>
|
||||
<ul>
|
||||
<li>Violate any applicable laws or regulations</li>
|
||||
<li>Infringe upon intellectual property rights</li>
|
||||
<li>Transmit malware, spam, or other harmful code</li>
|
||||
<li>Attempt to gain unauthorized access to any systems</li>
|
||||
<li>Interfere with or disrupt the Service</li>
|
||||
<li>Scrape or harvest data without authorization</li>
|
||||
<li>Use automated systems to access the Service excessively</li>
|
||||
<li>Resell or redistribute the Service without permission</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '6. Intellectual Property',
|
||||
content: `
|
||||
<p>The Service and its original content, features, and functionality are owned by pounce AG and are protected by international copyright, trademark, patent, trade secret, and other intellectual property laws.</p>
|
||||
<p>You retain ownership of any data you provide to the Service. By using the Service, you grant us a license to use this data solely to provide and improve the Service.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '7. Data Accuracy',
|
||||
content: `
|
||||
<p>While we strive to provide accurate domain information, we cannot guarantee the accuracy, completeness, or timeliness of all data. Domain availability information is based on queries to public databases (WHOIS, RDAP, DNS) and may not reflect real-time status.</p>
|
||||
<p>You acknowledge that:</p>
|
||||
<ul>
|
||||
<li>Domain registration decisions should not be based solely on our Service</li>
|
||||
<li>We are not responsible for failed domain acquisitions</li>
|
||||
<li>Pricing information is provided for reference and may vary</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '8. Limitation of Liability',
|
||||
content: `
|
||||
<p>To the maximum extent permitted by law, pounce AG shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including but not limited to:</p>
|
||||
<ul>
|
||||
<li>Loss of profits, data, or business opportunities</li>
|
||||
<li>Service interruptions or downtime</li>
|
||||
<li>Failed domain registrations or acquisitions</li>
|
||||
<li>Inaccurate information provided by the Service</li>
|
||||
</ul>
|
||||
<p>Our total liability shall not exceed the amount paid by you for the Service in the twelve months preceding the claim.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '9. Termination',
|
||||
content: `
|
||||
<p>We may terminate or suspend your account immediately, without prior notice, for any reason, including breach of these Terms.</p>
|
||||
<p>Upon termination:</p>
|
||||
<ul>
|
||||
<li>Your right to use the Service will immediately cease</li>
|
||||
<li>We may delete your account data</li>
|
||||
<li>Provisions that by their nature should survive will remain in effect</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '10. Governing Law',
|
||||
content: `
|
||||
<p>These Terms shall be governed by and construed in accordance with the laws of Switzerland, without regard to conflict of law provisions.</p>
|
||||
<p>Any disputes arising from these Terms or the Service shall be subject to the exclusive jurisdiction of the courts in Zurich, Switzerland.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '11. Changes to Terms',
|
||||
content: `
|
||||
<p>We reserve the right to modify or replace these Terms at any time. Material changes will be notified at least 30 days before taking effect.</p>
|
||||
<p>By continuing to access or use our Service after revisions become effective, you agree to be bound by the revised terms.</p>
|
||||
`,
|
||||
},
|
||||
{
|
||||
title: '12. Contact Information',
|
||||
content: `
|
||||
<p>For any questions about these Terms, please contact us at:</p>
|
||||
<ul>
|
||||
<li>Email: legal@pounce.dev</li>
|
||||
<li>Address: pounce AG, Zurich, Switzerland</li>
|
||||
</ul>
|
||||
`,
|
||||
},
|
||||
]
|
||||
|
||||
export default function TermsPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background relative flex flex-col">
|
||||
<Header />
|
||||
|
||||
<main className="relative pt-32 sm:pt-36 pb-20 px-4 sm:px-6 flex-1">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Hero */}
|
||||
<div className="mb-12 animate-fade-in">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1.5 bg-background-secondary/80 backdrop-blur-sm border border-border rounded-full mb-6">
|
||||
<FileText className="w-4 h-4 text-accent" />
|
||||
<span className="text-ui-sm text-foreground-muted">Legal</span>
|
||||
</div>
|
||||
<h1 className="font-display text-[2.25rem] sm:text-[3rem] leading-[1.1] tracking-[-0.035em] text-foreground mb-4">
|
||||
Terms of Service
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 text-body-sm text-foreground-muted">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Last Updated: December 8, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Introduction */}
|
||||
<div className="prose-custom mb-12 animate-slide-up">
|
||||
<p className="text-body-lg text-foreground-muted leading-relaxed">
|
||||
Please read these Terms of Service carefully before using pounce.
|
||||
Your access to and use of the Service is conditioned on your acceptance of these Terms.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sections */}
|
||||
<div className="space-y-10">
|
||||
{sections.map((section, i) => (
|
||||
<section
|
||||
key={section.title}
|
||||
className="animate-slide-up"
|
||||
style={{ animationDelay: `${i * 50}ms` }}
|
||||
>
|
||||
<h2 className="text-heading-sm font-medium text-foreground mb-4">
|
||||
{section.title}
|
||||
</h2>
|
||||
<div
|
||||
className="prose-custom text-body text-foreground-muted leading-relaxed [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-2 [&_li]:text-foreground-muted [&_strong]:text-foreground [&_p]:mb-4"
|
||||
dangerouslySetInnerHTML={{ __html: section.content }}
|
||||
/>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user