Merge version_2 into main #2
@@ -14,7 +14,7 @@ export default function AuthPage() {
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Customize", id: "customize" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -35,9 +35,7 @@ export default function AuthPage() {
|
||||
brandName="CodeFlow"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "/auth/signup",
|
||||
}}
|
||||
text: "Get Started", href: "/auth/signup"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -50,33 +48,13 @@ export default function AuthPage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Secure Account",
|
||||
description: "Your code, designs, and projects are protected with enterprise-grade security and encryption. Full control over your data.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=2",
|
||||
imageAlt: "Secure dashboard interface",
|
||||
},
|
||||
id: "1", title: "Secure Account", description: "Your code, designs, and projects are protected with enterprise-grade security and encryption. Full control over your data.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=2", imageAlt: "Secure dashboard interface"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Generation History",
|
||||
description: "Access all your past generations instantly. Track your progress, review previous projects, and reuse successful patterns.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=2",
|
||||
imageAlt: "Generation history dashboard",
|
||||
},
|
||||
id: "2", title: "Generation History", description: "Access all your past generations instantly. Track your progress, review previous projects, and reuse successful patterns.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=2", imageAlt: "Generation history dashboard"},
|
||||
{
|
||||
id: "3",
|
||||
title: "Team Collaboration",
|
||||
description: "Invite team members, share projects, and collaborate in real-time. Perfect for agencies and development teams.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=2",
|
||||
imageAlt: "Team collaboration interface",
|
||||
},
|
||||
id: "3", title: "Team Collaboration", description: "Invite team members, share projects, and collaborate in real-time. Perfect for agencies and development teams.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=2", imageAlt: "Team collaboration interface"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Priority Support",
|
||||
description: "Get fast access to our support team. Priority email and chat support to help you succeed with CodeFlow.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=2",
|
||||
imageAlt: "Support interface",
|
||||
},
|
||||
id: "4", title: "Priority Support", description: "Get fast access to our support team. Priority email and chat support to help you succeed with CodeFlow.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=2", imageAlt: "Support interface"},
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
@@ -85,9 +63,7 @@ export default function AuthPage() {
|
||||
carouselMode="buttons"
|
||||
buttons={[
|
||||
{
|
||||
text: "Sign Up Now",
|
||||
href: "/auth/signup",
|
||||
},
|
||||
text: "Sign Up Now", href: "/auth/signup"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -101,29 +77,17 @@ export default function AuthPage() {
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Users,
|
||||
title: "Free Tier",
|
||||
value: "5 Gens",
|
||||
},
|
||||
id: "1", icon: Users,
|
||||
title: "Free Tier", value: "5 Gens"},
|
||||
{
|
||||
id: "2",
|
||||
icon: Gauge,
|
||||
title: "Setup Time",
|
||||
value: "2 mins",
|
||||
},
|
||||
id: "2", icon: Gauge,
|
||||
title: "Setup Time", value: "2 mins"},
|
||||
{
|
||||
id: "3",
|
||||
icon: Shield,
|
||||
title: "Security",
|
||||
value: "Enterprise",
|
||||
},
|
||||
id: "3", icon: Shield,
|
||||
title: "Security", value: "Enterprise"},
|
||||
{
|
||||
id: "4",
|
||||
icon: TrendingUp,
|
||||
title: "Upgrade",
|
||||
value: "Anytime",
|
||||
},
|
||||
id: "4", icon: TrendingUp,
|
||||
title: "Upgrade", value: "Anytime"},
|
||||
]}
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
@@ -131,9 +95,7 @@ export default function AuthPage() {
|
||||
carouselMode="buttons"
|
||||
buttons={[
|
||||
{
|
||||
text: "Create Account",
|
||||
href: "/auth/signup",
|
||||
},
|
||||
text: "Create Account", href: "/auth/signup"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -142,16 +104,12 @@ export default function AuthPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="CodeFlow"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
}}
|
||||
text: "Privacy Policy", href: "/privacy"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "/terms",
|
||||
}}
|
||||
text: "Terms of Service", href: "/terms"}}
|
||||
ariaLabel="Site footer with brand information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ export default function DashboardPage() {
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Customize", id: "customize" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "/auth/signup" }}
|
||||
brandName="CodeFlow"
|
||||
@@ -135,4 +135,4 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
197
src/app/page.tsx
197
src/app/page.tsx
@@ -10,7 +10,7 @@ import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { Sparkles, Zap, Play, DollarSign, MessageCircle, Rocket, Users, Code, Clock, TrendingUp } from "lucide-react";
|
||||
import { Sparkles, Zap, Play, DollarSign, MessageCircle, Rocket, Users, Code, Clock, TrendingUp, Settings } from "lucide-react";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
@@ -33,7 +33,7 @@ export default function HomePage() {
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Customize", id: "customize" },
|
||||
]}
|
||||
button={{ text: "Get Started", href: "/auth/signup" }}
|
||||
brandName="CodeFlow"
|
||||
@@ -55,25 +55,15 @@ export default function HomePage() {
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1",
|
||||
imageAlt: "AI code generation dashboard interface",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1", imageAlt: "AI code generation dashboard interface"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1",
|
||||
imageAlt: "Website preview with generated code",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1", imageAlt: "Website preview with generated code"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png",
|
||||
imageAlt: "Code editor with AI suggestions",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png", imageAlt: "Code editor with AI suggestions"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png",
|
||||
imageAlt: "Mobile responsive design preview",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png", imageAlt: "Mobile responsive design preview"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=1",
|
||||
imageAlt: "Generation history and analytics",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-generation-history-and-analytics-dashb-1772875140500-d6340221.png?_wi=1", imageAlt: "Generation history and analytics"},
|
||||
]}
|
||||
ariaLabel="Hero section for AI code generator platform"
|
||||
className="w-full"
|
||||
@@ -92,33 +82,13 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Screenshot Upload",
|
||||
description: "Upload website screenshots and let our AI analyze the design, layout, and styling to generate matching code instantly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-closeup-of-a-website-screenshot-being--1772875139815-8877cddd.png",
|
||||
imageAlt: "Screenshot upload feature",
|
||||
},
|
||||
id: "1", title: "Screenshot Upload", description: "Upload website screenshots and let our AI analyze the design, layout, and styling to generate matching code instantly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-closeup-of-a-website-screenshot-being--1772875139815-8877cddd.png", imageAlt: "Screenshot upload feature"},
|
||||
{
|
||||
id: "2",
|
||||
title: "Video Analysis",
|
||||
description: "Upload screen recordings and videos. Our AI extracts key frames and generates comprehensive frontend code from motion designs.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-screen-recording-video-file-with-multi-1772875139030-772b49a4.png",
|
||||
imageAlt: "Video analysis feature",
|
||||
},
|
||||
id: "2", title: "Video Analysis", description: "Upload screen recordings and videos. Our AI extracts key frames and generates comprehensive frontend code from motion designs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-screen-recording-video-file-with-multi-1772875139030-772b49a4.png", imageAlt: "Video analysis feature"},
|
||||
{
|
||||
id: "3",
|
||||
title: "URL Import",
|
||||
description: "Paste a live website URL and our AI crawls and reverse-engineers the frontend code structure automatically.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-browser-address-bar-showing-a-website--1772875140058-7d598fb7.png",
|
||||
imageAlt: "URL import feature",
|
||||
},
|
||||
id: "3", title: "URL Import", description: "Paste a live website URL and our AI crawls and reverse-engineers the frontend code structure automatically.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-browser-address-bar-showing-a-website--1772875140058-7d598fb7.png", imageAlt: "URL import feature"},
|
||||
{
|
||||
id: "4",
|
||||
title: "Live Preview",
|
||||
description: "View generated code in real-time with a live iframe preview. See how your website looks before downloading.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=1",
|
||||
imageAlt: "Live preview feature",
|
||||
},
|
||||
id: "4", title: "Live Preview", description: "View generated code in real-time with a live iframe preview. See how your website looks before downloading.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-live-preview-window-showing-a-generate-1772875139391-4b6b8923.png?_wi=1", imageAlt: "Live preview feature"},
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
@@ -138,29 +108,11 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "demo-1",
|
||||
name: "E-commerce Store",
|
||||
price: "Generated",
|
||||
variant: "Full HTML + CSS + JS",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-e-commerce-store-interface-with-1772875139441-f6ade702.png",
|
||||
imageAlt: "E-commerce store example",
|
||||
},
|
||||
id: "demo-1", name: "E-commerce Store", price: "Generated", variant: "Full HTML + CSS + JS", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-e-commerce-store-interface-with-1772875139441-f6ade702.png", imageAlt: "E-commerce store example"},
|
||||
{
|
||||
id: "demo-2",
|
||||
name: "SaaS Landing Page",
|
||||
price: "Generated",
|
||||
variant: "Responsive Design",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-saas-landing-page-with-hero-sec-1772875140000-50418702.png",
|
||||
imageAlt: "SaaS landing page example",
|
||||
},
|
||||
id: "demo-2", name: "SaaS Landing Page", price: "Generated", variant: "Responsive Design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-saas-landing-page-with-hero-sec-1772875140000-50418702.png", imageAlt: "SaaS landing page example"},
|
||||
{
|
||||
id: "demo-3",
|
||||
name: "Portfolio Website",
|
||||
price: "Generated",
|
||||
variant: "Interactive Elements",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-creative-portfolio-website-showcasing--1772875146877-59accfc8.png",
|
||||
imageAlt: "Portfolio website example",
|
||||
},
|
||||
id: "demo-3", name: "Portfolio Website", price: "Generated", variant: "Interactive Elements", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-creative-portfolio-website-showcasing--1772875146877-59accfc8.png", imageAlt: "Portfolio website example"},
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
@@ -180,46 +132,19 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Starter",
|
||||
badgeIcon: Zap,
|
||||
price: "Free",
|
||||
subtitle: "Perfect for trying out",
|
||||
features: [
|
||||
"5 generations per month",
|
||||
"Basic HTML/CSS output",
|
||||
"Community support",
|
||||
"Standard preview quality",
|
||||
],
|
||||
id: "free", badge: "Starter", badgeIcon: Zap,
|
||||
price: "Free", subtitle: "Perfect for trying out", features: [
|
||||
"5 generations per month", "Basic HTML/CSS output", "Community support", "Standard preview quality"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Most Popular",
|
||||
badgeIcon: Sparkles,
|
||||
price: "$29/mo",
|
||||
subtitle: "For professional developers",
|
||||
features: [
|
||||
"200 generations per month",
|
||||
"Advanced JavaScript support",
|
||||
"Priority email support",
|
||||
"High-resolution exports",
|
||||
"Custom component library",
|
||||
],
|
||||
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
||||
price: "$29/mo", subtitle: "For professional developers", features: [
|
||||
"200 generations per month", "Advanced JavaScript support", "Priority email support", "High-resolution exports", "Custom component library"],
|
||||
},
|
||||
{
|
||||
id: "unlimited",
|
||||
badge: "Enterprise",
|
||||
badgeIcon: TrendingUp,
|
||||
price: "$99/mo",
|
||||
subtitle: "Unlimited possibilities",
|
||||
features: [
|
||||
"Unlimited generations",
|
||||
"Full AI customization",
|
||||
"24/7 priority support",
|
||||
"API access",
|
||||
"Team collaboration",
|
||||
"Advanced analytics",
|
||||
],
|
||||
id: "unlimited", badge: "Enterprise", badgeIcon: TrendingUp,
|
||||
price: "$99/mo", subtitle: "Unlimited possibilities", features: [
|
||||
"Unlimited generations", "Full AI customization", "24/7 priority support", "API access", "Team collaboration", "Advanced analytics"],
|
||||
},
|
||||
]}
|
||||
animationType="depth-3d"
|
||||
@@ -239,53 +164,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen",
|
||||
role: "Full-Stack Developer",
|
||||
testimonial: "CodeFlow cut my design-to-code time in half. The AI perfectly captures the design intent and generates clean, maintainable code. Absolutely game-changing.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-asi-1772875139056-a4eed9f1.png",
|
||||
imageAlt: "Sarah Chen",
|
||||
},
|
||||
id: "1", name: "Sarah Chen", role: "Full-Stack Developer", testimonial: "CodeFlow cut my design-to-code time in half. The AI perfectly captures the design intent and generates clean, maintainable code. Absolutely game-changing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-asi-1772875139056-a4eed9f1.png", imageAlt: "Sarah Chen"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Rodriguez",
|
||||
role: "Frontend Lead, TechStartup",
|
||||
testimonial: "We've integrated CodeFlow into our workflow. Our team now focuses on logic and interactions while AI handles the tedious code generation. Best decision we made.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-lat-1772875138045-9a63d28c.png",
|
||||
imageAlt: "Marcus Rodriguez",
|
||||
},
|
||||
id: "2", name: "Marcus Rodriguez", role: "Frontend Lead, TechStartup", testimonial: "We've integrated CodeFlow into our workflow. Our team now focuses on logic and interactions while AI handles the tedious code generation. Best decision we made.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-confident-lat-1772875138045-9a63d28c.png", imageAlt: "Marcus Rodriguez"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emma Williams",
|
||||
role: "UI/UX Designer",
|
||||
testimonial: "As a designer, I love that I can now go from Figma to actual, working code instantly. No more miscommunication with developers. CodeFlow bridges that gap perfectly.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-creative-fema-1772875138367-861d42f2.png",
|
||||
imageAlt: "Emma Williams",
|
||||
},
|
||||
id: "3", name: "Emma Williams", role: "UI/UX Designer", testimonial: "As a designer, I love that I can now go from Figma to actual, working code instantly. No more miscommunication with developers. CodeFlow bridges that gap perfectly.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-creative-fema-1772875138367-861d42f2.png", imageAlt: "Emma Williams"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alex Kumar",
|
||||
role: "Agency Director",
|
||||
testimonial: "Our client delivery time improved dramatically. We're handling 3x more projects with the same team size. The ROI has been incredible.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-director-busi-1772875138660-e6615b66.png",
|
||||
imageAlt: "Alex Kumar",
|
||||
},
|
||||
id: "4", name: "Alex Kumar", role: "Agency Director", testimonial: "Our client delivery time improved dramatically. We're handling 3x more projects with the same team size. The ROI has been incredible.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-director-busi-1772875138660-e6615b66.png", imageAlt: "Alex Kumar"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Park",
|
||||
role: "Product Manager",
|
||||
testimonial: "CodeFlow isn't just a tool, it's a productivity multiplier. The quality of generated code is production-ready. Highly recommended.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-female-produc-1772875138590-40fc5835.png",
|
||||
imageAlt: "Jessica Park",
|
||||
},
|
||||
id: "5", name: "Jessica Park", role: "Product Manager", testimonial: "CodeFlow isn't just a tool, it's a productivity multiplier. The quality of generated code is production-ready. Highly recommended.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-female-produc-1772875138590-40fc5835.png", imageAlt: "Jessica Park"},
|
||||
{
|
||||
id: "6",
|
||||
name: "David Thompson",
|
||||
role: "Freelance Web Developer",
|
||||
testimonial: "I used to spend days turning design mockups into code. Now I can deliver projects in hours. This tool is a must-have for any serious developer.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-freelance-web-1772875139211-6b501cc1.png",
|
||||
imageAlt: "David Thompson",
|
||||
},
|
||||
id: "6", name: "David Thompson", role: "Freelance Web Developer", testimonial: "I used to spend days turning design mockups into code. Now I can deliver projects in hours. This tool is a must-have for any serious developer.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/professional-headshot-of-a-freelance-web-1772875139211-6b501cc1.png", imageAlt: "David Thompson"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
@@ -295,6 +184,32 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="customize" data-section="customize">
|
||||
<FeatureCardTwentySeven
|
||||
title="Fully Customizable Code Output"
|
||||
description="Tailor every aspect of your generated code to match your project requirements and coding standards."
|
||||
tag="Customization"
|
||||
tagIcon={Settings}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Code Templates", description: "Choose from multiple code templates. Select your preferred framework, styling approach, and component structure before generation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-modern-ai-code-generator-dashboard-int-1772875139557-80999b87.png?_wi=1", imageAlt: "Code templates customization"},
|
||||
{
|
||||
id: "2", title: "Framework Selection", description: "Generate code for your framework of choice: React, Vue, Svelte, or vanilla JavaScript. Each with full TypeScript support.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-responsive-website-preview-interface-s-1772875139361-87942715.png?_wi=1", imageAlt: "Framework selection options"},
|
||||
{
|
||||
id: "3", title: "Styling Options", description: "Choose your CSS approach: Tailwind CSS, SCSS, CSS Modules, or vanilla CSS. Customize breakpoints and design tokens easily.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/an-advanced-code-editor-with-ai-powered--1772875142374-2829c90f.png", imageAlt: "Styling customization settings"},
|
||||
{
|
||||
id: "4", title: "Component Settings", description: "Fine-tune component naming conventions, export patterns, and folder structure to match your project's architecture.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARM6IccPER0LhH7jpL9sFFPmNn/a-mobile-responsive-design-preview-showc-1772875139224-d75ce864.png", imageAlt: "Component settings configuration"},
|
||||
]}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
buttons={[{ text: "Start Customizing", href: "/auth/signup" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cta" data-section="cta">
|
||||
<MetricCardThree
|
||||
title="Join the AI Code Revolution"
|
||||
@@ -326,4 +241,4 @@ export default function HomePage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function PricingPage() {
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Blog", id: "blog" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Customize", id: "customize" },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -35,9 +35,7 @@ export default function PricingPage() {
|
||||
brandName="CodeFlow"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Get Started",
|
||||
href: "/auth/signup",
|
||||
}}
|
||||
text: "Get Started", href: "/auth/signup"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -50,46 +48,19 @@ export default function PricingPage() {
|
||||
tagAnimation="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Starter",
|
||||
badgeIcon: Zap,
|
||||
price: "Free",
|
||||
subtitle: "Perfect for trying out",
|
||||
features: [
|
||||
"5 generations per month",
|
||||
"Basic HTML/CSS output",
|
||||
"Community support",
|
||||
"Standard preview quality",
|
||||
],
|
||||
id: "free", badge: "Starter", badgeIcon: Zap,
|
||||
price: "Free", subtitle: "Perfect for trying out", features: [
|
||||
"5 generations per month", "Basic HTML/CSS output", "Community support", "Standard preview quality"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Most Popular",
|
||||
badgeIcon: Sparkles,
|
||||
price: "$29/mo",
|
||||
subtitle: "For professional developers",
|
||||
features: [
|
||||
"200 generations per month",
|
||||
"Advanced JavaScript support",
|
||||
"Priority email support",
|
||||
"High-resolution exports",
|
||||
"Custom component library",
|
||||
],
|
||||
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
||||
price: "$29/mo", subtitle: "For professional developers", features: [
|
||||
"200 generations per month", "Advanced JavaScript support", "Priority email support", "High-resolution exports", "Custom component library"],
|
||||
},
|
||||
{
|
||||
id: "unlimited",
|
||||
badge: "Enterprise",
|
||||
badgeIcon: Crown,
|
||||
price: "$99/mo",
|
||||
subtitle: "Unlimited possibilities",
|
||||
features: [
|
||||
"Unlimited generations",
|
||||
"Full AI customization",
|
||||
"24/7 priority support",
|
||||
"API access",
|
||||
"Team collaboration",
|
||||
"Advanced analytics",
|
||||
],
|
||||
id: "unlimited", badge: "Enterprise", badgeIcon: Crown,
|
||||
price: "$99/mo", subtitle: "Unlimited possibilities", features: [
|
||||
"Unlimited generations", "Full AI customization", "24/7 priority support", "API access", "Team collaboration", "Advanced analytics"],
|
||||
},
|
||||
]}
|
||||
animationType="depth-3d"
|
||||
@@ -98,9 +69,7 @@ export default function PricingPage() {
|
||||
carouselMode="buttons"
|
||||
buttons={[
|
||||
{
|
||||
text: "Choose Plan",
|
||||
href: "/auth/signup",
|
||||
},
|
||||
text: "Choose Plan", href: "/auth/signup"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -114,29 +83,17 @@ export default function PricingPage() {
|
||||
tagAnimation="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Users,
|
||||
title: "Active Users",
|
||||
value: "15,000+",
|
||||
},
|
||||
id: "1", icon: Users,
|
||||
title: "Active Users", value: "15,000+"},
|
||||
{
|
||||
id: "2",
|
||||
icon: Code,
|
||||
title: "Code Generated",
|
||||
value: "2.5M+ Lines",
|
||||
},
|
||||
id: "2", icon: Code,
|
||||
title: "Code Generated", value: "2.5M+ Lines"},
|
||||
{
|
||||
id: "3",
|
||||
icon: Clock,
|
||||
title: "Time Saved",
|
||||
value: "500K+ Hours",
|
||||
},
|
||||
id: "3", icon: Clock,
|
||||
title: "Time Saved", value: "500K+ Hours"},
|
||||
{
|
||||
id: "4",
|
||||
icon: TrendingUp,
|
||||
title: "Month Growth",
|
||||
value: "145%",
|
||||
},
|
||||
id: "4", icon: TrendingUp,
|
||||
title: "Month Growth", value: "145%"},
|
||||
]}
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
@@ -144,9 +101,7 @@ export default function PricingPage() {
|
||||
carouselMode="buttons"
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Free Trial",
|
||||
href: "/auth/signup",
|
||||
},
|
||||
text: "Start Free Trial", href: "/auth/signup"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -155,16 +110,12 @@ export default function PricingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="CodeFlow"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "/privacy",
|
||||
}}
|
||||
text: "Privacy Policy", href: "/privacy"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "/terms",
|
||||
}}
|
||||
text: "Terms of Service", href: "/terms"}}
|
||||
ariaLabel="Site footer with brand information"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user