253 lines
16 KiB
TypeScript
253 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
|
|
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
|
|
import { Award, Mail, MessageSquare, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Blackroom Collective"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Portfolio", id: "portfolio" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Start Your Project", href: "#contact"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Premium Creative Intelligent Solutions"
|
|
description="Blackroom Collective delivers high-end video, photography, and web design paired with AI-powered automation. From concept to execution, we elevate your brand with precision and innovation."
|
|
background={{ variant: "glowing-orb" }}
|
|
kpis={[
|
|
{ value: "500+", label: "Completed Projects" },
|
|
{ value: "99.8%", label: "Client Satisfaction" },
|
|
{ value: "24/7", label: "Support Available" }
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Creative Excellence"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "#contact" },
|
|
{ text: "View Our Work", href: "#portfolio" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/a-luxurious-creative-studio-workspace-sh-1772975511907-b40ff6f4.png"
|
|
imageAlt="Premium creative studio workspace"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
title="Our Premium Services"
|
|
description="Comprehensive creative solutions designed for brands, events, and films seeking sophisticated digital experiences. Ready to elevate your vision? Let's discuss your project and bring your creative goals to life."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{
|
|
id: "01", title: "High-End Video Production", description: "Cinematic storytelling with cutting-edge equipment and post-production techniques for commercials, documentaries, and branded content.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-video-production-studio-wit-1772975511180-b568c6b7.png", imageAlt: "Professional video production studio"
|
|
},
|
|
{
|
|
id: "02", title: "Professional Photography", description: "Stunning visual content for products, events, and branding. Expert lighting, composition, and retouching for maximum impact.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/high-end-photography-studio-with-profess-1772975511478-5b240a30.png", imageAlt: "High-end photography setup"
|
|
},
|
|
{
|
|
id: "03", title: "Custom Web Design & Animation", description: "Bespoke digital experiences with fluid animations, interactive elements, and seamless user experiences tailored to your brand.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/sophisticated-web-design-interface-showc-1772975511461-44f6e70e.png", imageAlt: "Web design interface"
|
|
},
|
|
{
|
|
id: "04", title: "AI-Powered Automation", description: "Intelligent bots, automation workflows, and AI receptionists to streamline operations and enhance customer engagement.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/advanced-ai-automation-dashboard-with-in-1772975511710-12bdcd61.png", imageAlt: "AI automation dashboard"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Book a Consultation", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<TestimonialCardTen
|
|
title="Portfolio Highlights"
|
|
description="Discover award-winning projects that showcase our creative excellence and technical innovation."
|
|
tag="Recent Work"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Luxury Fashion Campaign", quote: "Blackroom Collective transformed our brand vision into a breathtaking visual experience. Their attention to detail and innovative approach exceeded all expectations.", name: "Alexandra Mitchell", role: "Creative Director, Luxe Brand Co.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/high-end-luxury-fashion-campaign-photogr-1772975511240-6012f640.png", imageAlt: "Luxury fashion campaign"
|
|
},
|
|
{
|
|
id: "2", title: "Corporate Event Documentation", quote: "The cinematic quality of their event coverage and post-production work set a new standard. Absolutely professional and creative.", name: "James Chen", role: "Event Manager, Global Summit Inc.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-event-documentation-showing-1772975511666-d3a2c88a.png", imageAlt: "Corporate event documentation"
|
|
},
|
|
{
|
|
id: "3", title: "AI Integration Platform", quote: "Their web design combined with AI automation solutions streamlined our entire workflow. A truly innovative partnership.", name: "Sarah Rodriguez", role: "CEO, TechFlow Solutions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/cutting-edge-technology-platform-interfa-1772975511645-7e404bc7.png", imageAlt: "AI integration platform"
|
|
},
|
|
{
|
|
id: "4", title: "Product Launch Video Series", quote: "From concept through final delivery, Blackroom Collective handled every detail with sophistication and creativity. Highly recommended.", name: "Marcus Thompson", role: "Product Manager, InnovateTech", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-product-launch-video-series-1772975511003-af2b1656.png", imageAlt: "Product launch video"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
title="By The Numbers"
|
|
description="Our impact measured through client success and industry recognition."
|
|
tag="Track Record"
|
|
tagIcon={TrendingUp}
|
|
metrics={[
|
|
{ id: "1", value: "500+", description: "Projects Delivered" },
|
|
{ id: "2", value: "150+", description: "Brands Served Globally" },
|
|
{ id: "3", value: "12", description: "Industry Awards Won" },
|
|
{ id: "4", value: "99.8%", description: "Client Satisfaction Rate" }
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Client Testimonials"
|
|
description="Hear directly from brands and organizations who've transformed through our creative solutions."
|
|
tag="Client Stories"
|
|
tagIcon={MessageSquare}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Exceptional Creative Partnership", quote: "Working with Blackroom Collective was transformative for our brand. They understood our vision immediately and delivered beyond expectations.", name: "Elena Fontaine", role: "CMO, Signature Events", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975511935-e1516465.png", imageAlt: "Elena Fontaine portrait"
|
|
},
|
|
{
|
|
id: "2", title: "Technical Excellence & Innovation", quote: "Their AI integration expertise combined with stunning web design gave us a competitive edge we didn't expect. Highly professional team.", name: "David Kwan", role: "CTO, Growth Ventures", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975510608-91c16101.png", imageAlt: "David Kwan portrait"
|
|
},
|
|
{
|
|
id: "3", title: "Cinematic Storytelling Mastery", quote: "The production quality and creative storytelling in their video work elevated our entire marketing strategy. Worth every investment.", name: "Priya Sharma", role: "Head of Marketing, Premium Lifestyle", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975510672-a81d598e.png", imageAlt: "Priya Sharma portrait"
|
|
},
|
|
{
|
|
id: "4", title: "Premium Service Throughout", quote: "From initial consultation to final delivery, Blackroom Collective maintained the highest standards. Truly a premium creative partner.", name: "Robert Harrison", role: "Founder, Design Studios", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975511691-b5f23124.png", imageAlt: "Robert Harrison portrait"
|
|
},
|
|
{
|
|
id: "5", title: "Game-Changing Digital Solutions", quote: "Their approach to web design with custom animations and AI automation completely transformed how we engage with customers.", name: "Lisa Wong", role: "VP Operations, TechCorp International", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975510426-46f2f935.png", imageAlt: "Lisa Wong portrait"
|
|
},
|
|
{
|
|
id: "6", title: "Creative Excellence Delivered", quote: "Outstanding attention to detail, innovative thinking, and professional execution. Blackroom Collective sets the industry standard.", name: "Michael Torres", role: "Creative Director, Brand Collective", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-headshot-portrait-of-a-conf-1772975510207-d337203c.png", imageAlt: "Michael Torres portrait"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TeamCardOne
|
|
title="Meet Our Team"
|
|
description="Visionary creatives and technical experts dedicated to delivering premium digital solutions."
|
|
tag="Our Experts"
|
|
tagIcon={Users}
|
|
members={[
|
|
{
|
|
id: "1", name: "Director of Production", role: "Lead Cinematographer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-portrait-of-a-film-producti-1772975510363-20d9f864.png", imageAlt: "Director of Production"
|
|
},
|
|
{
|
|
id: "2", name: "Creative Director", role: "Brand Strategist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-portrait-of-a-creative-dire-1772975511558-7efa71d9.png", imageAlt: "Creative Director"
|
|
},
|
|
{
|
|
id: "3", name: "Web Design Lead", role: "UI/UX Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-portrait-of-a-web-and-ui-ux-1772975511123-d96e72d7.png", imageAlt: "Web Design Lead"
|
|
},
|
|
{
|
|
id: "4", name: "AI Integration Specialist", role: "Tech Architect", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXdmfJndyWjHwLYE0hN6oDnn2n/professional-portrait-of-an-ai-and-techn-1772975511602-564b556e.png", imageAlt: "AI Integration Specialist"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to Elevate Your Brand?"
|
|
description="Let's discuss how Blackroom Collective can transform your creative vision into stunning digital experiences."
|
|
tagIcon={Mail}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Start Your Project"
|
|
termsText="We respect your privacy. We'll only reach out with project details and premium creative solutions tailored to your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="Blackroom Collective"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Portfolio", href: "#portfolio" },
|
|
{ label: "About Us", href: "#about" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Video Production", href: "#services" },
|
|
{ label: "Photography", href: "#services" },
|
|
{ label: "Web Design", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "AI Solutions", href: "#services" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Privacy", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|