Merge version_2_1781993412194 into main #1
@@ -5,16 +5,16 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500;1,600;1,700&display=swap");
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/lightRed */
|
||||
--background: #fffafa;
|
||||
--card: #ffffff;
|
||||
--foreground: #1a0000;
|
||||
--primary-cta: #e63946;
|
||||
--primary-cta-text: #fffafa;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1a0000;
|
||||
--accent: #f5c4c7;
|
||||
--background-accent: #f09ca1;
|
||||
/* @colorThemes/darkTheme/highFashion */
|
||||
--background: #0a0a0a;
|
||||
--card: #141414;
|
||||
--foreground: #f5f5f0;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #8a8a8a;
|
||||
--background-accent: #1f1f1f;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,36 +1,44 @@
|
||||
import { BarChart3, Film, Megaphone } from "lucide-react";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
import NoiseGradientBackground from "@/components/ui/NoiseGradientBackground";
|
||||
import { StyleProvider } from "@/components/ui/StyleProvider";
|
||||
import HeroBillboardCreator from "@/components/sections/hero/HeroBillboardCreator";
|
||||
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
|
||||
import TestimonialColumnMarqueeCards from "@/components/sections/testimonial/TestimonialColumnMarqueeCards";
|
||||
import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
|
||||
import PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
|
||||
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
|
||||
import Galaxy from "@/components/Galaxy";
|
||||
import LiquidChrome from "@/components/LiquidChrome";
|
||||
import Silk from "@/components/Silk";
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
|
||||
export default function HomePage() {
|
||||
const Galaxy = ({ glowIntensity = 0.5 }: any) => (
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-center bg-background">
|
||||
<div className="absolute w-[80vw] h-[80vw] max-w-[800px] max-h-[800px] bg-foreground rounded-full blur-[120px] animate-spin-slow" style={{ opacity: glowIntensity * 0.2 }} />
|
||||
<div className="absolute w-[60vw] h-[60vw] max-w-[600px] max-h-[600px] bg-accent rounded-full blur-[100px] animate-spin-reverse" style={{ opacity: glowIntensity * 0.3 }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const LiquidChrome = ({ speed = 1 }: any) => (
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none bg-background">
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-background via-foreground/10 to-background" style={{ animation: `aurora ${15 / speed}s linear infinite` }} />
|
||||
<div className="absolute inset-0 backdrop-blur-[60px]" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const Silk = ({ speed = 1, scale = 1, color, rotation = 0 }: any) => (
|
||||
<div className="fixed inset-0 overflow-hidden pointer-events-none z-[-1]" style={{ transform: `scale(${scale}) rotate(${rotation}deg)` }}>
|
||||
<div className="absolute -top-[50%] -left-[50%] w-[200%] h-[200%] bg-gradient-to-b from-transparent via-current to-transparent blur-[100px] opacity-20" style={{ color: color || 'var(--color-primary-cta)', animation: `floating-move-vertical ${20 / speed}s ease-in-out infinite` }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<StyleProvider heroBackground="none" siteBackground="none" buttonVariant="bounce">
|
||||
<StyleProvider heroBackground="none" siteBackground="none" buttonVariant="bounce">
|
||||
<NoiseGradientBackground position="fixed" />
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCreator
|
||||
tag="AI-Driven Style"
|
||||
title="The Future of Fashion"
|
||||
titleHighlight="Curated by AI."
|
||||
description="Elevate your personal style with our AI-powered curation. Immersive experiences for men and women's fashion collections defined by innovation."
|
||||
primaryButton={{ text: "Explore Collections", href: "#" }}
|
||||
note="Personalized for every silhouette"
|
||||
videos={[
|
||||
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4", name: "Men's Tech-Wear", followers: "5M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/glowing-red-warning-triangle-with-exclamation-mark-dark-wet-surface_84443-91213.jpg" },
|
||||
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4", name: "Women's Luxe-Flow", followers: "8M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/letter-o-made-green-grass-with-flowers-isolated-white_169016-57035.jpg" }
|
||||
]}
|
||||
badgeText="Trend-setting"
|
||||
/>
|
||||
</div>
|
||||
<HeroSection />
|
||||
|
||||
<div style={{ width: '100%', height: '400px', position: 'relative' }}>
|
||||
<Galaxy
|
||||
@@ -44,75 +52,21 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Precision-Tailored Growth"
|
||||
description="Defining the new era of high-end fashion tech."
|
||||
metrics={[
|
||||
{ value: "500K+", title: "Active Users", icon: BarChart3 },
|
||||
{ value: "1M+", title: "Styles Curated", icon: Film },
|
||||
{ value: "98%", title: "Satisfaction", icon: Megaphone },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div style={{ width: '100%', height: '400px', position: 'relative' }}>
|
||||
<LiquidChrome baseColor={[0.2, 0.2, 0.2]} speed={0.4} amplitude={0.2} interactive />
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesAlternatingSplit
|
||||
tag="How It Works"
|
||||
title="Seamless Style Evolution"
|
||||
description="From digital discovery to physical arrival, we define your aesthetic."
|
||||
items={[
|
||||
{ title: "Smart Discovery", description: "AI scans global runways to bring trends directly to your wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-58706.jpg" },
|
||||
{ title: "Fluid Generation", description: "Experience custom virtual fittings for both men's and women's lines.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-letter-w_1187-1117.jpg" },
|
||||
{ title: "Instant Dispatch", description: "Worldwide logistics ensure your new look arrives at your doorstep.", imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675182.jpg" },
|
||||
{ title: "Adaptive Feedback", description: "Continual refinement based on your unique style journey.", imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=bpgtsy" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<Silk speed={3} scale={1.2} color="#8257FF" noiseIntensity={1.2} rotation={15} />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Testimonials"
|
||||
title="Refined by Our Community"
|
||||
description="Hear how we transformed the way the world shops for luxury."
|
||||
testimonials={[
|
||||
{ name: "Alex P.", role: "Men's Fashion Enthusiast", quote: "The AI curation is perfect. It understands my aesthetic better than I do.", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-indian-woman-wear-formal-posing-cafe_627829-4625.jpg" },
|
||||
{ name: "Sophia L.", role: "Creative Director", quote: "Unmatched precision in trend forecasting. Simply a beautiful experience.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-drinking-coffee-while-short-break_329181-17590.jpg" },
|
||||
{ name: "Marcus V.", role: "Tech Investor", quote: "Seamless, intuitive, and high-fashion. This is the new standard.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-blogger-holding-shoe-heel-sneakers-thoughtfully-looking-aside-while-recording-new-fashion-video-vlog-camera_574295-5294.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Membership"
|
||||
title="Choose Your Tier"
|
||||
description="Exclusive access to limited collections and AI-personalization."
|
||||
plans={[
|
||||
{ tag: "Standard", price: "$29", description: "Essential access to collections.", features: ["Personal feed", "Monthly lookbook", "Basic support"], primaryButton: { text: "Join", href: "#" } },
|
||||
{ tag: "Premium", price: "$89", description: "The elite fashion experience.", highlight: "VIP", features: ["Everything in Standard", "AI virtual fitting", "Early access", "Stylist consultation"], primaryButton: { text: "Join Premium", href: "#" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="FAQ"
|
||||
title="Common Inquiries"
|
||||
description="Answers regarding our fashion tech ecosystem."
|
||||
items={[
|
||||
{ question: "How does the AI work?", answer: "We use proprietary algorithms to match your preferences with global high-fashion trends." },
|
||||
{ question: "Is it available for all sizes?", answer: "Yes, our virtual models support a comprehensive range of dimensions for both men and women." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FaqSection />
|
||||
</StyleProvider>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Faq.tsx
Normal file
21
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTwoColumn from "@/components/sections/faq/FaqTwoColumn";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqTwoColumn
|
||||
tag="FAQ"
|
||||
title="Common Inquiries"
|
||||
description="Answers regarding our fashion tech ecosystem."
|
||||
items={[
|
||||
{ question: "How does the AI work?", answer: "We use proprietary algorithms to match your preferences with global high-fashion trends." },
|
||||
{ question: "Is it available for all sizes?", answer: "Yes, our virtual models support a comprehensive range of dimensions for both men and women." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/pages/HomePage/sections/Features.tsx
Normal file
23
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "features" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesAlternatingSplit from "@/components/sections/features/FeaturesAlternatingSplit";
|
||||
|
||||
export default function FeaturesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features" data-section="features">
|
||||
<FeaturesAlternatingSplit
|
||||
tag="How It Works"
|
||||
title="Seamless Style Evolution"
|
||||
description="From digital discovery to physical arrival, we define your aesthetic."
|
||||
items={[
|
||||
{ title: "Smart Discovery", description: "AI scans global runways to bring trends directly to your wardrobe.", imageSrc: "http://img.b2bpic.net/free-photo/letter-t-made-green-grass-with-flowers-isolated-white_169016-58706.jpg" },
|
||||
{ title: "Fluid Generation", description: "Experience custom virtual fittings for both men's and women's lines.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-letter-w_1187-1117.jpg" },
|
||||
{ title: "Instant Dispatch", description: "Worldwide logistics ensure your new look arrives at your doorstep.", imageSrc: "http://img.b2bpic.net/free-photo/balloon-twist-letters-flat-background_23-2151675182.jpg" },
|
||||
{ title: "Adaptive Feedback", description: "Continual refinement based on your unique style journey.", imageSrc: "https://storage.googleapis.com/webild/default/no-image.jpg?id=bpgtsy" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/pages/HomePage/sections/Hero.tsx
Normal file
25
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroBillboardCreator from "@/components/sections/hero/HeroBillboardCreator";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCreator
|
||||
tag="AI-Driven Style"
|
||||
title="The Future of Fashion"
|
||||
titleHighlight="Curated by AI."
|
||||
description="Elevate your personal style with our AI-powered curation. Immersive experiences for men and women's fashion collections defined by innovation."
|
||||
primaryButton={{ text: "Explore Collections", href: "#" }}
|
||||
note="Personalized for every silhouette"
|
||||
videos={[
|
||||
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-amara.mp4", name: "Men's Tech-Wear", followers: "5M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/glowing-red-warning-triangle-with-exclamation-mark-dark-wet-surface_84443-91213.jpg" },
|
||||
{ videoSrc: "https://storage.googleapis.com/webild/default/templates/skincare-luxury/influencer-chloe.mp4", name: "Women's Luxe-Flow", followers: "8M+ Trends", imageSrc: "http://img.b2bpic.net/free-photo/letter-o-made-green-grass-with-flowers-isolated-white_169016-57035.jpg" }
|
||||
]}
|
||||
badgeText="Trend-setting"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/pages/HomePage/sections/Metrics.tsx
Normal file
23
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import { BarChart3, Film, Megaphone } from "lucide-react";
|
||||
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Our Impact"
|
||||
title="Precision-Tailored Growth"
|
||||
description="Defining the new era of high-end fashion tech."
|
||||
metrics={[
|
||||
{ value: "500K+", title: "Active Users", icon: BarChart3 },
|
||||
{ value: "1M+", title: "Styles Curated", icon: Film },
|
||||
{ value: "98%", title: "Satisfaction", icon: Megaphone },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Pricing.tsx
Normal file
21
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "pricing" section.
|
||||
|
||||
import React from 'react';
|
||||
import PricingHighlightedCards from "@/components/sections/pricing/PricingHighlightedCards";
|
||||
|
||||
export default function PricingSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingHighlightedCards
|
||||
tag="Membership"
|
||||
title="Choose Your Tier"
|
||||
description="Exclusive access to limited collections and AI-personalization."
|
||||
plans={[
|
||||
{ tag: "Standard", price: "$29", description: "Essential access to collections.", features: ["Personal feed", "Monthly lookbook", "Basic support"], primaryButton: { text: "Join", href: "#" } },
|
||||
{ tag: "Premium", price: "$89", description: "The elite fashion experience.", highlight: "VIP", features: ["Everything in Standard", "AI virtual fitting", "Early access", "Stylist consultation"], primaryButton: { text: "Join Premium", href: "#" } }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/Testimonials.tsx
Normal file
22
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialColumnMarqueeCards from "@/components/sections/testimonial/TestimonialColumnMarqueeCards";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Testimonials"
|
||||
title="Refined by Our Community"
|
||||
description="Hear how we transformed the way the world shops for luxury."
|
||||
testimonials={[
|
||||
{ name: "Alex P.", role: "Men's Fashion Enthusiast", quote: "The AI curation is perfect. It understands my aesthetic better than I do.", imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-indian-woman-wear-formal-posing-cafe_627829-4625.jpg" },
|
||||
{ name: "Sophia L.", role: "Creative Director", quote: "Unmatched precision in trend forecasting. Simply a beautiful experience.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-drinking-coffee-while-short-break_329181-17590.jpg" },
|
||||
{ name: "Marcus V.", role: "Tech Investor", quote: "Seamless, intuitive, and high-fashion. This is the new standard.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-blogger-holding-shoe-heel-sneakers-thoughtfully-looking-aside-while-recording-new-fashion-video-vlog-camera_574295-5294.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user