Add src/app/ai-style-recommendation/page.tsx

src/app/ai-style-recommendation/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import TextBox from "@/components/Textbox";
+import ButtonBounceEffect from "@/components/button/ButtonBounceEffect/ButtonBounceEffect";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Sparkles } from "lucide-react";
+
+export default function AIStyleRecommendationPage() {
+    const navItems = [
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Docs", id: "docs" },
+        { name: "AI Style Recommendation", id: "/ai-style-recommendation" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    const footerColumns = [
+        {
+            title: "Product",            items: [
+                { label: "Features", href: "#features" },
+                { label: "Pricing", href: "#pricing" },
+                { label: "Integrations", href: "#" },
+                { label: "Changelog", href: "#" },
+            ],
+        },
+        {
+            title: "Resources",            items: [
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Blog", href: "#" },
+            ],
+        },
+        {
+            title: "Company",            items: [
+                { label: "About", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "#contact" },
+                { label: "Press", href: "#" },
+            ],
+        },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="background-highlight"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="gradient-bordered"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="layered"
+            headingFontWeight="semibold"
+        >
+            <NavbarStyleFullscreen
+                navItems={navItems}
+                brandName="AgentFlow"
+                bottomLeftText="Build Smarter"
+                bottomRightText="hello@agentflow.ai"
+            />
+            <div id="ai-style-recommendation">
+                <TextBox
+                    title="Unlock Your Perfect Style with AI"
+                    description="Our advanced AI analyzes your photo, detects face shape, and suggests personalized hairstyles and style recommendations. See your transformation with a before & after preview!"
+                    tag="AI Style Recommender"
+                    tagIcon={Sparkles}
+                    textboxLayout="default"
+                    center={true}
+                    buttons={[
+                        { text: "Upload Your Photo", onClick: () => console.log("Upload photo clicked") }
+                    ]}
+                />
+                <div className="container mx-auto px-4 py-16 text-center">
+                    <h2 className="text-3xl font-bold mb-8">How it Works</h2>
+                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                        <TextBox
+                            title="1. Upload Your Photo"
+                            description="Securely upload a clear photo of yourself. Our AI needs a good view of your face for accurate analysis."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                        <TextBox
+                            title="2. AI Analysis"
+                            description="Our intelligent algorithms detect your face shape and analyze your features to understand your unique style potential."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                        <TextBox
+                            title="3. Personalized Recommendations"
+                            description="Receive AI-generated hairstyle suggestions, clothing style tips, and a 'before & after' preview to visualize your new look."
+                            textboxLayout="default"
+                            center={true}
+                            buttonContainerClassName="hidden"
+                        />
+                    </div>
+                </div>
+            </div>
+            <FooterBaseCard
+                logoText="AgentFlow"
+                columns={footerColumns}
+                copyrightText="© 2025 AgentFlow. All rights reserved."
+            />
+        </ThemeProvider>
+    );
+}