[V0_FILE]typescriptreact:file="app/nosotros/page.tsx" isQuickEdit="true" import Image from "next/image" import { Leaf, Star, Target, Award, Users, Clock } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function AboutPage() { return (

{/* Hero Section */}

Quiénes Somos

Conoce nuestra historia, misión, visión y los valores que nos han convertido en líderes del sector agrícola.

{/* Mission & Vision */}

Nuestra Misión

Proveer productos agrícolas frescos y procesados de la más alta calidad, garantizando la inocuidad alimentaria y promoviendo prácticas sostenibles que beneficien a nuestros clientes, colaboradores y al medio ambiente.

Nuestra Visión

Ser reconocidos como el proveedor líder de productos agrícolas en Colombia, destacándonos por nuestra innovación, calidad impecable y compromiso con la sostenibilidad, expandiendo nuestra presencia a nivel nacional e internacional.

{/* Quality Objectives */}

Objetivos de Calidad

Nuestro compromiso con la excelencia se refleja en cada uno de nuestros objetivos de calidad, que guían todas nuestras operaciones y decisiones.

Inocuidad Alimentaria

Garantizar que todos nuestros productos cumplan con los más altos estándares de inocuidad alimentaria.

Calidad Constante

Mantener la consistencia en la calidad de nuestros productos a través de rigurosos controles y tecnología de punta.

Sostenibilidad

Implementar y mejorar continuamente prácticas agrícolas sostenibles que minimicen nuestro impacto ambiental.

Bienestar Laboral

Promover un ambiente de trabajo seguro y saludable, con capacitación continua y pausas activas para nuestro equipo.

Puntualidad

Cumplir con los tiempos de entrega acordados, respetando los compromisos adquiridos con nuestros clientes.

Innovación

Buscar constantemente nuevas tecnologías y procesos que mejoren la calidad de nuestros productos y la eficiencia de nuestras operaciones.

{/* Production Process */}

Nuestro Proceso de Producción

Utilizamos tecnología alemana de punta y seguimos un riguroso proceso para garantizar la máxima calidad en cada etapa.

Selección

Cuidadosa selección de materias primas de la más alta calidad.

Clasificación

Sistema de canastas de colores para control visual de calidad.

Procesamiento

Procesamiento con maquinaria alemana de última generación.

Control de Calidad

Riguroso control de calidad y medición de pH antes de la distribución.

) } [V0_FILE]typescriptreact:file="app/productos/page.tsx" isQuickEdit="true" import Image from "next/image" import Link from "next/link" import { Check, Shield, BarChart } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function ProductsPage() { return (

{/* Hero Section */}

Nuestros Productos

Descubra nuestra amplia gama de productos agrícolas frescos y procesados de la más alta calidad.

{/* Products Tabs */}

Productos Frescos Productos Procesados

Vegetales Frescos Selección de vegetales cultivados con los más altos estándares de calidad

Control visual por canastas de colores
Trazabilidad completa
Entrega puntual garantizada

Frutas Frescas Frutas seleccionadas en su punto óptimo de maduración

Selección manual cuidadosa
Control de calidad riguroso
Sabor y frescura garantizados

Hierbas Aromáticas Hierbas aromáticas frescas para realzar el sabor de sus platos

Cultivo controlado
Aroma y sabor intensos
Empaque que preserva la frescura

Mango Congelado Mango congelado disponible todo el año con la misma calidad y frescura

Proceso de congelación rápida
Conserva nutrientes y sabor
Disponible en diferentes cortes
Ideal para smoothies y postres

Mora Congelada Mora congelada que mantiene todas sus propiedades durante todo el año

Selección de las mejores moras
Proceso IQF para preservar calidad
Sin aditivos ni conservantes
Perfecta para jugos y repostería

{/* Certifications */}

Certificaciones de Calidad

Nuestros productos cumplen con los más altos estándares de calidad e inocuidad alimentaria, respaldados por certificaciones reconocidas internacionalmente.

HACCP

Sistema de Análisis de Peligros y Puntos Críticos de Control que garantiza la inocuidad alimentaria.

ISO 22000

Estándar internacional que especifica los requisitos para un sistema de gestión de seguridad alimentaria.

BPA

Buenas Prácticas Agrícolas que aseguran la integridad de los alimentos y la sostenibilidad ambiental.

{/* Traceability */}

Trazabilidad Completa

En Agrícolas Telnar S.A.S., implementamos un riguroso sistema de trazabilidad que nos permite seguir cada producto desde su origen hasta su destino final, garantizando la máxima calidad y seguridad.

Identificación de Lotes

Cada lote de producción cuenta con un código único que permite su seguimiento.
Control de Procesos

Monitoreo constante de cada etapa del proceso productivo.
Registros Detallados

Documentación completa de proveedores, fechas, condiciones y destinos.

) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 30 83% 6%; --card: 0 0% 100%; --card-foreground: 30 83% 6%; --popover: 0 0% 100%; --popover-foreground: 30 83% 6%; --primary: 16 75% 51%; --primary-foreground: 0 0% 98%; --secondary: 142 14% 22%; --secondary-foreground: 0 0% 98%; --muted: 30 10% 96%; --muted-foreground: 30 10% 40%; --accent: 142 14% 22%; --accent-foreground: 0 0% 98%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 30 10% 90%; --input: 30 10% 90%; --ring: 16 75% 51%; --radius: 0.5rem; } .dark { --background: 30 83% 6%; --foreground: 40 38% 92%; --card: 30 83% 6%; --card-foreground: 40 38% 92%; --popover: 30 83% 6%; --popover-foreground: 40 38% 92%; --primary: 16 75% 51%; --primary-foreground: 0 0% 98%; --secondary: 142 14% 22%; --secondary-foreground: 0 0% 98%; --muted: 30 20% 15%; --muted-foreground: 30 10% 70%; --accent: 142 14% 22%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 30 20% 20%; --input: 30 20% 20%; --ring: 16 75% 51%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isQuickEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, telnar: { dark: "#1A1006", green: "#2D4134", orange: "#E05E24", cream: "#F5F0E1", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]plaintext:file="public/images/fresh-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Productos%20Frescos-oRYxeLvQs1bMCstAaP10JMBfeZDuYk.jpeg" [V0_FILE]plaintext:file="public/images/processed-products.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Productos%20procesados-zNvdAfkMeYSQ7L2t5d54DUBSjpgu3p.jpeg" [V0_FILE]plaintext:file="public/images/client-buffalo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Buffalo%20Wings-sAn0tQYdJE9omOkGVpSSJW4STemBeV.jpeg" [V0_FILE]plaintext:file="public/images/client-qbano.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/qbano-RXDnohcNxyqqiDp8K0ua1w4QNAWx4h.png" [V0_FILE]plaintext:file="public/images/client-sipote.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sipote-CzL6yclJf7LgtHsPmf6CyelqgghlqY.png" [V0_FILE]plaintext:file="public/images/telnar-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logoo-JuYZPOW9Igm2PT64A9nBXKBJ5H49EY.jpeg" [V0_FILE]plaintext:file="public/images/telnar-logo-white.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logoo-JuYZPOW9Igm2PT64A9nBXKBJ5H49EY.jpeg" [V0_FILE]plaintext:file="public/images/about-hero.jpg" url="https://placeholder.svg?height=400&width=1200" [V0_FILE]plaintext:file="public/images/production-process.jpg" url="https://placeholder.svg?height=562&width=1000" [V0_FILE]plaintext:file="public/images/products-hero.jpg" url="https://placeholder.svg?height=400&width=1200" [V0_FILE]plaintext:file="public/images/fresh-vegetables.jpg" url="https://placeholder.svg?height=300&width=400" [V0_FILE]plaintext:file="public/images/fresh-fruits.jpg" url="https://placeholder.svg?height=300&width=400" [V0_FILE]plaintext:file="public/images/fresh-herbs.jpg" url="https://placeholder.svg?height=300&width=400" [V0_FILE]plaintext:file="public/images/frozen-mango.jpg" url="https://placeholder.svg?height=300&width=400" [V0_FILE]plaintext:file="public/images/frozen-blackberry.jpg" url="https://placeholder.svg?height=300&width=400" [V0_FILE]plaintext:file="public/images/traceability.jpg" url="https://placeholder.svg?height=400&width=600" [V0_FILE]plaintext:file="public/images/client-dosdelama.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Dos%20del%20alma-4aCytziansYsJ1egAiJ7cwd03Mzkrg.png" [V0_FILE]plaintext:file="public/images/hero-banner.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/imagen%20inicio-6FpZ9NyNPLgIr9CR0F3X1VepRIAANo.jpeg" [V0_FILE]plaintext:file="public/images/google-map.jpg" url="https://sjc.microlink.io/arIeXP5v9CNRX4PjbUo0RiekClgxfBMuhK1COdKsbk-eT0FbGJ21LKvEjoFnaK3IYIoubaK1sNpN9tBFuepkYA.jpeg" [V0_FILE]typescriptreact:file="app/contacto/page.tsx" "use client" import type React from "react" import { useState } from "react" import Image from "next/image" import { MapPin, Phone, Mail, Send, ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", company: "", email: "", phone: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) setIsSubmitted(true) setFormData({ name: "", company: "", email: "", phone: "", message: "", }) }, 1500) } return (

{/* Hero Section */}

Contáctenos

Estamos aquí para responder a sus preguntas y ayudarle a encontrar los productos agrícolas perfectos para sus necesidades.

{/* Contact Information */}

Dirección

Cl. 37 Sur # 72L-77, Kennedy, Bogotá, Colombia

Teléfono

+57 (123) 456-7890

Correo Electrónico info@telnar.com.co

Envíenos un Mensaje

{isSubmitted ? (

¡Mensaje Enviado!

Gracias por contactarnos. Nos pondremos en contacto con usted lo antes posible.

) : (

Nombre Completo *

Empresa

Correo Electrónico *

Teléfono

Mensaje *

</div>

<Button
                    type="submit"
                    className="w-full bg-telnar-orange hover:bg-telnar-orange/90 text-white"
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? "Enviando..." : "Enviar Mensaje"}
                  </Button>
                </form>
              )}
            </div>

<div>
              <h2 className="text-2xl font-bold mb-6">Nuestra Ubicación</h2>
              <div className="rounded-lg overflow-hidden h-[400px] w-full border border-gray-200 shadow-md">
                <div className="relative w-full h-full">
                  <Image
                    src="/images/google-map.jpg"
                    alt="Mapa de ubicación de Agrícolas Telnar"
                    fill
                    className="object-cover"
                  />
                  <a
                    href="https://www.google.com/maps/place/Cl.+37+Sur+%23+72L-77,+Kennedy,+Bogot%C3%A1,+D.C.,+Bogot%C3%A1,+Bogot%C3%A1,+D.C./@4.615666,-74.143805,753m/data=!3m2!1e3!4b1!4m6!3m5!1s0x8e3f9ebc59dfd615:0x94dfe4e9bd584638!8m2!3d4.615666!4d-74.143805!16s%2Fg%2F11l_5_plfb?hl=es&entry=ttu"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="absolute bottom-4 right-4 bg-white py-2 px-4 rounded-md shadow-md flex items-center text-telnar-dark hover:bg-gray-100 transition-colors"
                  >
                    <span className="mr-2">Ver en Google Maps</span>
                    <ExternalLink className="h-4 w-4" />
                  </a>
                </div>
              </div>
              <p className="mt-4 text-center text-gray-600">Cl. 37 Sur # 72L-77, Kennedy, Bogotá, Colombia</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]plaintext:file="public/images/nuestros-productos.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Nuestros%20productos-x5JI6ZlAvclHTYKLRuaHdGZjBc186c.jpeg"

[V0_FILE]plaintext:file="public/images/vegetales-frescos.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vegetales%20frescos-xngiV1GAYszgO9WadQ2I6Dyz2Vmpg3.jpeg"

[V0_FILE]plaintext:file="public/images/frutas-frescas.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frutas%20frescas-OB3VO59cWJXzyGg3xo5Y3kX7kzHtfw.jpeg"

[V0_FILE]plaintext:file="public/images/hierbas-frescas.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hierbas%20frescas-mt2wduJ1vkf4Gy1WGiUphDmgJ5shrB.jpeg"

[V0_FILE]typescriptreact:file="app/clientes/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Star, Quote, Users, ArrowRight, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ClientesPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[300px] md:h-[400px] overflow-hidden">
        <div className="absolute inset-0 bg-black/40 z-10" />
        <Image src="/images/clientes-hero.jpg" alt="Clientes de Telnar" fill className="object-cover" />
        <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center items-start">
          <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">Nuestros Clientes</h1>
          <p className="text-lg md:text-xl text-white max-w-2xl">
            Empresas líderes confían en la calidad y el compromiso de Agrícolas Telnar S.A.S.
          </p>
        </div>
      </section>

{/* Testimonios Destacados */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Testimonios Destacados</h2>
            <p className="text-lg text-gray-700">
              Nuestros clientes son nuestra mejor carta de presentación. Descubra por qué empresas líderes confían en
              Agrícolas Telnar S.A.S. para sus necesidades de productos agrícolas.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <div className="w-24 h-24 mx-auto relative mb-4">
                  <Image src="/images/client-buffalo.png" alt="Buffalo Wings" fill className="object-contain" />
                </div>
                <CardTitle className="text-xl">Buffalo Wings</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <Quote className="w-8 h-8 mx-auto text-telnar-orange/30 mb-2" />
                <p className="text-gray-700 italic">
                  "La calidad y frescura de los vegetales de Telnar ha sido fundamental para mantener el estándar de
                  nuestras ensaladas. Su sistema de entrega puntual nos permite optimizar nuestro inventario."
                </p>
                <div className="flex justify-center mt-4">
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                </div>
              </CardContent>
              <CardFooter className="text-center text-sm text-gray-500">Carlos Ramírez - Gerente de Compras</CardFooter>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <div className="w-24 h-24 mx-auto relative mb-4">
                  <Image src="/images/client-qbano.png" alt="Sándwich Qbano" fill className="object-contain" />
                </div>
                <CardTitle className="text-xl">Sándwich Qbano</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <Quote className="w-8 h-8 mx-auto text-telnar-orange/30 mb-2" />
                <p className="text-gray-700 italic">
                  "Trabajar con Telnar nos ha permitido garantizar la consistencia en la calidad de nuestros
                  ingredientes. Su innovación en productos congelados nos asegura disponibilidad durante todo el año."
                </p>
                <div className="flex justify-center mt-4">
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                </div>
              </CardContent>
              <CardFooter className="text-center text-sm text-gray-500">
                Laura Gómez - Directora de Operaciones
              </CardFooter>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <div className="w-24 h-24 mx-auto relative mb-4">
                  <Image src="/images/client-sipote.png" alt="Sipote Burrito" fill className="object-contain" />
                </div>
                <CardTitle className="text-xl">Sipote Burrito</CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <Quote className="w-8 h-8 mx-auto text-telnar-orange/30 mb-2" />
                <p className="text-gray-700 italic">
                  "La trazabilidad que ofrece Telnar nos da la tranquilidad que necesitamos para nuestros clientes. Sus
                  productos frescos son parte fundamental del sabor auténtico de nuestros burritos."
                </p>
                <div className="flex justify-center mt-4">
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange text-telnar-orange" />
                  <Star className="w-5 h-5 fill-telnar-orange/30 text-telnar-orange/30" />
                </div>
              </CardContent>
              <CardFooter className="text-center text-sm text-gray-500">Andrés Martínez - Chef Ejecutivo</CardFooter>
            </Card>
          </div>
        </div>
      </section>

{/* Casos de Éxito */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Casos de Éxito</h2>
            <p className="text-lg text-gray-700">
              Descubra cómo hemos optimizado procesos y mejorado la calidad de los productos para nuestros clientes más
              destacados.
            </p>
          </div>

<Tabs defaultValue="caso1" className="w-full">
            <TabsList className="grid w-full grid-cols-3 mb-8">
              <TabsTrigger value="caso1">Buffalo Wings</TabsTrigger>
              <TabsTrigger value="caso2">Sándwich Qbano</TabsTrigger>
              <TabsTrigger value="caso3">Dos del Alma</TabsTrigger>
            </TabsList>

<TabsContent value="caso1">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div className="relative h-[300px] rounded-lg overflow-hidden shadow-lg">
                  <Image
                    src="/images/caso-buffalo.jpg"
                    alt="Caso de éxito Buffalo Wings"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-4">Optimización de Vegetales Precortados</h3>
                  <p className="text-gray-700 mb-4">
                    Buffalo Wings necesitaba optimizar su proceso de preparación de ensaladas para reducir el tiempo de
                    servicio en horas pico. Desarrollamos un sistema de entrega de vegetales precortados y listos para
                    usar, con medidas exactas para sus diferentes tamaños de porciones.
                  </p>
                  <ul className="space-y-2 mb-6">
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Reducción del 40% en tiempo de preparación</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Disminución del 25% en desperdicio de alimentos</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Estandarización de la calidad en todas sus sucursales</span>
                    </li>
                  </ul>
                  <Button asChild className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
                    <Link href="/contacto">Solicitar Solución Similar</Link>
                  </Button>
                </div>
              </div>
            </TabsContent>

<TabsContent value="caso2">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div className="relative h-[300px] rounded-lg overflow-hidden shadow-lg">
                  <Image
                    src="/images/caso-qbano.jpg"
                    alt="Caso de éxito Sándwich Qbano"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-4">Sistema de Abastecimiento Continuo</h3>
                  <p className="text-gray-700 mb-4">
                    Sándwich Qbano enfrentaba desafíos con la disponibilidad estacional de ciertos ingredientes clave.
                    Implementamos un sistema mixto de productos frescos y congelados que garantiza el abastecimiento
                    continuo durante todo el año, manteniendo el sabor y la calidad.
                  </p>
                  <ul className="space-y-2 mb-6">
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Disponibilidad garantizada de ingredientes todo el año</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Estabilización de costos frente a fluctuaciones estacionales</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Reducción del 30% en pérdidas por deterioro</span>
                    </li>
                  </ul>
                  <Button asChild className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
                    <Link href="/contacto">Solicitar Solución Similar</Link>
                  </Button>
                </div>
              </div>
            </TabsContent>

<TabsContent value="caso3">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div className="relative h-[300px] rounded-lg overflow-hidden shadow-lg">
                  <Image
                    src="/images/caso-dosdelama.jpg"
                    alt="Caso de éxito Dos del Alma"
                    fill
                    className="object-cover"
                  />
                </div>
                <div>
                  <h3 className="text-2xl font-bold mb-4">Productos Orgánicos Certificados</h3>
                  <p className="text-gray-700 mb-4">
                    Dos del Alma buscaba diferenciarse con una línea de platos elaborados con ingredientes orgánicos.
                    Desarrollamos un programa de cultivo orgánico certificado para abastecer sus necesidades
                    específicas, con trazabilidad completa desde la semilla hasta el plato.
                  </p>
                  <ul className="space-y-2 mb-6">
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Certificación orgánica para toda la cadena de suministro</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Aumento del 35% en satisfacción de clientes</span>
                    </li>
                    <li className="flex items-start">
                      <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                      <span>Creación de valor agregado para su propuesta gastronómica</span>
                    </li>
                  </ul>
                  <Button asChild className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
                    <Link href="/contacto">Solicitar Solución Similar</Link>
                  </Button>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </section>

{/* Alianzas Estratégicas */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Alianzas Estratégicas</h2>
            <p className="text-lg text-gray-700">
              Nuestras alianzas con productores locales y proveedores estratégicos nos permiten ofrecer productos de la
              más alta calidad y fortalecer toda la cadena de suministro.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-12">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/alianzas-productores.jpg"
                alt="Alianzas con productores locales"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <h3 className="text-2xl font-bold mb-4">Productores Locales</h3>
              <p className="text-gray-700 mb-6">
                Trabajamos con más de 50 familias agricultoras en diferentes regiones de Colombia, estableciendo
                relaciones a largo plazo basadas en la confianza y el beneficio mutuo. Nuestro programa de desarrollo de
                proveedores incluye:
              </p>
              <ul className="space-y-4 mb-6">
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Capacitación Técnica</h4>
                    <p className="text-gray-700">
                      Transferencia de conocimientos en técnicas de cultivo sostenible y manejo post-cosecha.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Precios Justos</h4>
                    <p className="text-gray-700">
                      Política de precios que reconoce la calidad y el esfuerzo de nuestros productores aliados.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Planificación Conjunta</h4>
                    <p className="text-gray-700">
                      Programación de siembras y cosechas para garantizar volumen y continuidad en el suministro.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center md:flex-row-reverse">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg md:order-2">
              <Image src="/images/alianzas-tecnologia.jpg" alt="Alianzas tecnológicas" fill className="object-cover" />
            </div>
            <div className="md:order-1">
              <h3 className="text-2xl font-bold mb-4">Alianzas Tecnológicas</h3>
              <p className="text-gray-700 mb-6">
                Colaboramos con proveedores de tecnología agrícola de vanguardia para optimizar nuestros procesos y
                garantizar la máxima calidad en cada etapa de la cadena de valor.
              </p>
              <ul className="space-y-4 mb-6">
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Equipamiento Alemán</h4>
                    <p className="text-gray-700">
                      Maquinaria de última generación para procesamiento y conservación de alimentos.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Sistemas de Trazabilidad</h4>
                    <p className="text-gray-700">
                      Software especializado para seguimiento completo desde el campo hasta el cliente.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Laboratorios de Calidad</h4>
                    <p className="text-gray-700">
                      Alianzas con laboratorios certificados para análisis y control de calidad permanente.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-16 bg-telnar-dark text-telnar-cream">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">¿Listo para ser nuestro próximo caso de éxito?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Solicite una cotización personalizada y descubra cómo podemos optimizar su cadena de suministro con
            productos agrícolas de la más alta calidad.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              asChild
              size="lg"
              className="bg-telnar-orange text-white hover:bg-telnar-orange/90 sm:min-w-[200px]"
            >
              <Link href="/contacto">Solicitar Cotización</Link>
            </Button>
            <Button
              asChild
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white/10 sm:min-w-[200px]"
            >
              <Link href="/productos">
                Ver Catálogo
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/innovacion/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Lightbulb, Truck, BarChart, Zap, ArrowRight, Sparkles, Clock, Beaker } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export default function InnovacionPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[300px] md:h-[400px] overflow-hidden">
        <div className="absolute inset-0 bg-black/40 z-10" />
        <Image src="/images/innovacion-hero.jpg" alt="Innovación en Telnar" fill className="object-cover" />
        <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center items-start">
          <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">Innovación</h1>
          <p className="text-lg md:text-xl text-white max-w-2xl">
            Tecnología y procesos de vanguardia para garantizar productos agrícolas de la más alta calidad.
          </p>
        </div>
      </section>

{/* Productos Innovadores */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Productos Innovadores</h2>
            <p className="text-lg text-gray-700">
              Nuestro compromiso con la innovación nos ha permitido desarrollar productos que mantienen su calidad y
              frescura durante todo el año, superando las limitaciones estacionales.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Card className="overflow-hidden">
              <div className="relative h-64">
                <Image src="/images/frozen-mango.jpg" alt="Mango congelado" fill className="object-cover" />
              </div>
              <CardHeader>
                <CardTitle>Mango Ultracongelado</CardTitle>
                <CardDescription>Disponible todo el año con la misma calidad y frescura</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700 mb-4">
                  Nuestro proceso de ultracongelación IQF (Individual Quick Freezing) permite congelar cada trozo de
                  mango de manera individual en menos de 10 minutos, preservando su sabor, textura y propiedades
                  nutricionales.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Conserva el 95% de sus nutrientes originales</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Ideal para jugos, smoothies y postres</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Sin aditivos ni conservantes</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Reduce desperdicios y optimiza inventarios</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-telnar-orange/20 hover:bg-telnar-orange/10 hover:text-telnar-orange"
                >
                  <Link href="/productos#procesados">Ver Detalles</Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="overflow-hidden">
              <div className="relative h-64">
                <Image src="/images/frozen-blackberry.jpg" alt="Mora congelada" fill className="object-cover" />
              </div>
              <CardHeader>
                <CardTitle>Mora Ultracongelada</CardTitle>
                <CardDescription>Practicidad y nutrición en cualquier temporada</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700 mb-4">
                  Nuestra mora ultracongelada mantiene intactas sus propiedades antioxidantes y su intenso sabor gracias
                  a nuestro proceso de congelación rápida. Un producto práctico que elimina el problema de la
                  estacionalidad.
                </p>
                <ul className="space-y-2">
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Lista para usar, sin necesidad de descongelar</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Perfecta para batidos, salsas y repostería</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Mayor vida útil que la mora fresca</span>
                  </li>
                  <li className="flex items-center">
                    <Sparkles className="h-5 w-5 text-telnar-orange mr-2" />
                    <span>Precio estable durante todo el año</span>
                  </li>
                </ul>
              </CardContent>
              <CardFooter>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-telnar-orange/20 hover:bg-telnar-orange/10 hover:text-telnar-orange"
                >
                  <Link href="/productos#procesados">Ver Detalles</Link>
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

{/* Tecnología Aplicada */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Tecnología Aplicada</h2>
            <p className="text-lg text-gray-700">
              Implementamos tecnologías de punta en cada etapa de nuestra cadena de valor para garantizar la máxima
              calidad, trazabilidad y eficiencia en nuestros procesos.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/tecnologia-gps.jpg"
                alt="Dispositivos GPS para monitoreo"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <h3 className="text-2xl font-bold mb-4">
                Dispositivos GPS "Chismosos" <Truck className="inline-block h-6 w-6 text-telnar-orange ml-2" />
              </h3>
              <p className="text-gray-700 mb-6">
                Nuestros vehículos de transporte están equipados con dispositivos GPS de última generación que nos
                permiten monitorear en tiempo real la ubicación, temperatura y condiciones de nuestros productos durante
                todo el trayecto.
              </p>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Monitoreo en Tiempo Real</h4>
                    <p className="text-gray-700">
                      Seguimiento continuo de la ubicación y condiciones de transporte para garantizar la cadena de
                      frío.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Alertas Automáticas</h4>
                    <p className="text-gray-700">
                      Notificaciones inmediatas ante cualquier desviación en la ruta o cambios en la temperatura.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Optimización de Rutas</h4>
                    <p className="text-gray-700">
                      Análisis de datos para determinar las rutas más eficientes y reducir tiempos de entrega.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center md:flex-row-reverse">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg md:order-2">
              <Image
                src="/images/tecnologia-canastas.jpg"
                alt="Sistema de canastas de colores"
                fill
                className="object-cover"
              />
            </div>
            <div className="md:order-1">
              <h3 className="text-2xl font-bold mb-4">
                Sistema de Canastas de Colores <BarChart className="inline-block h-6 w-6 text-telnar-orange ml-2" />
              </h3>
              <p className="text-gray-700 mb-6">
                Hemos implementado un innovador sistema de control visual mediante canastas de diferentes colores que
                nos permite identificar rápidamente el tipo de producto, su fecha de ingreso y su destino, optimizando
                la gestión de inventarios y garantizando la frescura.
              </p>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Identificación Visual Inmediata</h4>
                    <p className="text-gray-700">
                      Cada color representa un tipo de producto o cliente, facilitando la organización y el despacho.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Control FIFO Eficiente</h4>
                    <p className="text-gray-700">
                      Sistema First In, First Out que garantiza la rotación adecuada de los productos.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Zap className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Reducción de Errores</h4>
                    <p className="text-gray-700">
                      Minimización de confusiones en la preparación de pedidos y mejora en la precisión de entregas.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* Proyectos Futuros */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Proyectos Futuros</h2>
            <p className="text-lg text-gray-700">
              En Agrícolas Telnar S.A.S. nunca dejamos de innovar. Conozca nuestros proyectos en desarrollo que pronto
              revolucionarán nuestra oferta de productos y servicios.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Lightbulb className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Empaque al Vacío Inteligente</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Estamos desarrollando un sistema de empaque al vacío con indicadores de frescura que cambian de color
                  según la condición del producto, permitiendo a los clientes verificar visualmente la calidad antes de
                  su uso.
                </p>
                <div className="mt-4 flex items-center justify-center">
                  <div className="bg-telnar-orange/10 text-telnar-orange text-sm font-medium rounded-full px-3 py-1 flex items-center">
                    <Clock className="w-4 h-4 mr-1" />
                    Lanzamiento: 2024
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Lightbulb className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Kits de Cocina Listos para Consumir</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Próximamente lanzaremos kits de ingredientes pre-cortados y porcionados para preparar recetas
                  específicas, facilitando la labor en cocinas profesionales y reduciendo el tiempo de preparación hasta
                  en un 60%.
                </p>
                <div className="mt-4 flex items-center justify-center">
                  <div className="bg-telnar-orange/10 text-telnar-orange text-sm font-medium rounded-full px-3 py-1 flex items-center">
                    <Clock className="w-4 h-4 mr-1" />
                    Lanzamiento: 2023
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Lightbulb className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Plataforma Digital de Pedidos</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Estamos desarrollando una plataforma digital que permitirá a nuestros clientes realizar pedidos en
                  línea, consultar inventarios en tiempo real y acceder a informes detallados de consumo para optimizar
                  sus compras.
                </p>
                <div className="mt-4 flex items-center justify-center">
                  <div className="bg-telnar-orange/10 text-telnar-orange text-sm font-medium rounded-full px-3 py-1 flex items-center">
                    <Clock className="w-4 h-4 mr-1" />
                    Beta: Finales 2023
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Flujo de Producción */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Nuestro Flujo de Producción Innovador</h2>
            <p className="text-lg text-gray-700">
              Conozca el proceso tecnológico que garantiza la máxima calidad en cada uno de nuestros productos.
            </p>
          </div>

<div className="relative">
            <div className="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-telnar-green/20 -translate-y-1/2 z-0"></div>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
              <div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  1
                </div>
                <h3 className="text-xl font-semibold mb-2">Recepción y Análisis</h3>
                <p className="text-gray-700">
                  Cada lote es sometido a un riguroso control de calidad con equipos de medición de última generación.
                </p>
                <div className="mt-4">
                  <Beaker className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  2
                </div>
                <h3 className="text-xl font-semibold mb-2">Procesamiento Avanzado</h3>
                <p className="text-gray-700">
                  Maquinaria alemana de última generación para corte, lavado y procesamiento con precisión milimétrica.
                </p>
                <div className="mt-4">
                  <Zap className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  3
                </div>
                <h3 className="text-xl font-semibold mb-2">Ultracongelación IQF</h3>
                <p className="text-gray-700">
                  Sistema de congelación individual que preserva las propiedades organolépticas y nutricionales.
                </p>
                <div className="mt-4">
                  <Sparkles className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  4
                </div>
                <h3 className="text-xl font-semibold mb-2">Empaque y Distribución</h3>
                <p className="text-gray-700">
                  Sistemas de empaque que garantizan la frescura y logística monitoreada por GPS en tiempo real.
                </p>
                <div className="mt-4">
                  <Truck className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>
            </div>
          </div>

<div className="mt-12 text-center">
            <div className="aspect-video max-w-3xl mx-auto rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/maquinaria-alemana.jpg"
                alt="Maquinaria alemana de Telnar"
                width={1000}
                height={562}
                className="w-full h-full object-cover"
              />
            </div>
            <p className="mt-4 text-sm text-gray-500">
              Nuestra planta cuenta con maquinaria alemana de última generación para garantizar la máxima calidad.
            </p>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-16 bg-telnar-dark text-telnar-cream">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Innovación al servicio de su negocio</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Descubra cómo nuestras soluciones innovadoras pueden optimizar sus procesos y mejorar la calidad de sus
            productos finales.
          </p>
          <Button asChild size="lg" className="bg-telnar-orange text-white hover:bg-telnar-orange/90">
            <Link href="/contacto" className="flex items-center">
              <ArrowRight className="mr-2 h-5 w-5" />
              Solicitar Demostración
            </Link>
          </Button>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/sostenibilidad/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Leaf, Droplet, Recycle, Users, Award, ArrowRight, CheckCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function SostenibilidadPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[300px] md:h-[400px] overflow-hidden">
        <div className="absolute inset-0 bg-black/40 z-10" />
        <Image src="/images/sostenibilidad-hero.jpg" alt="Sostenibilidad en Telnar" fill className="object-cover" />
        <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center items-start">
          <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">Sostenibilidad</h1>
          <p className="text-lg md:text-xl text-white max-w-2xl">
            Cultivando futuro, cosechando responsabilidad: nuestro compromiso con el medio ambiente y la sociedad.
          </p>
        </div>
      </section>

{/* Prácticas Ecoamigables */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Prácticas Ecoamigables</h2>
            <p className="text-lg text-gray-700">
              En Agrícolas Telnar S.A.S. implementamos prácticas sostenibles en cada etapa de nuestra cadena de
              producción, minimizando nuestro impacto ambiental y maximizando el aprovechamiento de recursos.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
            <Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Recycle className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Gestión de Residuos</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Aprovechamos el 100% de nuestros residuos orgánicos mediante un sistema de compostaje que genera abono
                  de alta calidad para nuestros cultivos, cerrando el ciclo de producción de manera sostenible.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Compostaje de residuos vegetales</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Envases biodegradables</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Reciclaje de materiales</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Droplet className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Gestión del Agua</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Implementamos sistemas de recolección de agua lluvia y tecnología de medición de pH que nos permite
                  optimizar el uso del agua en nuestros procesos, reduciendo significativamente nuestro consumo.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Recolección de agua lluvia</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Medición de pH para optimización</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Reutilización en procesos secundarios</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="border-green-100 shadow-md">
              <CardHeader className="text-center pb-2">
                <Leaf className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Cultivo Sostenible</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700">
                  Promovemos prácticas de agricultura sostenible que respetan los ciclos naturales, reducen el uso de
                  agroquímicos y preservan la biodiversidad en nuestras áreas de cultivo.
                </p>
                <ul className="mt-4 space-y-2">
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Rotación de cultivos</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Control biológico de plagas</span>
                  </li>
                  <li className="flex items-center">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 shrink-0" />
                    <span>Reducción de agroquímicos</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/sostenibilidad-compostaje.jpg"
                alt="Sistema de compostaje de Telnar"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <h3 className="text-2xl font-bold mb-4">Economía Circular</h3>
              <p className="text-gray-700 mb-6">
                Hemos implementado un modelo de economía circular que nos permite aprovechar al máximo todos los
                recursos y minimizar los desperdicios. Nuestro sistema de compostaje convierte los residuos orgánicos en
                abono de alta calidad que utilizamos en nuestros cultivos, cerrando el ciclo de producción de manera
                sostenible.
              </p>
              <div className="bg-gray-50 p-6 rounded-lg border border-gray-100">
                <h4 className="font-semibold mb-2 flex items-center">
                  <Recycle className="w-5 h-5 text-telnar-orange mr-2" />
                  Impacto Ambiental
                </h4>
                <ul className="space-y-2">
                  <li className="flex items-start">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                    <span>Reducción del 95% en residuos enviados a vertederos</span>
                  </li>
                  <li className="flex items-start">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                    <span>Disminución del 40% en el uso de fertilizantes químicos</span>
                  </li>
                  <li className="flex items-start">
                    <CheckCircle className="h-5 w-5 text-telnar-orange mr-2 mt-0.5 shrink-0" />
                    <span>Producción de 20 toneladas anuales de compost orgánico</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Certificaciones */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Certificaciones</h2>
            <p className="text-lg text-gray-700">
              Nuestro compromiso con la sostenibilidad está respaldado por certificaciones reconocidas que garantizan el
              cumplimiento de los más altos estándares ambientales y sociales.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center">
              <Award className="w-16 h-16 mx-auto text-telnar-orange mb-4" />
              <h3 className="text-xl font-semibold mb-2">Buenas Prácticas Agrícolas (BPA)</h3>
              <p className="text-gray-700">
                Certificación que garantiza la implementación de prácticas agrícolas sostenibles que respetan el medio
                ambiente y promueven la seguridad alimentaria.
              </p>
            </div>

<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center">
              <Award className="w-16 h-16 mx-auto text-telnar-orange mb-4" />
              <h3 className="text-xl font-semibold mb-2">ISO 14001</h3>
              <p className="text-gray-700">
                Estándar internacional que certifica nuestro sistema de gestión ambiental y nuestro compromiso con la
                mejora continua en este ámbito.
              </p>
            </div>

<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 text-center">
              <Award className="w-16 h-16 mx-auto text-telnar-orange mb-4" />
              <h3 className="text-xl font-semibold mb-2">Rainforest Alliance</h3>
              <p className="text-gray-700">
                Certificación que reconoce nuestro compromiso con la conservación de la biodiversidad y los medios de
                vida sostenibles de las comunidades rurales.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* Impacto Social */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Impacto Social</h2>
            <p className="text-lg text-gray-700">
              Nuestro compromiso con la sostenibilidad va más allá del medio ambiente. Trabajamos activamente para
              generar un impacto positivo en las comunidades donde operamos.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h3 className="text-2xl font-bold mb-4">Alianzas con Agricultores Locales</h3>
              <p className="text-gray-700 mb-6">
                Trabajamos en estrecha colaboración con más de 50 familias agricultoras en diferentes regiones de
                Colombia, estableciendo relaciones a largo plazo basadas en la confianza y el beneficio mutuo.
              </p>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Precios Justos</h4>
                    <p className="text-gray-700">
                      Pagamos precios justos que reconocen la calidad y el esfuerzo de nuestros productores aliados,
                      contribuyendo a mejorar su calidad de vida.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Contratos a Largo Plazo</h4>
                    <p className="text-gray-700">
                      Ofrecemos estabilidad a través de contratos a largo plazo que permiten a los agricultores
                      planificar e invertir en sus fincas con confianza.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Transferencia de Conocimiento</h4>
                    <p className="text-gray-700">
                      Compartimos técnicas y conocimientos para mejorar la productividad y sostenibilidad de sus
                      cultivos.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/impacto-agricultores.jpg"
                alt="Alianzas con agricultores locales"
                fill
                className="object-cover"
              />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center md:flex-row-reverse">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg md:order-2">
              <Image
                src="/images/impacto-capacitacion.jpg"
                alt="Programas de capacitación"
                fill
                className="object-cover"
              />
            </div>
            <div className="md:order-1">
              <h3 className="text-2xl font-bold mb-4">Programas de Capacitación</h3>
              <p className="text-gray-700 mb-6">
                Desarrollamos programas de capacitación para las comunidades rurales donde operamos, enfocados en
                técnicas agrícolas sostenibles, gestión empresarial y desarrollo personal, contribuyendo al
                fortalecimiento del tejido social y económico local.
              </p>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Escuela de Campo</h4>
                    <p className="text-gray-700">
                      Talleres prácticos sobre técnicas de cultivo sostenible, manejo de plagas y conservación de
                      suelos.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Formación Empresarial</h4>
                    <p className="text-gray-700">
                      Capacitación en gestión financiera, comercialización y desarrollo de negocios agrícolas.
                    </p>
                  </div>
                </li>
                <li className="flex items-start">
                  <Users className="h-6 w-6 text-telnar-orange mr-3 mt-0.5 shrink-0" />
                  <div>
                    <h4 className="font-semibold">Programa de Becas</h4>
                    <p className="text-gray-700">
                      Apoyo educativo para los hijos de nuestros colaboradores y agricultores aliados.
                    </p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

{/* Cadena de Valor Sostenible */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Cadena de Valor Sostenible</h2>
            <p className="text-lg text-gray-700">
              Nuestra cadena de valor está diseñada para maximizar la eficiencia y minimizar el impacto ambiental en
              cada etapa del proceso.
            </p>
          </div>

<div className="relative">
            <div className="hidden md:block absolute top-1/2 left-0 right-0 h-1 bg-telnar-green/20 -translate-y-1/2 z-0"></div>
            <div className="grid grid-cols-1 md:grid-cols-5 gap-8 relative z-10">
              <div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  1
                </div>
                <h3 className="text-xl font-semibold mb-2">Cultivo Sostenible</h3>
                <p className="text-gray-700">
                  Prácticas agrícolas que respetan el medio ambiente y conservan los recursos naturales.
                </p>
                <div className="mt-4">
                  <Leaf className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  2
                </div>
                <h3 className="text-xl font-semibold mb-2">Cosecha Responsable</h3>
                <p className="text-gray-700">
                  Técnicas de recolección que garantizan la calidad y minimizan el desperdicio.
                </p>
                <div className="mt-4">
                  <Leaf className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  3
                </div>
                <h3 className="text-xl font-semibold mb-2">Procesamiento Eficiente</h3>
                <p className="text-gray-700">
                  Tecnología que optimiza el uso de recursos y reduce el consumo energético.
                </p>
                <div className="mt-4">
                  <Recycle className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  4
                </div>
                <h3 className="text-xl font-semibold mb-2">Empaque Ecoamigable</h3>
                <p className="text-gray-700">Materiales biodegradables y diseños que minimizan el impacto ambiental.</p>
                <div className="mt-4">
                  <Recycle className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>

<div className="flex flex-col items-center text-center">
                <div className="w-16 h-16 rounded-full bg-telnar-orange text-white flex items-center justify-center text-xl font-bold mb-4">
                  5
                </div>
                <h3 className="text-xl font-semibold mb-2">Distribución Optimizada</h3>
                <p className="text-gray-700">
                  Rutas eficientes y vehículos de bajo impacto para reducir la huella de carbono.
                </p>
                <div className="mt-4">
                  <Droplet className="w-8 h-8 text-telnar-orange mx-auto" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-16 bg-telnar-dark text-telnar-cream">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Únase a nuestro compromiso con la sostenibilidad</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Al elegir los productos de Agrícolas Telnar S.A.S., está contribuyendo a un futuro más sostenible para
            todos. Descubra cómo podemos trabajar juntos para hacer la diferencia.
          </p>
          <Button asChild size="lg" className="bg-telnar-orange text-white hover:bg-telnar-orange/90">
            <Link href="/contacto" className="flex items-center">
              <ArrowRight className="mr-2 h-5 w-5" />
              Contáctenos Hoy
            </Link>
          </Button>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/blog/page.tsx"
import Image from "next/image"
import Link from "next/link"
import { Calendar, Clock, Tag, ArrowRight, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"

export default function BlogPage() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[300px] md:h-[400px] overflow-hidden">
        <div className="absolute inset-0 bg-black/40 z-10" />
        <Image src="/images/blog-hero.jpg" alt="Blog de Telnar" fill className="object-cover" />
        <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center items-start">
          <h1 className="text-3xl md:text-5xl font-bold text-white mb-4">Blog</h1>
          <p className="text-lg md:text-xl text-white max-w-2xl">
            Descubra las últimas tendencias, consejos y noticias sobre el mundo agrícola y la sostenibilidad.
          </p>
        </div>
      </section>

{/* Search and Categories */}
      <section className="py-8 bg-gray-50 border-b border-gray-200">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row gap-4 justify-between items-center">
            <div className="relative w-full md:w-96">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
              <Input type="text" placeholder="Buscar artículos..." className="pl-10 w-full" />
            </div>
            <div className="flex flex-wrap gap-2">
              <Link
                href="/blog?categoria=sostenibilidad"
                className="px-4 py-2 bg-white rounded-full text-sm font-medium text-telnar-dark hover:bg-telnar-orange/10 border border-gray-200"
              >
                Sostenibilidad
              </Link>
              <Link
                href="/blog?categoria=innovacion"
                className="px-4 py-2 bg-white rounded-full text-sm font-medium text-telnar-dark hover:bg-telnar-orange/10 border border-gray-200"
              >
                Innovación
              </Link>
              <Link
                href="/blog?categoria=agricultura"
                className="px-4 py-2 bg-white rounded-full text-sm font-medium text-telnar-dark hover:bg-telnar-orange/10 border border-gray-200"
              >
                Agricultura
              </Link>
              <Link
                href="/blog?categoria=nutricion"
                className="px-4 py-2 bg-white rounded-full text-sm font-medium text-telnar-dark hover:bg-telnar-orange/10 border border-gray-200"
              >
                Nutrición
              </Link>
            </div>
          </div>
        </div>
      </section>

{/* Featured Article */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
            <div className="relative h-[400px] rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/blog-featured.jpg"
                alt="¿Por qué consumir productos locales?"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <div className="flex items-center gap-4 mb-4">
                <span className="bg-telnar-orange/10 text-telnar-orange text-xs font-medium rounded-full px-3 py-1">
                  Destacado
                </span>
                <span className="text-sm text-gray-500 flex items-center">
                  <Calendar className="h-4 w-4 mr-1" />
                  15 de Junio, 2023
                </span>
                <span className="text-sm text-gray-500 flex items-center">
                  <Clock className="h-4 w-4 mr-1" />5 min de lectura
                </span>
              </div>
              <h2 className="text-3xl font-bold mb-4">
                ¿Por qué consumir productos locales? El impacto económico en Colombia
              </h2>
              <p className="text-gray-700 mb-6">
                Descubra cómo el consumo de productos agrícolas locales fortalece la economía colombiana, reduce la
                huella de carbono y garantiza mayor frescura y calidad en su mesa. Un análisis detallado del impacto
                positivo que genera esta práctica.
              </p>
              <div className="flex items-center gap-4 mb-6">
                <div className="flex items-center">
                  <div className="w-10 h-10 rounded-full overflow-hidden relative mr-2">
                    <Image src="/images/author-maria.jpg" alt="María Rodríguez" fill className="object-cover" />
                  </div>
                  <span className="text-sm font-medium">María Rodríguez</span>
                </div>
                <div className="flex items-center">
                  <Tag className="h-4 w-4 mr-1 text-gray-500" />
                  <span className="text-sm text-gray-500">Sostenibilidad, Economía</span>
                </div>
              </div>
              <Button asChild className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
                <Link href="/blog/por-que-consumir-productos-locales" className="flex items-center">
                  Leer Artículo Completo
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Recent Articles */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center mb-12">
            <h2 className="text-3xl font-bold">Artículos Recientes</h2>
            <Link
              href="/blog/archivo"
              className="text-telnar-orange hover:text-telnar-orange/80 font-medium flex items-center"
            >
              Ver todos
              <ArrowRight className="ml-1 h-4 w-4" />
            </Link>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="overflow-hidden">
              <div className="relative h-48">
                <Image
                  src="/images/blog-congelados.jpg"
                  alt="Tendencias en alimentos congelados"
                  fill
                  className="object-cover"
                />
              </div>
              <CardHeader>
                <div className="flex items-center gap-4 mb-2">
                  <span className="text-xs text-gray-500 flex items-center">
                    <Calendar className="h-3 w-3 mr-1" />
                    10 de Junio, 2023
                  </span>
                  <span className="text-xs text-gray-500 flex items-center">
                    <Clock className="h-3 w-3 mr-1" />4 min
                  </span>
                </div>
                <CardTitle className="text-xl">
                  Tendencias en alimentos congelados: practicidad sin perder nutrientes
                </CardTitle>
                <CardDescription>
                  Los avances en tecnología de congelación están revolucionando la industria alimentaria, permitiendo
                  conservar nutrientes y sabor.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2 mb-4">
                  <Tag className="h-4 w-4 text-gray-500" />
                  <span className="text-xs text-gray-500">Innovación, Nutrición</span>
                </div>
                <div className="flex items-center">
                  <div className="w-8 h-8 rounded-full overflow-hidden relative mr-2">
                    <Image src="/images/author-carlos.jpg" alt="Carlos Méndez" fill className="object-cover" />
                  </div>
                  <span className="text-sm">Carlos Méndez</span>
                </div>
              </CardContent>
              <CardFooter>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-telnar-orange/20 hover:bg-telnar-orange/10 hover:text-telnar-orange"
                >
                  <Link href="/blog/tendencias-alimentos-congelados">Leer más</Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="overflow-hidden">
              <div className="relative h-48">
                <Image
                  src="/images/blog-huella-hidrica.jpg"
                  alt="Cómo Telnar reduce su huella hídrica"
                  fill
                  className="object-cover"
                />
              </div>
              <CardHeader>
                <div className="flex items-center gap-4 mb-2">
                  <span className="text-xs text-gray-500 flex items-center">
                    <Calendar className="h-3 w-3 mr-1" />5 de Junio, 2023
                  </span>
                  <span className="text-xs text-gray-500 flex items-center">
                    <Clock className="h-3 w-3 mr-1" />6 min
                  </span>
                </div>
                <CardTitle className="text-xl">
                  Cómo Telnar reduce su huella hídrica: Tecnología y procesos verdes
                </CardTitle>
                <CardDescription>
                  Descubra las innovadoras tecnologías y procesos que implementamos para optimizar el uso del agua en
                  nuestra cadena de producción.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2 mb-4">
                  <Tag className="h-4 w-4 text-gray-500" />
                  <span className="text-xs text-gray-500">Sostenibilidad, Tecnología</span>
                </div>
                <div className="flex items-center">
                  <div className="w-8 h-8 rounded-full overflow-hidden relative mr-2">
                    <Image src="/images/author-ana.jpg" alt="Ana Gómez" fill className="object-cover" />
                  </div>
                  <span className="text-sm">Ana Gómez</span>
                </div>
              </CardContent>
              <CardFooter>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-telnar-orange/20 hover:bg-telnar-orange/10 hover:text-telnar-orange"
                >
                  <Link href="/blog/telnar-reduce-huella-hidrica">Leer más</Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="overflow-hidden">
              <div className="relative h-48">
                <Image
                  src="/images/blog-productores.jpg"
                  alt="Entrevista a productores aliados"
                  fill
                  className="object-cover"
                />
              </div>
              <CardHeader>
                <div className="flex items-center gap-4 mb-2">
                  <span className="text-xs text-gray-500 flex items-center">
                    <Calendar className="h-3 w-3 mr-1" />1 de Junio, 2023
                  </span>
                  <span className="text-xs text-gray-500 flex items-center">
                    <Clock className="h-3 w-3 mr-1" />8 min
                  </span>
                </div>
                <CardTitle className="text-xl">
                  Entrevista a productores aliados: Historias detrás de los vegetales
                </CardTitle>
                <CardDescription>
                  Conozca las inspiradoras historias de las familias agricultoras que trabajan con Telnar y su
                  compromiso con la calidad y la sostenibilidad.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-2 mb-4">
                  <Tag className="h-4 w-4 text-gray-500" />
                  <span className="text-xs text-gray-500">Comunidad, Agricultura</span>
                </div>
                <div className="flex items-center">
                  <div className="w-8 h-8 rounded-full overflow-hidden relative mr-2">
                    <Image src="/images/author-juan.jpg" alt="Juan Pérez" fill className="object-cover" />
                  </div>
                  <span className="text-sm">Juan Pérez</span>
                </div>
              </CardContent>
              <CardFooter>
                <Button
                  asChild
                  variant="outline"
                  className="w-full border-telnar-orange/20 hover:bg-telnar-orange/10 hover:text-telnar-orange"
                >
                  <Link href="/blog/entrevista-productores-aliados">Leer más</Link>
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

{/* Topics */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-12 text-center">Temas que te Pueden Interesar</h2>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Link href="/blog?categoria=sostenibilidad" className="group">
              <div className="relative h-64 rounded-lg overflow-hidden">
                <Image
                  src="/images/topic-sostenibilidad.jpg"
                  alt="Sostenibilidad"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-xl font-bold text-white mb-2">Sostenibilidad</h3>
                  <p className="text-white/80 text-sm">
                    Prácticas agrícolas sostenibles y su impacto en el medio ambiente.
                  </p>
                </div>
              </div>
            </Link>

<Link href="/blog?categoria=innovacion" className="group">
              <div className="relative h-64 rounded-lg overflow-hidden">
                <Image
                  src="/images/topic-innovacion.jpg"
                  alt="Innovación"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-xl font-bold text-white mb-2">Innovación</h3>
                  <p className="text-white/80 text-sm">
                    Nuevas tecnologías y procesos que están transformando la agricultura.
                  </p>
                </div>
              </div>
            </Link>

<Link href="/blog?categoria=nutricion" className="group">
              <div className="relative h-64 rounded-lg overflow-hidden">
                <Image
                  src="/images/topic-nutricion.jpg"
                  alt="Nutrición"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-xl font-bold text-white mb-2">Nutrición</h3>
                  <p className="text-white/80 text-sm">
                    Propiedades nutricionales de los alimentos y consejos para una alimentación saludable.
                  </p>
                </div>
              </div>
            </Link>

<Link href="/blog?categoria=recetas" className="group">
              <div className="relative h-64 rounded-lg overflow-hidden">
                <Image
                  src="/images/topic-recetas.jpg"
                  alt="Recetas"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="text-xl font-bold text-white mb-2">Recetas</h3>
                  <p className="text-white/80 text-sm">
                    Deliciosas recetas para aprovechar al máximo nuestros productos frescos y congelados.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>

{/* Newsletter */}
      <section className="py-16 bg-telnar-dark text-telnar-cream">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">Suscríbase a Nuestro Newsletter</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Reciba en su correo electrónico los últimos artículos, consejos y noticias sobre agricultura sostenible y
            alimentación saludable.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center max-w-md mx-auto">
            <Input
              type="email"
              placeholder="Su correo electrónico"
              className="bg-white/10 border-white/20 text-white placeholder:text-white/50"
            />
            <Button className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">Suscribirse</Button>
          </div>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/blog/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}

[V0_FILE]plaintext:file="public/images/clientes-hero.jpg"

[V0_FILE]plaintext:file="public/images/caso-buffalo.jpg"

[V0_FILE]plaintext:file="public/images/caso-qbano.jpg"

[V0_FILE]plaintext:file="public/images/caso-dosdelama.jpg"

[V0_FILE]plaintext:file="public/images/alianzas-productores.jpg"

[V0_FILE]plaintext:file="public/images/alianzas-tecnologia.jpg"

[V0_FILE]plaintext:file="public/images/innovacion-hero.jpg"

[V0_FILE]plaintext:file="public/images/tecnologia-gps.jpg"

[V0_FILE]plaintext:file="public/images/tecnologia-canastas.jpg"

[V0_FILE]plaintext:file="public/images/maquinaria-alemana.jpg"

[V0_FILE]plaintext:file="public/images/sostenibilidad-hero.jpg"

[V0_FILE]plaintext:file="public/images/sostenibilidad-compostaje.jpg"

[V0_FILE]plaintext:file="public/images/impacto-agricultores.jpg"

[V0_FILE]plaintext:file="public/images/impacto-capacitacion.jpg"

[V0_FILE]plaintext:file="public/images/blog-hero.jpg"

[V0_FILE]plaintext:file="public/images/blog-featured.jpg"

[V0_FILE]plaintext:file="public/images/blog-congelados.jpg"

[V0_FILE]plaintext:file="public/images/blog-huella-hidrica.jpg"

[V0_FILE]plaintext:file="public/images/blog-productores.jpg"

[V0_FILE]plaintext:file="public/images/author-maria.jpg"

[V0_FILE]plaintext:file="public/images/author-carlos.jpg"

[V0_FILE]plaintext:file="public/images/author-ana.jpg"

[V0_FILE]plaintext:file="public/images/author-juan.jpg"

[V0_FILE]plaintext:file="public/images/topic-sostenibilidad.jpg"

[V0_FILE]plaintext:file="public/images/topic-innovacion.jpg"

[V0_FILE]plaintext:file="public/images/topic-nutricion.jpg"

[V0_FILE]plaintext:file="public/images/topic-recetas.jpg"

[V0_FILE]typescriptreact:file="components/optimized-image.tsx"
"use client"

import Image from "next/image"
import { useState } from "react"

interface OptimizedImageProps {
  src: string
  alt: string
  width?: number
  height?: number
  fill?: boolean
  className?: string
  priority?: boolean
}

export default function OptimizedImage({
  src,
  alt,
  width,
  height,
  fill = false,
  className = "",
  priority = false,
}: OptimizedImageProps) {
  const [isError, setIsError] = useState(false)

// Si la imagen original falla, usamos un placeholder
  const handleError = () => {
    setIsError(true)
  }

// Determinar la fuente final de la imagen
  const finalSrc = isError
    ? `https://placehold.co/${width || 800}x${height || 600}/CCCCCC/999999?text=Imagen+no+disponible`
    : src.startsWith("/")
      ? src
      : `/${src}`

// Para imágenes que usan fill
  if (fill) {
    return (
      <div className={`relative ${className}`}>
        <Image
          src={finalSrc || "/placeholder.svg"}
          alt={alt}
          fill
          className={className}
          onError={handleError}
          priority={priority}
          unoptimized
        />
      </div>
    )
  }

// Para imágenes con dimensiones específicas
  return (
    <Image
      src={finalSrc || "/placeholder.svg"}
      alt={alt}
      width={width || 800}
      height={height || 600}
      className={className}
      onError={handleError}
      priority={priority}
      unoptimized
    />
  )
}

[V0_FILE]json:file="package.json"
{
  "name": "agricolas-telnar",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.363.0",
    "next": "14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20.11.30",
    "@types/react": "^18.2.67",
    "@types/react-dom": "^18.2.22",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-next": "14.1.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.4.5"
  }
}

[V0_FILE]plaintext:file=".env.local"
NEXT_PUBLIC_SITE_URL=https://agricolas-telnar.vercel.app

[V0_FILE]json:file="vercel.json"
{
  "framework": "nextjs",
  "buildCommand": "next build",
  "devCommand": "next dev",
  "installCommand": "npm install",
  "images": {
    "sizes": [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    "domains": ["v0.dev"],
    "remotePatterns": [
      {
        "protocol": "https",
        "hostname": "**"
      }
    ]
  }
}

[V0_FILE]json:file="tsconfig.json"
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[V0_FILE]javascript:file="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
  // Esto es crucial para el despliegue en Vercel
  output: "standalone",
}

module.exports = nextConfig

[V0_FILE]typescriptreact:file="components/fallback-image.tsx"
"use client"

import Image from "next/image"
import { useState } from "react"

export default function FallbackImage(props: any) {
  const [error, setError] = useState(false)

if (error) {
    return (
      <div
        className={`bg-gray-200 flex items-center justify-center ${props.className || ""}`}
        style={{ width: props.width || "100%", height: props.height || "300px" }}
      >
        <span className="text-gray-500">Imagen no disponible</span>
      </div>
    )
  }

// Para imágenes con fill
  if (props.fill) {
    return (
      <div className={`relative ${props.className || ""}`} style={{ width: "100%", height: "100%" }}>
        <Image
          {...props}
          src={props.src || "/placeholder.svg"}
          alt={props.alt || "Imagen"}
          onError={() => setError(true)}
          unoptimized
        />
      </div>
    )
  }

// Para imágenes normales
  return (
    <Image
      {...props}
      src={props.src || "/placeholder.svg"}
      alt={props.alt || "Imagen"}
      width={props.width || 800}
      height={props.height || 600}
      onError={() => setError(true)}
      unoptimized
    />
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx"
import Link from "next/link"
import { ArrowRight, Leaf, Star, Award, Phone } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import FallbackImage from "@/components/fallback-image"

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[500px] md:h-[600px] overflow-hidden">
        <div className="absolute inset-0 bg-black/40 z-10" />
        <div className="absolute inset-0 z-0">
          <FallbackImage
            src="/images/hero-banner.jpg"
            alt="Productos agrícolas frescos"
            fill
            className="object-cover"
            priority
          />
        </div>
        <div className="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center items-start">
          <h1 className="text-4xl md:text-6xl font-bold text-white mb-4">Agrícolas Telnar S.A.S.</h1>
          <p className="text-xl md:text-2xl text-white mb-8 max-w-2xl">
            Calidad, Inocuidad y Compromiso Ambiental desde 2009
          </p>
          <div className="flex flex-wrap gap-4">
            <Button asChild size="lg" className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
              <Link href="/productos">Ver Productos</Link>
            </Button>
            <Button
              asChild
              size="lg"
              className="bg-telnar-dark hover:bg-telnar-dark/90 text-white border-2 border-white"
            >
              <Link href="/contacto">Contactar</Link>
            </Button>
            <Button
              asChild
              size="lg"
              className="bg-telnar-dark hover:bg-telnar-dark/90 text-white border-2 border-white"
            >
              <Link href="/nosotros">Nuestra Misión</Link>
            </Button>
          </div>
        </div>
      </section>

{/* Company Summary */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">Más de 15 años de excelencia agrícola</h2>
            <p className="text-lg text-gray-700">
              Desde 2009, Agrícolas Telnar S.A.S. ha sido sinónimo de calidad y confianza en el mercado agrícola
              colombiano. Nuestros productos frescos y procesados abastecen a clientes destacados como Buffalo Wings y
              Sándwich Qbano, gracias a nuestra constante innovación y compromiso con la calidad.
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card>
              <CardHeader className="text-center">
                <Leaf className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Sostenibilidad</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center">
                  Comprometidos con el medio ambiente, aprovechamos el 100% de nuestros residuos orgánicos y contamos
                  con sistemas de recolección de agua.
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="text-center">
                <Star className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Calidad Premium</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center">
                  Utilizamos tecnología alemana de punta y rigurosos controles de calidad para garantizar productos
                  impecables en cada entrega.
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="text-center">
                <Award className="w-12 h-12 mx-auto text-telnar-orange mb-2" />
                <CardTitle>Innovación</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-center">
                  Pioneros en productos congelados de alta calidad, ofrecemos mango y mora disponibles durante todo el
                  año manteniendo su frescura original.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Featured Products */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Nuestros Productos Destacados</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <Card className="overflow-hidden">
              <div className="relative h-64">
                <FallbackImage src="/images/fresh-products.jpg" alt="Productos frescos" fill className="object-cover" />
              </div>
              <CardHeader>
                <CardTitle>Productos Frescos</CardTitle>
                <CardDescription>
                  Vegetales de la más alta calidad con control visual por canastas de colores
                </CardDescription>
              </CardHeader>
              <CardFooter>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/productos#frescos" className="flex items-center justify-center">
                    Ver Productos Frescos
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>

<Card className="overflow-hidden">
              <div className="relative h-64">
                <FallbackImage
                  src="/images/processed-products.jpg"
                  alt="Productos procesados"
                  fill
                  className="object-cover"
                />
              </div>
              <CardHeader>
                <CardTitle>Productos Procesados</CardTitle>
                <CardDescription>Mango y mora congelados disponibles todo el año con la misma calidad</CardDescription>
              </CardHeader>
              <CardFooter>
                <Button asChild variant="outline" className="w-full">
                  <Link href="/productos#procesados" className="flex items-center justify-center">
                    Ver Productos Procesados
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </section>

{/* Clients */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center mb-12">Clientes que Confían en Nosotros</h2>

<div className="max-w-2xl mx-auto bg-gray-50 p-6 rounded-lg">
            <blockquote className="text-lg italic text-gray-700 text-center">
              "Confiamos en Telnar por su calidad constante y su compromiso con la entrega puntual de productos frescos.
              Su innovación en productos congelados nos ha permitido mantener la calidad durante todo el año."
            </blockquote>
            <p className="text-right mt-4 font-semibold">— Cliente Destacado</p>
          </div>
        </div>
      </section>

{/* CTA */}
      <section className="py-16 bg-telnar-dark text-telnar-cream">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-6">¿Necesita productos agrícolas premium?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Descubra nuestra innovación en congelados: mango y mora disponibles todo el año con la misma calidad y
            frescura.
          </p>
          <Button asChild size="lg" className="bg-telnar-orange text-white hover:bg-telnar-orange/90">
            <Link href="/contacto" className="flex items-center">
              <Phone className="mr-2 h-5 w-5" />
              Contáctenos Hoy
            </Link>
          </Button>
        </div>
      </section>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Agrícolas Telnar S.A.S. - Productos Agrícolas de Alta Calidad",
  description:
    "Agrícolas Telnar S.A.S. – Proveedores líderes de vegetales frescos y procesados con tecnología de punta y compromiso ambiental. Calidad certificada desde 2009",
  keywords:
    "productos agrícolas calidad Colombia, proveedor vegetales frescos, mango congelado, trazabilidad alimentaria, empresa agrícola sostenible",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="es" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <div className="flex flex-col min-h-screen">
            <Header />
            <main className="flex-1">{children}</main>
            <Footer />
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/header.tsx"
"use client"

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

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

const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen)
  }

return (
    <header className="bg-white border-b border-telnar-green/20 sticky top-0 z-50">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          {/* Logo */}
          <Link href="/" className="flex items-center">
            <div className="relative w-12 h-12 md:w-16 md:h-16">
              <FallbackImage
                src="/images/telnar-logo.png"
                alt="Agrícolas Telnar S.A.S."
                fill
                className="object-contain"
              />
            </div>
            <span className="ml-3 text-telnar-dark font-semibold hidden md:inline-block">Agrícolas Telnar S.A.S.</span>
          </Link>

{/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <Link href="/" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Inicio
            </Link>
            <Link href="/nosotros" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Quiénes Somos
            </Link>
            <Link href="/productos" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Productos
            </Link>
            <Link href="/clientes" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Clientes
            </Link>
            <Link href="/innovacion" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Innovación
            </Link>
            <Link href="/sostenibilidad" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Sostenibilidad
            </Link>
            <Link href="/blog" className="text-telnar-dark hover:text-telnar-orange font-medium">
              Blog
            </Link>
            <Button asChild className="bg-telnar-orange hover:bg-telnar-orange/90 text-white">
              <Link href="/contacto">Contacto</Link>
            </Button>
          </nav>

{/* Mobile Menu Button */}
          <Button
            variant="ghost"
            size="icon"
            className="md:hidden"
            onClick={toggleMenu}
            aria-label={isMenuOpen ? "Cerrar menú" : "Abrir menú"}
          >
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </Button>
        </div>
      </div>

{/* Mobile Navigation */}
      {isMenuOpen && (
        <div className="md:hidden bg-white border-t border-telnar-green/20">
          <div className="container mx-auto px-4 py-4">
            <nav className="flex flex-col space-y-4">
              <Link
                href="/"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Inicio
              </Link>
              <Link
                href="/nosotros"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Quiénes Somos
              </Link>
              <Link
                href="/productos"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Productos
              </Link>
              <Link
                href="/clientes"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Clientes
              </Link>
              <Link
                href="/innovacion"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Innovación
              </Link>
              <Link
                href="/sostenibilidad"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Sostenibilidad
              </Link>
              <Link
                href="/blog"
                className="text-telnar-dark hover:text-telnar-orange font-medium py-2"
                onClick={() => setIsMenuOpen(false)}
              >
                Blog
              </Link>
              <Button
                asChild
                className="bg-telnar-orange hover:bg-telnar-orange/90 text-white w-full"
                onClick={() => setIsMenuOpen(false)}
              >
                <Link href="/contacto">Contacto</Link>
              </Button>
            </nav>
          </div>
        </div>
      )}
    </header>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx"
import Link from "next/link"
import { Facebook, Instagram, Twitter, Linkedin, MapPin, Phone, Mail } from "lucide-react"
import FallbackImage from "@/components/fallback-image"

export default function Footer() {
  return (
    <footer className="bg-telnar-dark text-telnar-cream">
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Company Info */}
          <div>
            <div className="flex items-center mb-4">
              <div className="relative w-12 h-12">
                <FallbackImage
                  src="/images/telnar-logo.png"
                  alt="Agrícolas Telnar S.A.S."
                  fill
                  className="object-contain"
                />
              </div>
              <span className="ml-3 text-telnar-cream font-semibold">Agrícolas Telnar S.A.S.</span>
            </div>
            <p className="text-telnar-cream/70 mb-4">Calidad, Inocuidad y Compromiso Ambiental desde 2009</p>
            <div className="flex space-x-4">
              <Link href="#" className="text-telnar-cream/70 hover:text-telnar-orange">
                <Facebook className="h-5 w-5" />
                <span className="sr-only">Facebook</span>
              </Link>
              <Link href="#" className="text-telnar-cream/70 hover:text-telnar-orange">
                <Instagram className="h-5 w-5" />
                <span className="sr-only">Instagram</span>
              </Link>
              <Link href="#" className="text-telnar-cream/70 hover:text-telnar-orange">
                <Twitter className="h-5 w-5" />
                <span className="sr-only">Twitter</span>
              </Link>
              <Link href="#" className="text-telnar-cream/70 hover:text-telnar-orange">
                <Linkedin className="h-5 w-5" />
                <span className="sr-only">LinkedIn</span>
              </Link>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Enlaces Rápidos</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/nosotros" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Quiénes Somos
                </Link>
              </li>
              <li>
                <Link href="/productos" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Productos
                </Link>
              </li>
              <li>
                <Link href="/clientes" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Clientes
                </Link>
              </li>
              <li>
                <Link href="/innovacion" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Innovación
                </Link>
              </li>
              <li>
                <Link href="/sostenibilidad" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Sostenibilidad
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Blog
                </Link>
              </li>
              <li>
                <Link href="/contacto" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Contacto
                </Link>
              </li>
            </ul>
          </div>

{/* Products */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Nuestros Productos</h3>
            <ul className="space-y-2">
              <li>
                <Link href="/productos#frescos" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Vegetales Frescos
                </Link>
              </li>
              <li>
                <Link href="/productos#procesados" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Mango Congelado
                </Link>
              </li>
              <li>
                <Link href="/productos#procesados" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Mora Congelada
                </Link>
              </li>
              <li>
                <Link href="/productos#certificaciones" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Certificaciones
                </Link>
              </li>
              <li>
                <Link href="/productos#trazabilidad" className="text-telnar-cream/70 hover:text-telnar-orange">
                  Trazabilidad
                </Link>
              </li>
            </ul>
          </div>

{/* Contact */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Contacto</h3>
            <ul className="space-y-4">
              <li className="flex items-start">
                <MapPin className="h-5 w-5 text-telnar-orange mr-2 mt-0.5" />
                <span className="text-telnar-cream/70">Colombia</span>
              </li>
              <li className="flex items-center">
                <Phone className="h-5 w-5 text-telnar-orange mr-2" />
                <span className="text-telnar-cream/70">+57 (123) 456-7890</span>
              </li>
              <li className="flex items-center">
                <Mail className="h-5 w-5 text-telnar-orange mr-2" />
                <a href="mailto:info@telnar.com.co" className="text-telnar-cream/70 hover:text-telnar-orange">
                  info@telnar.com.co
                </a>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-telnar-green/20 mt-12 pt-8 text-center text-telnar-cream/70">
          <p>© {new Date().getFullYear()} Agrícolas Telnar S.A.S. Todos los derechos reservados.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]plaintext:file="public/placeholder.svg"
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="#f0f0f0"/>
  <text x="50%" y="50%" font-family="Arial" font-size="24" fill="#999" text-anchor="middle" dominant-baseline="middle">Imagen no disponible</text>
</svg>

[V0_FILE]plaintext:file=".gitignore"
# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
</article></body></html>

Quiénes Somos

Objetivos de Calidad

Inocuidad Alimentaria

Calidad Constante

Sostenibilidad

Bienestar Laboral

Puntualidad

Innovación

Nuestro Proceso de Producción

Selección

Clasificación

Procesamiento

Control de Calidad

Nuestros Productos

Certificaciones de Calidad

HACCP

ISO 22000

BPA

Trazabilidad Completa

Identificación de Lotes

Control de Procesos

Registros Detallados

Contáctenos

Envíenos un Mensaje

¡Mensaje Enviado!