diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 74f0ab7..ee8f207 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,57 +1,21 @@
import type { Metadata } from "next";
-import { Halant } 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 { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-const halant = Halant({
- 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"],
-});
+const inter = Inter({ subsets: ["latin"] });
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"),
- 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,
- },
-};
+ 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."};
export default function RootLayout({
children,
-}: Readonly<{
+}: {
children: React.ReactNode;
-}>) {
+}) {
return (
-
-
-
-
- {children}
-
+
+ {children}
-
);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f3205f2..5e7a31f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ 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';
+import { Sparkles, Palette, Type, Layers, Shield, Zap, Brain, Lock, BarChart3, Lightbulb, Grid3X3, Compass } from 'lucide-react';
export default function LandingPage() {
return (
@@ -19,7 +19,7 @@ export default function LandingPage() {
contentWidth="compact"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
- cardStyle="gradient-bordered"
+ cardStyle="glass-depth"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
@@ -30,9 +30,7 @@ export default function LandingPage() {
navItems={[
{ name: "Features", id: "features" },
{ name: "Engines", id: "engines" },
- { name: "Pricing", id: "pricing" },
- { name: "Docs", id: "docs" },
- { name: "Blog", id: "blog" },
+ { name: "Social Proof", id: "social-proof" },
]}
button={{ text: "Join Waitlist", href: "contact" }}
/>
@@ -57,16 +55,20 @@ export default function LandingPage() {
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"},
+ 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"},
+ 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"},
+ 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"},
+ imageSrc: "/placeholders/placeholder1.webp?_wi=4"
+ },
]}
testimonialRotationInterval={5000}
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,
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,
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,
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,
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() {
@@ -154,8 +171,9 @@ export default function LandingPage() {