bender/eace4bbf-3901-4237-9e96-e8346379c5ea
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: bender:version_1
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
..
compare: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

5 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
81864e5525 Update src/app/page.tsx 2026-03-04 21:16:33 +00:00
bender
112da1f433 Update src/app/layout.tsx 2026-03-04 21:16:33 +00:00
bender
39ecdd102f Merge version_1 into main 
Merge version_1 into main
 2026-03-04 21:13:23 +00:00
bender
e4a6a5e630 Merge version_1 into main 
Merge version_1 into main
 2026-03-04 21:12:33 +00:00
bender
328fad2692 Merge version_1 into main 
Merge version_1 into main
 2026-03-04 21:11:26 +00:00
2 changed files with 55 additions and 73 deletions
Expand all files Collapse all files

51
src/app/layout.tsx
View File

@@ -1,57 +1,21 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { DM_Sans } from "next/font/google"; import "./styles/variables.css";
import "./globals.css"; import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({ const inter = Inter({ subsets: ["latin"] });
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const dmSans = DM_Sans({
variable: "--font-dm-sans", subsets: ["latin"],
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Paletteai – AI Design System Generator", description: "Generate complete, production-ready design systems in minutes. Color palettes, typography, components, and accessibility rules—all powered by AI.", keywords: "design system, AI design, color psychology, typography system, accessibility, design generator, CSS variables", metadataBase: new URL("https://paletteai.app"), title: "Paletteai - AI-Powered Design System Generation", description: "Generate complete, production-ready design systems in minutes with AI. Get color psychology, typography systems, component libraries, accessibility rules, and brand DNA."};
alternates: {
canonical: "https://paletteai.app"},
openGraph: {
title: "Paletteai – AI Design System Generator", description: "Generate complete, production-ready design systems in minutes. Color palettes, typography, components, and accessibility rules—all powered by AI.", url: "https://paletteai.app", siteName: "Paletteai", type: "website", images: [
{
url: "https://paletteai.app/og-image.png", alt: "Paletteai AI Design System Generator"},
],
},
twitter: {
card: "summary_large_image", title: "Paletteai – AI Design System Generator", description: "Generate complete, production-ready design systems in minutes. Color palettes, typography, components, and accessibility rules—all powered by AI.", images: ["https://paletteai.app/twitter-image.png"],
},
robots: {
index: true,
follow: true,
},
};
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: {
children: React.ReactNode; children: React.ReactNode;
}>) { }) {
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en">
<ServiceWrapper> <body className={inter.className}>{children}
<body
className={`${halant.variable} ${inter.variable} ${dmSans.variable} antialiased`}
>
<Tag />
{children}
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: ` __html: `
@@ -1419,7 +1383,6 @@ export default function RootLayout({
}} }}
/> />
</body> </body>
</ServiceWrapper>
</html> </html>
); );
} }

77
src/app/page.tsx
View File

