[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Tidec - Distribuidora de Confianza", description: "Distribuidora líder en productos de calidad. Servicio profesional y compromiso con nuestros clientes.", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export function Hero() { const scrollToSection = (id: string) => { const element = document.getElementById(id) if (element) { element.scrollIntoView({ behavior: "smooth" }) } } return (

Distribuidora de Confianza

Calidad y Servicio que Transforman tu Negocio

Somos tu socio estratégico en distribución. Ofrecemos productos de primera calidad con la logística más eficiente del mercado.

{/* Decorative elements */}

) } [V0_FILE]typescriptreact:file="components/faq.tsx" isMerged="true" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" export function FAQ() { const faqs = [ { question: "¿Cuál es el monto mínimo de compra?", answer: "El monto mínimo de compra varía según la zona de entrega. Contáctanos para conocer las condiciones específicas para tu ubicación y obtener las mejores condiciones comerciales.", }, { question: "¿Realizan entregas a domicilio?", answer: "Sí, realizamos entregas en toda la región. Contamos con una flota propia que garantiza entregas puntuales y seguras. Los horarios y frecuencias se coordinan según las necesidades de cada cliente.", }, { question: "¿Qué formas de pago aceptan?", answer: "Aceptamos diversas formas de pago: efectivo, transferencia bancaria, cheques y tarjetas de crédito. Para clientes recurrentes ofrecemos condiciones de crédito personalizadas según historial comercial.", }, { question: "¿Ofrecen descuentos por volumen?", answer: "Sí, ofrecemos descuentos especiales por compras en volumen y promociones regulares para nuestros clientes. Además, contamos con un programa de beneficios para clientes frecuentes con condiciones preferenciales.", }, { question: "¿Cómo puedo hacer un pedido?", answer: "Puedes hacer tu pedido a través de nuestro equipo de ventas por teléfono, WhatsApp o email. También puedes completar el formulario de contacto y uno de nuestros asesores se comunicará contigo a la brevedad para procesar tu orden.", }, { question: "¿Tienen garantía en los productos?", answer: "Todos nuestros productos cuentan con garantía del fabricante. Trabajamos únicamente con marcas reconocidas que respaldan la calidad de sus productos. En caso de cualquier inconveniente, gestionamos la solución de forma rápida y eficiente.", }, ] return (

Preguntas Frecuentes

Encuentra respuestas a las consultas más comunes. Si tienes alguna otra pregunta, no dudes en contactarnos.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}

) } [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Mail, Phone, MapPin, Clock } from "lucide-react" export function Contact() { const [formData, setFormData] = useState({ name: "", email: "", phone: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">("idle") const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setSubmitStatus("success") setFormData({ name: "", email: "", phone: "", message: "" }) setTimeout(() => { setSubmitStatus("idle") }, 3000) }, 1000) } const contactInfo = [ { icon: Phone, title: "Teléfono", details: ["+54 11 1234-5678", "+54 11 8765-4321"], }, { icon: Mail, title: "Email", details: ["ventas@tidec.com.ar", "info@tidec.com.ar"], }, { icon: MapPin, title: "Dirección", details: ["Av. Principal 1234", "Buenos Aires, Argentina"], }, { icon: Clock, title: "Horario", details: ["Lunes a Viernes: 8:00 - 18:00", "Sábados: 8:00 - 13:00"], }, ] return (

¿Listo para Trabajar Juntos?

Estamos aquí para ayudarte. Completa el formulario y nos pondremos en contacto contigo a la brevedad.

Información de Contacto Ponte en contacto con nosotros a través de cualquiera de estos medios {contactInfo.map((info, index) => (

{info.title}

{info.details.map((detail, idx) => (

{detail}

))}

Envíanos un Mensaje Completa el formulario y te responderemos lo antes posible

setFormData({ ...formData, name: e.target.value })} required />

setFormData({ ...formData, email: e.target.value })} required />

setFormData({ ...formData, phone: e.target.value })} required />

setFormData({ ...formData, message: e.target.value })}
                    required
                  />
                </div>

{submitStatus === "success" && (
                  <div className="rounded-lg bg-green-50 dark:bg-green-950 border border-green-200 dark:border-green-800 p-4 text-sm text-green-800 dark:text-green-200">
                    ¡Mensaje enviado con éxito! Nos pondremos en contacto contigo pronto.
                  </div>
                )}

<Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? "Enviando..." : "Enviar Mensaje"}
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/hero-slider.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react"

const slides = [
  {
    title: "Calidad y Servicio que Transforman tu Negocio",
    subtitle: "Distribuidora de Confianza",
    description:
      "Somos tu socio estratégico en distribución. Ofrecemos productos de primera calidad con la logística más eficiente del mercado.",
    image: "/modern-warehouse-distribution-center.jpg",
    cta: "Ver Catálogo",
    ctaLink: "productos",
  },
  {
    title: "Innovación en cada Entrega",
    subtitle: "Tecnología y Logística",
    description:
      "Sistema de gestión avanzado que garantiza entregas puntuales y seguimiento en tiempo real de tus pedidos.",
    image: "/modern-logistics-technology-truck-delivery.jpg",
    cta: "Conocer Más",
    ctaLink: "nosotros",
  },
  {
    title: "Más de 1000 Productos Disponibles",
    subtitle: "Variedad y Stock",
    description:
      "Amplio catálogo de productos de las mejores marcas. Stock permanente para que nunca te falte lo que necesitas.",
    image: "/product-warehouse-shelves-variety.jpg",
    cta: "Explorar Productos",
    ctaLink: "productos",
  },
]

export function HeroSlider() {
  const [currentSlide, setCurrentSlide] = useState(0)
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)

useEffect(() => {
    if (!isAutoPlaying) return

const interval = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length)
    }, 5000)

