Files
54b1fbe7-ece2-46c1-b576-521…/src/app/customization-studio/page.tsx

73 lines
2.9 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Linkedin, Twitter } from "lucide-react";
export default function CustomizationStudioPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Studio", id: "/customization-studio" },
]}
brandName="StyleGen AI"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Customization Studio"
description="Bring your designs to life with our real-time AI fabric simulation and advanced pattern adjustment tools."
buttons={[{ text: "Start Designing", href: "#preview" }]}
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"
/>
</div>
<div id="customization-tools" data-section="customization-tools">
<div className="py-20 px-6 max-w-5xl mx-auto text-center">
<h2 className="text-4xl font-bold mb-6">Creative Controls</h2>
<p className="text-lg opacity-80">Use our real-time adjustment panel to modify fabrics, textures, and silhouettes.</p>
</div>
</div>
<div id="preview" data-section="preview">
<div className="py-20 px-6 max-w-5xl mx-auto">
<div className="aspect-video bg-gradient-to-br from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center border-2 border-dashed border-white/20">
<p className="text-2xl font-medium">Live Preview Canvas</p>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="StyleGen AI"
copyrightText="© 2025 StyleGen AI. All rights reserved."
socialLinks={[
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}