development/9007a51c-f8de-46f2-9c94-3f3448d4104a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-02-06 19:50:06 +02:00
commit 4bb187f791
300 changed files with 58344 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src/app/blog/page.tsx Normal file
View File

@@ -0,0 +1,167 @@
"use client";
import { useEffect, useState } from "react";
import ReactLenis from "lenis/react";
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
type BlogPost = {
id: string;
category: string;
title: string;
excerpt: string;
imageSrc: string;
imageAlt?: string;
authorName: string;
authorAvatar: string;
date: string;
onBlogClick?: () => void;
};
const defaultPosts: BlogPost[] = [
{
id: "1", category: "Design", title: "UX review presentations", excerpt: "How do you create compelling presentations that wow your colleagues and impress your managers?", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Abstract design with purple and silver tones", authorName: "Olivia Rhye", authorAvatar: "/placeholders/placeholder3.avif", date: "20 Jan 2025", onBlogClick: () => console.log("Blog 1 clicked"),
},
{
id: "2", category: "Development", title: "Building scalable applications", excerpt: "Learn the best practices for building applications that can handle millions of users.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Development workspace", authorName: "John Smith", authorAvatar: "/placeholders/placeholder4.webp", date: "18 Jan 2025", onBlogClick: () => console.log("Blog 2 clicked"),
},
{
id: "3", category: "Marketing", title: "Content strategy essentials", excerpt: "Discover how to create a content strategy that drives engagement and conversions.", imageSrc: "/placeholders/placeholder3.avif", imageAlt: "Marketing strategy board", authorName: "Sarah Johnson", authorAvatar: "/placeholders/placeholder3.avif", date: "15 Jan 2025", onBlogClick: () => console.log("Blog 3 clicked"),
},
{
id: "4", category: "Product", title: "Product management 101", excerpt: "Everything you need to know to become an effective product manager in 2025.", imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Product planning session", authorName: "Mike Davis", authorAvatar: "/placeholders/placeholder4.webp", date: "12 Jan 2025", onBlogClick: () => console.log("Blog 4 clicked"),
},
];
export default function BlogPage() {
const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchPosts = async () => {
try {
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
if (!apiUrl || !projectId) {
console.warn("NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured, using default posts");
setIsLoading(false);
return;
}
const url = `${apiUrl}/posts/${projectId}?status=published`;
const response = await fetch(url, {
method: "GET", headers: {
"Content-Type": "application/json"},
});
if (response.ok) {
const resp = await response.json();
const data = resp.data;
if (Array.isArray(data) && data.length > 0) {
const mappedPosts = data.map((post: any) => ({
id: post.id || String(Math.random()),
category: post.category || "General", title: post.title || "Untitled", excerpt: post.excerpt || post.content.slice(0, 30) || "", imageSrc: post.imageUrl || "/placeholders/placeholder3.avif", imageAlt: post.imageAlt || post.title || "", authorName: post.author?.name || "Anonymous", authorAvatar: post.author?.avatar || "/placeholders/placeholder3.avif", date: post.date || post.createdAt || new Date().toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" }),
onBlogClick: () => console.log(`Blog ${post.id} clicked`),
}));
setPosts(mappedPosts);
}
} else {
console.warn(`API request failed with status ${response.status}, using default posts`);
}
} catch (error) {
console.error("Error fetching posts:", error);
} finally {
setIsLoading(false);
}
};
fetchPosts();
}, []);
return (
<ThemeProvider
defaultButtonVariant="slide-background"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<ReactLenis root>
<div className="min-h-screen bg-background">
<NavbarStyleFullscreen
brandName="MADRID AGENCY"
navItems={[
{name: "Home", id: "/home"},
{name: "Inicio", id: "hero"},
{name: "Servicios", id: "services"},
{name: "Casos", id: "portfolio"},
{name: "Equipo", id: "team"},
{name: "Contacto", id: "contact"}
]}
bottomLeftText="Madrid, España"
bottomRightText="hello@madridagency.es"
/>
{isLoading ? (
<div className="w-content-width mx-auto py-20 text-center">
<p className="text-foreground">Loading posts...</p>
</div>
) : (
<BlogCardThree
blogs={posts}
title="Artículos Destacados"
description="Explora nuestras últimas perspectivas y conocimientos del sector"
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
carouselMode="buttons"
uniformGridCustomHeightClasses="min-h-[600px]"
/>
)}
<FooterLogoEmphasis
logoText="MADRID AGENCY"
columns={[
{
items: [
{label: "Inicio", href: "hero"},
{label: "Servicios", href: "services"},
{label: "Casos", href: "portfolio"}
]
},
{
items: [
{label: "Equipo", href: "team"},
{label: "Blog", href: "blog"},
{label: "Contacto", href: "contact"}
]
},
{
items: [
{label: "hello@madridagency.es", href: "mailto:hello@madridagency.es"},
{label: "+34 91 XXXX XXXX", href: "tel:+34911234567"},
{label: "Madrid, España", href: "#"}
]
},
{
items: [
{label: "Instagram", href: "https://instagram.com"},
{label: "LinkedIn", href: "https://linkedin.com"},
{label: "Twitter", href: "https://twitter.com"}
]
}
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

156
src/app/contacto/page.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Mail, HelpCircle, Clock } from 'lucide-react';
export default function ContactoPage() {
return (
<ThemeProvider
defaultButtonVariant="slide-background"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="MADRID AGENCY"
navItems={[
{ name: "Inicio", id: "/" },
{ name: "Servicios", id: "/servicios" },
{ name: "Equipo", id: "/equipo" },
{ name: "Contacto", id: "/contacto" }
]}
bottomLeftText="Madrid, España"
bottomRightText="hello@madridagency.es"
/>
</div>
{/* Contact Section */}
<div id="contact-form" data-section="contact-form">
<ContactSplit
tag="Contacto"
title="¿Listo para transformar tu marca?"
description="Cuéntanos tu proyecto y descubre cómo podemos ayudarte a alcanzar tus objetivos de marketing digital. Respuesta garantizada en menos de 24 horas."
useInvertedBackground="noInvert"
imageSrc="https://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg"
imageAlt="Oficina moderna de Madrid Agency"
mediaPosition="right"
inputPlaceholder="tu@empresa.com"
buttonText="Contactar ahora"
termsText="Al contactarnos, aceptas que procesemos tus datos para responderte. Política de privacidad disponible en nuestra web."
/>
</div>
{/* Process Section */}
<div id="process" data-section="process">
<MetricSplitMediaAbout
tag="Nuestro Proceso"
tagIcon={Clock}
title="De la consulta inicial al crecimiento sostenible"
description="Seguimos una metodología probada que garantiza resultados medibles. Desde la primera llamada hasta la implementación y optimización continua, cada paso está diseñado para maximizar tu ROI."
metrics={[
{ value: "24h", title: "Tiempo máximo de respuesta inicial" },
{ value: "7 días", title: "Para entrega de propuesta personalizada" }
]}
imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
imageAlt="Equipo desarrollando estrategia personalizada"
useInvertedBackground="invertDefault"
/>
</div>
{/* FAQ Section */}
<div id="contact-faq" data-section="contact-faq">
<FaqDouble
tag="Preguntas antes de contactar"
tagIcon={HelpCircle}
title="Resuelve tus dudas principales"
description="Las respuestas a las preguntas más frecuentes sobre cómo trabajamos, qué incluimos y cómo empezar tu proyecto con Madrid Agency."
textboxLayout="default"
useInvertedBackground="noInvert"
faqs={[
{
id: "1",
title: "¿La consultoría inicial tiene coste?",
content: "No. La primera consultoría de 60 minutos es completamente gratuita. Analizamos tu situación actual, identificamos oportunidades y te presentamos recomendaciones iniciales sin compromiso."
},
{
id: "2",
title: "¿Cuánto tiempo necesitáis para una propuesta?",
content: "Tras la consultoría inicial, entregamos una propuesta detallada en máximo 7 días laborables. Incluye estrategia, timeline, inversión y KPIs específicos para tu proyecto."
},
{
id: "3",
title: "¿Trabajáis con empresas fuera de Madrid?",
content: "Sí. Aunque estamos en Madrid, trabajamos con clientes de toda España y Latinoamérica. Todas las reuniones pueden ser presenciales en Madrid o virtuales según prefieras."
},
{
id: "4",
title: "¿Qué información necesitáis para empezar?",
content: "Para la consultoría inicial necesitamos: descripción de tu empresa, objetivos principales, presupuesto aproximado y cualquier material de marketing actual (web, redes, etc.)."
},
{
id: "5",
title: "¿Cuándo podemos empezar el proyecto?",
content: "Una vez aprobada la propuesta y firmado el acuerdo, comenzamos en un plazo máximo de 10 días laborables. Los proyectos urgentes pueden iniciarse en 3-5 días."
},
{
id: "6",
title: "¿Ofrecéis contratos mensuales sin permanencia?",
content: "Sí. Ofrecemos tanto proyectos puntuales como retainers mensuales flexibles. No exigimos permanencia mínima, aunque recomendamos al menos 6 meses para resultados óptimos."
}
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="MADRID AGENCY"
columns={[
{
items: [
{ label: "Inicio", href: "/" },
{ label: "Servicios", href: "/servicios" },
{ label: "Equipo", href: "/equipo" }
]
},
{
items: [
{ label: "Contacto", href: "/contacto" },
{ label: "Blog", href: "#" },
{ label: "Casos", href: "/servicios" }
]
},
{
items: [
{ label: "hello@madridagency.es", href: "mailto:hello@madridagency.es" },
{ label: "+34 91 XXXX XXXX", href: "tel:+34911234567" },
{ label: "Madrid, España", href: "#" }
]
},
{
items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

192
src/app/equipo/page.tsx Normal file
View File

@@ -0,0 +1,192 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Users, Award, Star } from 'lucide-react';
export default function EquipoPage() {
return (
<ThemeProvider
defaultButtonVariant="slide-background"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="MADRID AGENCY"
navItems={[
{ name: "Inicio", id: "/" },
{ name: "Servicios", id: "/servicios" },
{ name: "Equipo", id: "/equipo" },
{ name: "Contacto", id: "/contacto" }
]}
bottomLeftText="Madrid, España"
bottomRightText="hello@madridagency.es"
/>
</div>
{/* Team Section */}
<div id="team" data-section="team">
<TeamCardOne
tag="Nuestro Equipo"
tagIcon={Users}
title="Los creadores detrás de cada éxito"
description="Un equipo multidisciplinario de expertos en marketing digital, diseño y estrategia, unidos por la pasión de transformar marcas y generar resultados excepcionales."
gridVariant="uniform-all-items-equal"
animationType="slide-up"
members={[
{
id: "1",
name: "María García",
role: "Directora Creativa",
imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-11739.jpg",
imageAlt: "María García"
},
{
id: "2",
name: "Carlos López",
role: "Estratega Digital",
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-entrepreneur-woman_23-2148898746.jpg",
imageAlt: "Carlos López"
},
{
id: "3",
name: "Sofia Martínez",
role: "Head de Diseño",
imageSrc: "https://img.b2bpic.net/free-photo/close-up-woman-wearing-glasses_23-2148815602.jpg",
imageAlt: "Sofia Martínez"
},
{
id: "4",
name: "David Ruiz",
role: "Especialista en Analytics",
imageSrc: "https://img.b2bpic.net/free-photo/smiling-pretty-woman-with-short-curly-hair-dressed-jacket-glasses-poses-pink-with-clasped-hands-wonderful-smile_291650-1138.jpg",
imageAlt: "David Ruiz"
}
]}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
{/* About Our Values Section */}
<div id="values" data-section="values">
<MetricSplitMediaAbout
tag="Nuestros Valores"
tagIcon={Award}
title="Excelencia, innovación y resultados medibles"
description="En Madrid Agency creemos en la transparencia total, la innovación continua y la búsqueda incansable de la excelencia. Cada proyecto es una oportunidad de superar expectativas y crear valor real para nuestros clientes."
metrics={[
{ value: "10+", title: "Años de experiencia combinada" },
{ value: "98%", title: "Tasa de satisfacción de clientes" }
]}
imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
imageAlt: "Equipo colaborando en oficina"
useInvertedBackground="invertDefault"
/>
</div>
{/* Client Testimonials Section */}
<div id="client-testimonials" data-section="client-testimonials">
<TestimonialCardOne
tag="Testimonios de Clientes"
tagIcon={Star}
title="La experiencia de trabajar con nosotros"
description="Descubre por qué nuestros clientes confían en Madrid Agency para impulsar su crecimiento digital y alcanzar sus objetivos más ambiciosos."
gridVariant="uniform-all-items-equal"
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Elena Fernández",
role: "CEO",
company: "TechStart Madrid",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
imageAlt: "Elena Fernández"
},
{
id: "2",
name: "Juan Moreno",
role: "Founder",
company: "DigitalLabs",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-happy-be-back-work_23-2148727621.jpg",
imageAlt: "Juan Moreno"
},
{
id: "3",
name: "Patricia Sánchez",
role: "Marketing Director",
company: "Fashion Boutique Madrid",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-3695.jpg",
imageAlt: "Patricia Sánchez"
},
{
id: "4",
name: "Miguel Rodríguez",
role: "Director General",
company: "Growth Partners",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-3575.jpg",
imageAlt: "Miguel Rodríguez"
}
]}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="MADRID AGENCY"
columns={[
{
items: [
{ label: "Inicio", href: "/" },
{ label: "Servicios", href: "/servicios" },
{ label: "Equipo", href: "/equipo" }
]
},
{
items: [
{ label: "Contacto", href: "/contacto" },
{ label: "Blog", href: "#" },
{ label: "Casos", href: "/servicios" }
]
},
{
items: [
{ label: "hello@madridagency.es", href: "mailto:hello@madridagency.es" },
{ label: "+34 91 XXXX XXXX", href: "tel:+34911234567" },
{ label: "Madrid, España", href: "#" }
]
},
{
items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

595
src/app/globals.css Normal file
View File

@@ -0,0 +1,595 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #fffafa;;
--card: #fff7f7;;
--foreground: #1a0000;;
--primary-cta: #e63946;;
--secondary-cta: #ffffff;;
--accent: #f5c4c7;;
--background-accent: #f09199;; */
--background: #fffafa;;
--card: #fff7f7;;
--foreground: #1a0000;;
--primary-cta: #e63946;;
--secondary-cta: #ffffff;;
--accent: #f5c4c7;;
--background-accent: #f09199;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 20s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-sora), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-sora), sans-serif;
}

1273
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

288
src/app/page.tsx Normal file
View File

@@ -0,0 +1,288 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Sparkles, Award, Zap, TrendingUp, Star } from 'lucide-react';
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="slide-background"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="MADRID AGENCY"
navItems={[
{ name: "Inicio", id: "/" },
{ name: "Servicios", id: "/servicios" },
{ name: "Equipo", id: "/equipo" },
{ name: "Contacto", id: "/contacto" }
]}
bottomLeftText="Madrid, España"
bottomRightText="hello@madridagency.es"
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Marketing que marca la diferencia"
description="Estrategia digital y creatividad que impulsa el crecimiento de tu marca en Madrid y más allá."
tag="Agencia de Marketing"
tagIcon={Sparkles}
background={{ variant: "plain" }}
buttons={[
{ text: "Iniciar proyecto", href: "/contacto" },
{ text: "Ver casos", href: "/servicios" }
]}
carouselItems={[
{
id: "1",
imageSrc: "https://img.b2bpic.net/free-vector/creative-bauhaus-lines-organic-shape-template-earth-tone-color_1017-61387.jpg",
imageAlt: "Diseño abstracto minimalista"
},
{
id: "2",
imageSrc: "https://img.b2bpic.net/free-vector/flat-abstract-art-cover-collection_23-2148984356.jpg",
imageAlt: "Composición geométrica moderna"
},
{
id: "3",
imageSrc: "https://img.b2bpic.net/free-vector/collection-geometric-shape-poster-backdrop-decor_1017-50277.jpg",
imageAlt: "Espacio blanco elegante"
},
{
id: "4",
imageSrc: "https://img.b2bpic.net/free-vector/bauhaus-art-contemporary-lines-pattern-layout-set_1017-61386.jpg",
imageAlt: "Gradiente sutil profesional"
},
{
id: "5",
imageSrc: "https://img.b2bpic.net/free-vector/abstract-bauhaus-linear-figure-element-template-set_1017-62401.jpg",
imageAlt: "Arte minimalista líneas"
},
{
id: "6",
imageSrc: "https://img.b2bpic.net/free-vector/flat-abstract-art-cover-collection_23-2148984357.jpg",
imageAlt: "Diseño contemporáneo sofisticado"
}
]}
autoPlay={true}
autoPlayInterval={4000}
/>
</div>
{/* About Section */}
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Sobre nosotros"
tagIcon={Award}
title="Transformamos visiones en resultados medibles"
description="Somos una agencia de marketing estratégica basada en Madrid, especializada en crear campañas digitales que generan impacto real. Con más de una década de experiencia, combinamos creatividad innovadora con análisis de datos profundos para impulsar el crecimiento de nuestros clientes."
metrics={[
{ value: "150+", title: "Proyectos completados exitosamente" },
{ value: "200%", title: "Aumento promedio en ROI de clientes" }
]}
imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
imageAlt="Equipo creativo trabajando"
useInvertedBackground="invertDefault"
/>
</div>
{/* Services Section */}
<div id="services" data-section="services">
<FeatureCardTwentyOne
tag="Servicios"
tagIcon={Zap}
title="Soluciones marketing a medida"
description="Ofrecemos un rango completo de servicios diseñados para llevar tu marca al siguiente nivel."
accordionItems={[
{
id: "1",
title: "Estrategia Digital",
content: "Desarrollamos estrategias integrales de marketing digital basadas en análisis profundo de tu mercado, competencia y audiencia objetivo. Cada estrategia es personalizada para maximizar resultados."
},
{
id: "2",
title: "Diseño & Branding",
content: "Creamos identidades visuales poderosas que reflejan la esencia de tu marca. Desde logos hasta sistemas de diseño completos, garantizamos coherencia y impacto visual."
},
{
id: "3",
title: "Campañas Publicitarias",
content: "Ejecutamos campañas multi-canal en redes sociales, Google Ads, y plataformas programáticas. Cada campaña es optimizada en tiempo real para máxima conversión."
},
{
id: "4",
title: "Content Marketing",
content: "Producimos contenido estratégico que atrae, engage y convierte. Desde blogs hasta vídeos, creamos narrativas que resuenan con tu audiencia."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
imageAlt="Proceso de estrategia marketing"
useInvertedBackground="noInvert"
mediaPosition="right"
buttons={[
{ text: "Explorar servicios", href: "/contacto" }
]}
/>
</div>
{/* Portfolio Section */}
<div id="portfolio" data-section="portfolio">
<BlogCardThree
tag="Casos de éxito"
tagIcon={TrendingUp}
title="Nuestros casos de estudio"
description="Descubre cómo hemos transformado marcas y multiplicado resultados para nuestros clientes."
animationType="slide-up"
blogs={[
{
id: "1",
category: "E-commerce",
title: "Aumento de ventas 180% en 6 meses",
excerpt: "Cómo una tienda online incrementó dramáticamente sus conversiones mediante estrategia integrada de marketing digital.",
imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-with-icons-business-people_53876-94833.jpg",
imageAlt: "Caso de éxito e-commerce",
authorName: "Agencia Madrid"
},
{
id: "2",
category: "SaaS",
title: "Escalando startup B2B de 0 a 10K clientes",
excerpt: "Estrategia de posicionamiento y adquisición que llevó a esta SaaS a convertirse en líder del mercado.",
imageSrc: "https://img.b2bpic.net/free-photo/map-lying-wooden-table_53876-105723.jpg",
imageAlt: "Caso de éxito SaaS",
authorName: "Agencia Madrid"
},
{
id: "3",
category: "Retail",
title: "Rebranding que triplicó la presencia digital",
excerpt: "Transformación completa de marca que resultó en mayor engagement y posicionamiento en el mercado.",
imageSrc: "https://img.b2bpic.net/free-photo/high-angle-people-working-with-laptop_23-2149636255.jpg",
imageAlt: "Caso de éxito retail",
authorName: "Agencia Madrid"
}
]}
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
{/* Testimonials Section */}
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
tag="Testimonios"
tagIcon={Star}
title="Lo que dicen nuestros clientes"
description="Historias de éxito y transformación digital de empresas que confiaron en nosotros."
gridVariant="uniform-all-items-equal"
animationType="slide-up"
testimonials={[
{
id: "1",
name: "Elena Fernández",
role: "CEO",
company: "TechStart Madrid",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg",
imageAlt: "Elena Fernández"
},
{
id: "2",
name: "Juan Moreno",
role: "Founder",
company: "DigitalLabs",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-happy-be-back-work_23-2148727621.jpg",
imageAlt: "Juan Moreno"
},
{
id: "3",
name: "Patricia Sánchez",
role: "Marketing Director",
company: "Fashion Boutique Madrid",
rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-grey-background_613910-3695.jpg",
imageAlt: "Patricia Sánchez"
}
]}
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
{/* Contact Section */}
<div id="contact" data-section="contact">
<ContactSplit
tag="Newsletter"
title="Mantente al día con nuestras insights"
description="Recibe estrategias, casos de éxito y tendencias de marketing digital directamente en tu inbox. Contenido exclusivo diseñado para emprendedores y marketers."
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-photo/desk-arrangement-with-laptop-high-angle_23-2149073071.jpg"
imageAlt="Espacio de trabajo creativo"
mediaPosition="right"
inputPlaceholder="Tu correo electrónico"
buttonText="Suscribirse"
termsText="Respetamos tu privacidad. Te enviamos contenido exclusivo sin spam. Puedes desuscribirte en cualquier momento."
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="MADRID AGENCY"
columns={[
{
items: [
{ label: "Inicio", href: "/" },
{ label: "Servicios", href: "/servicios" },
{ label: "Equipo", href: "/equipo" }
]
},
{
items: [
{ label: "Contacto", href: "/contacto" },
{ label: "Blog", href: "#" },
{ label: "Casos", href: "/servicios" }
]
},
{
items: [
{ label: "hello@madridagency.es", href: "mailto:hello@madridagency.es" },
{ label: "+34 91 XXXX XXXX", href: "tel:+34911234567" },
{ label: "Madrid, España", href: "#" }
]
},
{
items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}

204
src/app/servicios/page.tsx Normal file
View File

@@ -0,0 +1,204 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import Link from 'next/link';
import { Zap, TrendingUp, HelpCircle } from 'lucide-react';
export default function ServiciosPage() {
return (
<ThemeProvider
defaultButtonVariant="slide-background"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="MADRID AGENCY"
navItems={[
{ name: "Inicio", id: "/" },
{ name: "Servicios", id: "/servicios" },
{ name: "Equipo", id: "/equipo" },
{ name: "Contacto", id: "/contacto" }
]}
bottomLeftText="Madrid, España"
bottomRightText="hello@madridagency.es"
/>
</div>
{/* Services Detail Section */}
<div id="services-detail" data-section="services-detail">
<FeatureCardTwentyOne
tag="Nuestros Servicios"
tagIcon={Zap}
title="Transformación digital integral"
description="Desarrollamos estrategias personalizadas que combinan creatividad, tecnología y análisis de datos para maximizar el impacto de tu marca en el entorno digital."
accordionItems={[
{
id: "1",
title: "Estrategia Digital Integral",
content: "Análisis profundo del mercado, definición de objetivos, identificación de audiencias clave y desarrollo de un roadmap estratégico personalizado que incluye canales, mensajes y KPIs específicos para tu industria."
},
{
id: "2",
title: "Diseño & Branding Avanzado",
content: "Creación de identidades visuales cohesivas desde la conceptualización hasta la implementación. Incluye diseño de logos, paletas de colores, tipografías, guidelines de marca y aplicaciones digitales y físicas."
},
{
id: "3",
title: "Campañas Publicitarias Multi-canal",
content: "Gestión completa de campañas en Google Ads, Facebook, Instagram, LinkedIn y plataformas programáticas. Optimización continua basada en datos, A/B testing y reporting detallado de performance."
},
{
id: "4",
title: "Content Marketing & SEO",
content: "Producción de contenido estratégico optimizado para SEO: blogs, videos, infografías, podcasts y contenido para redes sociales. Incluye keyword research, link building y optimización técnica."
}
]}
imageSrc="https://img.b2bpic.net/free-photo/colleagues-discussing-their-work-laptop_53876-105333.jpg"
imageAlt="Equipo desarrollando estrategia digital"
useInvertedBackground="noInvert"
mediaPosition="left"
buttons={[
{ text: "Solicitar consultoría", href: "/contacto" }
]}
/>
</div>
{/* Portfolio Cases Section */}
<div id="portfolio-cases" data-section="portfolio-cases">
<BlogCardThree
tag="Resultados Reales"
tagIcon={TrendingUp}
title="Casos de éxito detallados"
description="Explora en profundidad cómo hemos ayudado a empresas de diferentes sectores a alcanzar y superar sus objetivos de marketing digital."
animationType="slide-up"
blogs={[
{
id: "1",
category: "E-commerce Fashion",
title: "De 50K a 500K en ventas anuales",
excerpt: "Transformación completa de una boutique online: rebranding, nueva web, estrategia SEO y campañas pagadas que multiplicaron las ventas por 10 en 18 meses.",
imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-with-icons-business-people_53876-94833.jpg",
imageAlt: "Caso de éxito fashion e-commerce",
authorName: "Madrid Agency Team"
},
{
id: "2",
category: "SaaS B2B",
title: "Reducción de CAC en 60% con inbound",
excerpt: "Desarrollo de estrategia de content marketing y lead nurturing que redujo el costo de adquisición de clientes mientras aumentaba la calidad de leads.",
imageSrc: "https://img.b2bpic.net/free-photo/map-lying-wooden-table_53876-105723.jpg",
imageAlt: "Caso de éxito SaaS B2B",
authorName: "Madrid Agency Team"
},
{
id: "3",
category: "Restauración",
title: "300% más reservas con marketing local",
excerpt: "Estrategia de marketing local, optimización de Google My Business y campañas geo-localizadas que triplicaron las reservas de un grupo de restaurantes.",
imageSrc: "https://img.b2bpic.net/free-photo/high-angle-people-working-with-laptop_23-2149636255.jpg",
imageAlt: "Caso de éxito restauración",
authorName: "Madrid Agency Team"
}
]}
textboxLayout="default"
useInvertedBackground="invertDefault"
/>
</div>
{/* FAQ Section */}
<div id="faq" data-section="faq">
<FaqDouble
tag="Preguntas frecuentes"
tagIcon={HelpCircle}
title="Todo lo que necesitas saber"
description="Respuestas detalladas a las preguntas más importantes sobre nuestros servicios, procesos y metodología de trabajo."
textboxLayout="default"
useInvertedBackground="noInvert"
faqs={[
{
id: "1",
title: "¿Cómo es vuestro proceso de trabajo?",
content: "Iniciamos con una auditoría completa de tu situación actual, seguida de una estrategia personalizada. Implementamos en fases medibles con reportes semanales y revisiones mensuales para optimizar resultados continuamente."
},
{
id: "2",
title: "¿Cuánto tiempo se tarda en ver resultados?",
content: "Los primeros indicadores aparecen en 4-6 semanas (tráfico, engagement). Resultados significativos de conversión se ven entre 3-6 meses. Para posicionamiento SEO, entre 6-12 meses dependiendo de la competencia."
},
{
id: "3",
title: "¿Cuál es la inversión mínima requerida?",
content: "Nuestros proyectos inician desde 2,500€ mensuales para estrategias integrales. Ofrecemos auditorías desde 500€ y proyectos específicos desde 1,200€. La inversión siempre es proporcional a los objetivos."
},
{
id: "4",
title: "¿Trabajáis con empresas de mi sector?",
content: "Tenemos experiencia en e-commerce, SaaS, servicios profesionales, retail, inmobiliaria, salud, educación y tecnología. Nuestra metodología se adapta a cualquier sector B2B o B2C."
},
{
id: "5",
title: "¿Qué incluyen los reportes de resultados?",
content: "Reportes mensuales con KPIs específicos, análisis de ROI, recomendaciones de optimización, comparativas período anterior, y dashboards en tiempo real con acceso 24/7 para el cliente."
},
{
id: "6",
title: "¿Ofrecéis garantías de resultados?",
content: "Garantizamos transparencia total, metodología probada y dedicación completa. Si en los primeros 90 días no ves mejoras medibles, revisamos la estrategia sin coste adicional."
}
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="MADRID AGENCY"
columns={[
{
items: [
{ label: "Inicio", href: "/" },
{ label: "Servicios", href: "/servicios" },
{ label: "Equipo", href: "/equipo" }
]
},
{
items: [
{ label: "Contacto", href: "/contacto" },
{ label: "Blog", href: "#" },
{ label: "Casos", href: "/servicios" }
]
},
{
items: [
{ label: "hello@madridagency.es", href: "mailto:hello@madridagency.es" },
{ label: "+34 91 XXXX XXXX", href: "tel:+34911234567" },
{ label: "Madrid, España", href: "#" }
]
},
{
items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" }
]
}
]}
/>
</div>
</ThemeProvider>
);
}