Merge version_2 into main #1
202
src/app/page.tsx
202
src/app/page.tsx
@@ -8,12 +8,9 @@ import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
|
||||
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
||||
import FaqBase from "@/components/sections/faq/FaqBase";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||||
import { Sparkles, Search, ArrowUpRight, Monitor, Shield, Zap, Puzzle, TrendingUp, Award, Users, Rocket, Target, Globe } from "lucide-react";
|
||||
import { Sparkles, ArrowUpRight, Monitor, Globe, Rocket, Target, Zap } from "lucide-react";
|
||||
|
||||
export default function WebAgencyPage() {
|
||||
return (
|
||||
@@ -25,7 +22,7 @@ export default function WebAgencyPage() {
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
@@ -40,115 +37,106 @@ export default function WebAgencyPage() {
|
||||
]}
|
||||
button={{ text: "Work With Us", href: "#contact" }}
|
||||
/>
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Elevate Your Brand with Webloom SA"
|
||||
description="We are a premium digital agency crafting results-driven, high-converting websites and modern branding solutions for ambitious South African businesses."
|
||||
tag="Growth-Driven Digital Agency"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Start Your Project", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-control-panel_23-2151957130.jpg", imageAlt: "Modern agency dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166948.jpg", imageAlt: "Creative branding concept" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blueprint-architect-construction-project-sketch-concept_53876-133820.jpg", imageAlt: "High-end web design interface" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg", imageAlt: "Digital marketing strategy" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-3d-progress-bar-showing-50-percent-completion_84443-86331.jpg", imageAlt: "Minimalist interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-background-with-stationery_23-2149872572.jpg", imageAlt: "Premium brand identity" },
|
||||
]}
|
||||
carouselItemClassName="!aspect-[4/5]"
|
||||
/>
|
||||
<FeatureBento
|
||||
title="Our Core Services"
|
||||
description="Comprehensive digital solutions designed to accelerate your growth and establish a strong online presence."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Website Design", description: "Bespoke, high-converting websites tailored to your unique business goals.", bentoComponent: "reveal-icon", icon: Globe,
|
||||
},
|
||||
{
|
||||
title: "Branding & Identity", description: "Memorable brand strategies that resonate with your target audience.", bentoComponent: "reveal-icon", icon: Target,
|
||||
},
|
||||
{
|
||||
title: "Digital Strategy & SEO", description: "Actionable insights and optimization to rank higher and attract more customers.", bentoComponent: "reveal-icon", icon: Rocket,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<FeatureCardTwentySix
|
||||
title="Selected Portfolio"
|
||||
description="Explore a curated collection of premium web design projects delivered with precision."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View All Projects", href: "#work" }]
|
||||
}
|
||||
buttonAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Eco-Tech SA", description: "Modern landing page for tech solutions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qcuzbg", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "Apex Apparel", description: "Premium e-commerce identity", imageSrc: "http://img.b2bpic.net/free-photo/sexy-blond-female-black-costume-sits-round-black-chair-empty-room_613910-8182.jpg", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "FinCorp Advisors", description: "Professional corporate branding", imageSrc: "http://img.b2bpic.net/free-photo/business-accounting-financial-analysis-management-concept_53876-15826.jpg", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
title: "Cape Vibe Tourism", description: "Immersive travel website design", imageSrc: "http://img.b2bpic.net/free-photo/air-ticket-flight-booking-concept_53876-121109.jpg", buttonIcon: ArrowUpRight,
|
||||
buttonHref: "#"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<MetricCardOne
|
||||
title="Why Webloom SA?"
|
||||
description="We combine global design standards with deep local market understanding."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "delivery", value: "FAST", title: "Delivery", description: "Rapid deployment of high-end digital assets", icon: Zap },
|
||||
{ id: "design", value: "PREMIUM", title: "Design", description: "Modern, minimal, and high-converting aesthetics", icon: Monitor },
|
||||
{ id: "local", value: "LOCAL", title: "Expertise", description: "Understanding the South African business landscape", icon: Globe },
|
||||
]}
|
||||
/>
|
||||
<FeatureCardSixteen
|
||||
title="The Webloom Difference"
|
||||
description="We focus on results, speed, and premium quality."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
negativeCard={{ items: ["Cluttered designs", "Slow-loading sites", "Outdated marketing", "One-size-fits-all strategies"] }}
|
||||
positiveCard={{ items: ["Minimalist & Bold UI", "Performance-optimized builds", "Data-backed SEO growth", "Tailored digital strategy"] }}
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Start Today"
|
||||
title="Ready to Build Your Digital Legacy?"
|
||||
description="Connect with the team at Webloom SA and let's craft a website that grows your business."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Work With Webloom SA", href: "#contact" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<div id="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Elevate Your Brand with Webloom SA"
|
||||
description="We are a premium digital agency crafting results-driven, high-converting websites and modern branding solutions for ambitious South African businesses."
|
||||
tag="Growth-Driven Digital Agency"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
buttons={[
|
||||
{ text: "Start Your Project", href: "#contact" },
|
||||
{ text: "View Our Work", href: "#work" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselPosition="right"
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-control-panel_23-2151957130.jpg", imageAlt: "Modern agency dashboard" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166948.jpg", imageAlt: "Creative branding concept" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blueprint-architect-construction-project-sketch-concept_53876-133820.jpg", imageAlt: "High-end web design interface" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg", imageAlt: "Digital marketing strategy" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-3d-progress-bar-showing-50-percent-completion_84443-86331.jpg", imageAlt: "Minimalist interface design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-background-with-stationery_23-2149872572.jpg", imageAlt: "Premium brand identity" },
|
||||
]}
|
||||
carouselItemClassName="!aspect-[4/5]"
|
||||
/>
|
||||
</div>
|
||||
<div id="services">
|
||||
<FeatureBento
|
||||
title="Our Core Services"
|
||||
description="Comprehensive digital solutions designed to accelerate your growth and establish a strong online presence."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ title: "Website Design", description: "Bespoke, high-converting websites tailored to your unique business goals.", bentoComponent: "reveal-icon", icon: Globe },
|
||||
{ title: "Branding & Identity", description: "Memorable brand strategies that resonate with your target audience.", bentoComponent: "reveal-icon", icon: Target },
|
||||
{ title: "Digital Strategy & SEO", description: "Actionable insights and optimization to rank higher and attract more customers.", bentoComponent: "reveal-icon", icon: Rocket },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="work">
|
||||
<FeatureCardTwentySix
|
||||
title="Selected Portfolio"
|
||||
description="Explore a curated collection of premium web design projects delivered with precision."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View All Projects", href: "#work" }]}
|
||||
buttonAnimation="slide-up"
|
||||
features={[
|
||||
{ title: "Eco-Tech SA", description: "Modern landing page for tech solutions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qcuzbg", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Apex Apparel", description: "Premium e-commerce identity", imageSrc: "http://img.b2bpic.net/free-photo/sexy-blond-female-black-costume-sits-round-black-chair-empty-room_613910-8182.jpg", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "FinCorp Advisors", description: "Professional corporate branding", imageSrc: "http://img.b2bpic.net/free-photo/business-accounting-financial-analysis-management-concept_53876-15826.jpg", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
{ title: "Cape Vibe Tourism", description: "Immersive travel website design", imageSrc: "http://img.b2bpic.net/free-photo/air-ticket-flight-booking-concept_53876-121109.jpg", buttonIcon: ArrowUpRight, buttonHref: "#" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about">
|
||||
<MetricCardOne
|
||||
title="Why Webloom SA?"
|
||||
description="We combine global design standards with deep local market understanding."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "delivery", value: "FAST", title: "Delivery", description: "Rapid deployment of high-end digital assets", icon: Zap },
|
||||
{ id: "design", value: "PREMIUM", title: "Design", description: "Modern, minimal, and high-converting aesthetics", icon: Monitor },
|
||||
{ id: "local", value: "LOCAL", title: "Expertise", description: "Understanding the South African business landscape", icon: Globe },
|
||||
]}
|
||||
/>
|
||||
<FeatureCardSixteen
|
||||
title="The Webloom Difference"
|
||||
description="We focus on results, speed, and premium quality."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
negativeCard={{ items: ["Cluttered designs", "Slow-loading sites", "Outdated marketing", "One-size-fits-all strategies"] }}
|
||||
positiveCard={{ items: ["Minimalist & Bold UI", "Performance-optimized builds", "Data-backed SEO growth", "Tailored digital strategy"] }}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact">
|
||||
<ContactCTA
|
||||
tag="Start Today"
|
||||
title="Ready to Build Your Digital Legacy?"
|
||||
description="Connect with the team at Webloom SA and let's craft a website that grows your business."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Work With Webloom SA", href: "#contact" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
logoText="Webloom SA"
|
||||
columns={[
|
||||
{ title: "Agency", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Web Design", href: "#" }, { label: "SEO", href: "#" }, { label: "Branding", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Terms", href: "#" }] }
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #161616;
|
||||
--foreground: #f0f0f0;
|
||||
--primary-cta: #ffffff;
|
||||
--background: #000000;
|
||||
--card: #0a0a0a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #10b981;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1e1e1e;
|
||||
--secondary-cta: #1f2937;
|
||||
--secondary-cta-text: #e0e0e0;
|
||||
--accent: #d0d0d0;
|
||||
--background-accent: #9a9a9a;
|
||||
--accent: #059669;
|
||||
--background-accent: #065f46;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user