Files
ea0190b2-b8be-475e-8d23-d76…/src/app/page.tsx
2026-03-05 09:33:04 +00:00

240 lines
15 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import TextAbout from "@/components/sections/about/TextAbout";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
export default function HomePage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="medium"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="CreativeFlow"
navItems={navItems}
button={{
text: "Get Started", href: "https://app.creativeflow.io"}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
title="Streamline Your Creative Workflow"
description="Centralize all design and content requests in one powerful dashboard. Assign tasks, track progress, and deliver exceptional work faster than ever before."
tag="Creative Management"
tagAnimation="slide-up"
buttons={[
{
text: "Start Free Trial", href: "https://app.creativeflow.io/signup"},
{
text: "Watch Demo", href: "#features"},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=1"
imageAlt="Creative workflow dashboard interface"
imagePosition="right"
mediaAnimation="blur-reveal"
testimonials={[
{
name: "Sarah Chen", handle: "Creative Director, TechVision", testimonial:
"CreativeFlow transformed how our team collaborates. Request-to-delivery time dropped by 40%.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1", imageAlt: "Sarah Chen"},
{
name: "Marcus Rodriguez", handle: "Design Lead, BrandCo", testimonial:
"The kanban board and real-time updates keep everyone aligned. Essential tool for any creative team.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Marcus Rodriguez"},
{
name: "Emily Watson", handle: "Marketing Manager, GrowthLabs", testimonial:
"Finally, a system that makes creative workflow management simple and enjoyable. Highly recommended.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2", imageAlt: "Emily Watson"},
{
name: "James Park", handle: "Content Manager, CreativeHub", testimonial:
"Our turnaround times improved dramatically. The platform is intuitive and powerful.", rating: 5,
imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "James Park"},
]}
testimonialRotationInterval={5000}
useInvertedBackground={false}
background={{ variant: "plain" }}
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
title="Powerful Features Built for Teams"
description="Everything you need to manage creative requests, track workflows, and collaborate seamlessly"
tag="Core Capabilities"
tagAnimation="slide-up"
features={[
{
id: "01", title: "Smart Task Board", description:
"Kanban-style board with custom columns for tracking requests from submission through completion", imageSrc:
"http://img.b2bpic.net/free-photo/closeup-shot-hand-applying-sticky-papers-board_181624-57727.jpg", imageAlt: "Task kanban board interface"},
{
id: "02", title: "Request Management", description:
"Structured forms for submitting design requests with attachments, deadlines, and priority levels", imageSrc:
"http://img.b2bpic.net/free-vector/payday-loan-application-laptop-screen_53876-116937.jpg", imageAlt: "Request submission form"},
{
id: "03", title: "Team Collaboration", description:
"Built-in comments, @mentions, and file sharing to keep teams aligned and productive", imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-woman-with-speech-bubble_53876-70978.jpg", imageAlt: "Team collaboration interface"},
{
id: "04", title: "Real-Time Dashboard", description:
"Live overview of all tasks, team workload, and project metrics at a glance", imageSrc:
"http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg?_wi=2", imageAlt: "Real-time analytics dashboard"},
{
id: "05", title: "Role-Based Access", description:
"Admin, Manager, Designer, and Creator roles with customized views and permissions", imageSrc:
"http://img.b2bpic.net/free-photo/finger-pressing-button-with-padlock_1134-121.jpg", imageAlt: "User roles and permissions"},
{
id: "06", title: "File Management", description:
"Centralized asset library with version control and easy download options for deliverables", imageSrc:
"http://img.b2bpic.net/free-vector/archive-banners-set_1284-11250.jpg", imageAlt: "File management system"},
]}
textboxLayout="default"
animationType="slide-up"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="Why CreativeFlow"
title="Built by creatives, designed for productivity. We understand the challenges of managing creative workflows at scale, and we've engineered a solution that actually works for real teams."
useInvertedBackground={false}
buttons={[
{
text: "Learn More", href: "/about"},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Trusted by Creative Teams"
description="See the impact CreativeFlow has on team productivity and workflow efficiency"
tag="Results"
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "40%", title: "Faster Delivery", description: "Average reduction in request-to-completion time", imageSrc:
"http://img.b2bpic.net/free-vector/speed-oxygen-consumption-graph_1308-177741.jpg", imageAlt: "Performance improvement chart"},
{
id: "2", value: "10K+", title: "Requests Managed", description: "Successfully tracked and completed monthly", imageSrc:
"http://img.b2bpic.net/free-photo/table-laptop-showing-charts-conference-room-business-people-having-important-discussion_482257-27897.jpg", imageAlt: "Request volume statistics"},
{
id: "3", value: "500+", title: "Active Teams", description: "Organizations using CreativeFlow daily", imageSrc:
"http://img.b2bpic.net/free-photo/businessman-holding-laptop-with-financial-ghraphics-while-diverse-employees-talking_482257-6517.jpg", imageAlt: "Team adoption growth"},
{
id: "4", value: "99.9%", title: "Uptime", description: "Reliable platform available when you need it", imageSrc:
"http://img.b2bpic.net/free-photo/two-colleagues-working-late-office-blue-light-night-view_482257-32812.jpg", imageAlt: "System reliability monitoring"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="What Our Users Say"
description="Hear directly from creative teams who've transformed their workflows with CreativeFlow"
tag="Customer Stories"
tagAnimation="slide-up"
testimonials={[
{
id: "1", name: "Sarah Chen", handle: "@sarahchen_creative", testimonial:
"CreativeFlow revolutionized how our design team manages requests. The kanban board is intuitive and the real-time updates keep everyone on the same page.", imageSrc:
"http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg?_wi=1", imageAlt: "Sarah Chen"},
{
id: "2", name: "Marcus Rodriguez", handle: "@mrodriguez_design", testimonial:
"The assignment features and deadline tracking have cut our project chaos in half. Our clients love the faster turnarounds.", imageSrc:
"http://img.b2bpic.net/free-photo/creative-man_1098-14894.jpg?_wi=1", imageAlt: "Marcus Rodriguez"},
{
id: "3", name: "Emily Watson", handle: "@emilywatson_pm", testimonial:
"Finally, a tool that actually understands creative workflows. The comment system and file management are game-changers.", imageSrc:
"http://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg?_wi=1", imageAlt: "Emily Watson"},
{
id: "4", name: "James Park", handle: "@jpark_creative", testimonial:
"Our team productivity increased by 35% in the first month. The learning curve was minimal and ROI was immediate.", imageSrc:
"http://img.b2bpic.net/free-photo/confident-asian-leader-his-team-specialists_1262-4868.jpg?_wi=1", imageAlt: "James Park"},
{
id: "5", name: "Lisa Zhang", handle: "@lisa_zhang_mgr", testimonial:
"CreativeFlow gives us complete visibility into team workload and project status. It's become indispensable for our operations.", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg?_wi=1", imageAlt: "Lisa Zhang"},
{
id: "6", name: "David Thompson", handle: "@dthompson_lead", testimonial:
"The role-based access control is perfect for our organization. Admins, managers, and creatives all have exactly what they need.", imageSrc:
"http://img.b2bpic.net/free-photo/closeup-senior-businessman-with-arms-crossed_1262-1751.jpg?_wi=1", imageAlt: "David Thompson"},
{
id: "7", name: "Jessica Lee", handle: "@jlee_content", testimonial:
"Request management has never been easier. The structured forms and instant notifications keep our workflow smooth.", imageSrc:
"http://img.b2bpic.net/free-photo/vertical-portrait-successful-goodlooking-young-professional-headhunter-female-entrepreneur-office-worker-beige-blazer-look-away-cross-hands-chest-confident-manage-own-business_197531-30576.jpg", imageAlt: "Jessica Lee"},
{
id: "8", name: "Michael Okonkwo", handle: "@mokonkwo_studio", testimonial:
"The support team is fantastic and the platform updates are frequent. We feel like partners, not just customers.", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-bearded-young-reporter-with-photo-camera-dark-photo-studio_613910-12968.jpg", imageAlt: "Michael Okonkwo"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
speed={40}
topMarqueeDirection="left"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Get Started"
title="Ready to transform your creative workflow?"
description="Join hundreds of teams already using CreativeFlow to manage requests, boost productivity, and deliver exceptional work. Start your free trial today."
tagAnimation="slide-up"
inputPlaceholder="your@email.com"
buttonText="Start Free Trial"
termsText="By clicking Start Free Trial, you agree to our Terms of Service and Privacy Policy."
useInvertedBackground={false}
background={{ variant: "plain" }}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="CreativeFlow"
leftLink={{
text: "Privacy Policy", href: "/privacy"}}
rightLink={{
text: "Terms of Service", href: "/terms"}}
/>
</div>
</ThemeProvider>
);
}