255 lines
17 KiB
TypeScript
255 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import {
|
|
Sparkles,
|
|
Rocket,
|
|
Lightbulb,
|
|
TrendingUp,
|
|
MessageCircle,
|
|
Zap,
|
|
Palette,
|
|
Layout,
|
|
Code,
|
|
Smartphone,
|
|
Target,
|
|
Layers,
|
|
CheckCircle,
|
|
Users,
|
|
Globe,
|
|
Award,
|
|
Twitter,
|
|
Linkedin,
|
|
Instagram,
|
|
Github,
|
|
} from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Catalyst"
|
|
navItems={[
|
|
{ name: "Work", id: "features" },
|
|
{ name: "Services", id: "features-ten" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Start Project", href: "#contact"}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Transforming Ideas Into Digital Experiences"
|
|
description="We craft exceptional digital solutions that elevate brands, engage audiences, and drive measurable results. From strategy to execution, every project is infused with creativity and precision."
|
|
background={{ variant: "glowing-orb" }}
|
|
kpis={[
|
|
{ value: "200+", label: "Projects Delivered" },
|
|
{ value: "98%", label: "Client Satisfaction" },
|
|
{ value: "15+", label: "Award Wins" },
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Creative Excellence"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore Our Work", href: "#features" },
|
|
{ text: "Get In Touch", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/a-stunning-creative-agency-workspace-wit-1773208858468-53ccad1f.png"
|
|
imageAlt="Creative agency workspace"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Who We Are"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="We're a collective of designers, developers, and strategists obsessed with creating digital magic. Every pixel, every line of code, every decision is driven by a commitment to excellence and a passion for innovation."
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#features" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
title="Our Creative Process"
|
|
description="We follow a proven methodology that combines strategic thinking with creative excellence to deliver exceptional results."
|
|
tag="How We Work"
|
|
tagIcon={Lightbulb}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Discovery", title: "Strategy & Insight", subtitle: "Deep dive into your vision", description: "We start by understanding your brand, goals, and audience. Through collaborative workshops and research, we uncover insights that fuel our creative strategy and ensure every decision is data-informed.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/minimalist-digital-illustration-of-a-str-1773208857146-6810196e.png?_wi=1", imageAlt: "Strategy and discovery phase"},
|
|
{
|
|
id: 2,
|
|
tag: "Creation", title: "Design & Build", subtitle: "Bringing ideas to life", description: "Our designers and developers collaborate closely to create stunning, functional digital experiences. We iterate rapidly, always keeping your vision and user experience at the center.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/creative-designer-working-on-digital-int-1773208859489-862a777b.png?_wi=1", imageAlt: "Design and creation phase"},
|
|
{
|
|
id: 3,
|
|
tag: "Launch", title: "Execution & Optimization", subtitle: "Perfecting every detail", description: "We rigorously test, refine, and optimize before launch. Post-launch, we monitor performance and continuously improve to ensure your digital solution achieves maximum impact.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/development-team-executing-digital-proje-1773208859987-d0a46fde.png?_wi=1", imageAlt: "Execution and optimization phase"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Our Impact by Numbers"
|
|
description="Proven results that speak to the quality and effectiveness of our work."
|
|
tag="Success Metrics"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "200", title: "Projects", description: "Successfully delivered across diverse industries", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "2", value: "150", title: "Brands", description: "Trusted partners in our creative journey", icon: Users,
|
|
},
|
|
{
|
|
id: "3", value: "50", title: "Million", description: "Combined user impressions globally", icon: Globe,
|
|
},
|
|
{
|
|
id: "4", value: "15", title: "Awards", description: "Industry recognition for excellence", icon: Award,
|
|
},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Hear from the brands and leaders we've partnered with to transform their digital presence."
|
|
tag="Client Stories"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell, CEO of TechFlow", date: "Date: 15 November 2024", title: "Catalyst transformed our vision into reality", quote: "Working with Catalyst was a game-changer for our company. Their strategic approach combined with creative excellence resulted in a digital platform that exceeded our expectations and drove a 45% increase in user engagement.", tag: "Enterprise", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-ceo-fo-1773208857438-8dcf222a.png", avatarAlt: "Sarah Mitchell", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-ceo-fo-1773208857438-8dcf222a.png"},
|
|
{
|
|
id: "2", name: "Michael Chen, CTO of InnovateLab", date: "Date: 10 November 2024", title: "Technical excellence meets creative brilliance", quote: "The team at Catalyst demonstrated exceptional technical knowledge paired with genuine creative thinking. They didn't just build what we asked for—they anticipated our needs and delivered solutions that were both elegant and scalable.", tag: "Technology", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-cto-tech-1773208857201-76985778.png", avatarAlt: "Michael Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-cto-tech-1773208857201-76985778.png"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez, Marketing Director of BrandPulse", date: "Date: 8 November 2024", title: "Results-driven creativity that actually works", quote: "Catalyst understands that great design isn't just about aesthetics—it's about driving real business results. Our new website increased conversions by 60% within the first quarter. Their strategic and creative approach is unmatched.", tag: "Marketing", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-market-1773208857321-a33d314a.png", avatarAlt: "Emily Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-market-1773208857321-a33d314a.png"},
|
|
{
|
|
id: "4", name: "David Park, Product Manager at GrowthVentures", date: "Date: 5 November 2024", title: "Partners who genuinely care about your success", quote: "What sets Catalyst apart is their commitment to understanding our business goals. They're not just contractors—they're true partners invested in our success. The ongoing support and optimization have been invaluable.", tag: "Product", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-product--1773208857072-ef3aac19.png", avatarAlt: "David Park", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-product--1773208857072-ef3aac19.png"},
|
|
{
|
|
id: "5", name: "Jessica Wong, Founder of CreativeHub", date: "Date: 1 November 2024", title: "Innovation and collaboration at every step", quote: "From the initial strategy sessions to the final launch, Catalyst's collaborative approach made all the difference. They brought fresh perspectives while respecting our brand identity. Our new digital ecosystem is stunning.", tag: "Startup", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-startu-1773208857525-de196d69.png", avatarAlt: "Jessica Wong", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-female-startu-1773208857525-de196d69.png"},
|
|
{
|
|
id: "6", name: "James Rodriguez, Creative Director at DesignLab", date: "Date: 28 October 2024", title: "Elevating our brand to new heights", quote: "Catalyst's team brought an incredible level of creativity and professionalism to our rebrand. They listened to our vision, challenged our assumptions thoughtfully, and delivered work that perfectly captured our brand essence.", tag: "Design", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-design-d-1773208860579-9dffb40d.png", avatarAlt: "James Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/professional-headshot-of-a-male-design-d-1773208860579-9dffb40d.png"},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-ten" data-section="features-ten">
|
|
<FeatureCardTen
|
|
title="Comprehensive Digital Solutions"
|
|
description="We offer a full spectrum of services designed to transform your digital presence and drive business growth."
|
|
tag="Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Brand Strategy & Design", description: "From logo design to comprehensive brand systems, we create visual identities that resonate with your audience and differentiate you in the market.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/minimalist-digital-illustration-of-a-str-1773208857146-6810196e.png?_wi=2", imageAlt: "Brand strategy service"},
|
|
items: [
|
|
{ icon: Palette, text: "Visual identity systems" },
|
|
{ icon: Layout, text: "Brand guidelines & assets" },
|
|
{ icon: Zap, text: "Logo & wordmark design" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
id: "2", title: "Web Design & Development", description: "Beautiful, responsive websites that not only look stunning but perform exceptionally. We build experiences that convert visitors into customers.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/creative-designer-working-on-digital-int-1773208859489-862a777b.png?_wi=2", imageAlt: "Web design service"},
|
|
items: [
|
|
{ icon: Code, text: "Custom web development" },
|
|
{ icon: Smartphone, text: "Responsive design" },
|
|
{ icon: Zap, text: "Performance optimization" },
|
|
],
|
|
reverse: true,
|
|
},
|
|
{
|
|
id: "3", title: "Digital Product Strategy", description: "We help you conceptualize, design, and launch digital products that solve real problems and drive user engagement.", media: {
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AmrapdADzCQCnsNaW5oJ8gjeKL/development-team-executing-digital-proje-1773208859987-d0a46fde.png?_wi=2", imageAlt: "Product strategy service"},
|
|
items: [
|
|
{ icon: Target, text: "User research & testing" },
|
|
{ icon: Layers, text: "UX/UI design" },
|
|
{ icon: Rocket, text: "Launch strategy" },
|
|
],
|
|
reverse: false,
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to bring your vision to life? Let's collaborate on something extraordinary. Whether you're a startup with a bold idea or an established brand looking to innovate, we're here to make it happen."
|
|
animationType="entrance-slide"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "mailto:hello@catalystcreative.com" },
|
|
{ text: "Schedule a Call", href: "#" },
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Catalyst"
|
|
copyrightText="© 2025 Catalyst Creative. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" },
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|