diff --git a/src/app/page.tsx b/src/app/page.tsx index ca188b9..5cfc747 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -20,7 +20,7 @@ export default function LandingPage() { borderRadius="soft" contentWidth="smallMedium" sizing="mediumLarge" - background="noiseDiagonalGradient" + background="circleGradient" cardStyle="outline" primaryButtonStyle="diagonal-gradient" secondaryButtonStyle="layered" @@ -36,7 +36,8 @@ export default function LandingPage() { { name: "FAQ", id: "faq" }, ]} button={{ - text: "Get Started", href: "https://recreate.ai/signup"}} + text: "Get Started", href: "https://recreate.ai/signup" + }} /> @@ -47,32 +48,42 @@ export default function LandingPage() { tag="AI-Powered Design" tagIcon={Sparkles} tagAnimation="slide-up" - background={{ variant: "noiseDiagonalGradient" }} + background={{ variant: "glowing-orb" }} leftCarouselItems={[ { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-beautiful-next-js-landing-page-templat-1772639295003-dfb766cb.png", imageAlt: "Landing page template showcase"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-beautiful-next-js-landing-page-templat-1772639295003-dfb766cb.png", imageAlt: "Landing page template showcase" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-code-editor-window-displaying-exportab-1772639295515-15178b36.png", imageAlt: "Exportable React code"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-code-editor-window-displaying-exportab-1772639295515-15178b36.png", imageAlt: "Exportable React code" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/an-html-export-preview-showing-a-fully-r-1772639296070-865b14b7.png", imageAlt: "HTML export preview"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/an-html-export-preview-showing-a-fully-r-1772639296070-865b14b7.png", imageAlt: "HTML export preview" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-sleek-ai-powered-design-dashboa-1772639294665-283866c3.png?_wi=1", imageAlt: "AI design dashboard"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-sleek-ai-powered-design-dashboa-1772639294665-283866c3.png", imageAlt: "AI design dashboard" + }, ]} rightCarouselItems={[ { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-tailwind-css-component-library-visuali-1772639295686-12f9660b.png", imageAlt: "Tailwind CSS components"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-tailwind-css-component-library-visuali-1772639295686-12f9660b.png", imageAlt: "Tailwind CSS components" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-figma-design-file-interface-showing-de-1772639295176-aebb0c91.png", imageAlt: "Figma design export"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-figma-design-file-interface-showing-de-1772639295176-aebb0c91.png", imageAlt: "Figma design export" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-saas-application-interface-show-1772639295899-4c1adc58.png", imageAlt: "Real-time design generation"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-saas-application-interface-show-1772639295899-4c1adc58.png", imageAlt: "Real-time design generation" + }, { - imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-sleek-ai-powered-design-dashboa-1772639294665-283866c3.png?_wi=2", imageAlt: "Professional interface"}, + imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/a-modern-sleek-ai-powered-design-dashboa-1772639294665-283866c3.png", imageAlt: "Professional interface" + }, ]} buttons={[ { - text: "Generate Your Landing Page", href: "https://app.recreate.ai/generate"}, + text: "Generate Your Landing Page", href: "https://app.recreate.ai/generate" + }, { - text: "View Examples", href: "#features"}, + text: "View Examples", href: "#features" + }, ]} buttonAnimation="slide-up" carouselPosition="right" @@ -105,29 +116,36 @@ export default function LandingPage() { features={[ { icon: Wand2, - title: "AI-Powered Design Generation", description: "Describe your product, and our AI instantly generates a beautiful, conversion-optimized landing page tailored to your vision"}, + title: "AI-Powered Design Generation", description: "Describe your product, and our AI instantly generates a beautiful, conversion-optimized landing page tailored to your vision" + }, { icon: Code2, - title: "Export to React & Next.js", description: "Get clean, production-ready React components with full Next.js integration, Tailwind CSS styling, and TypeScript support"}, + title: "Export to React & Next.js", description: "Get clean, production-ready React components with full Next.js integration, Tailwind CSS styling, and TypeScript support" + }, { icon: Palette, - title: "Figma Export", description: "Export your design directly to Figma for further customization with designers and full design system integration"}, + title: "Figma Export", description: "Export your design directly to Figma for further customization with designers and full design system integration" + }, { icon: FileText, - title: "HTML & CSS Export", description: "Need just HTML? Export pure HTML files with compiled CSS for immediate deployment or traditional web stacks"}, + title: "HTML & CSS Export", description: "Need just HTML? Export pure HTML files with compiled CSS for immediate deployment or traditional web stacks" + }, { icon: Zap, - title: "SEO-Optimized", description: "Every landing page includes automatic meta tags, structured data, and SEO best practices for better search visibility"}, + title: "SEO-Optimized", description: "Every landing page includes automatic meta tags, structured data, and SEO best practices for better search visibility" + }, { icon: BarChart3, - title: "Conversion Optimized", description: "AI-designed layouts follow proven conversion patterns with strategic CTAs, social proof sections, and trust-building elements"}, + title: "Conversion Optimized", description: "AI-designed layouts follow proven conversion patterns with strategic CTAs, social proof sections, and trust-building elements" + }, ]} animationType="slide-up" textboxLayout="default" useInvertedBackground={false} buttons={[ { - text: "Try It Free", href: "https://app.recreate.ai/try-free"}, + text: "Try It Free", href: "https://app.recreate.ai/try-free" + }, ]} /> @@ -143,17 +161,23 @@ export default function LandingPage() { useInvertedBackground={false} testimonials={[ { - id: "1", name: "Sarah Chen, Founder of CloudMetrics", date: "Date: 15 January 2025", title: "Saved us months of design and development", quote: "We went from idea to launch in 2 weeks. The AI understood our product positioning perfectly and created a landing page that converted 3x better than our original design. Worth every penny.", tag: "Growth Stage", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-successful-st-1772639294307-b870ea69.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-successful-st-1772639294307-b870ea69.png"}, + id: "1", name: "Sarah Chen, Founder of CloudMetrics", date: "Date: 15 January 2025", title: "Saved us months of design and development", quote: "We went from idea to launch in 2 weeks. The AI understood our product positioning perfectly and created a landing page that converted 3x better than our original design. Worth every penny.", tag: "Growth Stage", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-successful-st-1772639294307-b870ea69.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-successful-st-1772639294307-b870ea69.png" + }, { - id: "2", name: "Marcus Rodriguez, CTO of DataFlow", date: "Date: 10 January 2025", title: "The code quality is production-ready", quote: "As a developer, I was skeptical. But the exported React code is clean, well-structured, and follows all best practices. Our team didn't need to refactor anything.", tag: "Technical", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-product-desig-1772639294277-01aece8a.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-product-desig-1772639294277-01aece8a.png"}, + id: "2", name: "Marcus Rodriguez, CTO of DataFlow", date: "Date: 10 January 2025", title: "The code quality is production-ready", quote: "As a developer, I was skeptical. But the exported React code is clean, well-structured, and follows all best practices. Our team didn't need to refactor anything.", tag: "Technical", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-product-desig-1772639294277-01aece8a.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-product-desig-1772639294277-01aece8a.png" + }, { - id: "3", name: "Jessica Park, Head of Design at BrandCo", date: "Date: 5 January 2025", title: "A designer's dream tool", quote: "Figma export is incredible. It lets us take the AI-generated concept and refine it with our brand guidelines. Cuts our design iteration time in half.", tag: "Design First", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-development-l-1772639295107-d9b7d719.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-development-l-1772639295107-d9b7d719.png"}, + id: "3", name: "Jessica Park, Head of Design at BrandCo", date: "Date: 5 January 2025", title: "A designer's dream tool", quote: "Figma export is incredible. It lets us take the AI-generated concept and refine it with our brand guidelines. Cuts our design iteration time in half.", tag: "Design First", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-development-l-1772639295107-d9b7d719.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-development-l-1772639295107-d9b7d719.png" + }, { - id: "4", name: "Alex Thompson, CMO of GrowthPulse", date: "Date: 28 December 2024", title: "Best marketing tool investment", quote: "We A/B tested the AI-generated landing page against our designer's version. The AI won by 42% on conversion rate. It understands marketing psychology.", tag: "Marketing", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-marketing-exe-1772639294430-6e5f61fb.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-marketing-exe-1772639294430-6e5f61fb.png"}, + id: "4", name: "Alex Thompson, CMO of GrowthPulse", date: "Date: 28 December 2024", title: "Best marketing tool investment", quote: "We A/B tested the AI-generated landing page against our designer's version. The AI won by 42% on conversion rate. It understands marketing psychology.", tag: "Marketing", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-marketing-exe-1772639294430-6e5f61fb.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-marketing-exe-1772639294430-6e5f61fb.png" + }, { - id: "5", name: "Emma Wilson, Product Lead at InnovateTech", date: "Date: 22 December 2024", title: "Incredible value for early-stage startups", quote: "As a pre-seed startup, we couldn't afford a design agency. Recreate.AI gave us a landing page that looks like it cost $20K. Highly recommended.", tag: "Startup", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-creative-dire-1772639294695-84a106ce.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-creative-dire-1772639294695-84a106ce.png"}, + id: "5", name: "Emma Wilson, Product Lead at InnovateTech", date: "Date: 22 December 2024", title: "Incredible value for early-stage startups", quote: "As a pre-seed startup, we couldn't afford a design agency. Recreate.AI gave us a landing page that looks like it cost $20K. Highly recommended.", tag: "Startup", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-creative-dire-1772639294695-84a106ce.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-a-creative-dire-1772639294695-84a106ce.png" + }, { - id: "6", name: "David Kumar, VP Product at ScaleLabs", date: "Date: 18 December 2024", title: "Perfect for rapid experimentation", quote: "We iterate on our messaging constantly. Being able to regenerate landing pages in minutes lets us test ideas at scale. Game-changer for product validation.", tag: "Product", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-an-operations-o-1772639294583-ff5a6d03.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-an-operations-o-1772639294583-ff5a6d03.png"}, + id: "6", name: "David Kumar, VP Product at ScaleLabs", date: "Date: 18 December 2024", title: "Perfect for rapid experimentation", quote: "We iterate on our messaging constantly. Being able to regenerate landing pages in minutes lets us test ideas at scale. Game-changer for product validation.", tag: "Product", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-an-operations-o-1772639294583-ff5a6d03.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUFCEYcbJogH7S5M6urcJ7dUxk/professional-headshot-of-an-operations-o-1772639294583-ff5a6d03.png" + }, ]} /> @@ -203,7 +227,8 @@ export default function LandingPage() { { text: "Learn More", href: "#" }, ], features: [ - "1 landing page per month", "Basic components library", "HTML export only", "Community support"], + "1 landing page per month", "Basic components library", "HTML export only", "Community support" + ], }, { id: "2", badge: "Most Popular", badgeIcon: Sparkles, @@ -212,7 +237,8 @@ export default function LandingPage() { { text: "Talk to Sales", href: "https://calendly.com/recreate-ai" }, ], features: [ - "Unlimited landing pages", "All export formats (React, Next.js, Figma, HTML)", "Premium components", "SEO optimization", "Analytics integration", "Priority email support"], + "Unlimited landing pages", "All export formats (React, Next.js, Figma, HTML)", "Premium components", "SEO optimization", "Analytics integration", "Priority email support" + ], }, { id: "3", price: "$99/mo", name: "Enterprise", buttons: [ @@ -220,7 +246,8 @@ export default function LandingPage() { { text: "Schedule Demo", href: "https://calendly.com/recreate-ai-enterprise" }, ], features: [ - "Everything in Professional", "Custom AI model training", "White-label option", "API access", "Dedicated account manager", "24/7 priority support", "SLA guarantee"], + "Everything in Professional", "Custom AI model training", "White-label option", "API access", "Dedicated account manager", "24/7 priority support", "SLA guarantee" + ], }, ]} /> @@ -239,29 +266,41 @@ export default function LandingPage() { animationType="smooth" faqs={[ { - id: "1", title: "How does the AI understand my product?", content: "You provide a detailed product description, including your target audience, value proposition, and key features. Our Claude 3.5 and GPT-4o AI models analyze this information to create a landing page that perfectly captures your positioning and appeals to your ideal customers."}, + id: "1", title: "How does the AI understand my product?", content: "You provide a detailed product description, including your target audience, value proposition, and key features. Our Claude 3.5 and GPT-4o AI models analyze this information to create a landing page that perfectly captures your positioning and appeals to your ideal customers." + }, { - id: "2", title: "Can I customize the generated landing page?", content: "Absolutely! When you export to React/Next.js or Figma, you get full source files that you can customize completely. Modify colors, fonts, copy, layout, add your own components, and deploy whenever you're ready. The AI gives you a strong foundation to build upon."}, + id: "2", title: "Can I customize the generated landing page?", content: "Absolutely! When you export to React/Next.js or Figma, you get full source files that you can customize completely. Modify colors, fonts, copy, layout, add your own components, and deploy whenever you're ready. The AI gives you a strong foundation to build upon." + }, { - id: "3", title: "What export formats are supported?", content: "We support four export formats: React components with full TypeScript support, Next.js ready-to-deploy projects, Figma design files for design iteration, and standalone HTML with embedded CSS for immediate deployment or traditional stacks."}, + id: "3", title: "What export formats are supported?", content: "We support four export formats: React components with full TypeScript support, Next.js ready-to-deploy projects, Figma design files for design iteration, and standalone HTML with embedded CSS for immediate deployment or traditional stacks." + }, { - id: "4", title: "Is the generated code production-ready?", content: "Yes! Our React and Next.js exports follow industry best practices including semantic HTML, accessibility compliance (WCAG 2.1 AA), performance optimization, SEO best practices, and responsive design. Most developers report minimal to zero refactoring needed."}, + id: "4", title: "Is the generated code production-ready?", content: "Yes! Our React and Next.js exports follow industry best practices including semantic HTML, accessibility compliance (WCAG 2.1 AA), performance optimization, SEO best practices, and responsive design. Most developers report minimal to zero refactoring needed." + }, { - id: "5", title: "Can I use this for multiple SaaS products?", content: "Yes! Professional and Enterprise plans include unlimited landing page generation. Generate unique landing pages for each product, feature variations, or A/B testing. Each generation is independent and fully customizable."}, + id: "5", title: "Can I use this for multiple SaaS products?", content: "Yes! Professional and Enterprise plans include unlimited landing page generation. Generate unique landing pages for each product, feature variations, or A/B testing. Each generation is independent and fully customizable." + }, { - id: "6", title: "What if I need to regenerate my landing page?", content: "You can regenerate your landing page as many times as you want with updated product descriptions, different design styles, or alternative layouts. Each generation uses our latest AI models for continuous improvement."}, + id: "6", title: "What if I need to regenerate my landing page?", content: "You can regenerate your landing page as many times as you want with updated product descriptions, different design styles, or alternative layouts. Each generation uses our latest AI models for continuous improvement." + }, { - id: "7", title: "Is there a free trial?", content: "Yes! The free Starter plan includes 1 landing page per month with basic components. Professional and Enterprise plans include a 14-day free trial with full feature access. No credit card required to start."}, + id: "7", title: "Is there a free trial?", content: "Yes! The free Starter plan includes 1 landing page per month with basic components. Professional and Enterprise plans include a 14-day free trial with full feature access. No credit card required to start." + }, { - id: "8", title: "How long does it take to generate a landing page?", content: "Most landing pages are generated in under 2 minutes. Complex projects with specific design requirements might take up to 5 minutes. You can track progress in real-time and preview the page before exporting."}, + id: "8", title: "How long does it take to generate a landing page?", content: "Most landing pages are generated in under 2 minutes. Complex projects with specific design requirements might take up to 5 minutes. You can track progress in real-time and preview the page before exporting." + }, { - id: "9", title: "What about design/branding consistency?", content: "For Professional and Enterprise plans, you can define your brand guidelines (colors, fonts, logo, tone) and the AI will apply these consistently across all generated landing pages. Figma export preserves all brand elements for design refinement."}, + id: "9", title: "What about design/branding consistency?", content: "For Professional and Enterprise plans, you can define your brand guidelines (colors, fonts, logo, tone) and the AI will apply these consistently across all generated landing pages. Figma export preserves all brand elements for design refinement." + }, { - id: "10", title: "Can I integrate third-party tools?", content: "Yes! React and Next.js exports support integration with analytics, CRM platforms, payment processors, email services, and more. The generated code is written to facilitate easy integration with your existing tech stack."}, + id: "10", title: "Can I integrate third-party tools?", content: "Yes! React and Next.js exports support integration with analytics, CRM platforms, payment processors, email services, and more. The generated code is written to facilitate easy integration with your existing tech stack." + }, { - id: "11", title: "What's included in Enterprise support?", content: "Enterprise customers receive a dedicated account manager, 24/7 priority support, SLA guarantees, white-label options, custom AI model training for your specific industry, and API access for programmatic generation."}, + id: "11", title: "What's included in Enterprise support?", content: "Enterprise customers receive a dedicated account manager, 24/7 priority support, SLA guarantees, white-label options, custom AI model training for your specific industry, and API access for programmatic generation." + }, { - id: "12", title: "Is my landing page design data private?", content: "Yes! We take privacy seriously. Your project data is encrypted at rest and in transit. Professional and Enterprise plans include private projects and enhanced security options. We never share or sell your project data."}, + id: "12", title: "Is my landing page design data private?", content: "Yes! We take privacy seriously. Your project data is encrypted at rest and in transit. Professional and Enterprise plans include private projects and enhanced security options. We never share or sell your project data." + }, ]} />