199 lines
14 KiB
TypeScript
199 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Sparkles, Palette, Type, Layers, Shield, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Paletteai"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Engines", id: "engines" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Docs", id: "docs" },
|
|
{ name: "Blog", id: "blog" },
|
|
]}
|
|
button={{ text: "Join Waitlist", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Your Design System, Built by AI"
|
|
description="Paletteai generates complete, production-ready design documents in minutes—color psychology, typography systems, component libraries, accessibility rules, and brand DNA. All free. All intelligent."
|
|
tag="Revolutionary Design Intelligence"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Join the Waitlist", href: "contact" },
|
|
{ text: "Watch Demo", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-modern-clean-software-dashboard-interf-1772658642102-fce34cf1.png"
|
|
imageAlt="Paletteai design system generator dashboard"
|
|
mediaAnimation="blur-reveal"
|
|
imagePosition="right"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "Product Designer, Design Studio", testimonial: "This saves us weeks on every project. Our design systems are now consistent and accessible.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=1"},
|
|
{
|
|
name: "Marcus Johnson", handle: "Founder, Design Agency", testimonial: "Finally, a tool that understands design psychology and makes it accessible to everyone.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=2"},
|
|
{
|
|
name: "Elena Rodriguez", handle: "Design Lead, Tech Company", testimonial: "The accessibility automation alone is worth it. Our products are more inclusive now.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=3"},
|
|
{
|
|
name: "James Liu", handle: "Design System Manager", testimonial: "Standardization across our teams improved immediately. Design governance made simple.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp?_wi=4"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
title="Complete Design Intelligence"
|
|
description="Every document Paletteai generates includes everything you need to build, scale, and govern design systems with confidence."
|
|
tag="Core Capabilities"
|
|
tagAnimation="slide-up"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Color Palettes", description: "AI-driven color psychology ensures your palette resonates emotionally and maintains WCAG accessibility compliance automatically.", icon: Palette,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-vibrant-visualization-of-an-ai-color-p-1772658642179-f0c64b3e.png", imageAlt: "Color palette generation interface"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-vibrant-visualization-of-smart-color-r-1772658642883-26cbd540.png?_wi=1", imageAlt: "Smart color recommendation engine"},
|
|
],
|
|
},
|
|
{
|
|
title: "Typography Systems", description: "Complete type hierarchies with responsive scaling, accessibility metrics, and production-ready CSS variables for every font weight.", icon: Type,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-sophisticated-typography-system-visual-1772658643347-39cd02d3.png", imageAlt: "Typography system visualization"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-clean-visualization-of-real-design-sys-1772658643165-255c3136.png?_wi=1", imageAlt: "Design system structure"},
|
|
],
|
|
},
|
|
{
|
|
title: "Component Libraries", description: "Pre-structured component hierarchies with design tokens, variant definitions, and accessibility rules baked in from the start.", icon: Layers,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-clean-visualization-of-real-design-sys-1772658643165-255c3136.png?_wi=2", imageAlt: "Component library structure"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-sophisticated-visualization-of-real-ac-1772658642919-df4a2f30.png?_wi=1", imageAlt: "Accessibility automation"},
|
|
],
|
|
},
|
|
{
|
|
title: "Accessibility Rules", description: "Real WCAG automation ensures every element meets accessibility standards. Contrast ratios, color blindness simulations, and compliance audits.", icon: Shield,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/an-accessibility-focused-design-interfac-1772658643374-c147bc44.png", imageAlt: "Accessibility compliance dashboard"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-sophisticated-visualization-of-real-ac-1772658642919-df4a2f30.png?_wi=2", imageAlt: "Real Accessibility Intelligence engine"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="engines" data-section="engines">
|
|
<ProductCardOne
|
|
title="Six Interconnected Engines"
|
|
description="Paletteai's technological backbone combines specialized AI engines that work together as an integrated system, not separate features."
|
|
tag="Technology"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="scale-rotate"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "engine-1", name: "Brand DNA Engine", price: "Extracts & Codifies", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/an-abstract-visualization-of-a-brand-dna-1772658642394-65c80837.png", imageAlt: "Brand DNA Engine visualization"},
|
|
{
|
|
id: "engine-2", name: "Real Accessibility Intelligence", price: "WCAG Automation", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-sophisticated-visualization-of-real-ac-1772658642919-df4a2f30.png?_wi=3", imageAlt: "Accessibility Intelligence Engine"},
|
|
{
|
|
id: "engine-3", name: "Smart Color Recommendation", price: "Psychology-Driven", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-vibrant-visualization-of-smart-color-r-1772658642883-26cbd540.png?_wi=2", imageAlt: "Smart Color Recommendation Engine"},
|
|
{
|
|
id: "engine-4", name: "Design Psychology Engine", price: "Cognitive Principles", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/an-abstract-visualization-of-design-psyc-1772658643519-83bae451.png", imageAlt: "Design Psychology Engine"},
|
|
{
|
|
id: "engine-5", name: "Real Design System Structure", price: "Component Hierarchy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-clean-visualization-of-real-design-sys-1772658643165-255c3136.png?_wi=3", imageAlt: "Design System Structure Engine"},
|
|
{
|
|
id: "engine-6", name: "Layout Intelligence", price: "Spatial Logic & Grid", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-sophisticated-visualization-of-layout--1772658643465-36ca7a28.png", imageAlt: "Layout Intelligence Engine"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Design Leaders"
|
|
description="Join hundreds of designers, founders, and design teams already on the Paletteai waitlist."
|
|
tag="Early Adopters"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Tech Company", "Creative Agency", "Startup Innovators", "Design Systems Co", "Digital Product Inc", "Software Solutions", "Design SaaS Studio", "Enterprise Software"
|
|
]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-modern-tech-company-logo-representing--1772658641755-818b469e.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-creative-agency-logo-with-sophisticate-1772658641854-6940faa2.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-startup-company-logo-embodying-intelli-1772658641227-24eb6a00.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-design-systems-company-logo-showcasing-1772658642067-d22cc437.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-digital-product-company-logo-represent-1772658643402-6addb197.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-software-solutions-provider-logo-with--1772658642260-1b5a12b3.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/a-design-focused-saas-company-logo-embod-1772658642004-a44e8332.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUsYMNE6GuUVBpdvVcwqYYpkRU/an-enterprise-software-company-logo-repr-1772658641593-d37603b0.png"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Build"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Join Our Waitlist Today"
|
|
description="Be among the first to experience AI-powered design system generation. Get early access to Paletteai and transform how your team builds design systems."
|
|
buttons={[
|
|
{ text: "Join the Waitlist", href: "https://waitlist.paletteai.app" },
|
|
{ text: "Learn More", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Paletteai"
|
|
leftLink={{ text: "Privacy Policy", href: "https://paletteai.app/privacy" }}
|
|
rightLink={{ text: "Terms of Service", href: "https://paletteai.app/terms" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|