return () => clearInterval(interval)
  }, [isAutoPlaying])

const goToSlide = (index: number) => {
    setCurrentSlide(index)
    setIsAutoPlaying(false)
    setTimeout(() => setIsAutoPlaying(true), 10000)
  }

const nextSlide = () => {
    goToSlide((currentSlide + 1) % slides.length)
  }

const prevSlide = () => {
    goToSlide((currentSlide - 1 + slides.length) % slides.length)
  }

const scrollToSection = (id: string) => {
    const element = document.getElementById(id)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
    }
  }

return (
    <section className="relative h-[600px] md:h-[700px] lg:h-[800px] overflow-hidden">
      {/* Slides */}
      <div className="absolute inset-0">
        {slides.map((slide, index) => (
          <div
            key={index}
            className={`absolute inset-0 transition-all duration-700 ${
              index === currentSlide
                ? "opacity-100 translate-x-0"
                : index < currentSlide
                  ? "opacity-0 -translate-x-full"
                  : "opacity-0 translate-x-full"
            }`}
          >
            {/* Background Image with Overlay */}
            <div className="absolute inset-0">
              <img src={slide.image || "/placeholder.svg"} alt={slide.title} className="h-full w-full object-cover" />
              <div className="absolute inset-0 bg-gradient-to-r from-background/95 via-background/80 to-background/40" />
            </div>

{/* Content */}
            <div className="relative h-full container mx-auto px-4">
              <div className="flex h-full items-center">
                <div className="max-w-2xl space-y-6 animate-in fade-in slide-in-from-bottom-8 duration-700">
                  <div className="inline-block rounded-full bg-primary/15 backdrop-blur-sm px-4 py-2 border border-primary/20">
                    <span className="text-sm font-semibold text-primary">{slide.subtitle}</span>
                  </div>

<h1 className="text-4xl font-bold leading-tight text-balance md:text-6xl lg:text-7xl text-foreground">
                    {slide.title}
                  </h1>

<p className="text-lg text-muted-foreground text-pretty md:text-xl leading-relaxed">
                    {slide.description}
                  </p>

<div className="flex flex-col gap-4 sm:flex-row">
                    <Button size="lg" onClick={() => scrollToSection(slide.ctaLink)} className="group">
                      {slide.cta}
                      <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </Button>
                    <Button size="lg" variant="outline" onClick={() => scrollToSection("contacto")}>
                      Contáctanos
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Navigation Arrows */}
      <button
        onClick={prevSlide}
        className="absolute left-4 top-1/2 -translate-y-1/2 z-10 rounded-full bg-background/80 backdrop-blur-sm p-3 text-foreground shadow-lg transition-all hover:bg-background hover:scale-110"
        aria-label="Previous slide"
      >
        <ChevronLeft className="h-6 w-6" />
      </button>
      <button
        onClick={nextSlide}
        className="absolute right-4 top-1/2 -translate-y-1/2 z-10 rounded-full bg-background/80 backdrop-blur-sm p-3 text-foreground shadow-lg transition-all hover:bg-background hover:scale-110"
        aria-label="Next slide"
      >
        <ChevronRight className="h-6 w-6" />
      </button>

{/* Dots Indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex gap-3">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`h-2 rounded-full transition-all ${
              index === currentSlide ? "w-8 bg-primary" : "w-2 bg-background/50 hover:bg-background/80"
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/modern-warehouse-distribution-center.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-warehouse-distribution-center-kRfnhTbiRWEVlCx47tcNFcFUVYm6NN.jpg" isMerged="true"
[V0_FILE]jpg:file="public/modern-logistics-technology-truck-delivery.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-logistics-technology-truck-delivery-uriQ8BKD6lAV3CIh7kJ3jnb8wW4Ywr.jpg" isMerged="true"
[V0_FILE]jpg:file="public/product-warehouse-shelves-variety.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-warehouse-shelves-variety-0ajwlDoDkXvw0zMkt9EcuENFyGV8l9.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/stats.tsx" isEdit="true" isMerged="true"
"use client"

import { Package, Users, TrendingUp, MapPin } from "lucide-react"
import { useEffect, useState, useRef } from "react"

export function Stats() {
  const stats = [
    {
      icon: Package,
      value: 1000,
      suffix: "+",
      label: "Productos",
    },
    {
      icon: Users,
      value: 5000,
      suffix: "+",
      label: "Clientes Satisfechos",
    },
    {
      icon: TrendingUp,
      value: 25,
      suffix: "+",
      label: "Años de Experiencia",
    },
    {
      icon: MapPin,
      value: 15,
      suffix: "",
      label: "Zonas de Cobertura",
    },
  ]

return (
    <section className="relative overflow-hidden bg-gradient-to-br from-primary via-primary/95 to-secondary py-16 md:py-24">
      <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/5 blur-3xl" />
      <div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-white/5 blur-3xl" />

<div className="container relative mx-auto px-4">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {stats.map((stat, index) => (
            <StatCard key={index} stat={stat} index={index} />
          ))}
        </div>
      </div>
    </section>
  )
}

function StatCard({ stat, index }: { stat: any; index: number }) {
  const [count, setCount] = useState(0)
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
        }
      },
      { threshold: 0.1 },
    )

if (ref.current) {
      observer.observe(ref.current)
    }

return () => observer.disconnect()
  }, [])

useEffect(() => {
    if (!isVisible) return

const duration = 2000
    const steps = 60
    const increment = stat.value / steps
    let current = 0

const timer = setInterval(() => {
      current += increment
      if (current >= stat.value) {
        setCount(stat.value)
        clearInterval(timer)
      } else {
        setCount(Math.floor(current))
      }
    }, duration / steps)

return () => clearInterval(timer)
  }, [isVisible, stat.value])

return (
    <div
      ref={ref}
      className="group relative text-center animate-in fade-in slide-in-from-bottom-4 duration-700"
      style={{ animationDelay: `${index * 100}ms` }}
    >
      <div className="rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 p-6 transition-all hover:bg-white/15 hover:scale-105">
        <div className="mb-4 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-white/20 backdrop-blur-sm transition-transform group-hover:scale-110">
          <stat.icon className="h-7 w-7 text-white" />
        </div>
        <div className="text-4xl font-bold text-white md:text-5xl">
          {count.toLocaleString()}
          {stat.suffix}
        </div>
        <div className="mt-3 text-sm font-medium text-white/90">{stat.label}</div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/about.tsx" isEdit="true" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { Target, Award, Users2, Truck } from "lucide-react"

export function About() {
  const features = [
    {
      icon: Target,
      title: "Misión",
      description:
        "Proveer productos de la más alta calidad con un servicio excepcional, estableciendo relaciones duraderas con nuestros clientes.",
    },
    {
      icon: Award,
      title: "Calidad Garantizada",
      description:
        "Trabajamos únicamente con las marcas líderes del mercado, asegurando la excelencia en cada producto que distribuimos.",
    },
    {
      icon: Users2,
      title: "Equipo Profesional",
      description:
        "Nuestro equipo altamente capacitado está comprometido con la satisfacción del cliente y el crecimiento mutuo.",
    },
    {
      icon: Truck,
      title: "Logística Eficiente",
      description: "Sistema de distribución optimizado que garantiza entregas puntuales en toda la región.",
    },
  ]

return (
    <section id="nosotros" className="scroll-mt-16 py-20 md:py-28 relative overflow-hidden">
      <div className="absolute right-0 top-20 h-96 w-96 rounded-full bg-accent/5 blur-3xl" />
      <div className="absolute left-0 bottom-20 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />

<div className="container relative mx-auto px-4">
        <div className="mx-auto max-w-3xl text-center mb-16">
          <h2 className="text-3xl font-bold text-balance md:text-5xl mb-4">
            Sobre <span className="text-primary">Tidec</span>
          </h2>
          <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
            Con más de 25 años en el mercado, somos la distribuidora de confianza que impulsa el crecimiento de negocios
            en toda la región. Nos especializamos en ofrecer soluciones integrales de distribución con un enfoque en la
            excelencia.
          </p>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {features.map((feature, index) => (
            <Card
              key={index}
              className="group border-2 hover:border-primary/50 hover:shadow-xl transition-all duration-300 animate-in fade-in slide-in-from-bottom-8"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <CardContent className="p-6">
                <div className="mb-4 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 transition-all group-hover:bg-primary/20 group-hover:scale-110">
                  <feature.icon className="h-7 w-7 text-primary" />
                </div>
                <h3 className="mb-2 text-lg font-semibold">{feature.title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/grocery-store-shelves-with-food-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/grocery-store-shelves-with-food-products-1qBNg3Vh8hn8GKlFhPsCK7gSIkMvbw.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cleaning-products-on-shelves.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cleaning-products-on-shelves-J7Q37oW8aqXxdaXRdhCqfzLwzrHaYs.jpg" isMerged="true"
[V0_FILE]jpg:file="public/warehouse-storage-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/warehouse-storage-products-JqXyZPHKqxxqIxk9XsWHsCXgJRVmMa.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premium-products-display.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-products-display-mIVnB8hQCnvWGfjb8cAjj7YrzYrgY7.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/products.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Sparkles } from "lucide-react"

export function Products() {
  const categories = [
    {
      name: "Alimentos y Bebidas",
      description: "Amplia variedad de productos alimenticios de las mejores marcas",
      image: "/grocery-store-food-products-on-shelves.jpg",
      products: ["Lácteos", "Bebidas", "Snacks", "Conservas"],
    },
    {
      name: "Productos de Limpieza",
      description: "Línea completa de artículos para higiene y limpieza",
      image: "/cleaning-products-shelves-detergent.jpg",
      products: ["Detergentes", "Desinfectantes", "Artículos de limpieza", "Cuidado personal"],
    },
    {
      name: "Artículos de Almacén",
      description: "Todo lo necesario para tu negocio en un solo lugar",
      image: "/warehouse-storage-distribution-products.jpg",
      products: ["Papel y cartón", "Envases", "Materiales de empaque", "Suministros"],
    },
    {
      name: "Productos Premium",
      description: "Selección exclusiva de productos de alta gama",
      image: "/premium-gourmet-products-display.jpg",
      products: ["Gourmet", "Importados", "Especialidades", "Marcas exclusivas"],
    },
  ]

return (
    <section id="productos" className="scroll-mt-16 bg-muted/30 py-20 md:py-28">
      <div className="container mx-auto px-4">
        <div className="mx-auto max-w-3xl text-center mb-16">
          <h2 className="text-3xl font-bold text-balance md:text-5xl mb-4">
            Nuestro <span className="text-primary">Catálogo</span>
          </h2>
          <p className="text-lg text-muted-foreground text-pretty leading-relaxed">
            Ofrecemos una amplia gama de productos de las marcas más reconocidas del mercado, seleccionados
            cuidadosamente para satisfacer las necesidades de tu negocio.
          </p>
        </div>

<div className="grid gap-8 md:grid-cols-2">
          {categories.map((category, index) => (
            <Card
              key={index}
              className="group overflow-hidden hover:shadow-2xl transition-all duration-300 border-2 hover:border-primary/30 animate-in fade-in slide-in-from-bottom-8"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <div className="relative aspect-video overflow-hidden">
                <img
                  src={category.image || "/placeholder.svg"}
                  alt={category.name}
                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </div>
              <CardContent className="p-6">
                <h3 className="text-xl font-bold mb-2 group-hover:text-primary transition-colors">{category.name}</h3>
                <p className="text-muted-foreground mb-4 leading-relaxed">{category.description}</p>
                <div className="flex flex-wrap gap-2 mb-4">
                  {category.products.map((product, idx) => (
                    <span
                      key={idx}
                      className="inline-block rounded-full bg-primary/10 px-3 py-1.5 text-xs font-medium text-primary hover:bg-primary/20 transition-colors"
                    >
                      {product}
                    </span>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

<div className="mt-12 text-center">
          <Button
            size="lg"
            variant="outline"
            className="group bg-transparent"
            onClick={() => {
              const element = document.getElementById("contacto")
              if (element) element.scrollIntoView({ behavior: "smooth" })
            }}
          >
            <Sparkles className="mr-2 h-4 w-4 transition-transform group-hover:rotate-12" />
            Solicitar Catálogo Completo
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]jpg:file="public/grocery-store-food-products-on-shelves.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/grocery-store-food-products-on-shelves-KL4tNto8XvgRWLkBwbeht9phdNqwc7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cleaning-products-shelves-detergent.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cleaning-products-shelves-detergent-8teKSJleMtxVyuUKIOvb2BIqFCZqNX.jpg" isMerged="true"
[V0_FILE]jpg:file="public/warehouse-storage-distribution-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/warehouse-storage-distribution-products-2BD6c3UBGbZn7wPnBpxBnXi2Wwby0z.jpg" isMerged="true"
[V0_FILE]jpg:file="public/premium-gourmet-products-display.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/premium-gourmet-products-display-JWmg5hMwc4XdxhxpOnj9Jue22hvVRX.jpg" isMerged="true"
[V0_FILE]png:file="public/tidec-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/355491266_521895620038439_27671258499040325_n-48Ej03OCuqw7t7Prq37cISYCcDxAFj.jpg" isMerged="true"
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.2 0.01 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.01 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.01 240);
  /* updated primary color to Tidec orange #FF4E11 */
  --primary: oklch(0.65 0.21 35);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.22 0.02 240);
  --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.95 0.005 240);
  --muted-foreground: oklch(0.5 0.01 240);
  /* updated accent to complementary warm tone */
  --accent: oklch(0.7 0.18 60);
  --accent-foreground: oklch(0.15 0.01 240);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.9 0.005 240);
  --input: oklch(0.9 0.005 240);
  /* updated ring color to match primary */
  --ring: oklch(0.65 0.21 35);
  --chart-1: oklch(0.65 0.21 35);
  --chart-2: oklch(0.7 0.18 60);
  --chart-3: oklch(0.22 0.02 240);
  --chart-4: oklch(0.6 0.12 270);
  --chart-5: oklch(0.7 0.15 210);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.15 0.01 240);
  --foreground: oklch(0.99 0 0);
  --card: oklch(0.18 0.01 240);
  --card-foreground: oklch(0.99 0 0);
  --popover: oklch(0.18 0.01 240);
  --popover-foreground: oklch(0.99 0 0);
  /* updated dark mode primary to brighter orange */
  --primary: oklch(0.7 0.21 35);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.25 0.02 240);
  --secondary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.22 0.01 240);
  --muted-foreground: oklch(0.65 0.01 240);
  --accent: oklch(0.75 0.18 60);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.25 0.01 240);
  --input: oklch(0.25 0.01 240);
  --ring: oklch(0.7 0.21 35);
  --chart-1: oklch(0.7 0.21 35);
  --chart-2: oklch(0.75 0.18 60);
  --chart-3: oklch(0.35 0.02 240);
  --chart-4: oklch(0.7 0.12 270);
  --chart-5: oklch(0.8 0.15 210);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Menu, X } from "lucide-react"
