Landing Page for Sveltekit and Supabase AI Generator

[tonyoconnell]

Content language / 内容语言

English

Major content / 主要内容

Hero section with a captivating headline, brief description, and call-to-action button

Headline: "Build SvelteKit Apps at the Speed of Thought"
Subheadline: "Harness the power of AI to accelerate your development process"
Background: Animated AI-generated code snippets that fade in and out
CTA Button: shadcn UI Button component with a gradient hover effect
Floating 3D icons representing Svelte, AI, and coding concepts
Subtle particle animation in the background to represent AI "thinking"

Features showcase with interactive demos

AI Component Generator:

shadcn UI Card component to house the demo
Text area for user input (requirements)
"Generate" button with loading spinner animation
Live preview area with syntax-highlighted code
Option to copy generated code (with toast notification)

Code Explanation Tool:

Split-screen layout: code on left, explanation on right
Highlight specific code parts as explanation appears
shadcn UI Accordion for different explanation levels (basic, intermediate, advanced)

Performance Optimization Suggestions:

Before/After comparison using shadcn UI Tabs
Animated bar charts showing performance improvements
Tooltips with detailed explanations on hover

Testimonials and use cases carousel

shadcn UI Carousel component for smooth transitions
Each testimonial in a Card component with user avatar, name, and company
Star rating system using shadcn UI custom Rating component
"Featured Projects" section with hoverable image cards
Expanding animation on hover to show project details
Auto-scroll functionality with pause on hover

Pricing section with tiered plans

shadcn UI Table for comparing features across plans
Animated toggle for monthly/yearly pricing
Highlight recommended plan with a subtle pulse animation
shadcn UI HoverCard for displaying detailed feature explanations

FAQ section with expandable questions

shadcn UI Accordion for smooth expand/collapse animations
Search bar to quickly find relevant questions
Animated illustrations that correspond to each FAQ category

Call-to-action footer

Gradient background with floating code snippets
Email input field with inline validation
"Join Waitlist" button with confetti animation on click
Social proof: Animated counter showing number of developers already using the tool

Navigation and overall UI

shadcn UI Navbar with smooth scroll to sections
Dark mode toggle using shadcn UI Switch component
Subtle parallax scrolling effect for depth
Loading skeleton screens for dynamic content
Micro-interactions: button hover effects, input focus animations

Style theme / 样式主题

dark

Referred image / 参考图片

No response