Merge version_3_1782001788879 into main #2
@@ -1,354 +1,39 @@
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
import { LineChart, Target, TrendingUp, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import FeaturesSection from './HomePage/sections/Features';
|
||||
import TestimonialAboutSection from './HomePage/sections/TestimonialAbout';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import PricingSection from './HomePage/sections/Pricing';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import SocialProofSection from './HomePage/sections/SocialProof';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
const translations = {
|
||||
en: {
|
||||
tag: "Performance Marketing Agency",
|
||||
title: "Scale your brand with <i>data</i> and strategy",
|
||||
description: "We combine creativity, analytics, and performance marketing to grow your business with measurable results. From campaign strategy to conversion optimization, every decision is backed by data.",
|
||||
primaryBtn: "Start Now",
|
||||
secondaryBtn: "View Pricing"
|
||||
},
|
||||
es: {
|
||||
tag: "Agencia de Performance Marketing",
|
||||
title: "Escala tu marca con <i>datos</i> y estrategia",
|
||||
description: "Combinamos creatividad, analítica y marketing de resultados para hacer crecer tu negocio con resultados medibles. Desde la estrategia de campaña hasta la optimización de conversiones, cada decisión está respaldada por datos.",
|
||||
primaryBtn: "Empezar Ahora",
|
||||
secondaryBtn: "Ver Precios"
|
||||
}
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
const [lang, setLang] = useState<"en" | "es">("es");
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const storedRegion = localStorage.getItem("selectedRegion");
|
||||
if (storedRegion) {
|
||||
try {
|
||||
const region = JSON.parse(storedRegion);
|
||||
setLang(region.lang === "en" ? "en" : "es");
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
const handleRegionChange = (e: Event) => {
|
||||
const customEvent = e as CustomEvent;
|
||||
if (customEvent.detail && customEvent.detail.lang) {
|
||||
setIsTransitioning(true);
|
||||
setTimeout(() => {
|
||||
setLang(customEvent.detail.lang === "en" ? "en" : "es");
|
||||
setIsTransitioning(false);
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("regionChange", handleRegionChange);
|
||||
return () => window.removeEventListener("regionChange", handleRegionChange);
|
||||
}, []);
|
||||
|
||||
const t = translations[lang];
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero" className={`transition-opacity duration-300 ${isTransitioning ? 'opacity-0' : 'opacity-100'}`}>
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
key={lang}
|
||||
tag={t.tag}
|
||||
title={t.title}
|
||||
description={t.description}
|
||||
primaryButton={{
|
||||
text: t.primaryBtn,
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: t.secondaryBtn,
|
||||
href: "#pricing",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
text: "Data-Driven ROI",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
text: "Conversion Optimization",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
text: "Strategic Growth",
|
||||
icon: Target,
|
||||
},
|
||||
{
|
||||
text: "Cross-Channel Analytics",
|
||||
icon: LineChart,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139370.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<SectionErrorBoundary name="features">
|
||||
<FeaturesRevealCardsBento
|
||||
tag={typeof region !== 'undefined' && region.language === 'es' ? "Nuestra Experiencia" : "Our Expertise"}
|
||||
title={typeof region !== 'undefined' && region.language === 'es' ? "Estrategias de Crecimiento Basadas en Datos" : "Data-Backed Growth Strategies"}
|
||||
description={typeof region !== 'undefined' && region.language === 'es' ? "No adivinamos. Analizamos, iteramos y optimizamos cada faceta de tu presencia digital." : "We don't guess. We analyze, iterate, and optimize every facet of your digital presence."}
|
||||
items={[
|
||||
{
|
||||
title: typeof region !== 'undefined' && region.language === 'es' ? "Estrategia de Medios Pagados" : "Paid Media Strategy",
|
||||
description: typeof region !== 'undefined' && region.language === 'es' ? "Gestión de campañas de alto ROI en todos los canales pagados." : "High-ROI campaign management across all paid channels.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",
|
||||
},
|
||||
{
|
||||
title: typeof region !== 'undefined' && region.language === 'es' ? "Optimización de Embudos" : "Funnel Optimization",
|
||||
description: typeof region !== 'undefined' && region.language === 'es' ? "Convirtiendo visitantes en clientes leales a largo plazo." : "Turning visitors into loyal long-term customers.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/prism-dispersing-light-concept_23-2148599209.jpg",
|
||||
},
|
||||
{
|
||||
title: typeof region !== 'undefined' && region.language === 'es' ? "SEO y Contenido" : "SEO & Content",
|
||||
description: typeof region !== 'undefined' && region.language === 'es' ? "Alineación de intención de búsqueda con precisión editorial." : "Search intent alignment with editorial precision.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collectio_23-2148130914.jpg",
|
||||
},
|
||||
{
|
||||
title: typeof region !== 'undefined' && region.language === 'es' ? "Analítica Avanzada" : "Advanced Analytics",
|
||||
description: typeof region !== 'undefined' && region.language === 'es' ? "Atribución que muestra exactamente dónde comienza el ingreso." : "Attribution that shows exactly where revenue begins.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/chalk-drawn-arrow-with-copy-space-pointing-up_23-2148456142.jpg",
|
||||
},
|
||||
{
|
||||
title: "Conversion Rate Audit",
|
||||
description: "Deep-dive diagnostics of your landing pages.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computer-screen-business-office-shows-stock-exchange-values-changing_482257-84627.jpg",
|
||||
},
|
||||
{
|
||||
title: "Creative Asset Testing",
|
||||
description: "Data-informed creative that converts.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-worker-explaining-marketing-plans-female-coworker_1163-4101.jpg",
|
||||
},
|
||||
{
|
||||
title: "Customer Lifecycle",
|
||||
description: "Maximize LTV with tailored retention journeys.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-statistics-presentation-with-arrow_23-2149023747.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesSection />
|
||||
|
||||
<div id="testimonial-about" data-section="testimonial-about">
|
||||
<SectionErrorBoundary name="testimonial-about">
|
||||
<AboutTestimonial
|
||||
tag="The Nume Philosophy"
|
||||
quote="Marketing is no longer just creative. It's a precise combination of data science, psychological triggers, and strategic execution. We build bridges between brand vision and measurable growth."
|
||||
author="Marcus Vane"
|
||||
role="Founder, Nume Analytics"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialAboutSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Measurable Results"
|
||||
title="Analytics Driven Performance"
|
||||
description="Our work speaks through metrics that matter to your bottom line."
|
||||
metrics={[
|
||||
{
|
||||
value: "142%",
|
||||
title: "Average Revenue Lift",
|
||||
features: [
|
||||
"Funnel diagnostic audit",
|
||||
"Conversion rate spikes",
|
||||
"Strategic channel expansion",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "$4.2M",
|
||||
title: "Client Revenue Generated",
|
||||
features: [
|
||||
"Paid channel ROI optimization",
|
||||
"Lifecycle value increases",
|
||||
"Attribution clarity tools",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "3.8x",
|
||||
title: "Average ROAS Growth",
|
||||
features: [
|
||||
"Iterative creative testing",
|
||||
"Search intent targeting",
|
||||
"Audience refinement",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Transparent Pricing"
|
||||
title="Scale with Confidence"
|
||||
description="Choose the level of analytical rigor your brand requires."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$5,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Channel Audit",
|
||||
"Performance Dashboard",
|
||||
"Monthly Strategy",
|
||||
"Creative Iteration",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Growth",
|
||||
price: "$12,500",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Full Funnel Audit",
|
||||
"Advanced Attribution",
|
||||
"Unlimited Creative",
|
||||
"Weekly Reporting",
|
||||
"Retention Strategy",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-director-examining-statistics-big-data-computer-control-room_482257-90941.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<PricingSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag={region === 'US' ? "Trusted by Growth Leaders" : "Confiado por Líderes de Crecimiento"}
|
||||
title={region === 'US' ? "What Clients Say" : "Lo Que Dicen Los Clientes"}
|
||||
description={region === 'US' ? "Our success is defined by the performance impact we deliver to our partners." : "Nuestro éxito se define por el impacto en el rendimiento que entregamos a nuestros socios."}
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sarah Jenkins",
|
||||
role: region === 'US' ? "CMO" : "Director de Marketing",
|
||||
quote: region === 'US' ? "The analytical depth Nume brings is unmatched. Our conversion rates have never looked better." : "La profundidad analítica que aporta Nume es inigualable. Nuestras tasas de conversión nunca se han visto mejor.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-man-working-laptop-lobby_1262-5095.jpg",
|
||||
},
|
||||
{
|
||||
name: "David Chen",
|
||||
role: region === 'US' ? "Founder" : "Fundador",
|
||||
quote: region === 'US' ? "Finally, a marketing partner that understands data and actually helps scale revenue." : "Por fin, un socio de marketing que entiende los datos y realmente ayuda a escalar los ingresos.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-posing-camera_23-2148415936.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Rossi",
|
||||
role: region === 'US' ? "Head of Growth" : "Directora de Crecimiento",
|
||||
quote: region === 'US' ? "Their creative testing framework is sheer genius. Every dollar spent is optimized." : "Su marco de pruebas creativas es pura genialidad. Cada dólar gastado está optimizado.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-goal-oriented-powerful-ceo-sitting-office-posing-with-authority_482257-116892.jpg",
|
||||
},
|
||||
{
|
||||
name: "Markus Weber",
|
||||
role: "CEO",
|
||||
quote: "Nume Analytics transformed how we view our customer acquisition funnel entirely.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/process-creating-stand-up-comedy_23-2151058857.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jasmine Lee",
|
||||
role: "Marketing Director",
|
||||
quote: "Transparent, analytical, and obsessed with results. Highly recommended partner.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Brand Partners"
|
||||
title="Working with Industry Leaders"
|
||||
description="We support ambitious brands across ecommerce, SaaS, and technology."
|
||||
names={[
|
||||
"TechCorp",
|
||||
"Innovate",
|
||||
"GrowthLabs",
|
||||
"RetailGen",
|
||||
"ScaleUp",
|
||||
"Velocity",
|
||||
"Apex",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<SocialProofSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Common Questions"
|
||||
title="Everything You Need to Know"
|
||||
description="Got questions? We've got answers about our approach to analytics and scaling."
|
||||
items={[
|
||||
{
|
||||
question: "What kind of data do you require to get started?",
|
||||
answer: "Typically, we need read-only access to your GA4, CRM, and ad accounts to conduct a preliminary audit.",
|
||||
},
|
||||
{
|
||||
question: "How long until we see performance results?",
|
||||
answer: "While data collection is immediate, optimization cycles usually demonstrate tangible growth after 30-45 days.",
|
||||
},
|
||||
{
|
||||
question: "Are you just doing ads?",
|
||||
answer: "No, we treat ads as part of the broader customer funnel, integrating onsite UX, content, and retention strategies.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Let's Scale"
|
||||
text="Ready to turn data into your most valuable growth asset? Let's discuss your performance strategy today."
|
||||
primaryButton={{
|
||||
text: "Schedule Strategy Call",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Our Portfolio",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Let's Scale"
|
||||
text="Ready to turn data into your most valuable growth asset? Let's discuss your performance strategy today."
|
||||
primaryButton={{
|
||||
text: "Schedule Strategy Call",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "View Our Portfolio",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Faq.tsx
Normal file
34
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Common Questions"
|
||||
title="Everything You Need to Know"
|
||||
description="Got questions? We've got answers about our approach to analytics and scaling."
|
||||
items={[
|
||||
{
|
||||
question: "What kind of data do you require to get started?",
|
||||
answer: "Typically, we need read-only access to your GA4, CRM, and ad accounts to conduct a preliminary audit.",
|
||||
},
|
||||
{
|
||||
question: "How long until we see performance results?",
|
||||
answer: "While data collection is immediate, optimization cycles usually demonstrate tangible growth after 30-45 days.",
|
||||
},
|
||||
{
|
||||
question: "Are you just doing ads?",
|
||||
answer: "No, we treat ads as part of the broader customer funnel, integrating onsite UX, content, and retention strategies.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
src/pages/HomePage/sections/Features.tsx
Normal file
71
src/pages/HomePage/sections/Features.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { BarChart3, LineChart, PieChart, Target } from "lucide-react";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function FeaturesSection() {
|
||||
const features = [
|
||||
{
|
||||
icon: BarChart3,
|
||||
title: "Advanced Tracking",
|
||||
description: "Monitor your campaigns with precision across every platform and region."
|
||||
},
|
||||
{
|
||||
icon: PieChart,
|
||||
title: "Audience Insights",
|
||||
description: "Understand your demographics and user behavior in real-time."
|
||||
},
|
||||
{
|
||||
icon: LineChart,
|
||||
title: "Predictive Modeling",
|
||||
description: "Forecast trends and optimize your funnel before the market shifts."
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Live Dashboards",
|
||||
description: "Access your data instantly with our premium, high-performance interface."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="features" className="bg-background relative overflow-hidden">
|
||||
<div className="w-content-width mx-auto relative z-10">
|
||||
<div className="flex flex-col items-center text-center gap-4">
|
||||
<div className="px-3 py-1 text-sm card rounded w-fit">
|
||||
<span className="text-accent font-medium uppercase tracking-wider">Features</span>
|
||||
</div>
|
||||
<TextAnimation
|
||||
text="Uncover the Story Behind Your Data"
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="text-4xl md:text-5xl lg:text-6xl font-bold text-foreground max-w-content-width"
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-content-width mt-4">
|
||||
Nume Analytics provides enterprise-grade tools to scale your paid media and SEO strategies with confidence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{features.map((feature, index) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<ScrollReveal key={index} variant="slide-up" delay={index * 0.1}>
|
||||
<div className="card p-8 rounded-lg h-full flex flex-col gap-4 hover:-translate-y-1 transition-transform duration-300">
|
||||
<div className="size-12 primary-button rounded flex items-center justify-center mb-2">
|
||||
<Icon className="size-6 text-primary-cta-text" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-foreground">{feature.title}</h3>
|
||||
<p className="text-accent leading-relaxed">{feature.description}</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative background elements */}
|
||||
<div className="absolute top-1/4 left-0 w-96 h-96 bg-primary-cta/5 rounded-full blur-3xl -z-10" />
|
||||
<div className="absolute bottom-0 right-0 w-1/2 h-1/2 bg-primary-cta/5 rounded-full blur-3xl -z-10" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
48
src/pages/HomePage/sections/Hero.tsx
Normal file
48
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
|
||||
import { LineChart, Target, TrendingUp, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Agencia de Marketing Basada en Datos"
|
||||
title="Escala tu marca con Datos y Estrategia"
|
||||
description="Combinamos creatividad, analítica y marketing de performance para hacer crecer tu negocio con resultados medibles."
|
||||
primaryButton={{
|
||||
text: "Empezar Ahora →",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Ver Precios",
|
||||
href: "#pricing",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
text: "Data-Driven ROI",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
text: "Conversion Optimization",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
text: "Strategic Growth",
|
||||
icon: Target,
|
||||
},
|
||||
{
|
||||
text: "Cross-Channel Analytics",
|
||||
icon: LineChart,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139370.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
49
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsFeatureCards
|
||||
tag="Measurable Results"
|
||||
title="Analytics Driven Performance"
|
||||
description="Our work speaks through metrics that matter to your bottom line."
|
||||
metrics={[
|
||||
{
|
||||
value: "142%",
|
||||
title: "Average Revenue Lift",
|
||||
features: [
|
||||
"Funnel diagnostic audit",
|
||||
"Conversion rate spikes",
|
||||
"Strategic channel expansion",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "$4.2M",
|
||||
title: "Client Revenue Generated",
|
||||
features: [
|
||||
"Paid channel ROI optimization",
|
||||
"Lifecycle value increases",
|
||||
"Attribution clarity tools",
|
||||
],
|
||||
},
|
||||
{
|
||||
value: "3.8x",
|
||||
title: "Average ROAS Growth",
|
||||
features: [
|
||||
"Iterative creative testing",
|
||||
"Search intent targeting",
|
||||
"Audience refinement",
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
55
src/pages/HomePage/sections/Pricing.tsx
Normal file
55
src/pages/HomePage/sections/Pricing.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "pricing" section.
|
||||
|
||||
import React from 'react';
|
||||
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function PricingSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="pricing" data-section="pricing">
|
||||
<SectionErrorBoundary name="pricing">
|
||||
<PricingMediaCards
|
||||
tag="Transparent Pricing"
|
||||
title="Scale with Confidence"
|
||||
description="Choose the level of analytical rigor your brand requires."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$5,000",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Channel Audit",
|
||||
"Performance Dashboard",
|
||||
"Monthly Strategy",
|
||||
"Creative Iteration",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Growth",
|
||||
price: "$12,500",
|
||||
period: "/mo",
|
||||
features: [
|
||||
"Full Funnel Audit",
|
||||
"Advanced Attribution",
|
||||
"Unlimited Creative",
|
||||
"Weekly Reporting",
|
||||
"Retention Strategy",
|
||||
],
|
||||
primaryButton: {
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/general-director-examining-statistics-big-data-computer-control-room_482257-90941.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
29
src/pages/HomePage/sections/SocialProof.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "social-proof" section.
|
||||
|
||||
import React from 'react';
|
||||
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function SocialProofSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SectionErrorBoundary name="social-proof">
|
||||
<SocialProofMarquee
|
||||
tag="Brand Partners"
|
||||
title="Working with Industry Leaders"
|
||||
description="We support ambitious brands across ecommerce, SaaS, and technology."
|
||||
names={[
|
||||
"TechCorp",
|
||||
"Innovate",
|
||||
"GrowthLabs",
|
||||
"RetailGen",
|
||||
"ScaleUp",
|
||||
"Velocity",
|
||||
"Apex",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
src/pages/HomePage/sections/TestimonialAbout.tsx
Normal file
22
src/pages/HomePage/sections/TestimonialAbout.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonial-about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialAboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonial-about" data-section="testimonial-about">
|
||||
<SectionErrorBoundary name="testimonial-about">
|
||||
<AboutTestimonial
|
||||
tag="The Nume Philosophy"
|
||||
quote="Marketing is no longer just creative. It's a precise combination of data science, psychological triggers, and strategic execution. We build bridges between brand vision and measurable growth."
|
||||
author="Marcus Vane"
|
||||
role="Founder, Nume Analytics"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
src/pages/HomePage/sections/Testimonials.tsx
Normal file
84
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
const testimonials = [
|
||||
{
|
||||
quote: "Nume Analytics transformed our data strategy. We now have clear visibility into our funnel and actionable insights that drive real growth.",
|
||||
name: "Sarah Jenkins",
|
||||
role: "CMO, TechGrowth",
|
||||
region: "North America"
|
||||
},
|
||||
{
|
||||
quote: "The premium aesthetic and deep insights provided by Nume are unmatched in the industry. They truly understand how to scale paid media.",
|
||||
name: "Michael Chen",
|
||||
role: "VP of Marketing, InnovateCorp",
|
||||
region: "Europe"
|
||||
},
|
||||
{
|
||||
quote: "Our paid media ROI increased by 40% within the first quarter of working with Nume Analytics. Their SEO strategy is equally impressive.",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Director of Growth, ScaleUp",
|
||||
region: "Asia Pacific"
|
||||
},
|
||||
{
|
||||
quote: "A game-changer for our marketing operations. The funnel audit revealed bottlenecks we didn't even know existed.",
|
||||
name: "David Smith",
|
||||
role: "Founder, E-com Plus",
|
||||
region: "Global"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="testimonials" className="relative w-full bg-background">
|
||||
<div className="w-content-width mx-auto flex flex-col">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="px-3 py-1 text-sm card rounded w-fit">
|
||||
<p className="text-primary-cta font-medium uppercase tracking-widest">Client Success</p>
|
||||
</div>
|
||||
<TextAnimation
|
||||
text="Trusted by Industry Leaders"
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-5xl md:text-6xl 2xl:text-7xl leading-[1.15] font-bold text-center text-balance"
|
||||
/>
|
||||
<TextAnimation
|
||||
text="See how we've helped top brands scale their revenue through data-driven strategies."
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-accent text-balance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ScrollReveal variant="fade-blur">
|
||||
<GridOrCarousel>
|
||||
{testimonials.map((testimonial, i) => (
|
||||
<div key={i} className="flex flex-col gap-6 p-8 h-full card rounded hover:-translate-y-1 transition-transform duration-300">
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, starIdx) => (
|
||||
<svg key={starIdx} className="w-5 h-5 text-primary-cta" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-lg md:text-xl leading-relaxed text-foreground">"{testimonial.quote}"</p>
|
||||
<div className="mt-auto pt-6 flex items-center gap-4 border-t border-foreground/10">
|
||||
<div className="w-12 h-12 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta font-bold text-xl shrink-0">
|
||||
{testimonial.name.charAt(0)}
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-foreground">{testimonial.name}</span>
|
||||
<span className="text-sm text-accent">{testimonial.role} • {testimonial.region}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</GridOrCarousel>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user