Merge version_2 into main #1

Merged
bender merged 4 commits from version_2 into main 2026-06-08 07:04:36 +00:00
4 changed files with 124 additions and 106 deletions

View File

@@ -6,23 +6,22 @@ import "@/lib/gsap-setup";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { DM_Sans } from "next/font/google";
const halant = Halant({
variable: "--font-halant",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: 'Animated Fashion Ads | Dynamic Clothing Brand Marketing',
description: 'Captivate your audience with stunning animated advertisements for any clothing brand. Elevate your fashion marketing and boost engagement.',
title: 'Digital Marketing Agency | Grow Your Business Online',
description: 'Unlock your online potential with expert digital marketing services. From SEO to social media, we drive results and accelerate growth.',
};
const dmSans = DM_Sans({
variable: "--font-dm-sans", subsets: ["latin"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
@@ -31,9 +30,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} antialiased`}
>
<body className={`${dmSans.variable} ${inter.variable} antialiased`}>
<Tag />
{children}
<script

View File

@@ -22,8 +22,8 @@ export default function HvacPage() {
borderRadius="soft"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="glass-elevated"
background="floatingGradient"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
@@ -31,52 +31,52 @@ export default function HvacPage() {
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="StyleFlow"
brandName="DigitalBloom"
navItems={[
{ name: "Solutions", id: "services" },
{ name: "Services", id: "services" },
{ name: "About Us", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Start Your Project", href: "#contact" }}
button={{ text: "Get a Free Quote", href: "#contact" }}
animateOnLoad={false}
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Unleash Your Brand's Style. Define Your Narrative."
description="Captivating animated advertisements for fashion brands that cut through the noise and resonate with your audience."
title="Ignite Your Online Presence. Accelerate Your Growth."
description="Empowering businesses with cutting-edge digital marketing strategies to dominate their market and achieve unparalleled success."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/young-woman-making-makeup-vlog-with-her-smartphone_23-2149039735.jpg", alt: "Fashion Brand Client 1" },
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-blond-male-dressed-red-fleece-shirt_613910-9252.jpg", alt: "Fashion Brand Client 2" },
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-african-man-with-short-haircut-posing-trendy-hat-outdoor-photo-black-guy-good-mood-spending-time-city-autumn-day_197531-21918.jpg", alt: "Fashion Brand Client 3" },
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-working-laptop-cafe_23-2147781358.jpg", alt: "Satisfied Client 1" },
{ src: "http://img.b2bpic.net/free-photo/handsome-young-man-with-dark-hair-beard-casual-white-t-shirt-looks-confident_176420-3773.jpg", alt: "Satisfied Client 2" },
{ src: "http://img.b2bpic.net/free-photo/confident-businesswoman-standing-with-laptop-her-hands_23-2148281313.jpg", alt: "Satisfied Client 3" }
]}
avatarText="Trusted by leading fashion trendsetters"
avatarText="Trusted by leading businesses worldwide"
buttons={[
{ text: "Explore Our Portfolio", href: "#services" },
{ text: "Get a Free Consultation", href: "#contact" },
{ text: "Explore Our Services", href: "#services" },
{ text: "Book a Consultation", href: "#contact" }
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/streaming-youtuber-freelancer_23-2149051897.jpg"
imageAlt="Dynamic animated fashion ad featuring models in vibrant clothing"
imageSrc="http://img.b2bpic.net/free-photo/diverse-group-employees-sitting-table-discussing-work_23-2148906325.jpg"
imageAlt="Team collaborating on digital marketing strategy"
showDimOverlay={true}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Vision"
title="Pioneering Animated Fashion Marketing"
description="StyleFlow is at the forefront of fashion advertising, crafting visually stunning and emotionally resonant animated campaigns. We combine cutting-edge animation with deep industry insights to help brands tell their unique story and connect with their audience on a deeper level."
tag="Our Mission"
title="Driving Digital Excellence for Your Business"
description="DigitalBloom is a premier digital marketing agency dedicated to transforming brands through innovative strategies, data-driven insights, and a relentless focus on ROI. We help businesses of all sizes unlock their full online potential and achieve sustainable growth."
metrics={[
{ value: "50+", title: "Successful Campaigns" },
{ value: "95%", title: "Client Satisfaction" },
{ value: "150+", title: "Successful Projects" },
{ value: "98%", title: "Client Retention" }
]}
imageSrc="http://img.b2bpic.net/free-photo/digital-art-style-illustration-fashion-designer_23-2151537675.jpg"
imageAlt="Creative team discussing fashion animation concepts"
imageSrc="http://img.b2bpic.net/free-photo/business-woman-working-laptop-at-cafe_23-2147781363.jpg"
imageAlt="Analytics dashboard showing growth"
mediaBadge={{
text: "Innovation in Motion", avatarSrc: "http://img.b2bpic.net/free-photo/professional-female-artist-painting-canvas-studio-woman-painter-her-workspace_273443-80.jpg", avatarAlt: "Creative Director"
text: "Results-Oriented Approach", avatarSrc: "http://img.b2bpic.net/free-photo/male-designer-wearing-glasses_23-2148304919.jpg", avatarAlt: "Lead Strategist"
}}
mediaAnimation="slide-up"
metricsAnimation="slide-up"
@@ -85,24 +85,30 @@ export default function HvacPage() {
</div>
<div id="services" data-section="services">
<FeatureCardOne
title="Our Creative Solutions"
description="Transforming fashion brands with dynamic visuals and storytelling that captivate and convert."
buttons={[{ text: "See All Solutions", href: "#contact" }]
title="Our Comprehensive Digital Services"
description="From boosting visibility to converting leads, we cover every aspect of your online marketing needs."
buttons={[{ text: "View All Services", href: "#contact" }]
}
buttonAnimation="slide-up"
features={[
{
title: "3D Lookbook Animations", description: "Showcase your latest collections with hyper-realistic 3D animations, bringing garments to life with unparalleled detail.", imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-beautiful-shade-clothing_23-2151428006.jpg", imageAlt: "3D animated fashion lookbook"},
title: "Search Engine Optimization (SEO)", description: "Improve your organic search rankings and drive more qualified traffic to your website with our expert SEO strategies.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-working-computer_23-2147781351.jpg", imageAlt: "SEO graph and keywords"
},
{
title: "Social Media Campaigns", description: "Craft viral-ready animated content optimized for Instagram Reels, TikTok, and YouTube Shorts to maximize engagement.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-summer-pink-background_169016-3416.jpg", imageAlt: "Animated fashion ad for social media"},
title: "Social Media Marketing", description: "Build a strong brand presence, engage your audience, and generate leads across all major social media platforms.", imageSrc: "http://img.b2bpic.net/free-photo/social-media-concept-with-hand-holding-smartphone_23-2148304859.jpg", imageAlt: "Social media icons on smartphone"
},
{
title: "Virtual Try-On Experiences", description: "Immersive AR experiences allowing customers to 'try on' clothes virtually, enhancing online shopping and reducing returns.", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-concept-with-full-clothing-store_23-2150871154.jpg", imageAlt: "Augmented reality virtual try-on for clothing"},
title: "Website Design & Development", description: "Create stunning, user-friendly, and high-performing websites optimized for conversion and an exceptional user experience.", imageSrc: "http://img.b2bpic.net/free-photo/ux-ui-designers-working-on-project-together_23-2148651859.jpg", imageAlt: "Web design wireframes"
},
{
title: "Brand Story Videos", description: "Develop compelling animated narratives that communicate your brand's ethos, values, and unique selling proposition.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-fit-woman-training_23-2150169369.jpg", imageAlt: "Animated brand story video for fashion"},
title: "Content Marketing", description: "Develop compelling content strategies that attract, engage, and convert your target audience with valuable information.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-workspace-laptop_23-2147781355.jpg", imageAlt: "Content calendar and writing tools"
},
{
title: "Interactive Digital Ads", description: "Engage users with interactive animated ads that invite participation and drive higher click-through rates.", imageSrc: "http://img.b2bpic.net/free-photo/glamorous-fashion-weeks-collage_23-2149324305.jpg", imageAlt: "Interactive animated advertisement"},
title: "Email Marketing Campaigns", description: "Design and execute powerful email campaigns that nurture leads, build customer loyalty, and drive repeat business.", imageSrc: "http://img.b2bpic.net/free-photo/digital-marketing-agency-team-brainstorming_23-2149174526.jpg", imageAlt: "Email marketing newsletter preview"
},
{
title: "Fashion Show Projections", description: "Spectacular animated backdrops and visual effects that elevate your runway shows and create unforgettable moments.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-walking-through-bushes_23-2147781285.jpg", imageAlt: "Animated projection for fashion show"},
title: "Paid Advertising (PPC)", description: "Maximize your ad spend with precisely targeted pay-per-click campaigns on Google, social media, and other platforms.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-laptop-at-cafe_23-2147781363.jpg", imageAlt: "Data analytics for PPC campaigns"
}
]}
gridVariant="uniform-all-items-equal"
uniformGridCustomHeightClasses="aspect-square"
@@ -114,18 +120,21 @@ export default function HvacPage() {
/>
</div>
<FeatureBorderGlow
title="Why Choose StyleFlow"
description="The difference dynamic fashion marketing makes for your brand."
title="Why Choose DigitalBloom"
description="The advantages of partnering with a forward-thinking digital marketing agency."
features={[
{
icon: Rocket,
title: "Innovative Visuals", description: "We push creative boundaries to deliver fresh, cutting-edge animated content that stands out."},
title: "Innovative Strategies", description: "We stay ahead of the curve, employing the latest techniques and technologies for maximum impact."
},
{
icon: Lightbulb,
title: "Strategic Storytelling", description: "Beyond aesthetics, we craft narratives that connect with your audience and amplify your brand message."},
title: "Data-Driven Decisions", description: "Every campaign is backed by thorough research and continuous analysis for optimal performance."
},
{
icon: TrendingUp,
title: "Measurable Impact", description: "Our campaigns are designed to not only look stunning but also drive engagement and growth for your brand."},
title: "Proven Results", description: "Our track record speaks for itself consistent growth and high ROI for our diverse clientele."
}
]}
textboxLayout="default"
animationType="slide-up"
@@ -133,35 +142,42 @@ export default function HvacPage() {
/>
<FeatureCardEight
title="Our Creative Process"
description="Bringing your fashion vision to life, step by step, with clarity and collaboration."
title="Our Proven Process for Success"
description="A transparent, collaborative approach designed to deliver measurable results."
features={[
{
title: "1. Discovery & Concept", description: "We start by understanding your brand, vision, and campaign goals to develop a unique creative concept.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-testing-colours_23-2150538687.jpg", imageAlt: "Team brainstorming creative concepts"},
title: "1. Discover & Strategize", description: "We begin by deeply understanding your business, goals, and target audience to craft a tailored digital strategy.", imageSrc: "http://img.b2bpic.net/free-photo/business-people-having-discussion_23-2147876778.jpg", imageAlt: "Team in a discovery meeting"
},
{
title: "2. Storyboard & Design", description: "Our artists create detailed storyboards and design mockups, ensuring the visual direction aligns with your brand.", imageSrc: "http://img.b2bpic.net/free-photo/hands-school-materials_23-2147659179.jpg", imageAlt: "Artist sketching storyboard for animation"},
title: "2. Plan & Implement", description: "Our experts develop a detailed action plan, selecting the right channels and tactics to achieve your objectives.", imageSrc: "http://img.b2bpic.net/free-photo/teamwork-digital-design-process_23-2148651862.jpg", imageAlt: "Team planning on a whiteboard"
},
{
title: "3. Animation & Production", description: "Bringing the visuals to life with advanced animation techniques, sound design, and meticulous attention to detail.", imageSrc: "http://img.b2bpic.net/free-photo/production-business-plan-meeting_53876-94905.jpg", imageAlt: "Animator working on fashion advertisement"},
title: "3. Execute & Optimize", description: "We launch your campaigns with precision, constantly monitoring and optimizing them for peak performance.", imageSrc: "http://img.b2bpic.net/free-photo/people-working-office_23-2147781350.jpg", imageAlt: "Marketers executing campaigns"
},
{
title: "4. Launch & Optimization", description: "Deploying your campaign across chosen platforms and providing insights for continuous improvement and maximum reach.", imageSrc: "http://img.b2bpic.net/free-photo/diverse-colleagues-working-business-partnership-with-charts-information-data-research-planning-group-presentation-analyzing-graphs-report-with-coworkers-files-tablet-close-up_482257-48649.jpg", imageAlt: "Team analyzing campaign performance data"},
title: "4. Analyze & Grow", description: "Through detailed reporting and analysis, we identify new opportunities and continuously refine strategies for sustained growth.", imageSrc: "http://img.b2bpic.net/free-photo/happy-colleagues-giving-high-five-after-successful-meeting-business_23-2147781329.jpg", imageAlt: "Team celebrating successful results"
}
]}
textboxLayout="default"
useInvertedBackground={false}
/>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
title="Brands That Shine With Us"
description="Hear from fashion leaders who elevated their presence with StyleFlow's animated campaigns."
title="What Our Clients Say"
description="Hear from businesses that have transformed their digital presence with DigitalBloom."
testimonials={[
{
id: "1", name: "Anya Sharma", handle: "Creative Director, Lumina Apparel", testimonial: "StyleFlow transformed our new collection launch. The 3D lookbook was revolutionary and garnered incredible buzz across all platforms. Truly a game-changer.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-beautiful-young-woman_23-2147876775.jpg", imageAlt: "Anya Sharma"},
id: "1", name: "Sarah K.", handle: "CEO, EcoSolutions Inc.", testimonial: "DigitalBloom completely revamped our SEO strategy, leading to a 300% increase in organic traffic within six months. Their team is incredibly knowledgeable and results-driven.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man_23-2147781354.jpg", imageAlt: "Sarah K."
},
{
id: "2", name: "David Lee", handle: "Marketing Head, Urban Thread Co.", testimonial: "Their social media animations boosted our engagement rates by 200%. StyleFlow understood our brand's vibe perfectly and delivered beyond expectations.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-hipster-male-using-laptop-cafe_613910-11944.jpg", imageAlt: "David Lee"},
id: "2", name: "Mark T.", handle: "Marketing Director, Swift Logistics", testimonial: "Our social media engagement skyrocketed after partnering with DigitalBloom. They truly understand our audience and create content that resonates.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-indian-woman-posing-against-a-plain-background_23-2148651877.jpg", imageAlt: "Mark T."
},
{
id: "3", name: "Sophia Chen", handle: "Founder, Elysian Atelier", testimonial: "The virtual try-on experience StyleFlow developed for us drastically improved conversion rates and reduced returns. It's innovative and incredibly effective.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/happy-charming-girl-with-curly-hairstyle-smiling-with-happy-emotions-waiting-christmas_291650-732.jpg", imageAlt: "Sophia Chen"},
id: "3", name: "Jessica L.", handle: "Founder, Artisanal Eats", testimonial: "The new website DigitalBloom designed for us is stunning and incredibly effective. We've seen a significant increase in online sales and positive customer feedback.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-afro-american-woman_23-2147781366.jpg", imageAlt: "Jessica L."
}
]}
showRating={true}
animationType="slide-up"
@@ -171,9 +187,9 @@ export default function HvacPage() {
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Your Questions, Our Expertise"
sideDescription="Find answers to common questions about animated fashion advertising and our process."
buttons={[{ text: "Ask Your Own Question", href: "#contact" }]
sideTitle="Frequently Asked Questions"
sideDescription="Find quick answers to common questions about our services and approach."
buttons={[{ text: "Still Have Questions?", href: "#contact" }]
}
buttonAnimation="slide-up"
faqsAnimation="slide-up"
@@ -181,28 +197,33 @@ export default function HvacPage() {
useInvertedBackground={false}
faqs={[
{
id: "1", title: "What types of animation do you specialize in for fashion?", content: "We specialize in 2D and 3D animation, motion graphics, virtual try-on AR experiences, and interactive digital ads, tailored specifically for the fashion industry."},
id: "1", title: "What makes DigitalBloom different from other agencies?", content: "We combine innovative strategies with a personalized approach, ensuring that our solutions are perfectly aligned with your unique business objectives and deliver measurable ROI."
},
{
id: "2", title: "How long does an animated ad campaign typically take?", content: "Project timelines vary depending on complexity and scope. A typical social media animation might take 2-4 weeks, while a comprehensive 3D lookbook could be 6-12 weeks. We'll provide a detailed timeline after our initial consultation."},
id: "2", title: "How do you measure campaign success?", content: "We define key performance indicators (KPIs) upfront, track progress rigorously using advanced analytics tools, and provide transparent reports on metrics like traffic, conversions, and ROI."
},
{
id: "3", title: "Can you integrate our brand's existing assets?", content: "Absolutely! We work closely with your brand guidelines, logos, photography, and video assets to ensure seamless integration and consistent brand identity throughout the animated content."},
id: "3", title: "Can you work with businesses of all sizes?", content: "Yes, we tailor our services to meet the needs of startups, small businesses, and large enterprises alike. Our scalable solutions ensure effectiveness regardless of your company's size."
},
{
id: "4", title: "What are the benefits of animated fashion ads over traditional photography?", content: "Animated ads offer dynamic storytelling, capture attention more effectively, allow for impossible visuals (like garments flowing without wind), and are highly versatile for various digital platforms. They create a more immersive and memorable brand experience."},
id: "4", title: "What is your process for onboarding a new client?", content: "Our onboarding process begins with a comprehensive discovery phase to understand your brand, market, and goals. This allows us to create a customized strategy before implementation."
},
{
id: "5", title: "Do you offer ongoing support or campaign optimization?", content: "Yes, we offer post-launch support and can provide data-driven insights to optimize your campaigns for better performance and reach. Our goal is your long-term success."},
id: "5", title: "Do you offer long-term partnerships or one-off projects?", content: "We are flexible and can accommodate both. While we excel in long-term strategic partnerships, we also undertake specific projects if they align with our expertise and your business needs."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Elevate Your Brand"
tag="Ready to Grow?"
tagIcon={Sparkles}
title="Ready to Make Your Fashion Brand Unforgettable?"
description="Let's create captivating animated fashion ads that resonate with your audience and drive remarkable results. Get in touch today!"
title="Let's Build Your Digital Success Story Together."
description="Reach out to us today for a free consultation and discover how DigitalBloom can transform your online presence and drive tangible business results."
buttons={[
{ text: "Get a Free Consultation", href: "#contact" },
{ text: "Message Us Now", href: "mailto:info@styleflow.com" },
{ text: "Email Us", href: "mailto:info@digitalbloom.com" }
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
@@ -211,35 +232,35 @@ export default function HvacPage() {
<div id="footer" data-section="footer">
<FooterMedia
logoText="StyleFlow"
imageSrc="http://img.b2bpic.net/free-photo/back-view-woman-looking-wardrobe_23-2148304881.jpg"
imageAlt="Fashion studio with animation tools"
logoText="DigitalBloom"
imageSrc="http://img.b2bpic.net/free-photo/creative-design-agency-office_23-2148906322.jpg"
imageAlt="Modern digital marketing office space"
columns={[
{
title: "Solutions", items: [
{ label: "3D Lookbooks", href: "#services" },
{ label: "Social Campaigns", href: "#services" },
{ label: "Virtual Try-On", href: "#services" },
{ label: "Brand Story Videos", href: "#services" },
],
title: "Services", items: [
{ label: "SEO", href: "#services" },
{ label: "Social Media", href: "#services" },
{ label: "Web Design", href: "#services" },
{ label: "Content Marketing", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "FAQ", href: "#faq" },
{ label: "Contact", href: "#contact" },
],
{ label: "Contact", href: "#contact" }
]
},
{
title: "Connect", items: [
{ label: "info@styleflow.com", href: "mailto:info@styleflow.com" },
{ label: "New York, NY" },
{ label: "@StyleFlow_Studio" },
],
},
{ label: "info@digitalbloom.com", href: "mailto:info@digitalbloom.com" },
{ label: "San Francisco, CA" },
{ label: "@DigitalBloomAgency" }
]
}
]}
copyrightText="© 2026 | StyleFlow. All rights reserved."
copyrightText="© 2024 | DigitalBloom. All rights reserved."
/>
</div>
</ReactLenis>

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-inter-tight), sans-serif;
font-family: var(--font-dm-sans), sans-serif;
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f8fafc;
--card: #ffffff;
--foreground: #0f172a;
--primary-cta: #1d4ed8;
--primary-cta-text: #ffffff;
--secondary-cta: #e0e7ff;
--secondary-cta-text: #1e3a5f;
--accent: #3b82f6;
--background-accent: #60a5fa;
--background: #020617;
--card: #0f172a;
--foreground: #e2e8f0;
--primary-cta: #c4d8f9;
--primary-cta-text: #020617;
--secondary-cta: #041633;
--secondary-cta-text: #e2e8f0;
--accent: #2d30f3;
--background-accent: #1d4ed8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);