bender/370449e8-7b8c-40d3-8d36-038e25a42353
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 8 commits from version_2 into main 2026-03-21 02:46:36 +00:00
Conversation 0 Commits 8 Files Changed 8 +1500 -3
8 changed files with 1500 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
src/app/daily-suggestions/page.tsx Normal file
View File

@@ -0,0 +1,297 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Calendar, Sparkles, Cloud, Zap, TrendingUp, Heart, HelpCircle } from "lucide-react";
export default function DailySuggestionsPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Daily Suggestions", id: "/daily-suggestions" },
{ name: "Style Improvement", id: "/style-improvement" },
{ name: "Settings", id: "/settings" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Daily Outfit Suggestions"
description="Get personalized outfit recommendations delivered daily based on your style, weather, and schedule. Our AI analyzes your preferences and creates the perfect looks for every occasion."
buttons={[
{ text: "View Today's Suggestions", href: "#features" },
{ text: "Customize Schedule", href: "#contact" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png"
imageAlt="Daily Outfit Suggestions Interface"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="Daily Outfit Suggestions - Your Daily Style Guide"
/>
</div>
<div id="features" data-section="features">
<ProductCardTwo
title="How Daily Suggestions Work"
description="Our intelligent system delivers personalized outfit recommendations every morning, considering weather, your calendar, and your unique style preferences."
products={[
{
id: "morning-prep", brand: "Smart Feature", name: "Morning Prep Suggestions", price: "6 AM", rating: 5,
reviewCount: "2,847", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Morning preparation outfit suggestions"
},
{
id: "weather-aware", brand: "Real-time Data", name: "Weather-Aware Outfits", price: "Updated", rating: 5,
reviewCount: "1,923", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Weather-integrated outfit suggestions"
},
{
id: "occasion-based", brand: "Calendar Sync", name: "Occasion-Based Outfits", price: "Scheduled", rating: 5,
reviewCount: "3,156", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Event-based outfit recommendations"
},
{
id: "mood-based", brand: "Personalized", name: "Mood-Based Selections", price: "Adaptive", rating: 5,
reviewCount: "1,654", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Mood-based style suggestions"
},
{
id: "trend-integrated", brand: "Fashion Forward", name: "Trend Integration", price: "Weekly", rating: 5,
reviewCount: "2,201", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-trend-detection-feature-showi-1774060739827-c912fd6c.png", imageAlt: "Latest trends integrated into suggestions"
},
{
id: "backup-outfits", brand: "Planning", name: "Backup Outfit Options", price: "3 Choices", rating: 5,
reviewCount: "987", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Multiple outfit options for daily selection"
}
]}
gridVariant="bento-grid"
animationType="scale-rotate"
tag="Intelligent Delivery"
tagIcon={Calendar}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Daily Suggestions Features"
/>
</div>
<div id="recommendations" data-section="recommendations">
<MediaAbout
title="Smart Delivery System"
description="StyleFlow AI learns your daily routine and preferences to deliver outfit suggestions at the perfect time. Whether you prefer morning inspiration, lunch-time outfit swaps, or evening event planning, our system adapts to your schedule. Real-time weather integration ensures your suggestions are always appropriate for current conditions, while our AI considers your commitments and social events throughout the day."
tag="Always On Schedule"
tagIcon={Cloud}
buttons={[
{ text: "Set Preferences", href: "#contact" },
{ text: "Learn More", href: "#faq" }
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-dashboard-showing-how-the-per-1774060740825-e0a00c8c.png"
imageAlt="Daily Suggestions Dashboard"
useInvertedBackground={false}
ariaLabel="How Daily Suggestions System Works"
/>
</div>
<div id="personalization" data-section="personalization">
<MetricCardEleven
title="Suggestion Impact"
description="Users who enable daily suggestions experience significant improvements in their daily routine and style confidence."
metrics={[
{
id: "time-saved", value: "23 min", title: "Daily Time Saved", description: "Average time eliminated from outfit selection", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-time-savings-concep-1774060739868-8711f254.png", imageAlt: "Time saved illustration"
},
{
id: "satisfaction", value: "98%", title: "Satisfaction Rate", description: "Users satisfied with daily suggestions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-user-satisfaction-a-1774060742665-55c2bcb6.png", imageAlt: "Satisfaction rate illustration"
},
{
id: "accuracy", value: "94%", title: "Recommendation Accuracy", description: "Outfits that match user preferences", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/visual-representation-of-millions-of-out-1774060742272-f8495862.png", imageAlt: "Accuracy illustration"
},
{
id: "confidence", value: "87%", title: "Style Confidence Boost", description: "Increase in daily style confidence", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-community-of-active-1774060740798-4b4c80e5.png", imageAlt: "Confidence boost illustration"
}
]}
animationType="slide-up"
tag="By The Numbers"
tagIcon={TrendingUp}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Daily Suggestions Impact Metrics"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Sophie Turner", handle: "@sophieturner", testimonial: "The daily suggestions feature has been a game-changer. I wake up to perfect outfit recommendations that match the weather and my schedule. My mornings are so much easier now!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-sarah-joh-1774060740540-38a07151.png", imageAlt: "Sophie Turner profile photo"
},
{
id: "2", name: "Alex Grant", handle: "@alexgrant", testimonial: "I love how the suggestions adapt to my calendar and weather. Whether I have a meeting or a casual day, the AI always knows what to suggest. It's like having a personal stylist!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-marcus-ch-1774060739436-71a12d15.png", imageAlt: "Alex Grant profile photo"
},
{
id: "3", name: "Priya Sharma", handle: "@priyasharma", testimonial: "Finally, an app that understands what I want to wear each day. The daily suggestions are always on point, and I've never felt more confident stepping out of my house!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-emma-rodr-1774060739897-1ea96c4e.png", imageAlt: "Priya Sharma profile photo"
},
{
id: "4", name: "Jordan Lee", handle: "@jordanlee", testimonial: "The weather integration is brilliant. No more picking an outfit that doesn't match the temperature. StyleFlow AI always has the right suggestion ready for me!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-david-kim-1774060740422-ed9c2210.png", imageAlt: "Jordan Lee profile photo"
},
{
id: "5", name: "Maya Patel", handle: "@mayapatel", testimonial: "I've tried other styling apps, but StyleFlow's daily suggestions are unmatched. They're always relevant, timely, and perfectly suited to my style. Highly recommended!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-lisa-pate-1774060739499-ff485c9e.png", imageAlt: "Maya Patel profile photo"
},
{
id: "6", name: "Chris Anderson", handle: "@chrisanderson", testimonial: "The daily suggestions have saved me from so many outfit mishaps. I trust StyleFlow AI's recommendations completely. It's part of my daily routine now!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-james-wil-1774060739884-dd32226a.png", imageAlt: "Chris Anderson profile photo"
}
]}
showRating={true}
carouselMode="buttons"
animationType="blur-reveal"
title="Loved by Daily Users"
description="See how daily suggestions have transformed users' morning routines and style confidence."
tag="User Stories"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Daily Suggestions User Testimonials"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Daily Suggestions FAQ"
description="Common questions about our daily outfit suggestion feature and how to make the most of it."
faqs={[
{
id: "1", title: "What time do I receive daily suggestions?", content: "You can customize the time you receive suggestions based on your morning routine. Choose from preset times like 6 AM, 7 AM, or 8 AM, or set your own preferred time in the settings."
},
{
id: "2", title: "How does the weather integration work?", content: "StyleFlow AI uses your location to access real-time weather data. Our algorithm ensures that all outfit suggestions are appropriate for the current temperature and conditions, so you're always dressed appropriately."
},
{
id: "3", title: "Can I customize my suggestion preferences?", content: "Absolutely! You can set preferences for style level (casual, business, formal), color preferences, fabric types, and more. The more you customize, the better our AI gets at understanding your preferences."
},
{
id: "4", title: "How does the calendar integration help?", content: "Our app syncs with your calendar to understand your schedule. If you have a meeting, workout, or event, we suggest outfits that match the occasion and mood of your day."
},
{
id: "5", title: "What if I don't like a suggestion?", content: "Simply swipe to see alternatives! Each day comes with 3-5 outfit options. You can also give feedback on suggestions you don't like, which helps our AI improve future recommendations."
},
{
id: "6", title: "Can I disable daily suggestions?", content: "Yes, you can turn off daily notifications in your settings anytime. You can still view suggestions manually in the app whenever you want."
},
{
id: "7", title: "How often are suggestions updated?", content: "Suggestions are fresh every day based on the latest weather, trends, and your personal preferences. As you interact with the app and provide feedback, suggestions improve continuously."
},
{
id: "8", title: "Do suggestions work on weekends?", content: "Yes! Our AI recognizes weekends and suggests more casual, relaxed styles appropriate for your weekend activities. You can also set different preferences for weekdays and weekends."
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-faq-concept-with-st-1774060740620-df8221a9.png"
imageAlt="Daily Suggestions FAQ illustration"
mediaAnimation="slide-up"
mediaPosition="right"
tag="Quick Answers"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
ariaLabel="Daily Suggestions FAQ Section"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Customize Your Daily Suggestions"
description="Set up your preferences and start receiving personalized outfit suggestions daily. Tell us about your style, preferences, and schedule so we can deliver the perfect recommendations for you."
inputs={[
{ name: "email", type: "email", placeholder: "Enter your email", required: true },
{ name: "phone", type: "tel", placeholder: "Your phone number (optional)", required: false }
]}
textarea={{
name: "preferences", placeholder: "Tell us about your style preferences and best time for daily suggestions", rows: 4,
required: false
}}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/stylized-mobile-phone-mockup-showing-sty-1774060740667-7d3a3f33.png"
imageAlt="StyleFlow AI Daily Suggestions Setup"
mediaAnimation="blur-reveal"
mediaPosition="right"
buttonText="Start Getting Suggestions"
ariaLabel="Set Up Daily Outfit Suggestions"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Daily Suggestions", href: "/daily-suggestions" },
{ label: "Style Improvement", href: "/style-improvement" },
{ label: "Settings", href: "/settings" },
{ label: "Download", href: "#contact" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "Blog", href: "/" },
{ label: "Careers", href: "/" },
{ label: "Press", href: "/" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "/" },
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Feedback", href: "/" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
{ label: "Cookie Policy", href: "/" },
{ label: "Accessibility", href: "/" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

247
src/app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,247 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { BarChart3, TrendingUp, Clock, Award } from "lucide-react";
export default function DashboardPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Dashboard", id: "hero" },
{ name: "Outfit Generator", id: "onboarding" },
{ name: "Closet Analysis", id: "features" },
{ name: "Stats", id: "personalization" },
{ name: "Reviews", id: "testimonials" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Your Style Dashboard"
description="Welcome back! Your personalized style dashboard tracks your outfit history, tracks your style evolution, and provides AI insights into your fashion preferences. Monitor your wardrobe health, discover new combinations, and get weekly style recommendations tailored just for you."
buttons={[
{ text: "View Full Stats", href: "#personalization" },
{ text: "Generate Outfit", href: "/outfit-generator" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/modern-mobile-app-interface-mockup-showi-1774060740471-d21e7f8d.png"
imageAlt="StyleFlow AI Dashboard"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="StyleFlow AI Dashboard - Your Style Hub"
/>
</div>
<div id="onboarding" data-section="onboarding">
<FeatureCardTwentyFour
title="Quick Dashboard Features"
description="Access all your dashboard tools at a glance. Track your style metrics, view outfit history, and get instant AI recommendations. Everything you need to stay stylish is just a tap away."
features={[
{
id: "quick-stats", title: "Quick Stats", author: "Overview", description: "View your total outfits created, favorite combinations, and style streaks", tags: ["Statistics", "Overview", "Metrics"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-screen-showing-sty-1774060740332-d6839d7e.png", imageAlt: "Dashboard quick stats overview"
},
{
id: "outfit-history", title: "Outfit History", author: "Records", description: "Browse all your generated outfits, ratings, and wearing frequency", tags: ["History", "Records", "Tracking"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-2-showing-sho-1774060740786-bcbe79ad.png", imageAlt: "Outfit history tracking"
},
{
id: "wardrobe-health", title: "Wardrobe Health", author: "Analysis", description: "See which items are underused and get suggestions to revitalize your closet", tags: ["Analysis", "Insights", "Recommendations"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-3-showing-out-1774060739769-7fc25478.png", imageAlt: "Wardrobe health analysis"
},
{
id: "style-insights", title: "Style Insights", author: "AI Analysis", description: "Discover your top colors, brands, and outfit combinations", tags: ["Insights", "Trends", "AI"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-4-showing-tim-1774060740300-94c7e36c.png", imageAlt: "AI style insights dashboard"
},
{
id: "weekly-report", title: "Weekly Report", author: "Summary", description: "Get a comprehensive style report every week with personalized recommendations", tags: ["Report", "Weekly", "Summary"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-5-showing-age-1774060740696-6c0572f0.png", imageAlt: "Weekly style report"
}
]}
animationType="slide-up"
tag="Dashboard Tools"
tagIcon={BarChart3}
buttons={[
{ text: "Explore Dashboard", href: "#personalization" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Dashboard Features Overview"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFour
title="Closet Management Tools"
description="Organize, analyze, and optimize your wardrobe with advanced AI-powered tools. From automatic categorization to seasonal recommendations, manage every aspect of your closet."
features={[
{
id: "auto-categorize", title: "Auto Categorize", author: "AI Organizing", description: "Automatic clothing categorization using computer vision technology", tags: ["AI", "Organization", "Automatic"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-closet-analysis-feature-scree-1774060741265-69d17829.png", imageAlt: "Automatic closet categorization"
},
{
id: "color-analysis", title: "Color Analysis", author: "Visual AI", description: "Analyze color combinations and find flattering palettes for your skin tone", tags: ["Colors", "Analysis", "Beauty"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Color analysis tool"
},
{
id: "seasonal-swap", title: "Seasonal Swap", author: "Smart Rotation", description: "Get reminders to switch seasonal items and discover dormant pieces", tags: ["Seasonal", "Rotation", "Smart"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Seasonal wardrobe swap"
},
{
id: "item-tracking", title: "Item Tracking", author: "Analytics", description: "Track when and how often each item is worn", tags: ["Tracking", "Analytics", "Usage"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-emergency-mode-nothing-to-wea-1774060740920-76d799d8.png", imageAlt: "Item wear tracking"
},
{
id: "quality-check", title: "Quality Check", author: "Maintenance", description: "Get care tips and reminders to maintain your clothing items", tags: ["Maintenance", "Care", "Quality"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-trend-detection-feature-showi-1774060739827-c912fd6c.png", imageAlt: "Clothing quality maintenance tips"
}
]}
animationType="slide-up"
tag="Closet Tools"
tagIcon={TrendingUp}
buttons={[
{ text: "Go to Closet", href: "/closet-analysis" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Closet Management Tools"
/>
</div>
<div id="personalization" data-section="personalization">
<MetricCardEleven
title="Your Style Metrics"
description="Track your fashion journey with comprehensive analytics and insights. Monitor your progress, celebrate milestones, and watch your personal style evolve."
metrics={[
{
id: "outfits-generated", value: "847", title: "Outfits Generated", description: "Total AI-powered outfit combinations created", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-community-of-active-1774060740798-4b4c80e5.png", imageAlt: "Outfits generated metric"
},
{
id: "items-catalogued", value: "342", title: "Items Catalogued", description: "Pieces in your digital wardrobe", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/visual-representation-of-millions-of-out-1774060742272-f8495862.png", imageAlt: "Items catalogued metric"
},
{
id: "combinations", value: "12.5K", title: "Possible Combinations", description: "Unique outfit possibilities in your closet", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-time-savings-concep-1774060739868-8711f254.png", imageAlt: "Combinations metric"
},
{
id: "favorites", value: "89", title: "Favorite Outfits", description: "Top-rated outfit combinations saved", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-user-satisfaction-a-1774060742665-55c2bcb6.png", imageAlt: "Favorite outfits metric"
}
]}
animationType="slide-up"
tag="Your Stats"
tagIcon={Clock}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Your Style Dashboard Metrics"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarahjstyle", testimonial: "The dashboard gives me such clear insights into my style patterns. I love seeing my favorites and understanding what works best for me.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-sarah-joh-1774060740540-38a07151.png", imageAlt: "Sarah Johnson profile photo"
},
{
id: "2", name: "Marcus Chen", handle: "@marcusstyles", testimonial: "The closet management features are incredible. Organizing my wardrobe has never been easier, and I can actually see everything I own.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-marcus-ch-1774060739436-71a12d15.png", imageAlt: "Marcus Chen profile photo"
},
{
id: "3", name: "Emma Rodriguez", handle: "@emmarestyle", testimonial: "Tracking my outfit history helps me remember what I wore and when. It's like having a personal style journal that actually thinks!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-emma-rodr-1774060739897-1ea96c4e.png", imageAlt: "Emma Rodriguez profile photo"
},
{
id: "4", name: "David Kim", handle: "@davidkimfashion", testimonial: "The metrics show me exactly how much value I'm getting from my wardrobe. No more mystery about what I actually wear.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-david-kim-1774060740422-ed9c2210.png", imageAlt: "David Kim profile photo"
},
{
id: "5", name: "Lisa Patel", handle: "@lisapstyle", testimonial: "My weekly dashboard reports are the best part of my Friday. I love seeing my style evolution and getting personalized recommendations.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-lisa-pate-1774060739499-ff485c9e.png", imageAlt: "Lisa Patel profile photo"
},
{
id: "6", name: "James Wilson", handle: "@jameswilsonfashion", testimonial: "The color analysis feature alone has transformed how I shop. Now I only buy items I know will work with my existing wardrobe.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-james-wil-1774060739884-dd32226a.png", imageAlt: "James Wilson profile photo"
}
]}
showRating={true}
carouselMode="buttons"
animationType="blur-reveal"
title="Dashboard Users Love It"
description="See what StyleFlow AI users think about their personalized dashboard experience."
tag="User Feedback"
tagIcon={Award}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Dashboard User Reviews"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Dashboard", items: [
{ label: "Home", href: "/" },
{ label: "Your Dashboard", href: "/dashboard" },
{ label: "Outfit Generator", href: "/outfit-generator" },
{ label: "Closet Analysis", href: "/closet-analysis" }
]
},
{
title: "Features", items: [
{ label: "Quick Stats", href: "#onboarding" },
{ label: "Wardrobe Tools", href: "#features" },
{ label: "Style Insights", href: "#personalization" },
{ label: "Weekly Reports", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "#" },
{ label: "FAQ", href: "#" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

113
src/app/onboarding/preferences/page.tsx Normal file
View File

@@ -0,0 +1,113 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { TrendingUp } from "lucide-react";
export default function PreferencesPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Onboarding", id: "welcome" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "recommendations" },
{ name: "FAQ", id: "faq" },
{ name: "Get Started", id: "contact" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="preferences" data-section="preferences">
<MetricCardEleven
title="Preference Setup"
description="Let's configure your personal preferences to ensure StyleFlow AI delivers the perfect recommendations for your lifestyle. These settings help our AI understand your unique needs and adapt to your style journey."
metrics={[
{
id: "lifestyle", value: "Lifestyle", title: "Select Your Lifestyle", description: "Are you mostly active, office-based, mixed, or creative professional?", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-community-of-active-1774060740798-4b4c80e5.png", imageAlt: "Lifestyle selection"
},
{
id: "occasions", value: "Occasions", title: "Favorite Occasions", description: "Which occasions matter most to you? Casual, Date nights, Professional, or Events?", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/visual-representation-of-millions-of-out-1774060742272-f8495862.png", imageAlt: "Occasions selection"
},
{
id: "brands", value: "Brands", title: "Favorite Brands", description: "Tell us about 3-5 brands you love. This helps us understand your style better.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-time-savings-concep-1774060739868-8711f254.png", imageAlt: "Favorite brands selection"
},
{
id: "inspiration", value: "Inspiration", title: "Style Inspiration", description: "Share social media accounts or style icons that inspire you.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-user-satisfaction-a-1774060742665-55c2bcb6.png", imageAlt: "Style inspiration selection"
}
]}
animationType="slide-up"
tag="Personalization Complete"
tagIcon={TrendingUp}
buttons={[
{ text: "Complete Onboarding", href: "/" },
{ text: "Back to Quiz", href: "/onboarding/style-quiz" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Preference Setup and Final Onboarding"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Features", href: "/#features" },
{ label: "How It Works", href: "/#recommendations" },
{ label: "Pricing", href: "#" },
{ label: "Download", href: "/#contact" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "/#contact" },
{ label: "FAQ", href: "/#faq" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

121
src/app/onboarding/style-quiz/page.tsx Normal file
View File

@@ -0,0 +1,121 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles } from "lucide-react";
export default function StyleQuizPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Onboarding", id: "welcome" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "recommendations" },
{ name: "FAQ", id: "faq" },
{ name: "Get Started", id: "contact" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="quiz" data-section="quiz">
<FeatureCardTwentyFour
title="Style Quiz"
description="Answer a few quick questions about your style preferences, and we'll tailor your experience to match your unique fashion sense. This helps our AI understand what works best for you."
features={[
{
id: "casual-style", title: "Casual or Formal?", author: "Question 1", description: "What's your go-to style? Casual, Business Casual, Smart Casual, or Formal?", tags: ["Style", "Preference", "Essential"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-screen-showing-sty-1774060740332-d6839d7e.png", imageAlt: "Style preference selection"
},
{
id: "color-palette", title: "Color Preferences", author: "Question 2", description: "Do you prefer neutrals, pastels, bold colors, or a mix of everything?", tags: ["Colors", "Preference", "Aesthetic"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-2-showing-sho-1774060740786-bcbe79ad.png", imageAlt: "Color preference selection"
},
{
id: "body-fit", title: "Fit Preference", author: "Question 3", description: "Do you prefer fitted, loose, oversized, or layered clothing?", tags: ["Fit", "Comfort", "Style"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-3-showing-out-1774060739769-7fc25478.png", imageAlt: "Fit preference selection"
},
{
id: "seasonal-style", title: "Seasonal Style", author: "Question 4", description: "What's your favorite season to dress for, and why?", tags: ["Season", "Preference", "Climate"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-4-showing-tim-1774060740300-94c7e36c.png", imageAlt: "Seasonal style selection"
},
{
id: "budget-range", title: "Budget Range", author: "Question 5", description: "What's your typical budget for clothing? Budget-friendly, Mid-range, or Luxury?", tags: ["Budget", "Shopping", "Preferences"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-5-showing-age-1774060740696-6c0572f0.png", imageAlt: "Budget range selection"
}
]}
animationType="slide-up"
tag="Personalization"
tagIcon={Sparkles}
buttons={[
{ text: "Continue to Preferences", href: "/onboarding/preferences" },
{ text: "Back", href: "/onboarding/welcome" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Style Quiz for AI Personalization"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Features", href: "/#features" },
{ label: "How It Works", href: "/#recommendations" },
{ label: "Pricing", href: "#" },
{ label: "Download", href: "/#contact" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "/#contact" },
{ label: "FAQ", href: "/#faq" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

100
src/app/onboarding/welcome/page.tsx Normal file
View File

@@ -0,0 +1,100 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles } from "lucide-react";
export default function WelcomePage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Onboarding", id: "welcome" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "recommendations" },
{ name: "FAQ", id: "faq" },
{ name: "Get Started", id: "contact" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Welcome to StyleFlow AI"
description="Get ready to transform your wardrobe and discover your personal style. Our guided onboarding process will help us understand your fashion preferences, shopping habits, and style challenges. Let's create your unique style profile in just a few minutes."
buttons={[
{ text: "Start Onboarding", href: "/onboarding/style-quiz" },
{ text: "Back to Home", href: "/" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/modern-mobile-app-interface-mockup-showi-1774060740471-d21e7f8d.png"
imageAlt="StyleFlow AI Welcome Screen"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="StyleFlow AI Welcome - Start Your Onboarding"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Features", href: "/#features" },
{ label: "How It Works", href: "/#recommendations" },
{ label: "Pricing", href: "#" },
{ label: "Download", href: "/#contact" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
{ label: "Press", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "/#contact" },
{ label: "FAQ", href: "/#faq" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

284
src/app/outfit-generator/page.tsx Normal file
View File

@@ -0,0 +1,284 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, Zap, Brain, Heart, HelpCircle } from "lucide-react";
export default function OutfitGeneratorPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Dashboard", id: "onboarding" },
{ name: "Outfit Generator", id: "hero" },
{ name: "Closet Analysis", id: "features" },
{ name: "How It Works", id: "recommendations" },
{ name: "Tips", id: "testimonials" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="AI Outfit Generator"
description="Create unlimited outfit combinations in seconds. Whether you're getting ready for work, a night out, or a casual day, our AI analyzes your wardrobe and generates personalized outfits tailored to your style, the occasion, and current weather. No more decision fatigue."
buttons={[
{ text: "Generate Now", href: "#onboarding" },
{ text: "Learn How", href: "#recommendations" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/modern-mobile-app-interface-mockup-showi-1774060740471-d21e7f8d.png"
imageAlt="AI Outfit Generator Interface"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="AI-Powered Outfit Generator"
/>
</div>
<div id="onboarding" data-section="onboarding">
<FeatureCardTwentyFour
title="How the Generator Works"
description="Our intelligent outfit generation process considers multiple factors to create perfectly personalized combinations from your existing wardrobe. Follow these steps to get your first AI-generated outfit."
features={[
{
id: "select-occasion", title: "Select Occasion", author: "Step 1", description: "Choose the type of outfit you need: casual, work, formal, gym, date, or custom occasion", tags: ["Occasion", "Selection", "AI Input"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-screen-showing-sty-1774060740332-d6839d7e.png", imageAlt: "Occasion selection screen"
},
{
id: "input-mood", title: "Input Your Mood", author: "Step 2", description: "Tell the AI your current mood: confident, comfort, trendy, or minimalist", tags: ["Mood", "Preference", "Vibe"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-2-showing-sho-1774060740786-bcbe79ad.png", imageAlt: "Mood selection interface"
},
{
id: "weather-check", title: "Weather Check", author: "Step 3", description: "The AI checks your location's weather to suggest appropriate clothing layers and materials", tags: ["Weather", "Real-time", "Location"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-3-showing-out-1774060739769-7fc25478.png", imageAlt: "Weather integration for outfit generation"
},
{
id: "color-palette", title: "Color Palette", author: "Step 4", description: "Select your preferred color theme or let AI choose based on your skin tone analysis", tags: ["Colors", "Harmony", "Aesthetics"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-4-showing-tim-1774060740300-94c7e36c.png", imageAlt: "Color palette selection"
},
{
id: "generate-outfit", title: "Generate Outfit", author: "Step 5", description: "AI instantly creates personalized outfit combinations with alternative suggestions", tags: ["Generation", "AI", "Instant"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-onboarding-step-5-showing-age-1774060740696-6c0572f0.png", imageAlt: "Generated outfit display"
}
]}
animationType="slide-up"
tag="Generation Process"
tagIcon={Sparkles}
buttons={[
{ text: "Start Generating", href: "#features" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Outfit Generator Step-by-Step Guide"
/>
</div>
<div id="features" data-section="features">
<ProductCardTwo
title="Generator Features"
description="Explore the powerful features of our AI outfit generator that make outfit creation fast, fun, and personalized."
products={[
{
id: "smart-matching", brand: "AI Engine", name: "Smart Matching", price: "Instant", rating: 5,
reviewCount: "3,421", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-screen-showing-smart-outfit-g-1774060740776-16534c83.png", imageAlt: "Smart clothing matching algorithm"
},
{
id: "multiple-options", brand: "Diversity", name: "Multiple Options", price: "Unlimited", rating: 5,
reviewCount: "2,856", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-closet-analysis-feature-scree-1774060741265-69d17829.png", imageAlt: "Multiple outfit combination options"
},
{
id: "style-learning", brand: "Adaptive AI", name: "Style Learning", price: "Improving", rating: 5,
reviewCount: "2,143", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "AI learning from user feedback"
},
{
id: "occasion-smart", brand: "Context Aware", name: "Occasion Intelligence", price: "Smart", rating: 5,
reviewCount: "1,967", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Occasion-based outfit intelligence"
},
{
id: "instant-save", brand: "Quick Save", name: "Instant Save", price: "One-Tap", rating: 5,
reviewCount: "2,578", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-emergency-mode-nothing-to-wea-1774060740920-76d799d8.png", imageAlt: "Save generated outfits instantly"
},
{
id: "share-outfit", brand: "Social", name: "Share Outfits", price: "Easy", rating: 5,
reviewCount: "1,634", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-trend-detection-feature-showi-1774060739827-c912fd6c.png", imageAlt: "Share outfit recommendations with friends"
}
]}
gridVariant="bento-grid"
animationType="scale-rotate"
tag="Generator Features"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Outfit Generator Features"
/>
</div>
<div id="recommendations" data-section="recommendations">
<MediaAbout
title="How AI Creates Your Perfect Outfit"
description="Our advanced AI considers your entire wardrobe, personal style preferences, body type, color harmony, and the specific occasion to generate outfit combinations that are uniquely yours. The algorithm learns from your feedback on each suggestion, becoming smarter and more personalized with every generation."
tag="AI Technology"
tagIcon={Brain}
buttons={[
{ text: "Generate an Outfit", href: "#onboarding" },
{ text: "View Your Closet", href: "/closet-analysis" }
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-dashboard-showing-how-the-per-1774060740825-e0a00c8c.png"
imageAlt="AI outfit generation process visualization"
useInvertedBackground={false}
ariaLabel="How the AI Outfit Generator Works"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Sarah Johnson", handle: "@sarahjstyle", testimonial: "The outfit generator has been a game-changer. I get dressed so much faster now, and I'm always confident in my look!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-sarah-joh-1774060740540-38a07151.png", imageAlt: "Sarah Johnson profile photo"
},
{
id: "2", name: "Marcus Chen", handle: "@marcusstyles", testimonial: "I use it every morning. The AI suggestions are always spot-on, and I've discovered outfit combinations I never would've thought of!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-marcus-ch-1774060739436-71a12d15.png", imageAlt: "Marcus Chen profile photo"
},
{
id: "3", name: "Emma Rodriguez", handle: "@emmarestyle", testimonial: "The weather integration is genius! I never have to worry about whether an outfit is appropriate for the climate.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-emma-rodr-1774060739897-1ea96c4e.png", imageAlt: "Emma Rodriguez profile photo"
},
{
id: "4", name: "David Kim", handle: "@davidkimfashion", testimonial: "The variety of suggestions is incredible. Even when I generate multiple times a day, I get fresh, unique combinations.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-david-kim-1774060740422-ed9c2210.png", imageAlt: "David Kim profile photo"
},
{
id: "5", name: "Lisa Patel", handle: "@lisapstyle", testimonial: "I love that I can customize the mood and occasion. The generator truly personalizes outfits to exactly what I need.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-lisa-pate-1774060739499-ff485c9e.png", imageAlt: "Lisa Patel profile photo"
},
{
id: "6", name: "James Wilson", handle: "@jameswilsonfashion", testimonial: "The best part? I've saved money because I'm making better use of what I already have. This generator is pure genius!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-james-wil-1774060739884-dd32226a.png", imageAlt: "James Wilson profile photo"
}
]}
showRating={true}
carouselMode="buttons"
animationType="blur-reveal"
title="Loved by Our Users"
description="See how the outfit generator has transformed the way people get dressed."
tag="User Reviews"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Outfit Generator User Reviews"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Generator FAQs"
description="Have questions about how the outfit generator works? Find answers to common questions below."
faqs={[
{
id: "1", title: "How does the AI know what outfits to generate?", content: "The AI analyzes your wardrobe items, your style preferences from onboarding, your feedback on previous suggestions, color harmonies, and current trends to generate personalized combinations."
},
{
id: "2", title: "Can I customize the generated outfits?", content: "Absolutely! You can swap items, change colors, adjust formality levels, or request completely new suggestions. Every customization helps the AI learn your preferences better."
},
{
id: "3", title: "What if I don't like the suggestions?", content: "Simply tap 'Generate Again' for new suggestions. You can also give feedback on why you don't like an outfit to help the AI improve future recommendations."
},
{
id: "4", title: "Does the generator work offline?", content: "The generator requires an internet connection for AI processing, but the app stores your generated outfits locally so you can view them anytime."
},
{
id: "5", title: "How often should I use the generator?", content: "Use it as often as you like! Whether it's daily or weekly, the AI continues learning and improving. Most users find it most helpful on busy mornings or special occasions."
},
{
id: "6", title: "Can I share generated outfits with friends?", content: "Yes! You can save outfits and share them via text, email, or social media. Your friends can see the combinations even if they don't use StyleFlow AI."
},
{
id: "7", title: "How does weather affect outfit generation?", content: "The generator checks your location's real-time weather and suggests appropriate clothing layers, materials, and styles. For example, it won't suggest sleeveless outfits for freezing weather."
},
{
id: "8", title: "Does the generator consider my body type?", content: "Yes, during onboarding you specify your body type and style preferences, which the AI uses to generate flattering combinations that work best for your frame."
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-faq-concept-with-st-1774060740620-df8221a9.png"
imageAlt="Outfit Generator FAQ Illustration"
mediaAnimation="slide-up"
mediaPosition="right"
tag="Questions"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
ariaLabel="Outfit Generator FAQ"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Generator", items: [
{ label: "How to Use", href: "#onboarding" },
{ label: "Features", href: "#features" },
{ label: "FAQs", href: "#faq" },
{ label: "Tips & Tricks", href: "#recommendations" }
]
},
{
title: "More Tools", items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Closet Analysis", href: "/closet-analysis" },
{ label: "My Wardrobe", href: "#" },
{ label: "Style Profile", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "#" },
{ label: "Contact Us", href: "#" },
{ label: "Report Bug", href: "#" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Accessibility", href: "#" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}

6
src/app/page.tsx
View File

@@ -31,7 +31,7 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Onboarding", id: "onboarding" },
{ name: "Onboarding", id: "/onboarding/welcome" },
{ name: "Features", id: "features" },
{ name: "How It Works", id: "recommendations" },
{ name: "FAQ", id: "faq" },
@@ -48,7 +48,7 @@ export default function LandingPage() {
logoText="StyleFlow AI"
description="Transform your wardrobe with AI-powered outfit recommendations. Never wonder 'what do I wear?' again. Get personalized style suggestions based on your preferences, habits, and daily mood."
buttons={[
{ text: "Start Onboarding", href: "#onboarding" },
{ text: "Start Onboarding", href: "/onboarding/welcome" },
{ text: "Learn More", href: "#features" }
]}
buttonAnimation="slide-up"
@@ -91,7 +91,7 @@ export default function LandingPage() {
tag="Multi-Step Experience"
tagIcon={Sparkles}
buttons={[
{ text: "Start Now", href: "#contact" }
{ text: "Start Now", href: "/onboarding/welcome" }
]}
textboxLayout="default"
useInvertedBackground={false}

335
src/app/style-improvement/page.tsx Normal file
View File

@@ -0,0 +1,335 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { Sparkles, TrendingUp, Award, Zap, Heart, HelpCircle, Lightbulb } from "lucide-react";
export default function StyleImprovementPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "Daily Suggestions", id: "/daily-suggestions" },
{ name: "Style Improvement", id: "/style-improvement" },
{ name: "Settings", id: "/settings" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
]}
brandName="StyleFlow AI"
bottomLeftText="Your Personal AI Stylist"
bottomRightText="hello@styleflow.ai"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Style Improvement Guide"
description="Elevate your fashion game with personalized style coaching from our AI mentor. Learn color theory, body proportions, trending techniques, and personal branding to develop a signature look that's uniquely you."
buttons={[
{ text: "Start Learning", href: "#features" },
{ text: "View Tips", href: "#recommendations" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png"
imageAlt="Style Improvement Tips Interface"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="Style Improvement - Elevate Your Fashion Sense"
/>
</div>
<div id="onboarding" data-section="onboarding">
<FeatureCardTwentyFour
title="Personalized Learning Modules"
description="Our comprehensive style education program breaks down fashion fundamentals into easy-to-follow lessons tailored to your style level and goals."
features={[
{
id: "color-theory", title: "Color Theory Essentials", author: "Module 1", description: "Learn which colors complement your skin tone, undertones, and existing wardrobe. Discover color combinations that work for different seasons and occasions.", tags: ["Colors", "Fundamentals", "Personalized"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Color theory lesson"
},
{
id: "body-proportions", title: "Body Proportions & Silhouettes", author: "Module 2", description: "Understand which silhouettes, fits, and cuts work best for your body type. Learn styling tricks to enhance your best features.", tags: ["Fit", "Silhouette", "Body Type"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Body proportions guide"
},
{
id: "layering", title: "Mastering Layering Techniques", author: "Module 3", description: "Learn how to layer clothing strategically for different seasons and occasions. Discover proportionate layering that looks polished and intentional.", tags: ["Layering", "Seasons", "Technique"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Layering techniques lesson"
},
{
id: "accessories", title: "Accessory Styling Guide", author: "Module 4", description: "Master the art of accessories. Learn when to go minimal, how to match metals, choose the right bag, and complete your look with confidence.", tags: ["Accessories", "Styling", "Details"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png", imageAlt: "Accessory styling guide"
},
{
id: "trends", title: "Trend Translation", author: "Module 5", description: "Learn how to adapt current fashion trends to your personal style and lifestyle. Stay on-trend while remaining authentically you.", tags: ["Trends", "Adaptation", "Personal Style"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-trend-detection-feature-showi-1774060739827-c912fd6c.png", imageAlt: "Trend translation lesson"
}
]}
animationType="slide-up"
tag="Educational Modules"
tagIcon={Lightbulb}
buttons={[
{ text: "Explore Lessons", href: "#features" }
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Style Improvement Learning Modules"
/>
</div>
<div id="features" data-section="features">
<ProductCardTwo
title="Improvement Tools & Features"
description="Access professional styling tools designed to accelerate your fashion knowledge and help you create a cohesive, personal style."
products={[
{
id: "virtual-try-on", brand: "Interactive Tool", name: "Virtual Try-On", price: "Live", rating: 5,
reviewCount: "2,847", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Virtual try-on feature"
},
{
id: "style-analysis", brand: "AI Analysis", name: "Personal Style Analysis", price: "Detailed", rating: 5,
reviewCount: "1,923", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-closet-analysis-feature-scree-1774060741265-69d17829.png", imageAlt: "Personal style analysis"
},
{
id: "color-matching", brand: "Smart Technology", name: "AI Color Matching", price: "Adaptive", rating: 5,
reviewCount: "3,156", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Color matching tool"
},
{
id: "trend-alerts", brand: "Weekly Updates", name: "Trend Alerts", price: "Real-time", rating: 5,
reviewCount: "1,654", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-trend-detection-feature-showi-1774060739827-c912fd6c.png", imageAlt: "Trend alerts feature"
},
{
id: "style-quizzes", brand: "Learning Tool", name: "Interactive Quizzes", price: "Gamified", rating: 5,
reviewCount: "2,201", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-showing-daily-outfit-suggesti-1774060739596-adf4482d.png", imageAlt: "Style learning quizzes"
},
{
id: "wardrobe-audit", brand: "Professional Tool", name: "Wardrobe Audit", price: "Comprehensive", rating: 5,
reviewCount: "987", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-closet-analysis-feature-scree-1774060741265-69d17829.png", imageAlt: "Wardrobe audit tool"
}
]}
gridVariant="bento-grid"
animationType="scale-rotate"
tag="Professional Tools"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Style Improvement Tools and Features"
/>
</div>
<div id="recommendations" data-section="recommendations">
<MediaAbout
title="Expert-Guided Learning Path"
description="Our AI mentor tracks your progress and suggests the next best lessons for your style journey. Whether you're a beginner learning style fundamentals or an advanced user mastering trend adoption, we personalize your learning experience. Each lesson includes videos, interactive examples, and real outfit demonstrations you can implement immediately."
tag="Smart Learning"
tagIcon={Award}
buttons={[
{ text: "Start Your Journey", href: "#contact" },
{ text: "View Progress", href: "#faq" }
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/mobile-app-style-improvement-tips-sectio-1774060756169-61f5bbbf.png"
imageAlt="Style Improvement Learning Path"
useInvertedBackground={false}
ariaLabel="Expert-Guided Style Learning Path"
/>
</div>
<div id="personalization" data-section="personalization">
<MetricCardEleven
title="Your Improvement Journey"
description="Track your style evolution and see tangible improvements in your fashion knowledge and confidence."
metrics={[
{
id: "lessons-completed", value: "45", title: "Available Lessons", description: "Comprehensive learning modules", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-community-of-active-1774060740798-4b4c80e5.png", imageAlt: "Lessons available illustration"
},
{
id: "avg-improvement", value: "73%", title: "Average Improvement", description: "Users report significant style growth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/visual-representation-of-millions-of-out-1774060742272-f8495862.png", imageAlt: "Improvement illustration"
},
{
id: "confidence-boost", value: "92%", title: "Confidence Increase", description: "Users feel more assured in style choices", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-time-savings-concep-1774060739868-8711f254.png", imageAlt: "Confidence boost illustration"
},
{
id: "community", value: "15K+", title: "Learning Community", description: "Users sharing style tips and progress", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-user-satisfaction-a-1774060742665-55c2bcb6.png", imageAlt: "Community illustration"
}
]}
animationType="slide-up"
tag="Progress Metrics"
tagIcon={TrendingUp}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Style Improvement Metrics"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Nicole Brooks", handle: "@nicolebrooks", testimonial: "The style improvement lessons completely transformed how I think about fashion. I went from random purchases to a cohesive wardrobe. The color theory module was a game-changer!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-sarah-joh-1774060740540-38a07151.png", imageAlt: "Nicole Brooks profile photo"
},
{
id: "2", name: "Derek Santos", handle: "@dereksantos", testimonial: "I never thought I had style. The learning modules taught me so much about proportions and fits. Now I actually understand why certain outfits work better than others!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-marcus-ch-1774060739436-71a12d15.png", imageAlt: "Derek Santos profile photo"
},
{
id: "3", name: "Tina Wang", handle: "@tinawang", testimonial: "The trend translation module helped me understand how to adapt trends to my personal style without looking like I'm trying too hard. My outfits are now both stylish and authentically me!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-emma-rodr-1774060739897-1ea96c4e.png", imageAlt: "Tina Wang profile photo"
},
{
id: "4", name: "Kevin Murphy", handle: "@kevinmurphy", testimonial: "The virtual try-on tool and color matching feature are incredible. I can experiment without risk and actually see what works before committing to purchases. Saving me so much money!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-david-kim-1774060740422-ed9c2210.png", imageAlt: "Kevin Murphy profile photo"
},
{
id: "5", name: "Rachel Gold", handle: "@rachelgold", testimonial: "Finally, someone broke down personal branding in a way that made sense. I have a signature style now, and people constantly compliment my outfits. StyleFlow's improvement program is invaluable!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-lisa-pate-1774060739499-ff485c9e.png", imageAlt: "Rachel Gold profile photo"
},
{
id: "6", name: "Marcus Ellis", handle: "@marcusellis", testimonial: "The interactive quizzes made learning fun and interactive. I actually look forward to going through new modules. StyleFlow made fashion education engaging and accessible!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/professional-headshot-photo-of-james-wil-1774060739884-dd32226a.png", imageAlt: "Marcus Ellis profile photo"
}
]}
showRating={true}
carouselMode="buttons"
animationType="blur-reveal"
title="Success Stories from Learners"
description="See how our style improvement program has helped users develop confidence and create signature looks."
tag="User Progress"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Style Improvement Program Testimonials"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Style Improvement FAQ"
description="Questions about our learning program, modules, and how to maximize your style education."
faqs={[
{
id: "1", title: "How long does it take to complete the improvement program?", content: "The full program takes about 4-6 weeks to complete if you do one module per week. However, you can go at your own pace. Each module takes 15-30 minutes to complete."
},
{
id: "2", title: "Do I need prior fashion knowledge to start?", content: "Not at all! Our modules start from basics and progress gradually. Whether you're a complete beginner or have some fashion knowledge, there's content for your level."
},
{
id: "3", title: "Can I skip modules?", content: "Yes, you can choose which modules to take based on your interests. However, we recommend following the suggested learning path for the best progression."
},
{
id: "4", title: "Are there quizzes or assessments?", content: "We include optional interactive quizzes and assessments to help reinforce learning. They're gamified and fun, not stressful. You get feedback and recommendations based on your results."
},
{
id: "5", title: "How do I track my progress?", content: "Your dashboard shows lessons completed, topics mastered, and areas for improvement. You'll also get monthly reports on your style evolution."
},
{
id: "6", title: "Can I revisit lessons?", content: "Absolutely! All lessons are available anytime. You can revisit, rewatch videos, and refresh your knowledge whenever you need."
},
{
id: "7", title: "Is there community support?", content: "Yes! Join our learning community where users share experiences, ask questions, and support each other's style journeys. It's a great way to stay motivated."
},
{
id: "8", title: "What happens after I complete the program?", content: "After completing the main program, you get access to advanced topics, trend updates, and monthly mastery challenges to keep improving your style skills."
}
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/illustration-showing-faq-concept-with-st-1774060740620-df8221a9.png"
imageAlt="Style Improvement FAQ illustration"
mediaAnimation="slide-up"
mediaPosition="right"
tag="Quick Answers"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground={false}
faqsAnimation="slide-up"
ariaLabel="Style Improvement FAQ Section"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Start Your Style Education"
description="Join our community of style learners and begin your transformation. Tell us about your current style level and areas you'd like to improve, and we'll create a personalized learning path for you."
inputs={[
{ name: "email", type: "email", placeholder: "Enter your email", required: true },
{ name: "phone", type: "tel", placeholder: "Your phone number (optional)", required: false }
]}
textarea={{
name: "goals", placeholder: "What aspects of style would you like to improve most?", rows: 4,
required: false
}}
useInvertedBackground={false}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtnBlYrqsYIEbap1b7yoqRiw9m/stylized-mobile-phone-mockup-showing-sty-1774060740667-7d3a3f33.png"
imageAlt="StyleFlow AI Style Improvement Program"
mediaAnimation="blur-reveal"
mediaPosition="right"
buttonText="Start Learning"
ariaLabel="Begin Style Improvement Program"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Daily Suggestions", href: "/daily-suggestions" },
{ label: "Style Improvement", href: "/style-improvement" },
{ label: "Settings", href: "/settings" },
{ label: "Download", href: "#contact" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/" },
{ label: "Blog", href: "/" },
{ label: "Careers", href: "/" },
{ label: "Press", href: "/" }
]
},
{
title: "Support", items: [
{ label: "Help Center", href: "/" },
{ label: "Contact Us", href: "#contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Feedback", href: "/" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "/" },
{ label: "Terms of Service", href: "/" },
{ label: "Cookie Policy", href: "/" },
{ label: "Accessibility", href: "/" }
]
}
]}
bottomLeftText="© 2024 StyleFlow AI. All rights reserved."
bottomRightText="Made with ❤️ for fashion lovers worldwide"
ariaLabel="Site footer"
/>
</div>
</ThemeProvider>
);
}