@@ -8,7 +8,7 @@ import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactCTA from '@/components/sections/contact/ContactCTA'; import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Palette, Type, Layers, Shield, Zap } from 'lucide-react'; import { Sparkles, Palette, Type, Layers, Shield, Zap, Brain, Lock, BarChart3, Lightbulb, Grid3X3, Compass } from 'lucide-react';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -19,7 +19,7 @@ export default function LandingPage() {
contentWidth="compact" contentWidth="compact"
sizing="mediumLargeSizeMediumTitles" sizing="mediumLargeSizeMediumTitles"
background="circleGradient" background="circleGradient"
cardStyle="gradient-bordered" cardStyle="glass-depth"
primaryButtonStyle="diagonal-gradient" primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered" secondaryButtonStyle="layered"
headingFontWeight="bold" headingFontWeight="bold"
@@ -30,9 +30,7 @@ export default function LandingPage() {
navItems={[ navItems={[
{ name: "Features", id: "features" }, { name: "Features", id: "features" },
{ name: "Engines", id: "engines" }, { name: "Engines", id: "engines" },
{ name: "Pricing", id: "pricing" }, { name: "Social Proof", id: "social-proof" },
{ name: "Docs", id: "docs" },
{ name: "Blog", id: "blog" },
]} ]}
button={{ text: "Join Waitlist", href: "contact" }} button={{ text: "Join Waitlist", href: "contact" }}
/> />
@@ -57,16 +55,20 @@ export default function LandingPage() {
testimonials={[ 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, 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"}, 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, 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"}, 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, 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"}, 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, 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"}, imageSrc: "/placeholders/placeholder1.webp?_wi=4"
},
]} ]}
testimonialRotationInterval={5000} testimonialRotationInterval={5000}
useInvertedBackground={false} useInvertedBackground={false}
@@ -88,36 +90,44 @@ export default function LandingPage() {
title: "Color Palettes", description: "AI-driven color psychology ensures your palette resonates emotionally and maintains WCAG accessibility compliance automatically.", icon: Palette, title: "Color Palettes", description: "AI-driven color psychology ensures your palette resonates emotionally and maintains WCAG accessibility compliance automatically.", icon: Palette,
mediaItems: [ 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-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"}, 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, title: "Typography Systems", description: "Complete type hierarchies with responsive scaling, accessibility metrics, and production-ready CSS variables for every font weight.", icon: Type,
mediaItems: [ 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-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"}, 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, title: "Component Libraries", description: "Pre-structured component hierarchies with design tokens, variant definitions, and accessibility rules baked in from the start.", icon: Layers,
mediaItems: [ 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-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"}, 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, title: "Accessibility Rules", description: "Real WCAG automation ensures every element meets accessibility standards. Contrast ratios, color blindness simulations, and compliance audits.", icon: Shield,
mediaItems: [ 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/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"}, 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"
},
], ],
}, },
]} ]}
@@ -126,27 +136,34 @@ export default function LandingPage() {
<div id="engines" data-section="engines"> <div id="engines" data-section="engines">
<ProductCardOne <ProductCardOne
title="Six Interconnected Engines" title="Six Interconnected Technology Engines"
description="Paletteai's technological backbone combines specialized AI engines that work together as an integrated system, not separate features." description="Paletteai's technological backbone combines specialized AI engines that work together as an integrated system, creating a unified design intelligence ecosystem."
tag="Technology" tag="Glassmorphic Architecture"
tagIcon={Brain}
tagAnimation="slide-up" tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
animationType="scale-rotate" animationType="scale-rotate"
useInvertedBackground={false} useInvertedBackground={false}
gridVariant="three-columns-all-equal-width" gridVariant="two-columns-alternating-heights"
products={[ 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-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-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-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-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-5", name: "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"}, 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>
@@ -154,8 +171,9 @@ export default function LandingPage() {
<div id="social-proof" data-section="social-proof"> <div id="social-proof" data-section="social-proof">
<SocialProofOne <SocialProofOne
title="Trusted by Design Leaders" title="Trusted by Design Leaders"
description="Join hundreds of designers, founders, and design teams already on the Paletteai waitlist." description="Join hundreds of designers, founders, and design teams already on the Paletteai waitlist, building the future of AI-assisted design systems."
tag="Early Adopters" tag="Early Adopters"
tagIcon={Sparkles}
tagAnimation="slide-up" tagAnimation="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
@@ -163,7 +181,8 @@ export default function LandingPage() {
"Tech Company", "Creative Agency", "Startup Innovators", "Design Systems Co", "Digital Product Inc", "Software Solutions", "Design SaaS Studio", "Enterprise Software" "Tech Company", "Creative Agency", "Startup Innovators", "Design Systems Co", "Digital Product Inc", "Software Solutions", "Design SaaS Studio", "Enterprise Software"
]} ]}
logos={[ 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"]} "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} speed={40}
showCard={true} showCard={true}
/> />