import Image from "next/image"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

const scrollToSection = (id: string) => {
    const element = document.getElementById(id)
    if (element) {
      element.scrollIntoView({ behavior: "smooth" })
      setIsMenuOpen(false)
    }
  }

return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <div className="flex items-center gap-3">
          <Image src="/tidec-logo.png" alt="Tidec Logo" width={48} height={48} className="h-12 w-12" />
          <span className="text-2xl font-bold text-foreground">TIDEC</span>
        </div>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          <button
            onClick={() => scrollToSection("nosotros")}
            className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
          >
            Nosotros
          </button>
          <button
            onClick={() => scrollToSection("productos")}
            className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
          >
            Productos
          </button>
          <button
            onClick={() => scrollToSection("preguntas")}
            className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
          >
            Preguntas Frecuentes
          </button>
          <Button onClick={() => scrollToSection("contacto")} size="sm">
            Contacto
          </Button>
        </nav>

{/* Mobile Menu Button */}
        <Button variant="ghost" size="icon" className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
          {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
        </Button>
      </div>

{/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden border-t bg-background">
          <nav className="container mx-auto flex flex-col gap-4 p-4">
            <button
              onClick={() => scrollToSection("nosotros")}
              className="text-left text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
            >
              Nosotros
            </button>
            <button
              onClick={() => scrollToSection("productos")}
              className="text-left text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
            >
              Productos
            </button>
            <button
              onClick={() => scrollToSection("preguntas")}
              className="text-left text-sm font-medium text-foreground/80 hover:text-primary transition-colors"
            >
              Preguntas Frecuentes
            </button>
            <Button onClick={() => scrollToSection("contacto")} size="sm" className="w-full">
              Contacto
            </Button>
          </nav>
        </div>
      )}
    </header>
  )
}
[V0_FILE]typescriptreact:file="components/whatsapp-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

export function WhatsAppButton() {
  const handleWhatsAppClick = () => {
    const phoneNumber = "5491112345678"
    const message = encodeURIComponent("Hola! Me gustaría obtener más información sobre sus productos.")
    window.open(`https://wa.me/${phoneNumber}?text=${message}`, "_blank")
  }

return (
    <Button
      onClick={handleWhatsAppClick}
      size="lg"
      className="fixed bottom-6 right-6 z-50 h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-[#25D366] hover:bg-[#20BA5A] p-0"
      aria-label="Contactar por WhatsApp"
    >
      <MessageCircle className="h-6 w-6 text-white" />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/brands.tsx"
"use client"

import Image from "next/image"
import { Card } from "@/components/ui/card"

export function Brands() {
  const brands = [
    { name: "Quilmes", logo: "/quilmes-logo.jpg" },
    { name: "Coca Cola", logo: "/coca-cola-logo.png" },
    { name: "Pepsi", logo: "/pepsi-logo.png" },
    { name: "Arcor", logo: "/arcor-logo.jpg" },
    { name: "Marolio", logo: "/marolio-logo.jpg" },
    { name: "La Serenísima", logo: "/la-serenisima-logo.jpg" },
    { name: "Unilever", logo: "/generic-corporate-logo.png" },
    { name: "Procter & Gamble", logo: "/letter-p-typography.png" },
  ]

return (
    <section className="py-16 md:py-20 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-balance md:text-4xl mb-4">
            Marcas que <span className="text-primary">Distribuimos</span>
          </h2>
          <p className="text-muted-foreground text-pretty max-w-2xl mx-auto">
            Trabajamos con las marcas líderes del mercado para ofrecerte productos de la más alta calidad
          </p>
        </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {brands.map((brand, index) => (
            <Card
              key={index}
              className="group p-8 flex items-center justify-center hover:shadow-lg transition-all duration-300 bg-background border-2 hover:border-primary/30 animate-in fade-in slide-in-from-bottom-4"
              style={{ animationDelay: `${index * 50}ms` }}
            >
              <div className="relative h-20 w-full grayscale group-hover:grayscale-0 transition-all">
                <Image
                  src={brand.logo || "/placeholder.svg"}
                  alt={`Logo ${brand.name}`}
                  fill
                  className="object-contain"
                />
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/coverage.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { MapPin } from "lucide-react"

export function Coverage() {
  const regions = [
    { province: "Buenos Aires", cities: ["CABA", "La Plata", "Mar del Plata"] },
    { province: "Córdoba", cities: ["Córdoba Capital", "Villa María", "Río Cuarto"] },
    { province: "Santa Fe", cities: ["Rosario", "Santa Fe Capital"] },
    { province: "Mendoza", cities: ["Mendoza Capital", "San Rafael"] },
  ]

return (
    <section className="py-16 md:py-20 relative overflow-hidden">
      <div className="absolute left-0 top-1/2 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />

<div className="container relative mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-balance md:text-4xl mb-6">
              Cobertura en toda <span className="text-primary">Argentina</span>
            </h2>
            <p className="text-lg text-muted-foreground text-pretty leading-relaxed mb-8">
              Contamos con una red de distribución que alcanza las principales ciudades del país, garantizando entregas
              rápidas y eficientes. Nuestro compromiso es llevar productos de calidad a cada rincón donde nos necesites.
            </p>

<div className="grid grid-cols-2 gap-6">
              <Card className="border-2">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-primary mb-2">12.000+</div>
                  <div className="text-sm text-muted-foreground">km diarios recorridos</div>
                </CardContent>
              </Card>
              <Card className="border-2">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-primary mb-2">50+</div>
                  <div className="text-sm text-muted-foreground">Ciudades alcanzadas</div>
                </CardContent>
              </Card>
            </div>
          </div>

<div className="space-y-4">
            {regions.map((region, index) => (
              <Card
                key={index}
                className="border-2 hover:border-primary/50 transition-all animate-in fade-in slide-in-from-right-8"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <CardContent className="p-6">
                  <div className="flex items-start gap-4">
                    <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                      <MapPin className="h-6 w-6 text-primary" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-lg mb-2">{region.province}</h3>
                      <p className="text-sm text-muted-foreground">{region.cities.join(" • ")}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/testimonials.tsx"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Star, Quote } from "lucide-react"

export function Testimonials() {
  const testimonials = [
    {
      name: "María González",
      company: "Supermercado Central",
      text: "Trabajamos con Tidec desde hace 5 años y siempre nos sorprenden con su excelente servicio. Las entregas son puntuales y los productos de primera calidad.",
      rating: 5,
    },
    {
      name: "Carlos Rodríguez",
      company: "Almacén La Esquina",
      text: "La atención personalizada y la variedad de productos que ofrecen hacen de Tidec nuestro proveedor preferido. Altamente recomendados.",
      rating: 5,
    },
    {
      name: "Laura Fernández",
      company: "Minimarket Express",
      text: "Excelente relación calidad-precio. El equipo de Tidec siempre está dispuesto a ayudar y resolver cualquier consulta rápidamente.",
      rating: 5,
    },
  ]

return (
    <section className="py-16 md:py-20 bg-muted/30">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-balance md:text-4xl mb-4">
            Lo que dicen nuestros <span className="text-primary">Clientes</span>
          </h2>
          <p className="text-muted-foreground text-pretty max-w-2xl mx-auto">
            La satisfacción de nuestros clientes es nuestra mayor motivación
          </p>
        </div>

<div className="grid md:grid-cols-3 gap-6">
          {testimonials.map((testimonial, index) => (
            <Card
              key={index}
              className="border-2 hover:shadow-xl transition-all duration-300 animate-in fade-in slide-in-from-bottom-8"
              style={{ animationDelay: `${index * 100}ms` }}
            >
              <CardContent className="p-6">
                <Quote className="h-8 w-8 text-primary/20 mb-4" />

<div className="flex gap-1 mb-4">
                  {Array.from({ length: testimonial.rating }).map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-primary text-primary" />
                  ))}
                </div>

<p className="text-sm text-muted-foreground leading-relaxed mb-6">"{testimonial.text}"</p>

<div className="border-t pt-4">
                  <div className="font-semibold">{testimonial.name}</div>
                  <div className="text-sm text-muted-foreground">{testimonial.company}</div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { ArrowRight, MessageCircle } from "lucide-react"

export function CTASection() {
  return (
    <section className="py-20 md:py-28 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-accent/10" />
      <div className="absolute right-0 top-0 h-full w-1/2 bg-primary/5 blur-3xl" />

<div className="container relative mx-auto px-4">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="text-3xl font-bold text-balance md:text-5xl mb-6">
            ¿Listo para trabajar con <span className="text-primary">Tidec</span>?
          </h2>
          <p className="text-lg text-muted-foreground text-pretty leading-relaxed mb-8">
            Únete a los más de 15.000 clientes que confían en nosotros. Contáctanos hoy y descubre cómo podemos ayudarte
            a crecer tu negocio.
          </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="text-base gap-2"
              onClick={() => document.getElementById("contacto")?.scrollIntoView({ behavior: "smooth" })}
            >
              Solicitar Información
              <ArrowRight className="h-5 w-5" />
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="text-base gap-2 border-2 bg-transparent"
              onClick={() => window.open("https://wa.me/5491112345678", "_blank")}
            >
              <MessageCircle className="h-5 w-5" />
              Contactar por WhatsApp
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import { Header } from "@/components/header"
import { HeroSlider } from "@/components/hero-slider"
import { Stats } from "@/components/stats"
import { About } from "@/components/about"
import { Brands } from "@/components/brands"
import { Products } from "@/components/products"
import { Coverage } from "@/components/coverage"
import { Testimonials } from "@/components/testimonials"
import { CTASection } from "@/components/cta-section"
import { FAQ } from "@/components/faq"
import { Contact } from "@/components/contact"
import { Footer } from "@/components/footer"
import { WhatsAppButton } from "@/components/whatsapp-button"

export default function HomePage() {
  return (
    <div className="min-h-screen">
      <Header />
      <main>
        <HeroSlider />
        <Stats />
        <About />
        <Brands />
        <Products />
        <Coverage />
        <Testimonials />
        <CTASection />
        <FAQ />
        <Contact />
      </main>
      <Footer />
      <WhatsAppButton />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true"
import { Facebook, Instagram, Linkedin, Mail, MapPin, Phone } from "lucide-react"
import Image from "next/image"

export function Footer() {
  const currentYear = new Date().getFullYear()

return (
    <footer className="border-t bg-secondary">
      <div className="container mx-auto px-4 py-12">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
          <div>
            <div className="mb-4">
              <Image
                src="/images/355491266-521895620038439-27671258499040325-n.jpg"
                alt="Tidec Logo"
                width={120}
                height={120}
                className="h-16 w-16 object-contain"
              />
            </div>
            <p className="text-sm text-secondary-foreground/70 leading-relaxed">
              Tu distribuidora de confianza con más de 25 años de experiencia en el mercado argentino.
            </p>
          </div>

<div>
            <h3 className="mb-4 font-semibold text-secondary-foreground">Enlaces Rápidos</h3>
            <ul className="space-y-2 text-sm text-secondary-foreground/70">
              <li>
                <a href="#nosotros" className="hover:text-primary transition-colors">
                  Nosotros
                </a>
              </li>
              <li>
                <a href="#productos" className="hover:text-primary transition-colors">
                  Productos
                </a>
              </li>
              <li>
                <a href="#preguntas" className="hover:text-primary transition-colors">
                  Preguntas Frecuentes
                </a>
              </li>
              <li>
                <a href="#contacto" className="hover:text-primary transition-colors">
                  Contacto
                </a>
              </li>
            </ul>
          </div>

<div>
            <h3 className="mb-4 font-semibold text-secondary-foreground">Contacto</h3>
            <ul className="space-y-3 text-sm text-secondary-foreground/70">
              <li className="flex items-center gap-2">
                <Phone className="h-4 w-4 text-primary" />
                +54 11 1234-5678
              </li>
              <li className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-primary" />
                ventas@tidec.com.ar
              </li>
              <li className="flex items-start gap-2">
                <MapPin className="h-4 w-4 text-primary mt-0.5" />
                <span>
                  Av. Principal 1234
                  <br />
                  Buenos Aires, Argentina
                </span>
              </li>
            </ul>
          </div>

<div>
            <h3 className="mb-4 font-semibold text-secondary-foreground">Síguenos</h3>
            <div className="flex gap-3">
              <a
                href="#"
                className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300"
                aria-label="Facebook"
              >
                <Facebook className="h-5 w-5" />
              </a>
              <a
                href="#"
                className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300"
                aria-label="Instagram"
              >
                <Instagram className="h-5 w-5" />
              </a>
              <a
                href="#"
                className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-300"
                aria-label="LinkedIn"
              >
                <Linkedin className="h-5 w-5" />
              </a>
            </div>

<div className="mt-6">
              <h4 className="text-sm font-semibold text-secondary-foreground mb-2">Newsletter</h4>
              <p className="text-xs text-secondary-foreground/70 mb-3">Recibe nuestras novedades y promociones</p>
            </div>
          </div>
        </div>

<div className="mt-12 border-t border-secondary-foreground/10 pt-8 text-center text-sm text-secondary-foreground/70">
          <p>© {currentYear} Tidec - Distribuidora. Todos los derechos reservados.</p>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]jpg:file="public/quilmes-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/quilmes-logo-uY3pc87whHKLPRZnkFQjnlVCvcMSRa.jpg"
[V0_FILE]png:file="public/coca-cola-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coca-cola-logo-2W1EYdHQPf0UPVoOE8Uox6rUuR9HUK.png"
[V0_FILE]png:file="public/pepsi-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pepsi-logo-qR3hziaUMLFekXhpQBTw3xuWPfkv1w.png"
[V0_FILE]jpg:file="public/arcor-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/arcor-logo-8E7eg3PxioVtJ4Az915Uq9dxuOu5ll.jpg"
[V0_FILE]jpg:file="public/marolio-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/marolio-logo-ga8dxL4dBHfonDgWGhNA7u7c9YOyLa.jpg"
[V0_FILE]jpg:file="public/la-serenisima-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/la-serenisima-logo-Du7bHFRFesdmAfYkyb69NK8wKiCwsg.jpg"
[V0_FILE]png:file="public/generic-corporate-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-corporate-logo-CD5EQVGcbjIWvhsnaq9245aiBR3Xvg.png"
[V0_FILE]png:file="public/letter-p-typography.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/letter-p-typography-fUil3lgGQLpl90ezuu6Xwmv2aXAu9r.png"
[V0_FILE]jpg:file="public/images/355491266-521895620038439-27671258499040325-n.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/355491266_521895620038439_27671258499040325_n-48Ej03OCuqw7t7Prq37cISYCcDxAFj.jpg"</article></body></html>