[V0_FILE]typescriptreact:file="app/proyectos/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescript:file="lib/sanity.ts" import { createClient } from '@sanity/client'; export const sanity = createClient({ projectId: '0y4wyugw', // 👈 lo sacas de sanity.io/manage dataset: 'production', useCdn: true, apiVersion: '2023-01-01', }); [V0_FILE]png:file="public/niños-jugando-educativo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ni%C3%B1os-jugando-educativo-GNaEfim6FrVtwYdWKWR1hhISnihMSd.png" [V0_FILE]png:file="public/pre-academic-play.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pre-academic-play-zE8NKAGutoEF9QBHNp9STqWITxfAs3.png" [V0_FILE]png:file="public/niños-lectoescritura-matematicas.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ni%C3%B1os-lectoescritura-matematicas-jwpOw3tnuGuYJMOqZzw7czT4mqFOOO.png" [V0_FILE]png:file="public/placeholder-9fvyz.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" [V0_FILE]png:file="public/familias-educacion.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/familias-educacion-QWn6AubMmV1ztaYnwP5acvYa4Wubsa.png" [V0_FILE]png:file="public/diverse-schoolchildren.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-schoolchildren-HSHE1nS4h3quzBGitt3ggemxT7xPoN.png" [V0_FILE]png:file="public/diverse-children-learning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-children-learning-dyTfmUGq2PU16DYu3nDLBqvbP9xotX.png" [V0_FILE]typescriptreact:file="app/bolsa-de-trabajo/page.tsx" isFixed="true" isQuickEdit="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Heart, Users, GraduationCap, Star, Upload, Mail, Phone, MapPin, Clock, CheckCircle } from "lucide-react" import { useState } from "react" export default function BolsaDeTrabajoPage() { const [formData, setFormData] = useState({ nombre: "", email: "", telefono: "", posicion: "", experiencia: "", mensaje: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission console.log("Form submitted:", formData) } const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } return (

{/* Hero Section */}

Únete a nuestro equipo

Bolsa de Trabajo

¿Quieres formar parte de nuestro equipo? En Predelta buscamos profesionales apasionados por la educación infantil. Envía tu CV o postula a las oportunidades laborales.

{/* Por qué trabajar con nosotros */}

¿Por qué trabajar en Predelta?

Somos más que un preescolar, somos una familia comprometida con la excelencia educativa

Crecimiento Profesional

Oportunidades de capacitación continua y desarrollo profesional en metodologías educativas innovadoras.

Ambiente Familiar

Trabajamos en un ambiente cálido y colaborativo donde cada miembro del equipo es valorado y respetado.

Impacto Significativo

Contribuye al desarrollo integral de los niños en sus primeros años, creando bases sólidas para su futuro.

Metodología Innovadora

Trabaja con metodologías educativas de vanguardia como SEAM Learning y programas bilingües.

Estabilidad Laboral

Más de 30 años de trayectoria nos respaldan como una institución sólida y confiable.

Horarios Flexibles

Horarios que permiten el equilibrio entre la vida personal y profesional.

{/* Formulario de Postulación */}

Postúlate Ahora

Completa el formulario y adjunta tu CV para formar parte de nuestro equipo

Nombre Completo * handleInputChange("nombre", e.target.value)} className="bg-white/50 border-[#B3CFE8]/50 text-[#0067AC] font-nunito" placeholder="Tu nombre completo" required />

Correo Electrónico * handleInputChange("email", e.target.value)} className="bg-white/50 border-[#B3CFE8]/50 text-[#0067AC] font-nunito" placeholder="tu@email.com" required />

Teléfono * handleInputChange("telefono", e.target.value)} className="bg-white/50 border-[#B3CFE8]/50 text-[#0067AC] font-nunito" placeholder="(04) 123-4567" required />

Posición de Interés *

Años de Experiencia

Mensaje Adicional

handleInputChange("mensaje", e.target.value)}
                      className="bg-white/50 border-[#B3CFE8]/50 text-[#0067AC] font-nunito min-h-[120px]"
                      placeholder="Cuéntanos por qué te gustaría trabajar con nosotros..."
                    />
                  </div>

<div className="border-2 border-dashed border-[#B3CFE8]/50 rounded-lg p-8 text-center bg-[#B3CFE8]/10">
                    <Upload className="w-12 h-12 text-[#0067AC] mx-auto mb-4" />
                    <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Adjunta tu CV</h4>
                    <p className="text-sm text-gray-600 font-nunito mb-4">
                      Arrastra y suelta tu archivo aquí o haz clic para seleccionar
                    </p>
                    <Button
                      type="button"
                      variant="outline"
                      className="border-[#0067AC] text-[#0067AC] hover:bg-[#0067AC]/10 font-nunito font-semibold bg-transparent"
                    >
                      Seleccionar Archivo
                    </Button>
                    <p className="text-xs text-gray-500 font-nunito mt-2">
                      Formatos aceptados: PDF, DOC, DOCX (máx. 5MB)
                    </p>
                  </div>

<div className="flex flex-col sm:flex-row gap-4 justify-center pt-6">
                    <Button
                      type="submit"
                      size="lg"
                      className="bg-[#ED1C29] hover:bg-[#ED1C29]/90 text-white font-nunito font-bold text-lg px-10 py-4 rounded-full shadow-xl hover:shadow-2xl transition-all transform hover:scale-105"
                    >
                      <Heart className="mr-3 w-6 h-6" />
                      ENVIAR POSTULACIÓN
                    </Button>
                    <Button
                      type="button"
                      size="lg"
                      variant="outline"
                      className="border-2 border-[#0067AC] text-[#0067AC] hover:bg-[#0067AC]/10 rounded-full font-nunito font-semibold text-lg px-8 py-4 bg-transparent"
                    >
                      <Mail className="mr-3 w-6 h-6" />
                      Enviar por Email
                    </Button>
                  </div>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Información de Contacto */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-6">¿Tienes Preguntas?</h2>
            <p className="text-xl text-gray-600 mb-12 font-nunito">
              Contáctanos para resolver cualquier duda sobre las vacantes disponibles
            </p>

<div className="grid md:grid-cols-3 gap-8">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg text-center">
                <CardContent className="p-6">
                  <div className="w-16 h-16 bg-[#B3CFE8]/30 rounded-full flex items-center justify-center mx-auto mb-4">
                    <Phone className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Teléfono</h4>
                  <p className="text-gray-600 font-nunito">(04) 123-4567</p>
                  <p className="text-sm text-gray-500 font-nunito">Lun - Vie: 8:00 AM - 4:00 PM</p>
                </CardContent>
              </Card>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg text-center">
                <CardContent className="p-6">
                  <div className="w-16 h-16 bg-[#B3CFE8]/30 rounded-full flex items-center justify-center mx-auto mb-4">
                    <MapPin className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Ubicación</h4>
                  <p className="text-gray-600 font-nunito">Km 12.5 Vía Puntilla-Samborondón</p>
                  <p className="text-sm text-gray-500 font-nunito">Guayaquil, Ecuador</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]png:file="public/colorful-educational-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-educational-pattern-PLDHDVONwHkn24u1Sq3Aet7q1XdiAZ.png"
[V0_FILE]typescriptreact:file="app/contacto/page.tsx" isFixed="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Phone, Mail, MapPin, Clock, Facebook, Instagram, MessageSquare, Heart } from "lucide-react"

export default function ContactoPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20" style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}>
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-6 bg-white/20 text-white border-none font-nunito font-semibold">
              Estamos aquí para ti
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-white mb-6">Contáctanos</h1>
            <p className="text-xl text-white/90 leading-relaxed font-nunito">
              Estamos para ayudarte con cualquier consulta
            </p>
          </div>
        </div>
      </section>

{/* Información de Contacto */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-4">
              Información de Contacto
            </h2>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-[#B3CFE8]/30">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-[#B3CFE8]/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <MapPin className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Dirección</h3>
                <p className="text-gray-600 font-nunito leading-relaxed">
                  Kilómetro 12.5 Vía Puntilla-Samborondón
                  <br />
                  Guayaquil, Guayas
                  <br />
                  Ecuador
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-[#ED1C29]/10">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-[#ED1C29]/20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Phone className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Teléfono</h3>
                <p className="text-gray-600 font-nunito leading-relaxed">
                  (04) 123-4567
                  <br />
                  (04) 987-6543
                  <br />
                  WhatsApp: +593 99 123 4567
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-[#B3CFE8]/30">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-[#B3CFE8]/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Mail className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Email</h3>
                <p className="text-gray-600 font-nunito leading-relaxed">
                  info@predelta.edu.ec
                  <br />
                  admisiones@predelta.edu.ec
                  <br />
                  direccion@predelta.edu.ec
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-[#EAEAEA]/50">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-[#EAEAEA]/60 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Clock className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Horarios</h3>
                <p className="text-gray-600 font-nunito leading-relaxed">
                  Lunes a Viernes
                  <br />
                  7:00 AM - 4:00 PM
                  <br />
                  Sábados: 8:00 AM - 12:00 PM
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Mapa y Formulario */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Ubicación y Mapa */}
            <div>
              <h2 className="text-3xl font-quicksand font-bold text-[#0067AC] mb-6">Ubicación</h2>
              <p className="text-lg text-gray-700 mb-8 font-nunito leading-relaxed">
                Nos encontramos en una ubicación privilegiada en la vía Puntilla-Samborondón, fácilmente accesible desde
                Guayaquil y zonas aledañas.
              </p>

{/* Mapa Placeholder */}
              <div className="bg-[#EAEAEA]/50 rounded-2xl p-8 mb-8 text-center">
                <MapPin className="w-16 h-16 text-[#0067AC] mx-auto mb-4" />
                <h3 className="text-xl font-quicksand font-bold text-[#0067AC] mb-2">Mapa Interactivo</h3>
                <p className="text-gray-600 font-nunito mb-4">Aquí se integrará el mapa de Google Maps</p>
                <Button className="bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                  Ver en Google Maps
                </Button>
              </div>

{/* Cómo llegar */}
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                <CardHeader>
                  <CardTitle className="font-quicksand text-[#0067AC]">¿Cómo llegar?</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4 font-nunito text-gray-600">
                    <div>
                      <h4 className="font-semibold text-[#0067AC] mb-2">Desde Guayaquil Centro:</h4>
                      <p className="text-sm">Tomar la vía Puntilla-Samborondón, continuar hasta el kilómetro 12.5</p>
                    </div>
                    <div>
                      <h4 className="font-semibold text-[#0067AC] mb-2">Desde Samborondón:</h4>
                      <p className="text-sm">Dirigirse hacia Puntilla, el colegio se encuentra en el kilómetro 12.5</p>
                    </div>
                    <div>
                      <h4 className="font-semibold text-[#0067AC] mb-2">Transporte público:</h4>
                      <p className="text-sm">Líneas de buses que pasan por la vía Puntilla-Samborondón</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Formulario de Contacto */}
            <div>
              <h2 className="text-3xl font-quicksand font-bold text-[#0067AC] mb-6">Envíanos un mensaje</h2>
              <p className="text-lg text-gray-700 mb-8 font-nunito leading-relaxed">
                Completa el formulario y nos pondremos en contacto contigo lo antes posible.
              </p>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                <CardContent className="p-8">
                  <form className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Nombre completo *</label>
                        <Input
                          className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                          placeholder="Tu nombre completo"
                          required
                        />
                      </div>
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Teléfono *</label>
                        <Input
                          className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                          placeholder="Tu número de teléfono"
                          required
                        />
                      </div>
                    </div>

<div>
                      <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">
                        Correo electrónico *
                      </label>
                      <Input
                        type="email"
                        className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                        placeholder="tu@email.com"
                        required
                      />
                    </div>

<div>
                      <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Tipo de consulta</label>
                      <Select>
                        <SelectTrigger className="bg-white border-[#B3CFE8]/50 text-[#0067AC] font-nunito">
                          <SelectValue placeholder="Selecciona el tipo de consulta" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="admisiones">Admisiones</SelectItem>
                          <SelectItem value="informacion">Información general</SelectItem>
                          <SelectItem value="proyectos">Proyectos especiales</SelectItem>
                          <SelectItem value="visita">Agendar visita</SelectItem>
                          <SelectItem value="otros">Otros</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div>
                      <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Mensaje *</label>
                      <Textarea
                        className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                        placeholder="Cuéntanos cómo podemos ayudarte..."
                        rows={5}
                        required
                      />
                    </div>

<Button className="w-full bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                      <Heart className="w-4 h-4 mr-2" />
                      Enviar mensaje
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Admisiones y Redes Sociales */}
      <section className="py-20 bg-[#ED1C29]/5">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Admisiones */}
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="font-quicksand text-[#0067AC] text-2xl">Admisiones 2024</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed">
                  ¿Interesado en que tu hijo forme parte de nuestra familia educativa? Te acompañamos en todo el
                  proceso.
                </p>
                <div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-[#0067AC] rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">📋</span>
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">Proceso de admisiones</h4>
                      <p className="text-sm text-gray-600 font-nunito">Conoce los pasos y requisitos</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-[#0067AC] rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">📅</span>
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">Calendario de inscripciones</h4>
                      <p className="text-sm text-gray-600 font-nunito">Fechas importantes del proceso</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-[#0067AC] rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">📞</span>
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">Contacto especializado</h4>
                      <p className="text-sm text-gray-600 font-nunito">admisiones@predelta.edu.ec</p>
                    </div>
                  </div>
                </div>
                <Button className="w-full mt-6 bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                  Ver proceso de admisiones
                </Button>
              </CardContent>
            </Card>

{/* Redes Sociales */}
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="font-quicksand text-[#0067AC] text-2xl">Síguenos</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed">
                  Mantente conectado con nuestra comunidad educativa y no te pierdas ninguna novedad.
                </p>
                <div className="space-y-4">
                  <div className="flex items-center gap-4 p-4 bg-[#EAEAEA]/30 rounded-xl hover:bg-[#EAEAEA]/50 transition-colors cursor-pointer">
                    <div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
                      <Facebook className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">Facebook</h4>
                      <p className="text-sm text-gray-600 font-nunito">@predeltaecuador</p>
                    </div>
                  </div>

<div className="flex items-center gap-4 p-4 bg-[#EAEAEA]/30 rounded-xl hover:bg-[#EAEAEA]/50 transition-colors cursor-pointer">
                    <div className="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center">
                      <Instagram className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">Instagram</h4>
                      <p className="text-sm text-gray-600 font-nunito">@predelta_ecuador</p>
                    </div>
                  </div>

<div className="flex items-center gap-4 p-4 bg-[#EAEAEA]/30 rounded-xl hover:bg-[#EAEAEA]/50 transition-colors cursor-pointer">
                    <div className="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                      <MessageSquare className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <h4 className="font-nunito font-semibold text-[#0067AC]">WhatsApp</h4>
                      <p className="text-sm text-gray-600 font-nunito">+593 99 123 4567</p>
                    </div>
                  </div>
                </div>

<div className="mt-6 p-4 bg-[#B3CFE8]/30 rounded-xl">
                  <h5 className="font-nunito font-semibold text-[#0067AC] mb-2">¡Comparte nuestros momentos!</h5>
                  <p className="text-sm text-gray-600 font-nunito">
                    Etiquétanos en tus fotos y usa #PredeltaFamilia para aparecer en nuestras redes.
                  </p>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]png:file="public/families-educational-setting.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/families-educational-setting-OJRbpSCiOaRRgwOaGeSACNVICppxx0.png"
[V0_FILE]png:file="public/social-emotional-learning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social-emotional-learning-tphnHkN5qAoSE5GX1isCfJL74oNmmy.png"
[V0_FILE]png:file="public/children-environment-sustainability.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/children-environment-sustainability-orY5WbtY8hvdsfAZhnN4QASO9On40V.png"
[V0_FILE]png:file="public/school-family-activities.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/school-family-activities-8IPjefpTBf0EQ1SIvuKLs7yDlVq1CF.png"
[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Adding custom Steradian font faces */
@font-face {
  font-family: "Steradian";
  src: url("/fonts/SteradianTRIAL-Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Steradian";
  src: url("/fonts/SteradianTRIAL-Md.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Steradian";
  src: url("/fonts/SteradianTRIAL-Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    /* Usando solo Steradian como fuente principal */
    font-family: "Steradian", sans-serif;
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isFixed="true" isQuickEdit="true"
import type { Config } from "tailwindcss"

const config: 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: {
      fontFamily: {
        steradian: ["Steradian", "sans-serif"],
        quicksand: ["Quicksand", "sans-serif"],
        nunito: ["Nunito", "sans-serif"],
      },
      colors: {
        predelta: {
          "pastel-blue": "#B3CFE8", // Azul claro principal - dominant backgrounds
          "logo-blue": "#0067AC", // Azul oscuro - titles and buttons
          red: "#ED1C29", // Rojo - accent only
          "light-gray": "#eaeaea", // Gris claro - soft backgrounds
          "light-beige": "#FFF8EC", // Beige claro - neutral friendly background
          "warm-gray": "#F2F2F2", // Gris cálido claro - alternate backgrounds
          "light-sky": "#B3CFE8", // Same as pastel-blue for consistency
          "soft-pink": "#F8E8E8", // Soft pink for accents
        },
        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))",
        },
      },
      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" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        float: "float 3s ease-in-out infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]plaintext:file="public/fonts/SteradianTRIAL-Bd.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SteradianTRIAL-Bd-ud9u8fSTeDXf2QGMounvlFbaELhCq2.woff2"
[V0_FILE]plaintext:file="public/fonts/SteradianTRIAL-Rg.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SteradianTRIAL-Rg-NeC79ke8VprAI3zkQVl3sZMyI4LJzh.woff2"
[V0_FILE]plaintext:file="public/fonts/SteradianTRIAL-Md.woff2" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/SteradianTRIAL-Md-CY9UdCx3BbBi1O7GcrKvJvqhl65ydO.woff2"
[V0_FILE]png:file="public/school-gallery-activities.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/school-gallery-activities-sx2OpuBH51qweTCb1ouI6srwA7a6LO.png"
[V0_FILE]png:file="public/families-educational-activities.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/families-educational-activities-eOQ5Ee8GnljBqToCuIPnySa6UmIx8R.png"
[V0_FILE]png:file="public/developing-children-group-activities.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/developing-children-group-activities-ktNKHUmMsjY4mFc8nQNqh7JvBD0a3x.png"
[V0_FILE]png:file="public/socioemotional-learning-children.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/socioemotional-learning-children-MrQfDQK3kn3zfKCj0Y0xe4puno8HQF.png"
[V0_FILE]png:file="public/dece-team-with-children.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dece-team-with-children-ws4bbV0Mm2I7ekcbEZh8eMSWWBdUsn.png"
[V0_FILE]png:file="public/virtudes-ninos-cuentos.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/virtudes-ninos-cuentos-vmi5ykqYU2VSq01dhZGXWc70U7QE5v.png"
[V0_FILE]png:file="public/religion-class-oratory.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/religion-class-oratory-6HMfEhCpBXHEeG80gjyTvP8PtdsUAg.png"
[V0_FILE]png:file="public/school-garden-sustainability.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/school-garden-sustainability-JISkTFh0HvKtKxRqgdcZJe5IxGt6yO.png"
[V0_FILE]png:file="public/familias-actividades-colegio.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/familias-actividades-colegio-NN2fEKqcU6Gm5k9DWBnCThEQyY8bpt.png"
[V0_FILE]png:file="public/manifesto-padres-pdf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/manifesto-padres-pdf-1hVLOjPV9LSdJvbHTXWVE7oAT7nWkT.png"
[V0_FILE]png:file="public/children-learning.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/children-learning-d1tlLRPfTtLfymEU97NncGohMYBgXo.png"
[V0_FILE]png:file="public/preschool-classroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/preschool-classroom-j6lppDxojpobBLTyQxxgyHCdqyDdXT.png"
[V0_FILE]png:file="public/parents-manifesto-pdf.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/parents-manifesto-pdf-9q8HK2AgxIsETMlsUjorPIuXHrZ9f4.png"
[V0_FILE]png:file="public/mothers-megs-discussion.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mothers-megs-discussion-rrdWAYWke3ze9t5Xr9FtZpJVIpxKdi.png"
[V0_FILE]png:file="public/logo-predelta.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo-bwq3vh2SPhFAe5kwLr5RSvtOLaBD3n.png"
[V0_FILE]png:file="public/hero-children-playing.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Captura%20de%20pantalla%202025-08-18%20114036-kF76Pj3I09MiBLCBGWh94JHvQKc2EF.png"
[V0_FILE]png:file="public/child-drawing-blackboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled-1-03%20%281%29-U6aOJaLcqP9ZdSOn1HMnYzFGXcsdWc.png"
[V0_FILE]png:file="public/children-building-blocks.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Untitled-1-02-XB7zhCpoyOmhqEWrIB8J2NOHiTUmnk.png"
[V0_FILE]png:file="public/children-group-uniforms.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/inicial-II-3-ngiWiyzBG50DGEvGNh19czVkMEJV6p.png"
[V0_FILE]png:file="public/children-sensory-activity.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Captura%20de%20pantalla%202025-08-18%20114023-Hyn3jmwxSwxaEPJOr15aKzA93eMGAh.png"
[V0_FILE]typescriptreact:file="app/proyecto-educativo/page.tsx" isFixed="true" isQuickEdit="true"
import {
  Users,
  Lightbulb,
  Brain,
  Heart,
  Baby,
  GraduationCap,
  Star,
  Leaf,
  Clock,
  Award,
  Shield,
  TreePine,
  Recycle,
  UserCheck,
  MessageCircle,
  Church,
} from "lucide-react"
import Image from "next/image"

export default function ProyectoEducativoPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20" style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}>
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl lg:text-6xl font-bold text-white mb-6">Nuestro Proyecto</h1>
            <p className="text-xl text-white/90 leading-relaxed">
              El proyecto educativo de nuestro Presco atiende a dos aspectos fundamentales: las investigaciones
              científicas de eficacia comprobada y el reconocimiento del papel de los padres como primeros educadores de
              sus hijos.
            </p>
          </div>
        </div>
      </section>

<section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-predelta-logo-blue mb-6">Proyecto Educativo</h2>
              <p className="text-lg text-gray-700 leading-relaxed">
                Desde el punto de vista científico, los años de educación infantil coinciden con un acelerado desarrollo
                del cerebro, que establece conexiones crecientes a partir de bases biológicas y la interacción con un
                entorno seguro, estable y alentador.
              </p>
            </div>

<div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Brain className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Situaciones de Aprendizaje</h3>
                <p className="text-gray-600 leading-relaxed">
                  Reconoce y propicia las situaciones de aprendizaje correspondientes a la edad evolutiva.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Users className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Ambiente Estructurado</h3>
                <p className="text-gray-600 leading-relaxed">
                  Se desarrolla en un ambiente estructurado y flexible que favorece la cooperación por encima de la
                  competencia.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Lightbulb className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Guía Especializada</h3>
                <p className="text-gray-600 leading-relaxed">
                  Cuenta con la guía de maestras que alientan la autonomía, la exploración, la comunicación y la
                  creatividad.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-20 bg-predelta-light-beige/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-predelta-logo-blue mb-6">Crecer Como Persona</h2>
              <p className="text-lg text-gray-700 leading-relaxed">
                En el Presco, buscamos que los niños tengan la oportunidad de desarrollarse en todos sus aspectos
                personales, y consideramos especialmente valiosa la educación de la afectividad, las relaciones
                interpersonales y la comprensión de la trascendencia.
              </p>
            </div>

<div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Heart className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Currículo Socio emocional</h3>
                <p className="text-gray-600 leading-relaxed">
                  Basado en los principios de firmeza y amabilidad de la crianza respetuosa.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Shield className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">DECE</h3>
                <p className="text-gray-600 leading-relaxed">
                  Departamento de Consejería Estudiantil que brinda apoyo integral a todos los niños.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Star className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Programa de Virtudes</h3>
                <p className="text-gray-600 leading-relaxed">
                  Pedacito de Cielo propone el crecimiento en virtudes a través de cuentos.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Presco Sostenible */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-predelta-logo-blue mb-6">Presco Sostenible</h2>
              <p className="text-lg text-gray-700 leading-relaxed">
                En el Presco, incluimos el cuidado del medio ambiente como un eje transversal que ayuda a concientizar a
                los niños y sus familias sobre la importancia de preservar nuestro entorno.
              </p>
            </div>

<div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white rounded-2xl p-8 shadow-lg border border-green-100">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                  <TreePine className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Huerto Escolar</h3>
                <p className="text-gray-600 leading-relaxed">
                  Experiencia práctica del huerto escolar para conectar con la naturaleza
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg border border-green-100">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                  <Recycle className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Reciclaje</h3>
                <p className="text-gray-600 leading-relaxed">Reciclaje de elementos de la vida cotidiana</p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg border border-green-100">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                  <Leaf className="w-8 h-8 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Reducción de Contaminantes</h3>
                <p className="text-gray-600 leading-relaxed">Reducción de productos contaminantes en el día a día</p>
              </div>
            </div>
          </div>
        </div>
      </section>

<section className="py-20 bg-predelta-light-beige/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-predelta-logo-blue mb-6">Familias</h2>
              <p className="text-lg text-gray-700 leading-relaxed">
                En el Presco, creemos que los padres son los primeros y más eficaces educadores de sus hijos, guiándolos
                a convertirse en la mejor versión de sí mismos.
              </p>
            </div>

<div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <UserCheck className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Preceptorías</h3>
                <p className="text-gray-600 leading-relaxed">
                  Entrevistas individuales para analizar el desarrollo de cada hijo.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <MessageCircle className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Espacios de Crianza</h3>
                <p className="text-gray-600 leading-relaxed">
                  Reuniones con padres del salón para abordar temas grupales.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Award className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Talleres y Charlas</h3>
                <p className="text-gray-600 leading-relaxed">
                  Talleres con expertos sobre crianza y problemáticas familiares.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Church className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Formación Espiritual</h3>
                <p className="text-gray-600 leading-relaxed">
                  Charlas, retiros y atención sacerdotal para quienes lo deseen.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Heart className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Participación Diaria</h3>
                <p className="text-gray-600 leading-relaxed">
                  Oportunidad de visitar el Presco y acompañar a sus hijos.
                </p>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg">
                <div className="w-16 h-16 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mb-6">
                  <Users className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">MEGS</h3>
                <p className="text-gray-600 leading-relaxed">
                  Madres Encargadas de Grupo para facilitar la comunicación.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
              <div className="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div className="w-20 h-20 bg-predelta-light-beige/30 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Baby className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Inicial I</h3>
                <p className="text-gray-600 mb-4">(1 y 2 años)</p>
                <div className="flex items-center justify-center gap-2 text-predelta-logo-blue mb-6">
                  <Clock className="w-5 h-5" />
                  <span className="font-semibold">08h30 a 12h10</span>
                </div>
                <div className="relative">
                  <Image
                    src="/child-drawing-blackboard.png"
                    alt="Inicial I - Niños de 1 y 2 años"
                    width={300}
                    height={200}
                    className="rounded-xl shadow-md"
                  />
                </div>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div className="w-20 h-20 bg-predelta-soft-pink/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Star className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Inicial II</h3>
                <p className="text-gray-600 mb-4">(3 y 4 años)</p>
                <div className="flex items-center justify-center gap-2 text-predelta-logo-blue mb-6">
                  <Clock className="w-5 h-5" />
                  <span className="font-semibold">08h10 a 12h50</span>
                </div>
                <div className="relative">
                  <Image
                    src="/children-building-blocks.png"
                    alt="Inicial II - Niños de 3 y 4 años"
                    width={300}
                    height={200}
                    className="rounded-xl shadow-md"
                  />
                </div>
              </div>

<div className="bg-white rounded-2xl p-8 shadow-lg text-center">
                <div className="w-20 h-20 bg-predelta-logo-blue/20 rounded-full flex items-center justify-center mx-auto mb-6">
                  <GraduationCap className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-bold text-predelta-logo-blue mb-4">Primero de Básica</h3>
                <p className="text-gray-600 mb-4">(5 y 6 años)</p>
                <div className="flex items-center justify-center gap-2 text-predelta-logo-blue mb-6">
                  <Clock className="w-5 h-5" />
                  <span className="font-semibold">08h10 a 13h00</span>
                </div>
                <div className="relative">
                  <Image
                    src="/children-group-uniforms.png"
                    alt="Primero de Básica - Niños de 5 y 6 años"
                    width={300}
                    height={200}
                    className="rounded-xl shadow-md"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/quienes-somos/page.tsx" isFixed="true" isQuickEdit="true"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Award, Users, Heart, Globe, BookOpen, Target, Star, User } from "lucide-react"
import Image from "next/image"

export default function QuienesSomosPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20" style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}>
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-6 bg-white/20 text-white border-white/30 font-nunito font-semibold">
              SIEMPRE FAMILIA
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-white mb-6">¿Quiénes Somos?</h1>
            <p className="text-xl text-white/90 leading-relaxed font-nunito">
              Predelta, educación integral desde la primera infancia
            </p>
          </div>
        </div>
      </section>

{/* Propósito y Valores */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-6">Propósito y Valores</h2>
              <div className="space-y-6 text-gray-600 leading-relaxed">
                <p>
                  El Predelta es un centro de educación infantil que atiende a niños en edad preescolar en los niveles
                  de Inicial I (1 y 2 años), Inicial II (3 y 4 años) y Primero de Básica. Junto a los colegios Delta y
                  Torremar, integrados bajo el lema SIEMPRE FAMILIA, formamos parte de una fundación sin fines de lucro.
                </p>
                <p>
                  Desde su fundación, el Predelta se alinea con el ideal de educar en libertad dentro de una visión
                  cristiana, humanista e integradora, que reconoce a cada persona como única y capaz de ser un agente de
                  cambio positivo para el mundo.
                </p>
                <p>
                  Nuestro objetivo es ser un espacio que promueva{" "}
                  <strong className="text-[#0067AC]">APRENDIZAJES QUE HUMANICEN EL MUNDO</strong>, haciendo énfasis en
                  los valores de: Alegría, Solidaridad, Compromiso, Respeto y Valentía.
                </p>
                <p>
                  Estos valores fomentan una forma positiva de actuar en el mundo, incluyendo generosidad, amabilidad,
                  fortaleza y orden.
                </p>
              </div>
            </div>

<section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Historia</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Más de 30 años de compromiso con la educación integral
            </p>
          </div>

<div className="max-w-4xl mx-auto mb-12">
            <div className="space-y-6 text-gray-600 leading-relaxed text-center">
              <p>
                El Predelta DeltaTorremar surge como parte de una iniciativa de un grupo de padres que en 1991 decidió
                promover una institución educativa alineada con la educación en libertad, dentro de una visión
                cristiana, humanista e integradora.
              </p>
              <p>
                Este grupo se constituyó como Fundación sin fines de lucro y encomendó la formación espiritual a la
                Prelatura del Opus Dei.
              </p>
              <p>
                En 1995, el Preescolar abrió su sede para brindar educación desde Inicial I hasta Primero de Básica,
                para los alumnos de U.E.B. Delta y U.E.B. Torremar.
              </p>
            </div>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
            <Card className="group hover:shadow-xl transition-all duration-300 bg-white border-0 shadow-lg">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-[#0067AC] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Star className="w-8 h-8 text-white" />
                </div>
                <div className="text-2xl font-bold text-[#0067AC] mb-2">1991</div>
                <h3 className="font-semibold text-gray-900 mb-2">Fundación del Colegio Delta</h3>
                <p className="text-gray-600 text-sm">
                  Inauguración de preparatoria para niñas como inicio del proyecto educativo.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 bg-white border-0 shadow-lg">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-[#0067AC] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="w-8 h-8 text-white" />
                </div>
                <div className="text-2xl font-bold text-[#0067AC] mb-2">1993</div>
                <h3 className="font-semibold text-gray-900 mb-2">Educación Mixta</h3>
                <p className="text-gray-600 text-sm">
                  Admisión de varones en kinder y preparatoria, expandiendo la propuesta educativa.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 bg-white border-0 shadow-lg">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-[#0067AC] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Award className="w-8 h-8 text-white" />
                </div>
                <div className="text-2xl font-bold text-[#0067AC] mb-2">1994</div>
                <h3 className="font-semibold text-gray-900 mb-2">Fundación del Colegio Torremar</h3>
                <p className="text-gray-600 text-sm">
                  Expansión del proyecto educativo con la creación del segundo colegio.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 bg-white border-0 shadow-lg">
              <CardContent className="p-6 text-center">
                <div className="w-16 h-16 bg-[#0067AC] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="w-8 h-8 text-white" />
                </div>
                <div className="text-2xl font-bold text-[#0067AC] mb-2">1995</div>
                <h3 className="font-semibold text-gray-900 mb-2">Apertura del Preescolar</h3>
                <p className="text-gray-600 text-sm">
                  Inauguración del Preescolar Delta-Torremar en sede propia para educación inicial mixta.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Consejo de Dirección */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">Consejo de Dirección</h2>
              <p className="text-xl text-gray-600">
                La dirección del Predelta está a cargo de un Consejo de Dirección que trabaja coordinadamente con Delta
                y Torremar.
              </p>
            </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
              <Card className="group hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6 text-center">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                    <User className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-2">Maria Gabriella Ottati</h3>
                  <p className="text-[#0067AC] font-semibold">Directora</p>
                </CardContent>
              </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6 text-center">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                    <User className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-2">Lissete Faggioni</h3>
                  <p className="text-[#0067AC] font-semibold">Directora Financiera</p>
                </CardContent>
              </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6 text-center">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                    <User className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-2">Gisella Paulson</h3>
                  <p className="text-[#0067AC] font-semibold">Directora de Familia</p>
                </CardContent>
              </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6 text-center">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                    <User className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-2">Maria del Rocío Pino</h3>
                  <p className="text-[#0067AC] font-semibold">Directora de Formación</p>
                </CardContent>
              </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
                <CardContent className="p-6 text-center">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                    <User className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-2">Ivonne Vélez</h3>
                  <p className="text-[#0067AC] font-semibold">Directora Académica</p>
                </CardContent>
              </Card>

</div>

<div className="text-center">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">Nuestras Maestras</h3>
              <p className="text-gray-600 leading-relaxed max-w-3xl mx-auto">
                Las maestras de Predelta son facilitadoras de oportunidades para la adquisición de destrezas y
                habilidades para la vida, en un ambiente seguro y sereno. Poseen sólida formación pedagógica y
                capacitación constante a nivel profesional, humano y espiritual.
              </p>
            </div>
          </div>
        </div>
      </section>

{/* ¿Por qué elegirnos? */}
      <section className="py-20 bg-[#B3CFE8]">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-bold text-white mb-4">¿Por qué elegirnos?</h2>
            <p className="text-xl text-white/90 max-w-3xl mx-auto">
              7 razones que nos hacen únicos en la educación inicial
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            <Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">Valoramos a cada niño y su familia</h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#EAEAEA] rounded-full flex items-center justify-center mx-auto mb-4">
                  <BookOpen className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">Educamos con ciencia y experiencia</h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">
                  Estructura firme y amable para crecer con serenidad
                </h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#EAEAEA] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Star className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">
                  Amamos el arte: libros, música, plástica
                </h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Target className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">
                  Desarrollamos autonomía con herramientas prácticas
                </h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#EAEAEA] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Award className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">Nos capacitamos constantemente</h3>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 md:col-span-2 lg:col-span-3 max-w-md mx-auto">
              <CardContent className="p-6">
                <div className="w-16 h-16 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-4">
                  <Globe className="w-8 h-8 text-[#0067AC]" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-3 text-center">
                  Sembramos el amor a Dios y la Virgen desde pequeños
                </h3>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isFixed="true" isQuickEdit="true"
import { Instagram, Youtube, Phone, Mail, MapPin } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

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

return (
    <footer className="bg-predelta-soft-pink text-predelta-logo-blue">
      <div className="container mx-auto px-4 py-16">
        <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-12 max-w-7xl mx-auto">
          {/* Logo y Descripción */}
          <div className="lg:col-span-1 flex flex-col">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-12 h-12 flex items-center justify-center">
                <Image src="/logo-predelta.png" alt="Presco Logo" width={80} height={80} className="object-contain" />
              </div>
            </div>
            <p className="text-predelta-logo-blue/80 mb-6 leading-relaxed flex-grow">
              Un lugar donde crecer con amor y creatividad. Más de 30 años acompañando a las familias en la educación
              integral de sus hijos.
            </p>
            <div className="flex gap-4 mt-auto">
              <Link
                href="#"
                className="w-10 h-10 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center hover:bg-predelta-pastel-blue/30 transition-colors"
              >
                <Instagram className="w-5 h-5" />
              </Link>
              <Link
                href="#"
                className="w-10 h-10 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center hover:bg-predelta-pastel-blue/30 transition-colors"
              >
                <Youtube className="w-5 h-5" />
              </Link>
            </div>
          </div>

<div className="flex flex-col">
            <h4 className="text-lg font-bold mb-6">Navegación</h4>
            <ul className="space-y-4 flex-grow">
              <li>
                <Link href="/" className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors">
                  Inicio
                </Link>
              </li>
              <li>
                <Link
                  href="/quienes-somos"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Nosotros
                </Link>
              </li>
              <li>
                <Link
                  href="/proyectos"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Proyectos
                </Link>
              </li>
              <li>
                <Link
                  href="/rincon-familiar"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Rincón Familiar
                </Link>
              </li>
              <li>
                <Link
                  href="/bolsa-de-trabajo"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Bolsa de Trabajo
                </Link>
              </li>
              <li>
                <Link
                  href="/admisiones"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Admisiones
                </Link>
              </li>
              <li>
                <Link
                  href="/contacto"
                  className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
                >
                  Contacto
                </Link>
              </li>
            </ul>
          </div>

<div className="flex flex-col">
            <h4 className="text-lg font-bold mb-6">Contacto</h4>
            <div className="space-y-4 flex-grow">
              <div className="flex items-start gap-3">
                <MapPin className="w-5 h-5 mt-1 flex-shrink-0" />
                <div>
                  <p className="text-predelta-logo-blue/80">Km 12.5 Vía Puntilla-Samborondón</p>
                  <p className="text-predelta-logo-blue/80">Guayaquil, Ecuador</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Phone className="w-5 h-5" />
                <p className="text-predelta-logo-blue/80">(04) 123-4567</p>
              </div>
              <div className="flex items-center gap-3">
                <Mail className="w-5 h-5" />
                <p className="text-predelta-logo-blue/80">info@presco.edu.ec</p>
              </div>
            </div>
          </div>

<div className="flex flex-col">
            <h4 className="text-lg font-bold mb-6">Horarios</h4>
            <div className="text-predelta-logo-blue/80 space-y-2 flex-grow">
              <div>
                <p className="font-semibold">Lunes a Viernes</p>
                <p className="text-sm">7:00 AM - 4:00 PM</p>
              </div>
              <div>
                <p className="font-semibold">Sábados</p>
                <p className="text-sm">8:00 AM - 12:00 PM</p>
              </div>
            </div>
          </div>
        </div>

{/* Bottom Bar */}
        <div className="border-t border-predelta-pastel-blue/20 mt-12 pt-8 max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-predelta-logo-blue/80 text-sm">
              © {currentYear} Unidad Educativa Presco. Todos los derechos reservados.
            </p>
            <div className="flex gap-6 text-sm">
              <Link
                href="/privacidad"
                className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
              >
                Política de Privacidad
              </Link>
              <Link
                href="/terminos"
                className="text-predelta-logo-blue/80 hover:text-predelta-logo-blue transition-colors"
              >
                Términos de Uso
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"
import Header from "@/components/header"
import Footer from "@/components/footer"

export const metadata: Metadata = {
  title: "Unidad Educativa Presco - Un lugar donde crecer con amor y creatividad",
  description:
    "Educación inicial bilingüe en Guayaquil. Un espacio cálido y seguro donde los niños desarrollan su potencial a través del juego, la creatividad y el amor. Metodología SEAM Learning.",
  keywords: "educación inicial, preescolar Guayaquil, educación bilingüe, SEAM Learning, desarrollo infantil",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="es">
      <body className="font-steradian">
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/header.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Menu, Phone, Mail } from "lucide-react"
import Link from "next/link"
import Image from "next/image"

export default function Header() {
  const [isOpen, setIsOpen] = useState(false)

const navigation = [
    { name: "Inicio", href: "/" },
    { name: "Nosotros", href: "/quienes-somos" },
    { name: "Proyectos", href: "/proyectos" },
    { name: "Siempre Familia", href: "/siempre-familia" },
    { name: "Rincón Familiar", href: "/rincon-familiar" },
    { name: "Bolsa de Trabajo", href: "/bolsa-de-trabajo" },
    { name: "Admisiones", href: "/admisiones" },
    { name: "Contacto", href: "/contacto" },
  ]

useEffect(() => {
    const addPaddingToFirstContainer = () => {
      const header = document.querySelector('[data-header="main"]') as HTMLElement
      const topBar = document.querySelector('[data-header="topbar"]') as HTMLElement
      const firstContainer = document.querySelector("main > div > section:first-child") as HTMLElement

if (header && topBar && firstContainer) {
        const headerHeight = header.offsetHeight + topBar.offsetHeight
        firstContainer.style.paddingTop = `${headerHeight + 32}px`
      }
    }

addPaddingToFirstContainer()
    window.addEventListener("resize", addPaddingToFirstContainer)
    setTimeout(addPaddingToFirstContainer, 100)

return () => window.removeEventListener("resize", addPaddingToFirstContainer)
  }, [])

return (
    <>
      {/* Top Bar */}
      <div
        data-header="topbar"
        className="py-2 hidden md:block fixed top-0 left-0 right-0 z-50"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center text-sm font-nunito">
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2">
                <Phone className="w-4 h-4 text-white" />
                <span className="text-white">(04) 123-4567</span>
              </div>
              <div className="flex items-center gap-2">
                <Mail className="w-4 h-4 text-white" />
                <span className="text-white">info@presco.edu.ec</span>
              </div>
            </div>
            <div className="text-sm text-white">Guayaquil, Ecuador | Un lugar donde crecer con amor</div>
          </div>
        </div>
      </div>

{/* Main Header */}
      <header
        data-header="main"
        className="shadow-lg sticky top-12  md:top-8 z-40"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-28">
            {/* Logo */}
            <Link href="/" className="flex items-center gap-3">
              <div className="w-45 h-45 flex items-center justify-center">
                <Image 
                  src="/logo_blanco_presco.png" 
                  alt="Presco Logo" 
                  width={90}
                  height={90}
                  className="object-contain"
                />
              </div>
            </Link>

{/* Desktop Navigation */}
            <nav className="hidden lg:flex items-center space-x-1">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="px-4 py-2 !text-lg font-nunito font-semibold text-white hover:text-white/80 hover:bg-white/10 rounded-full transition-colors"
>
                  {item.name}
                </Link>
              ))}
            </nav>

{/* Mobile Menu Button */}
            <Sheet open={isOpen} onOpenChange={setIsOpen}>
              <SheetTrigger asChild className="lg:hidden">
                <Button variant="ghost" size="icon" className="text-white hover:bg-white/10">
                  <Menu className="h-6 w-6" />
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-80 bg-predelta-light-beige">
                <div className="flex items-center justify-between mb-8">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 flex items-center justify-center">
                      <Image
                        src="/logo_blanco_presco.png"
                        alt="Presco Logo"
                        width={60}
                        height={60}
                        className="object-contain"
                      />
                    </div>
                    <div>
                      <h2 className="font-quicksand font-bold text-predelta-logo-blue">U.E. Presco</h2>
                    </div>
                  </div>
                </div>

<nav className="space-y-2">
                  {navigation.map((item) => (
                    <Link
                      key={item.name}
                      href={item.href}
                      className="block px-4 py-3 text-predelta-logo-blue hover:bg-white/50 hover:text-predelta-pastel-blue rounded-full transition-colors font-nunito font-semibold"
                      onClick={() => setIsOpen(false)}
                    >
                      {item.name}
                    </Link>
                  ))}
                </nav>

<div className="mt-6 space-y-3 text-sm text-predelta-logo-blue font-nunito">
                  <div className="flex items-center gap-2">
                    <Phone className="w-4 h-4" />
                    <span>(04) 123-4567</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Mail className="w-4 h-4" />
                    <span>info@presco.edu.ec</span>
                  </div>
                </div>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </header>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/siempre-familia/page.tsx" isFixed="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Heart, Users, BookOpen, Quote, Phone, Mail, MapPin, Calendar } from "lucide-react"
import Image from "next/image"

export default function SiempreFamiliaPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section
        className="relative py-32 lg:py-40 overflow-hidden"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="absolute inset-0">
          {/* Decorative elements */}
          <div className="absolute top-10 left-10 w-16 h-16 bg-predelta-light-sky/30 rounded-full animate-float"></div>
          <div
            className="absolute top-32 right-20 w-12 h-12 bg-predelta-pastel-blue/40 rounded-full animate-float"
            style={{ animationDelay: "1s" }}
          ></div>
          <div
            className="absolute bottom-20 left-1/4 w-20 h-20 bg-predelta-light-beige/50 rounded-full animate-float"
            style={{ animationDelay: "2s" }}
          ></div>
        </div>

<div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="text-center lg:text-left">
              <Badge className="mb-6 bg-predelta-light-sky/80 text-predelta-logo-blue border-none font-nunito font-semibold">
                <Heart className="w-4 h-4 mr-2" />
                Siempre Familia
              </Badge>
              <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-predelta-logo-blue mb-4 leading-tight">
                Más que una escuela, somos familia
              </h1>
              <p className="text-xl text-gray-700 mb-8 max-w-2xl font-nunito leading-relaxed">
                En Presco, creemos que la educación es un trabajo conjunto entre la escuela y la familia. Juntos
                construimos un futuro brillante para nuestros niños, basado en valores, amor y compromiso mutuo.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <Button
                  size="lg"
                  className="bg-predelta-logo-blue hover:bg-predelta-logo-blue/90 text-white font-nunito font-semibold rounded-full shadow-lg hover:shadow-xl transition-all"
                >
                  Únete a nuestra familia
                  <Heart className="ml-2 w-5 h-5" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-predelta-logo-blue text-predelta-logo-blue hover:bg-predelta-light-sky/10 bg-transparent rounded-full font-nunito font-semibold shadow-md hover:shadow-lg transition-all"
                >
                  Conocer más
                </Button>
              </div>
            </div>
            <div className="relative">
              <div className="relative bg-white/50 rounded-3xl p-8 shadow-2xl backdrop-blur-sm">
                <Image
                  src="/familias-educacion.png"
                  alt="Familias participando en actividades educativas"
                  width={600}
                  height={500}
                  className="rounded-2xl shadow-lg"
                />
                <div className="absolute -bottom-4 -right-4 bg-predelta-light-sky p-4 rounded-2xl shadow-lg">
                  <div className="flex items-center gap-3">
                    <div className="w-12 h-12 bg-predelta-logo-blue rounded-full flex items-center justify-center">
                      <Users className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <p className="font-quicksand font-bold text-predelta-logo-blue">Juntos</p>
                      <p className="text-sm text-gray-600 font-nunito">Siempre</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Nuestra Filosofía Familiar */}
      <section className="py-32 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Nuestra Filosofía Familiar
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-nunito">
              Creemos en la importancia de la familia como pilar fundamental en la educación de nuestros niños
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-sky/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-light-sky/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Heart className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Amor Incondicional</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Cada niño es único y especial. Los amamos tal como son y los acompañamos en su crecimiento con
                  paciencia y dedicación.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-soft-pink/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Users className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Trabajo en Equipo</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Padres y maestros trabajamos juntos como un equipo unido, compartiendo la responsabilidad de educar y
                  formar a nuestros niños.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-pastel-blue/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-pastel-blue/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <BookOpen className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Valores Compartidos</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Transmitimos valores cristianos y humanos que fortalecen el carácter y la personalidad de cada
                  estudiante.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Testimonios de Familias */}
      <section className="py-32 bg-predelta-light-beige">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Voces de Nuestra Familia
            </h2>
            <p className="text-xl text-gray-700 max-w-3xl mx-auto font-nunito">
              Escucha lo que dicen las familias que forman parte de nuestra comunidad educativa
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "Presco no es solo la escuela de mi hija, es nuestra segunda familia. El amor y cuidado que recibe
                  cada día es incomparable."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">L</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">Lucía Martínez</p>
                    <p className="text-sm text-gray-600 font-nunito">Mamá de Valentina</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "La comunicación constante y el apoyo que recibimos como padres nos ha ayudado a crecer junto con
                  nuestro hijo."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-light-sky/30 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">R</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">Roberto Silva</p>
                    <p className="text-sm text-gray-600 font-nunito">Papá de Mateo</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 md:col-span-2 lg:col-span-1">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "Los valores que se viven en Presco se reflejan en casa. Nuestra hija ha crecido con principios
                  sólidos y mucho amor."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-pastel-blue/30 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">P</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">Patricia Vega</p>
                    <p className="text-sm text-gray-600 font-nunito">Mamá de Camila</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Actividades Familiares */}
      <section className="py-32 bg-predelta-light-sky">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Actividades que Nos Unen
            </h2>
            <p className="text-xl text-gray-700 max-w-3xl mx-auto font-nunito">
              Durante el año organizamos diversas actividades que fortalecen los lazos entre familias y la comunidad
              educativa
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Calendar className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Eventos Especiales</h3>
                </div>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Día de la Familia Presco</li>
                  <li>• Festival de Talentos Familiares</li>
                  <li>• Celebraciones Navideñas</li>
                  <li>• Graduaciones y Ceremonias</li>
                  <li>• Picnics y Actividades al Aire Libre</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-pastel-blue/30 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <BookOpen className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Talleres para Padres</h3>
                </div>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Escuela de Padres MEGs</li>
                  <li>• Talleres de Crianza Positiva</li>
                  <li>• Conferencias con Especialistas</li>
                  <li>• Grupos de Apoyo Familiar</li>
                  <li>• Actividades de Formación Espiritual</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-light-beige/50 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Users className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Participación Activa</h3>
                </div>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Comité de Padres de Familia</li>
                  <li>• Voluntariado en Actividades</li>
                  <li>• Apoyo en Proyectos Educativos</li>
                  <li>• Representación en Consejos</li>
                  <li>• Iniciativas de Mejora Continua</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-light-sky/40 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Heart className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Apoyo Mutuo</h3>
                </div>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Red de Apoyo entre Familias</li>
                  <li>• Intercambio de Experiencias</li>
                  <li>• Acompañamiento en Dificultades</li>
                  <li>• Celebración de Logros</li>
                  <li>• Construcción de Amistades Duraderas</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Información de Contacto */}
      <section className="py-32 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Mantente Conectado
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-nunito">
              Estamos aquí para apoyarte en cada paso del camino educativo de tu hijo
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-sky/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-light-sky/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Phone className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-predelta-logo-blue mb-4">Teléfono</h3>
                <p className="text-gray-600 font-nunito">(04) 123-4567</p>
                <p className="text-sm text-gray-500 font-nunito mt-2">Lunes a Viernes: 7:00 AM - 5:00 PM</p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-pastel-blue/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-pastel-blue/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <MapPin className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-xl font-quicksand font-bold text-predelta-logo-blue mb-4">Ubicación</h3>
                <p className="text-gray-600 font-nunito">Guayaquil, Ecuador</p>
                <p className="text-sm text-gray-500 font-nunito mt-2">Visitas con cita previa</p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* CTA Final */}
      <section className="py-32 bg-predelta-pastel-blue">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <div className="mb-8">
              <Heart className="w-16 h-16 text-white mx-auto mb-6 animate-float" />
            </div>
            <h2 className="text-3xl lg:text-5xl font-quicksand font-bold text-white mb-6">
              ¿Listo para ser parte de nuestra familia?
            </h2>
            <p className="text-xl text-white/90 mb-12 leading-relaxed font-nunito max-w-2xl mx-auto">
              En Presco, cada familia es especial y única. Te invitamos a conocer más sobre nuestra propuesta educativa
              y descubrir por qué somos la mejor opción para el crecimiento integral de tu hijo.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-white text-predelta-logo-blue hover:bg-white/90 font-nunito font-semibold rounded-full shadow-lg hover:shadow-xl transition-all"
              >
                Agendar una visita
                <Calendar className="ml-2 w-5 h-5" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white/10 bg-transparent rounded-full font-nunito font-semibold"
              >
                Más información
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Heart, Star, Users, Palette, TreePine, Smile, Quote, BookOpen } from "lucide-react"
import Image from "next/image"

export default function HomePage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section
        className="relative py-32 lg:py-40 overflow-hidden"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="absolute inset-0">
          {/* Decorative elements */}
          <div className="absolute top-10 left-10 w-16 h-16 bg-predelta-soft-pink/30 rounded-full animate-float"></div>
          <div
            className="absolute top-32 right-20 w-12 h-12 bg-predelta-pastel-blue/40 rounded-full animate-float"
            style={{ animationDelay: "1s" }}
          ></div>
          <div
            className="absolute bottom-20 left-1/4 w-20 h-20 bg-predelta-light-beige/50 rounded-full animate-float"
            style={{ animationDelay: "2s" }}
          ></div>
        </div>

<div className="container mx-auto px-4 relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="text-center lg:text-left">
              <Badge className="mb-6 bg-predelta-soft-pink/80 text-predelta-logo-blue border-none font-nunito font-semibold">
                <Star className="w-4 h-4 mr-2" />
                Más de 30 años cuidando sonrisas
              </Badge>
              <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-white mb-4 leading-tight">
                Un lugar donde crecer con amor
              </h1>
              <p className="text-xl text-white/90 mb-8 max-w-2xl font-nunito leading-relaxed">
                En Presco, cada día es una nueva aventura de aprendizaje. Acompañamos a tu hijo en sus primeros pasos
                hacia un futuro brillante, lleno de descubrimientos y alegría.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
                <Button
                  size="lg"
                  className="bg-predelta-logo-blue hover:bg-predelta-logo-blue/90 text-white font-nunito font-semibold rounded-full shadow-lg hover:shadow-xl transition-all"
                >
                  Agendar visita
                  <Heart className="ml-2 w-5 h-5" />
                </Button>
                <Button
                  size="lg"
                  variant="outline"
                  className="border-white text-white hover:bg-white/10 bg-transparent rounded-full font-nunito font-semibold shadow-md hover:shadow-lg transition-all"
                >
                  Conocer metodología
                </Button>
              </div>
            </div>
            <div className="relative">
              <div className="relative bg-white/50 rounded-3xl p-8 shadow-2xl backdrop-blur-sm w-full h-[500px]">
  <video
    className="rounded-2xl shadow-lg w-full h-full object-cover"
    autoPlay
    loop
    muted
    playsInline
  >
    <source src="/video-web-home.mp4" type="video/mp4" />
    <source src="/video-web-home.webm" type="video/webm" />
    <source src="/video-web-home.ogv" type="video/ogg" />
    Tu navegador no soporta el formato de video.
  </video>

<div className="absolute -bottom-4 -right-4 bg-predelta-soft-pink p-4 rounded-2xl shadow-lg">
    <div className="flex items-center gap-3">
      <div className="w-12 h-12 bg-predelta-logo-blue rounded-full flex items-center justify-center">
        <Smile className="w-6 h-6 text-white" />
      </div>
      <div>
        <p className="font-quicksand font-bold text-predelta-logo-blue">¡Felicidad!</p>
        <p className="text-sm text-gray-600 font-nunito">Cada día</p>
      </div>
    </div>
  </div>
</div>

</div>
          </div>
        </div>
      </section>

{/* Pilares de Nuestro Proyecto Educativo */}
      <section className="py-32 bg-predelta-light-sky">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Pilares de Nuestro Proyecto Educativo
            </h2>
            <p className="text-xl text-gray-700 max-w-3xl mx-auto font-nunito">
              Cuatro pilares fundamentales sostienen nuestra propuesta educativa integral
            </p>
          </div>

<div className="grid md:grid-cols-2 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Users className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Preceptoría</h3>
                </div>
                <p className="text-gray-700 mb-4 font-nunito font-semibold">
                  Acompañamiento personalizado para el desarrollo integral de cada estudiante
                </p>
                <ul className="space-y-2 text-gray-600 font-nunito text-sm">
                  <li>• Seguimiento académico individualizado</li>
                  <li>• Orientación en la toma de decisiones</li>
                  <li>• Desarrollo de virtudes y valores</li>
                  <li>• Comunicación constante con padres</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Heart className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Labor Social SYT</h3>
                </div>
                <p className="text-gray-700 mb-4 font-nunito font-semibold">
                  Formación en servicio y compromiso social transformador
                </p>
                <ul className="space-y-2 text-gray-600 font-nunito text-sm">
                  <li>• Proyectos comunitarios regulares</li>
                  <li>• Desarrollo de conciencia social</li>
                  <li>• Trabajo con poblaciones vulnerables</li>
                  <li>• Liderazgo en iniciativas solidarias</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-light-sky/40 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <BookOpen className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Formación de Padres</h3>
                </div>
                <p className="text-gray-700 mb-4 font-nunito font-semibold">
                  Programa MEGs para fortalecer la unidad familiar
                </p>
                <ul className="space-y-2 text-gray-600 font-nunito text-sm">
                  <li>• Talleres de educación familiar</li>
                  <li>• Conferencias con expertos</li>
                  <li>• Grupos de reflexión entre padres</li>
                  <li>• Recursos para la educación en casa</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-white/80 backdrop-blur-sm">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-predelta-light-beige/50 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <Star className="w-8 h-8 text-predelta-logo-blue" />
                  </div>
                  <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue">Capellanía</h3>
                </div>
                <p className="text-gray-700 mb-4 font-nunito font-semibold">
                  Formación espiritual y en valores católicos
                </p>
                <ul className="space-y-2 text-gray-600 font-nunito text-sm">
                  <li>• Dirección espiritual personalizada</li>
                  <li>• Celebraciones litúrgicas</li>
                  <li>• Retiros y jornadas de reflexión</li>
                  <li>• Formación en doctrina católica</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Nosotros Section */}
      <section className="py-32 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              ¿Por qué elegir Presco?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-nunito">
              Somos más que una escuela, somos una familia que acompaña el crecimiento de tu hijo con amor y dedicación
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-beige/30">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Heart className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Ambiente Cálido</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Un espacio seguro y acogedor donde cada niño se siente amado, valorado y motivado a explorar el mundo
                  que lo rodea.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-soft-pink/20">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Palette className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Creatividad</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Desarrollamos la imaginación y creatividad a través del arte, la música y actividades que despiertan
                  la curiosidad natural.
                </p>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-sky/30">
              <CardContent className="p-8 text-center">
                <div className="w-20 h-20 bg-predelta-light-sky/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Users className="w-10 h-10 text-predelta-logo-blue" />
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4">Educación Bilingüe</h3>
                <p className="text-gray-600 leading-relaxed font-nunito">
                  Inmersión natural en inglés desde los primeros años, preparando ciudadanos globales con ventajas para
                  el futuro.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Testimonios de Padres */}
      <section className="py-32 bg-predelta-soft-pink">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Lo que dicen las familias
            </h2>
            <p className="text-xl text-gray-700 max-w-3xl mx-auto font-nunito">
              Testimonios reales de padres que han confiado en nosotros
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 relative">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "Mi hija llegaba cada día emocionada contándome todo lo que había aprendido. El ambiente es
                  increíblemente cálido y las maestras son excepcionales."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">M</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">María González</p>
                    <p className="text-sm text-gray-600 font-nunito">Mamá de Sofía</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 relative">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "La metodología SEAM Learning ha sido perfecta para nuestro hijo. Ha desarrollado confianza,
                  creatividad y amor por aprender."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-light-sky/30 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">C</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">Carlos Mendoza</p>
                    <p className="text-sm text-gray-600 font-nunito">Papá de Diego</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 relative md:col-span-2 lg:col-span-1">
              <CardContent className="p-8">
                <Quote className="w-8 h-8 text-predelta-pastel-blue mb-4" />
                <p className="text-gray-700 mb-6 font-nunito leading-relaxed italic">
                  "Presco no solo educó a nuestra hija, la ayudó a crecer como persona. El enfoque bilingüe y los
                  valores que transmiten son excepcionales."
                </p>
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-predelta-light-beige/50 rounded-full flex items-center justify-center">
                    <span className="font-quicksand font-bold text-predelta-logo-blue">A</span>
                  </div>
                  <div>
                    <p className="font-nunito font-semibold text-predelta-logo-blue">Ana Rodríguez</p>
                    <p className="text-sm text-gray-600 font-nunito">Mamá de Isabella</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Niveles Educativos */}
      <section className="py-32 bg-predelta-warm-gray">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-predelta-logo-blue mb-4">
              Niveles Educativos
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto font-nunito">
              Presco atiende desde Inicial I (1 año) hasta Primero de Básica, dividido en los siguientes niveles
            </p>
          </div>

<div className="grid lg:grid-cols-3 gap-8 mb-12">
            <Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-beige/30">
              <CardContent className="p-8">
                <div className="w-20 h-20 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <span className="font-quicksand font-bold text-predelta-logo-blue text-2xl">1-2</span>
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4 text-center">
                  INICIAL I
                </h3>
                <p className="text-sm text-gray-500 text-center mb-4 font-nunito">(1-2 años)</p>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Enfoque en el desarrollo de habilidades básicas motoras y sociales</li>
                  <li>• Ambiente cálido y estimulante adaptado a sus necesidades</li>
                  <li>• Actividades lúdicas que favorecen el desarrollo integral</li>
                  <li>• Acompañamiento personalizado en un entorno seguro</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-soft-pink/20">
              <CardContent className="p-8">
                <div className="w-20 h-20 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <span className="font-quicksand font-bold text-predelta-logo-blue text-2xl">3-4</span>
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4 text-center">
                  INICIAL II
                </h3>
                <p className="text-sm text-gray-500 text-center mb-4 font-nunito">(3-4 años)</p>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Fortalecimiento de la autonomía personal y social</li>
                  <li>• Introducción a actividades pre-académicas a través del juego</li>
                  <li>• Desarrollo del lenguaje oral y expresión creativa</li>
                  <li>• Estimulación de la curiosidad natural del niño</li>
                </ul>
              </CardContent>
            </Card>

<Card className="group hover:shadow-xl transition-all duration-300 border-0 shadow-lg hover:-translate-y-2 bg-gradient-to-br from-white to-predelta-light-sky/30">
              <CardContent className="p-8">
                <div className="w-20 h-20 bg-predelta-light-sky/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <span className="font-quicksand font-bold text-predelta-logo-blue text-2xl">5-6</span>
                </div>
                <h3 className="text-2xl font-quicksand font-bold text-predelta-logo-blue mb-4 text-center">
                  PRIMERO DE BÁSICA
                </h3>
                <p className="text-sm text-gray-500 text-center mb-4 font-nunito">(5-6 años)</p>
                <ul className="space-y-3 text-gray-600 font-nunito">
                  <li>• Transición hacia el aprendizaje formal</li>
                  <li>• Introducción a la lectoescritura y conceptos matemáticos básicos</li>
                  <li>• Desarrollo de habilidades de pensamiento crítico</li>
                  <li>• Preparación para la educación primaria</li>
                </ul>
              </CardContent>
            </Card>
          </div>

{/* SEAM Learning */}
          <div className="bg-white/50 rounded-3xl p-8 shadow-lg backdrop-blur-sm">
            <div className="text-center mb-8">
              <h3 className="text-2xl lg:text-3xl font-quicksand font-bold text-predelta-logo-blue mb-4">
                SEAM LEARNING
              </h3>
              <p className="text-lg text-gray-600 font-nunito">(Sistema Educativo Integral)</p>
            </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="text-center">
                <div className="w-16 h-16 bg-predelta-pastel-blue/20 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Star className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h4 className="font-quicksand font-bold text-predelta-logo-blue mb-2">Metodología Integral</h4>
                <p className="text-sm text-gray-600 font-nunito">Integra el aprendizaje en todas las etapas</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-predelta-light-sky/30 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Users className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h4 className="font-quicksand font-bold text-predelta-logo-blue mb-2">Enfoque Bilingüe</h4>
                <p className="text-sm text-gray-600 font-nunito">Español-inglés desde temprana edad</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-predelta-soft-pink/30 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Palette className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h4 className="font-quicksand font-bold text-predelta-logo-blue mb-2">Competencias S.XXI</h4>
                <p className="text-sm text-gray-600 font-nunito">Desarrollo de habilidades del futuro</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-predelta-light-beige/50 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Heart className="w-8 h-8 text-predelta-logo-blue" />
                </div>
                <h4 className="font-quicksand font-bold text-predelta-logo-blue mb-2">Valores Cristianos</h4>
                <p className="text-sm text-gray-600 font-nunito">Formación integral con valores</p>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* CTA Final */}
      <section className="py-32 bg-predelta-pastel-blue">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <div className="mb-8">
              <TreePine className="w-16 h-16 text-white mx-auto mb-6 animate-float" />
            </div>
            <h2 className="text-3xl lg:text-5xl font-quicksand font-bold text-white mb-6">
              ¿Listo para comenzar esta aventura?
            </h2>
            <p className="text-xl text-white/90 mb-12 leading-relaxed font-nunito max-w-2xl mx-auto">
              Únete a nuestra familia educativa y dale a tu hijo la oportunidad de crecer en un ambiente lleno de amor,
              creatividad y aprendizaje significativo.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="bg-white text-predelta-logo-blue hover:bg-white/90 font-nunito font-semibold rounded-full shadow-lg hover:shadow-xl transition-all"
              >
                Solicitar información
                <Heart className="ml-2 w-5 h-5" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-white text-white hover:bg-white/10 bg-transparent rounded-full font-nunito font-semibold"
              >
                Agendar visita
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/proyectos/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Heart,
  Users,
  BookOpen,
  Globe,
  TreePine,
  Star,
  Target,
  Brain,
  Baby,
  Leaf,
  UserCheck,
  Headphones,
  PenTool,
  Shield,
  Church,
  Recycle,
} from "lucide-react"
import Image from "next/image"

export default function ProyectosPage() {
  return (
    <div className="min-h-screen font-sans">
      {/* Hero Section */}
      <section
        className="py-24 relative overflow-hidden"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="container mx-auto px-4 relative">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl lg:text-6xl font-bold text-white mb-8 leading-tight">Nuestros Proyectos</h1>
            <p className="text-xl lg:text-2xl text-white/90 leading-relaxed max-w-3xl mx-auto">
              Descubre cómo transformamos la educación a través de proyectos innovadores que forman ciudadanos íntegros
              del futuro
            </p>
          </div>
        </div>
      </section>

{/* Introducción */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Nuestro Enfoque Educativo</h2>
              <p className="text-lg text-gray-700 leading-relaxed mb-8">
                El proyecto educativo de nuestro Presco atiende a dos aspectos fundamentales: las investigaciones
                científicas de eficacia comprobada y el reconocimiento del papel de los padres como primeros educadores
                de sus hijos.
              </p>
            </div>

<div className="grid lg:grid-cols-2 gap-12 items-stretch mb-16">
              <div className="bg-gradient-to-r from-[#B3CFE8]/20 to-[#0067AC]/10 rounded-2xl p-8 min-h-full">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                    <Brain className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h3 className="text-2xl font-bold text-[#0067AC]">Desde el punto de vista científico</h3>
                </div>
                <p className="text-gray-700 leading-relaxed mb-6">
                  Los años de educación infantil coinciden con un acelerado desarrollo del cerebro, que establece
                  conexiones crecientes a partir de bases biológicas y la interacción con un entorno seguro, estable y
                  alentador.
                </p>
                <p className="text-gray-700 leading-relaxed mb-6">Por esto, nuestro modelo educativo:</p>
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <div className="w-2 h-2 bg-[#0067AC] rounded-full mt-2"></div>
                    <p className="text-gray-700">
                      Reconoce y propicia las situaciones de aprendizaje correspondientes a la edad evolutiva.
                    </p>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-2 h-2 bg-[#0067AC] rounded-full mt-2"></div>
                    <p className="text-gray-700">
                      Se desarrolla en un ambiente estructurado y flexible que favorece la cooperación por encima de la
                      competencia.
                    </p>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-2 h-2 bg-[#0067AC] rounded-full mt-2"></div>
                    <p className="text-gray-700">
                      Cuenta con la guía de maestras que alientan la autonomía, la exploración, la comunicación y la
                      creatividad, destrezas que posibilitan el futuro desarrollo del pensamiento crítico.
                    </p>
                  </div>
                </div>
              </div>
              <div className="bg-gradient-to-r from-[#ED1C29]/10 to-[#B3CFE8]/20 rounded-2xl p-8 min-h-full flex flex-col">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                    <Heart className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h3 className="text-2xl font-bold text-[#0067AC]">Desde el punto de vista familiar</h3>
                </div>
                <p className="text-gray-700 leading-relaxed mb-6 flex-grow">
                  Entendemos que el hogar es el espacio privilegiado para la estructuración de vínculos seguros que
                  favorecen el desarrollo armónico de cada persona. Por ello, nuestro compromiso con las familias es
                  acompañar, alentar y guiar a través de una atención continua que respete al niño, a su familia y al
                  entorno educativo.
                </p>
                <div className="mt-auto">
                  <Image
                    src="/familias-actividades-colegio.png"
                    alt="Familias participando en actividades del colegio"
                    width={500}
                    height={300}
                    className="rounded-xl shadow-md w-full h-48 object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Proyecto Educativo */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Proyecto Educativo</h2>
            </div>

<div className="grid lg:grid-cols-2 gap-8 mb-12">
              <Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <Target className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Aprendizaje Basado en Proyectos</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed flex-grow">
                    En Aprendizaje Basado en Proyectos, los niños son los principales protagonistas, los adultos somos
                    los facilitadores. Está centrado en sus intereses y estimula la curiosidad. Los niños aprenden
                    investigando, experimentando y buscando soluciones.
                  </p>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <BookOpen className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Animación a la lectura</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed flex-grow">
                    La Animación a la lectura fomenta en nuestros niños el gusto por la lectura y desarrolla la
                    imaginación y la creatividad. Potencia habilidades lingüísticas y el pensamiento crítico.
                  </p>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <Headphones className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Conciencia Fonológica</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed flex-grow">
                    La Conciencia Fonológica a través de actividades lúdicas estimula la habilidad de reconocer y
                    manipular los sonidos del habla, fundamental para la adquisición de la lectura y la escritura.
                  </p>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <PenTool className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Destrezas motoras y pre-escritura</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed flex-grow">
                    Nuestros niños desarrollan destrezas motoras finas y gráficas a través de múltiples actividades
                    sensoriales que involucran variedad de recursos y facilitan la adquisición de la habilidad
                    pre-escritora.
                  </p>
                </CardContent>
              </Card>
            </div>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white max-w-3xl mx-auto">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                    <Globe className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h3 className="text-xl font-bold text-[#0067AC]">Desarrollo del bilingüismo</h3>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  Desarrollo del bilingüismo: introducir inglés desde edades tempranas junto a la lengua materna,
                  fomentando memoria, concentración y pensamiento crítico. Los niños aprenden naturalmente a través de
                  experiencias diarias completamente en inglés.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Crecer Como Persona */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Crecer Como Persona</h2>
            </div>

<div className="grid lg:grid-cols-2 gap-8 mb-12">
              <Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <Heart className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Currículo Socioemocional</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed mb-6 flex-grow">
                    Currículo Socioemocional: explorar herramientas y estrategias con los niños para regular emociones
                    propias y de sus compañeros. Aprender a alentar, reconocer errores, resolver conflictos y trabajar
                    en equipo.
                  </p>
                  <div className="mt-auto">
                    <Image
                      src="/socioemotional-learning-children.png"
                      alt="Niños desarrollando habilidades socioemocionales"
                      width={400}
                      height={250}
                      className="rounded-xl shadow-md w-full h-48 object-cover"
                    />
                  </div>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <UserCheck className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">DECE</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed mb-6 flex-grow">
                    DECE: brindar apoyo integral en aspectos emocionales, psicológicos, sociales y de aprendizaje,
                    trabajando junto a maestras y padres.
                  </p>
                  <div className="mt-auto">
                    <Image
                      src="/dece-team-with-children.png"
                      alt="Equipo DECE trabajando con niños"
                      width={400}
                      height={250}
                      className="rounded-xl shadow-md w-full h-48 object-cover"
                    />
                  </div>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <Star className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Programa de Virtudes Pedacito de Cielo</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed mb-6 flex-grow">
                    Programa de Virtudes Pedacito de Cielo: crecimiento en virtudes mediante cuentos y obras
                    incidentales, en el Presco y en casa.
                  </p>
                  <div className="mt-auto">
                    <Image
                      src="/virtudes-ninos-cuentos.png"
                      alt="Niños aprendiendo virtudes a través de cuentos"
                      width={400}
                      height={250}
                      className="rounded-xl shadow-md w-full h-48 object-cover"
                    />
                  </div>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 flex flex-col h-full">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <Church className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Clases de Religión</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed mb-6 flex-grow">
                    Clases de Religión: semanales, con actividades lúdicas y presencia diaria de Jesús en el Oratorio.
                  </p>
                  <div className="mt-auto">
                    <Image
                      src="/religion-class-oratory.png"
                      alt="Clases de religión en el oratorio"
                      width={400}
                      height={250}
                      className="rounded-xl shadow-md w-full h-48 object-cover"
                    />
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* Presco Sostenible */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Presco Sostenible</h2>
            </div>

<div className="grid lg:grid-cols-2 gap-12 items-center">
              <Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white">
                <CardContent className="p-8">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                      <TreePine className="w-8 h-8 text-[#0067AC]" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0067AC]">Educación Ambiental</h3>
                  </div>
                  <p className="text-gray-700 leading-relaxed mb-6">
                    Incluir cuidado del medio ambiente como eje transversal: huerto escolar, reciclaje y reducción de
                    productos contaminantes.
                  </p>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <Leaf className="w-5 h-5 text-[#0067AC]" />
                      <span className="text-gray-700">Huerto escolar</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Recycle className="w-5 h-5 text-[#0067AC]" />
                      <span className="text-gray-700">Reciclaje</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Shield className="w-5 h-5 text-[#0067AC]" />
                      <span className="text-gray-700">Reducción de productos contaminantes</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
              <div className="relative">
                <Image
                  src="/school-garden-sustainability.png"
                  alt="Huerto escolar y sostenibilidad"
                  width={600}
                  height={400}
                  className="rounded-2xl shadow-lg w-full h-80 object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Familias */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Familias</h2>
              <p className="text-lg text-gray-700 leading-relaxed">Acompañamiento a padres como primeros educadores.</p>
            </div>

<div className="grid lg:grid-cols-2 gap-12 items-center mb-16">
              <div className="relative">
                <Image
                  src="/parents-manifesto-pdf.png"
                  alt="Manifiesto - Lo que el Presco necesita de los padres"
                  width={600}
                  height={750}
                  className="rounded-2xl shadow-lg w-full h-96 object-cover"
                />
              </div>
              <div className="space-y-6">
                <div className="grid md:grid-cols-2 gap-4">
                  <Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Preceptorías</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">Espacios de crianza, talleres y charlas.</p>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Espacios de Crianza</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">Talleres y charlas formativas.</p>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Talleres y Charlas</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">Formación espiritual.</p>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Formación Espiritual</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">Crecimiento espiritual familiar.</p>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Participación Diaria</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">
                        Visitas al Presco y participación en proyectos.
                      </p>
                    </CardContent>
                  </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-40">
                    <CardContent className="p-4 flex flex-col justify-center h-full">
                      <h4 className="font-bold text-[#0067AC] mb-2 text-base">Manifiesto</h4>
                      <p className="text-gray-600 text-sm leading-relaxed">Lo que el Presco necesita de los padres.</p>
                    </CardContent>
                  </Card>
                </div>
              </div>
            </div>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-[#B3CFE8]/10 max-w-3xl mx-auto">
              <CardContent className="p-8">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 bg-[#B3CFE8] rounded-2xl flex items-center justify-center">
                    <Users className="w-8 h-8 text-[#0067AC]" />
                  </div>
                  <h3 className="text-xl font-bold text-[#0067AC]">MEGS – Madres Encargadas de Grupo</h3>
                </div>
                <p className="text-gray-700 leading-relaxed mb-6">
                  MEGS: Madres Encargadas de Grupo, canal de comunicación y apoyo para padres.
                </p>
                <div className="mt-6">
                  <Image
                    src="/mothers-megs-discussion.png"
                    alt="Reuniones de MEGS y familias"
                    width={500}
                    height={300}
                    className="rounded-xl shadow-md w-full h-48 object-cover"
                  />
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Niveles Educativos */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">Niveles Educativos</h2>
            </div>

<div className="grid lg:grid-cols-3 gap-8">
              <Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 text-center flex flex-col h-full">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-6">
                    <Baby className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-2xl font-bold text-[#0067AC] mb-4">Inicial I</h3>
                  <p className="text-lg text-gray-600 mb-4">(1 y 2 años)</p>
                  <div className="bg-[#0067AC] text-white px-4 py-2 rounded-full font-semibold mb-6">08h30 a 12h10</div>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 text-center flex flex-col h-full">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-6">
                    <Users className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-2xl font-bold text-[#0067AC] mb-4">Inicial II</h3>
                  <p className="text-lg text-gray-600 mb-4">(3 y 4 años)</p>
                  <div className="bg-[#0067AC] text-white px-4 py-2 rounded-full font-semibold mb-6">08h10 a 12h50</div>
                </CardContent>
              </Card>

<Card className="hover:shadow-lg transition-shadow border-0 shadow-md bg-white h-full">
                <CardContent className="p-8 text-center flex flex-col h-full">
                  <div className="w-20 h-20 bg-[#B3CFE8] rounded-full flex items-center justify-center mx-auto mb-6">
                    <BookOpen className="w-10 h-10 text-[#0067AC]" />
                  </div>
                  <h3 className="text-2xl font-bold text-[#0067AC] mb-4">Primero de Básica</h3>
                  <p className="text-lg text-gray-600 mb-4">(5 y 6 años)</p>
                  <div className="bg-[#0067AC] text-white px-4 py-2 rounded-full font-semibold mb-6">08h10 a 13h00</div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 bg-[#B3CFE8]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-3xl lg:text-4xl font-bold text-[#0067AC] mb-6">
              ¿Listo para ser parte de nuestros proyectos?
            </h2>
            <p className="text-xl text-gray-700 leading-relaxed mb-8">
              Descubre cómo nuestros proyectos educativos pueden transformar el futuro de tu hijo
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button className="bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-semibold rounded-full px-8 py-3">
                <Heart className="w-5 h-5 mr-2" />
                Agendar Visita
              </Button>
              <Button
                variant="outline"
                className="border-[#0067AC] text-[#0067AC] hover:bg-[#0067AC]/10 bg-white rounded-full font-semibold px-8 py-3"
              >
                Solicitar Información
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admisiones/page.tsx" isFixed="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CheckCircle, Calendar, FileText, Users, MessageSquare, Download, Phone, Mail } from "lucide-react"

export default function AdmisionesPage() {
  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20" style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}>
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-6 bg-white/20 text-white border-none font-nunito font-semibold">
              Admisiones 2026 Abiertas
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-white mb-6">Admisiones</h1>
            <p className="text-xl text-white/90 leading-relaxed font-nunito">
              Te acompañamos en el proceso de admisión
            </p>
          </div>
        </div>
      </section>

{/* Proceso Paso a Paso */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-4">
              Proceso de Admisión Paso a Paso
            </h2>
          </div>

<div className="max-w-4xl mx-auto">
            <div className="space-y-8">
              {/* Paso 1 */}
              <div className="flex gap-6 items-start">
                <div className="w-12 h-12 bg-[#0067AC] rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white font-bold text-lg">1</span>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <MessageSquare className="w-6 h-6 text-[#0067AC]" />
                    <h3 className="text-2xl font-quicksand font-bold text-[#0067AC]">Información y Orientación</h3>
                  </div>
                  <p className="text-gray-600 mb-4 leading-relaxed font-nunito">
                    Primera consulta donde conocerás nuestra propuesta educativa, metodología SEAM Learning,
                    instalaciones y resolvemos todas tus dudas sobre nuestro proyecto institucional.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Visita guiada
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Presentación institucional
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Resolución de dudas
                    </Badge>
                  </div>
                </div>
              </div>

{/* Paso 2 */}
              <div className="flex gap-6 items-start">
                <div className="w-12 h-12 bg-[#0067AC] rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white font-bold text-lg">2</span>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <FileText className="w-6 h-6 text-[#0067AC]" />
                    <h3 className="text-2xl font-quicksand font-bold text-[#0067AC]">Solicitud de Admisión</h3>
                  </div>
                  <p className="text-gray-600 mb-4 leading-relaxed font-nunito">
                    Completar la documentación requerida y entregar los formularios de admisión junto con la
                    documentación académica y personal del estudiante.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Formulario de admisión
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Documentos académicos
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Certificados médicos
                    </Badge>
                  </div>
                </div>
              </div>

{/* Paso 3 */}
              <div className="flex gap-6 items-start">
                <div className="w-12 h-12 bg-[#0067AC] rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white font-bold text-lg">3</span>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <Users className="w-6 h-6 text-[#0067AC]" />
                    <h3 className="text-2xl font-quicksand font-bold text-[#0067AC]">Entrevista Familiar</h3>
                  </div>
                  <p className="text-gray-600 mb-4 leading-relaxed font-nunito">
                    Encuentro personalizado con la familia para conocer expectativas, valores y asegurar la alineación
                    con nuestra filosofía educativa.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Entrevista con padres
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Conocimiento mutuo
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Alineación de valores
                    </Badge>
                  </div>
                </div>
              </div>

{/* Paso 4 */}
              <div className="flex gap-6 items-start">
                <div className="w-12 h-12 bg-[#0067AC] rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white font-bold text-lg">4</span>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <CheckCircle className="w-6 h-6 text-[#0067AC]" />
                    <h3 className="text-2xl font-quicksand font-bold text-[#0067AC]">Evaluación del Estudiante</h3>
                  </div>
                  <p className="text-gray-600 mb-4 leading-relaxed font-nunito">
                    Actividades lúdicas y apropiadas para la edad que nos permiten conocer el nivel de desarrollo y las
                    necesidades específicas del estudiante.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Evaluación lúdica
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Apropiada para la edad
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Desarrollo integral
                    </Badge>
                  </div>
                </div>
              </div>

{/* Paso 5 */}
              <div className="flex gap-6 items-start">
                <div className="w-12 h-12 bg-[#0067AC] rounded-full flex items-center justify-center flex-shrink-0">
                  <span className="text-white font-bold text-lg">5</span>
                </div>
                <div className="flex-1">
                  <div className="flex items-center gap-3 mb-3">
                    <Calendar className="w-6 h-6 text-[#0067AC]" />
                    <h3 className="text-2xl font-quicksand font-bold text-[#0067AC]">Matrícula</h3>
                  </div>
                  <p className="text-gray-600 mb-4 leading-relaxed font-nunito">
                    Una vez aceptado el estudiante, procedemos con la formalización de la matrícula y la bienvenida
                    oficial a nuestra comunidad educativa Predelta.
                  </p>
                  <div className="flex flex-wrap gap-2">
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Formalización
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Bienvenida oficial
                    </Badge>
                    <Badge variant="outline" className="border-[#B3CFE8] text-[#0067AC]">
                      Integración familiar
                    </Badge>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Fechas Importantes */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-4">
              Cronograma de Admisiones 2026
            </h2>
            <p className="text-xl text-gray-600 font-nunito">Fechas importantes para el proceso de admisión</p>
          </div>

<div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
            <Card className="hover:shadow-lg transition-shadow border-[#B3CFE8]/30">
              <CardHeader>
                <CardTitle className="flex items-center gap-3 font-quicksand text-[#0067AC]">
                  <Calendar className="w-6 h-6 text-[#0067AC]" />
                  Período de Inscripciones
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Inicio de inscripciones:</span>
                    <span className="font-semibold text-[#0067AC]">15 de Enero 2026</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Cierre de inscripciones:</span>
                    <span className="font-semibold text-[#0067AC]">15 de Marzo 2026</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Evaluaciones:</span>
                    <span className="font-semibold text-[#0067AC]">Marzo - Abril 2026</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="hover:shadow-lg transition-shadow border-[#B3CFE8]/30">
              <CardHeader>
                <CardTitle className="flex items-center gap-3 font-quicksand text-[#0067AC]">
                  <CheckCircle className="w-6 h-6 text-[#0067AC]" />
                  Resultados y Matrícula
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Publicación de resultados:</span>
                    <span className="font-semibold text-[#0067AC]">30 de Abril 2026</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Período de matrícula:</span>
                    <span className="font-semibold text-[#0067AC]">Mayo 2026</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-gray-600 font-nunito">Inicio de clases:</span>
                    <span className="font-semibold text-[#0067AC]">Septiembre 2026</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Requisitos por Nivel */}
      <section className="py-20 bg-[#EAEAEA]/30">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-4">
              Requisitos por Nivel Educativo
            </h2>
            <p className="text-xl text-gray-600 font-nunito">Documentación específica según el nivel al que postula</p>
          </div>

<div className="grid lg:grid-cols-3 gap-8">
            <Card className="hover:shadow-xl transition-shadow">
              <CardHeader className="bg-[#0067AC] text-white">
                <CardTitle className="text-center font-quicksand">Inicial I (1-2 años)</CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Partida de nacimiento original</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Certificado médico actualizado</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Carnet de vacunas completo</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Cédula de identidad de padres</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Formulario de admisión completo</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="hover:shadow-xl transition-shadow">
              <CardHeader className="bg-[#0067AC] text-white">
                <CardTitle className="text-center font-quicksand">Inicial II (3-4 años)</CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Partida de nacimiento original</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Certificados de institución anterior</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Certificado médico y psicológico</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Carnet de vacunas actualizado</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Informe de desarrollo integral</span>
                  </li>
                </ul>
              </CardContent>
            </Card>

<Card className="hover:shadow-xl transition-shadow">
              <CardHeader className="bg-[#0067AC] text-white">
                <CardTitle className="text-center font-quicksand">Primero de Básica (5-6 años)</CardTitle>
              </CardHeader>
              <CardContent className="p-6">
                <ul className="space-y-3">
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Certificado de promoción de Inicial</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Partida de nacimiento original</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Evaluación psicopedagógica</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Certificado médico completo</span>
                  </li>
                  <li className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-[#0067AC] mt-0.5 flex-shrink-0" />
                    <span className="text-gray-600 font-nunito">Portafolio de trabajos del estudiante</span>
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Formulario de Contacto */}
      <section className="py-20 bg-[#B3CFE8]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl lg:text-4xl font-quicksand font-bold text-[#0067AC] mb-4">
                Solicita Información
              </h2>
              <p className="text-xl text-gray-700 font-nunito">
                Completa el formulario y nos pondremos en contacto contigo
              </p>
            </div>

<div className="grid lg:grid-cols-2 gap-12">
              <Card className="bg-white/90 border-0 shadow-lg">
                <CardContent className="p-8">
                  <form className="space-y-6">
                    <div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">
                          Nombre del Padre/Madre
                        </label>
                        <Input
                          className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                          placeholder="Tu nombre completo"
                        />
                      </div>
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Teléfono</label>
                        <Input
                          className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                          placeholder="Tu número de teléfono"
                        />
                      </div>
                    </div>

<div>
                      <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Correo Electrónico</label>
                      <Input
                        type="email"
                        className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                        placeholder="tu@email.com"
                      />
                    </div>

<div className="grid md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">
                          Nombre del Estudiante
                        </label>
                        <Input
                          className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                          placeholder="Nombre del niño/a"
                        />
                      </div>
                      <div>
                        <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Nivel de Interés</label>
                        <Select>
                          <SelectTrigger className="bg-white border-[#B3CFE8]/50 text-[#0067AC] font-nunito">
                            <SelectValue placeholder="Selecciona el nivel" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="inicial1">Inicial I (1-2 años)</SelectItem>
                            <SelectItem value="inicial2">Inicial II (3-4 años)</SelectItem>
                            <SelectItem value="primero">Primero de Básica (5-6 años)</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div>
                      <label className="block text-[#0067AC] mb-2 font-nunito font-semibold">Mensaje</label>
                      <Textarea
                        className="bg-white border-[#B3CFE8]/50 text-[#0067AC] placeholder:text-gray-500 font-nunito"
                        placeholder="Cuéntanos sobre tus expectativas y preguntas..."
                        rows={4}
                      />
                    </div>

<Button className="w-full bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                      Enviar Solicitud
                    </Button>
                  </form>
                </CardContent>
              </Card>

<div className="space-y-8">
                <div>
                  <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-6">Información de Contacto</h3>

<div className="space-y-4">
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-white/50 rounded-full flex items-center justify-center">
                        <Phone className="w-6 h-6 text-[#0067AC]" />
                      </div>
                      <div>
                        <p className="text-[#0067AC] font-nunito font-semibold">Teléfono</p>
                        <p className="text-gray-700 font-nunito">(04) 123-4567</p>
                      </div>
                    </div>

<div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-white/50 rounded-full flex items-center justify-center">
                        <Mail className="w-6 h-6 text-[#0067AC]" />
                      </div>
                      <div>
                        <p className="text-[#0067AC] font-nunito font-semibold">Email</p>
                        <p className="text-gray-700 font-nunito">admisiones@predelta.edu.ec</p>
                      </div>
                    </div>
                  </div>
                </div>

<div>
                  <h4 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Horarios de Atención</h4>
                  <div className="space-y-2 text-gray-700 font-nunito">
                    <p>Lunes a Viernes: 8:00 AM - 4:00 PM</p>
                    <p>Sábados: 9:00 AM - 1:00 PM</p>
                    <p className="text-sm text-gray-600">*Citas previa coordinación</p>
                  </div>
                </div>

<div>
                  <h4 className="text-xl font-quicksand font-bold text-[#0067AC] mb-4">Documentos Descargables</h4>
                  <div className="space-y-3">
                    <Button
                      variant="outline"
                      className="w-full justify-start border-[#0067AC]/30 text-[#0067AC] hover:bg-[#0067AC]/10 bg-white/50 font-nunito"
                    >
                      <Download className="w-4 h-4 mr-2" />
                      Formulario de Admisión
                    </Button>
                    <Button
                      variant="outline"
                      className="w-full justify-start border-[#0067AC]/30 text-[#0067AC] hover:bg-[#0067AC]/10 bg-white/50 font-nunito"
                    >
                      <Download className="w-4 h-4 mr-2" />
                      Lista de Requisitos
                    </Button>
                    <Button
                      variant="outline"
                      className="w-full justify-start border-[#0067AC]/30 text-[#0067AC] hover:bg-[#0067AC]/10 bg-white/50 font-nunito"
                    >
                      <Download className="w-4 h-4 mr-2" />
                      Cronograma 2026
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/rincon-familiar/page.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Heart,
  Users,
  Shield,
  Download,
  Lock,
  Eye,
  FileText,
  ShoppingBag,
  Shirt,
  BookOpen,
  Star,
  Camera,
  Key,
} from "lucide-react"
import { useState } from "react"
import Image from "next/image"

export default function RinconFamiliarPage() {
  const [galleryAccess, setGalleryAccess] = useState(false)
  const [accessCode, setAccessCode] = useState("")

const handleGalleryAccess = () => {
    // Simple access control - in production, this would be more secure
    if (accessCode === "presco2024") {
      setGalleryAccess(true)
    } else {
      alert("Código incorrecto. Por favor, contacta con la administración.")
    }
  }

return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section
        className="relative py-20 overflow-hidden"
        style={{ background: "linear-gradient(to right, #B3CFE8, #0067AC)" }}
      >
        <div className="absolute inset-0">
          <div className="absolute top-10 left-10 w-16 h-16 bg-white/20 rounded-full animate-float"></div>
          <div
            className="absolute top-32 right-20 w-12 h-12 bg-white/30 rounded-full animate-float"
            style={{ animationDelay: "1s" }}
          ></div>
          <div
            className="absolute bottom-20 left-1/4 w-20 h-20 bg-white/10 rounded-full animate-float"
            style={{ animationDelay: "2s" }}
          ></div>
        </div>

<div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <Badge className="mb-6 bg-white/20 text-white border-none font-nunito font-semibold">
              <Heart className="w-4 h-4 mr-2" />
              Espacio para familias
            </Badge>
            <h1 className="text-4xl lg:text-6xl font-quicksand font-bold text-white mb-6 leading-tight">
              Rincón Familiar
            </h1>
            <p className="text-xl text-white/90 leading-relaxed font-nunito max-w-3xl mx-auto">
              Un espacio dedicado a nuestras familias con recursos importantes, galería privada y toda la información
              que necesitas para acompañar el crecimiento de tu pequeño.
            </p>
          </div>
        </div>
      </section>

{/* Tabs Navigation */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <Tabs defaultValue="galeria" className="max-w-6xl mx-auto">
            <TabsList className="grid w-full grid-cols-4 mb-12 bg-[#EAEAEA]/50">
              <TabsTrigger
                value="galeria"
                className="font-nunito font-semibold data-[state=active]:bg-[#0067AC] data-[state=active]:text-white"
              >
                <Camera className="w-4 h-4 mr-2" />
                Galería Privada
              </TabsTrigger>
              <TabsTrigger
                value="protocolo"
                className="font-nunito font-semibold data-[state=active]:bg-[#0067AC] data-[state=active]:text-white"
              >
                <Shield className="w-4 h-4 mr-2" />
                Protocolo
              </TabsTrigger>
              <TabsTrigger
                value="uniforme"
                className="font-nunito font-semibold data-[state=active]:bg-[#0067AC] data-[state=active]:text-white"
              >
                <Shirt className="w-4 h-4 mr-2" />
                Uniforme
              </TabsTrigger>
              <TabsTrigger
                value="utiles"
                className="font-nunito font-semibold data-[state=active]:bg-[#0067AC] data-[state=active]:text-white"
              >
                <ShoppingBag className="w-4 h-4 mr-2" />
                Útiles
              </TabsTrigger>
            </TabsList>

{/* Galería Privada */}
            <TabsContent value="galeria">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
                <CardHeader className="bg-[#B3CFE8]/30 text-center">
                  <CardTitle className="font-quicksand text-[#0067AC] flex items-center justify-center gap-3">
                    <Lock className="w-6 h-6" />
                    Galería Privada de Familias
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-8">
                  {!galleryAccess ? (
                    <div className="text-center max-w-md mx-auto">
                      <div className="w-20 h-20 bg-[#B3CFE8]/30 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Key className="w-10 h-10 text-[#0067AC]" />
                      </div>
                      <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-4">Acceso Restringido</h3>
                      <p className="text-gray-600 font-nunito mb-6">
                        Esta galería es exclusiva para familias de Predelta. Ingresa el código de acceso que recibiste
                        por email o solicítalo en recepción.
                      </p>
                      <div className="space-y-4">
                        <Input
                          type="password"
                          placeholder="Código de acceso"
                          value={accessCode}
                          onChange={(e) => setAccessCode(e.target.value)}
                          className="bg-white/50 border-[#B3CFE8]/50 text-[#0067AC] font-nunito"
                        />
                        <Button
                          onClick={handleGalleryAccess}
                          className="w-full bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full"
                        >
                          <Eye className="mr-2 w-4 h-4" />
                          Acceder a la Galería
                        </Button>
                      </div>
                      <p className="text-sm text-gray-500 font-nunito mt-4">
                        ¿No tienes el código? Contacta con la administración: (04) 123-4567
                      </p>
                    </div>
                  ) : (
                    <div>
                      <div className="text-center mb-8">
                        <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-4">
                          Bienvenido a nuestra Galería
                        </h3>
                        <p className="text-gray-600 font-nunito">
                          Aquí encontrarás las fotos más recientes de las actividades de tu pequeño
                        </p>
                      </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        {[1, 2, 3, 4, 5, 6].map((item) => (
                          <Card key={item} className="group hover:shadow-lg transition-shadow">
                            <CardContent className="p-4">
                              <div className="aspect-square bg-[#B3CFE8]/20 rounded-lg mb-3 flex items-center justify-center">
                                <Camera className="w-12 h-12 text-[#B3CFE8]" />
                              </div>
                              <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Actividad {item}</h4>
                              <p className="text-sm text-gray-600 font-nunito">
                                Fotos de las actividades del {new Date().toLocaleDateString()}
                              </p>
                            </CardContent>
                          </Card>
                        ))}
                      </div>

<div className="text-center mt-8">
                        <p className="text-sm text-gray-500 font-nunito">
                          Las fotos se actualizan semanalmente. Última actualización: {new Date().toLocaleDateString()}
                        </p>
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>

{/* Protocolo de Prevención */}
            <TabsContent value="protocolo">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
                <CardHeader className="bg-green-100 text-center">
                  <CardTitle className="font-quicksand text-[#0067AC] flex items-center justify-center gap-3">
                    <Shield className="w-6 h-6" />
                    Protocolo de Prevención del Abuso
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-8">
                  <div className="max-w-4xl mx-auto">
                    <div className="text-center mb-8">
                      <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Shield className="w-10 h-10 text-green-600" />
                      </div>
                      <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-4">
                        Compromiso con la Seguridad Infantil
                      </h3>
                      <p className="text-lg text-gray-600 font-nunito leading-relaxed">
                        En Predelta, la seguridad y bienestar de nuestros estudiantes es nuestra máxima prioridad.
                        Contamos con protocolos estrictos de prevención y actuación.
                      </p>
                    </div>

<div className="grid md:grid-cols-2 gap-8 mb-8">
                      <Card className="bg-blue-50 border-0">
                        <CardContent className="p-6">
                          <h4 className="font-quicksand font-bold text-[#0067AC] mb-4">Medidas Preventivas</h4>
                          <ul className="space-y-2 text-gray-600 font-nunito">
                            <li>• Selección rigurosa del personal</li>
                            <li>• Capacitación continua en protección infantil</li>
                            <li>• Supervisión constante de actividades</li>
                            <li>• Espacios físicos seguros y transparentes</li>
                            <li>• Comunicación abierta con las familias</li>
                          </ul>
                        </CardContent>
                      </Card>

<Card className="bg-pink-50 border-0">
                        <CardContent className="p-6">
                          <h4 className="font-quicksand font-bold text-[#0067AC] mb-4">Señales de Alerta</h4>
                          <ul className="space-y-2 text-gray-600 font-nunito">
                            <li>• Cambios súbitos de comportamiento</li>
                            <li>• Miedo o rechazo a ciertas personas</li>
                            <li>• Regresión en habilidades adquiridas</li>
                            <li>• Conocimiento inapropiado para la edad</li>
                            <li>• Lesiones inexplicables</li>
                          </ul>
                        </CardContent>
                      </Card>
                    </div>

<div className="bg-[#EAEAEA]/50 rounded-2xl p-8 text-center">
                      <h4 className="font-quicksand font-bold text-[#0067AC] mb-4">Protocolo Completo de Prevención</h4>
                      <p className="text-gray-600 font-nunito mb-6">
                        Descarga nuestro protocolo completo de prevención del abuso infantil, que incluye procedimientos
                        detallados, contactos de emergencia y recursos para familias.
                      </p>
                      <Button className="bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                        <Download className="mr-2 w-4 h-4" />
                        Descargar Protocolo PDF
                      </Button>
                    </div>

<div className="mt-8 text-center">
                      <p className="text-sm text-gray-500 font-nunito">
                        Si tienes alguna preocupación, no dudes en contactarnos inmediatamente al (04) 123-4567 o
                        direccion@predelta.edu.ec
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

{/* Uso del Uniforme */}
            <TabsContent value="uniforme">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
                <CardHeader className="bg-orange-100 text-center">
                  <CardTitle className="font-quicksand text-[#0067AC] flex items-center justify-center gap-3">
                    <Shirt className="w-6 h-6" />
                    Uso del Uniforme Escolar
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-8">
                  <div className="max-w-4xl mx-auto">
                    <div className="grid lg:grid-cols-2 gap-12 items-center mb-12">
                      <div>
                        <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-6">
                          Uniforme Oficial Predelta
                        </h3>
                        <p className="text-lg text-gray-600 font-nunito mb-6 leading-relaxed">
                          Nuestro uniforme representa los valores de nuestra institución y crea un sentido de
                          pertenencia en nuestros estudiantes.
                        </p>

<div className="space-y-4">
                          <Card className="bg-blue-50 border-0">
                            <CardContent className="p-4">
                              <h4 className="font-quicksand font-bold text-blue-700 mb-2">Uniforme Diario</h4>
                              <ul className="text-sm text-gray-600 font-nunito space-y-1">
                                <li>• Polo azul claro con logo institucional</li>
                                <li>• Pantalón o falda azul marino</li>
                                <li>• Zapatos negros cerrados</li>
                                <li>• Medias blancas o azul marino</li>
                              </ul>
                            </CardContent>
                          </Card>

<Card className="bg-green-50 border-0">
                            <CardContent className="p-4">
                              <h4 className="font-quicksand font-bold text-green-700 mb-2">
                                Uniforme de Educación Física
                              </h4>
                              <ul className="text-sm text-gray-600 font-nunito space-y-1">
                                <li>• Camiseta blanca con logo</li>
                                <li>• Short o pantalón deportivo azul</li>
                                <li>• Zapatos deportivos blancos</li>
                                <li>• Medias deportivas blancas</li>
                              </ul>
                            </CardContent>
                          </Card>
                        </div>
                      </div>

<div className="grid md:grid-cols-3 gap-6 mb-8">
                      <Card className="bg-yellow-50 border-0 text-center">
                        <CardContent className="p-6">
                          <Star className="w-12 h-12 text-yellow-600 mx-auto mb-4" />
                          <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Calidad</h4>
                          <p className="text-sm text-gray-600 font-nunito">
                            Materiales de alta calidad, cómodos y duraderos para el uso diario.
                          </p>
                        </CardContent>
                      </Card>

<Card className="bg-purple-50 border-0 text-center">
                        <CardContent className="p-6">
                          <Heart className="w-12 h-12 text-purple-600 mx-auto mb-4" />
                          <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Comodidad</h4>
                          <p className="text-sm text-gray-600 font-nunito">
                            Diseñado especialmente para la comodidad y libertad de movimiento de los niños.
                          </p>
                        </CardContent>
                      </Card>

<Card className="bg-teal-50 border-0 text-center">
                        <CardContent className="p-6">
                          <Users className="w-12 h-12 text-teal-600 mx-auto mb-4" />
                          <h4 className="font-quicksand font-bold text-[#0067AC] mb-2">Identidad</h4>
                          <p className="text-sm text-gray-600 font-nunito">
                            Fortalece el sentido de pertenencia y la identidad institucional.
                          </p>
                        </CardContent>
                      </Card>
                    </div>

<div className="bg-[#EAEAEA]/50 rounded-2xl p-8 text-center">
                      <h4 className="font-quicksand font-bold text-[#0067AC] mb-4">Puntos de Venta Autorizados</h4>
                      <p className="text-gray-600 font-nunito mb-6">
                        Adquiere el uniforme oficial únicamente en nuestros puntos de venta autorizados para garantizar
                        la calidad y especificaciones correctas.
                      </p>
                      <div className="grid md:grid-cols-2 gap-4 text-left">
                        <div className="bg-white/50 rounded-lg p-4">
                          <h5 className="font-quicksand font-bold text-[#0067AC] mb-2">Almacén Escolar</h5>
                          <p className="text-sm text-gray-600 font-nunito">
                            Av. Principal 456, Local 12
                            <br />
                            Tel: (04) 987-6543
                            <br />
                            Lun-Vie: 9:00 AM - 6:00 PM
                          </p>
                        </div>
                        <div className="bg-white/50 rounded-lg p-4">
                          <h5 className="font-quicksand font-bold text-[#0067AC] mb-2">Uniformes Predelta</h5>
                          <p className="text-sm text-gray-600 font-nunito">
                            Centro Comercial Plaza Norte
                            <br />
                            Tel: (04) 876-5432
                            <br />
                            Lun-Sab: 10:00 AM - 8:00 PM
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

{/* Lista de Útiles */}
            <TabsContent value="utiles">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
                <CardHeader className="bg-purple-100 text-center">
                  <CardTitle className="font-quicksand text-[#0067AC] flex items-center justify-center gap-3">
                    <ShoppingBag className="w-6 h-6" />
                    Lista de Útiles Escolares
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-8">
                  <div className="max-w-4xl mx-auto">
                    <div className="text-center mb-8">
                      <h3 className="text-2xl font-quicksand font-bold text-[#0067AC] mb-4">
                        Útiles por Nivel Educativo
                      </h3>
                      <p className="text-lg text-gray-600 font-nunito">
                        Encuentra la lista completa de útiles escolares organizados por nivel educativo
                      </p>
                    </div>

<div className="grid lg:grid-cols-3 gap-8 mb-8">
                      {/* Inicial I */}
                      <Card className="bg-gradient-to-br from-blue-50 to-blue-100 border-0 hover:shadow-lg transition-shadow">
                        <CardHeader className="bg-blue-200/50 text-center">
                          <CardTitle className="font-quicksand text-blue-700">Inicial I (1-2 años)</CardTitle>
                        </CardHeader>
                        <CardContent className="p-6">
                          <ul className="space-y-2 text-sm text-gray-700 font-nunito">
                            <li>• 1 Mochila pequeña con nombre</li>
                            <li>• 2 Mudas de ropa completas</li>
                            <li>• 1 Paquete de pañales (si aplica)</li>
                            <li>• 1 Toalla pequeña</li>
                            <li>• 1 Cepillo de dientes</li>
                            <li>• 1 Vaso plástico con nombre</li>
                            <li>• 2 Baberos</li>
                            <li>• 1 Manta pequeña</li>
                          </ul>
                          <Button className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white font-nunito font-semibold rounded-full">
                            <Download className="mr-2 w-4 h-4" />
                            Descargar Lista
                          </Button>
                        </CardContent>
                      </Card>

{/* Inicial II */}
                      <Card className="bg-gradient-to-br from-pink-50 to-pink-100 border-0 hover:shadow-lg transition-shadow">
                        <CardHeader className="bg-pink-200/50 text-center">
                          <CardTitle className="font-quicksand text-pink-700">Inicial II (3-4 años)</CardTitle>
                        </CardHeader>
                        <CardContent className="p-6">
                          <ul className="space-y-2 text-sm text-gray-700 font-nunito">
                            <li>• 1 Mochila mediana</li>
                            <li>• 12 Crayones gruesos</li>
                            <li>• 2 Lápices triangulares</li>
                            <li>• 1 Borrador grande</li>
                            <li>• 1 Tijera punta roma</li>
                            <li>• 2 Barras de pegamento</li>
                            <li>• 1 Cuaderno de dibujo</li>
                            <li>• 1 Delantal de arte</li>
                            <li>• 1 Lonchera térmica</li>
                          </ul>
                          <Button className="w-full mt-4 bg-pink-600 hover:bg-pink-700 text-white font-nunito font-semibold rounded-full">
                            <Download className="mr-2 w-4 h-4" />
                            Descargar Lista
                          </Button>
                        </CardContent>
                      </Card>

{/* Primero de Básica */}
                      <Card className="bg-gradient-to-br from-green-50 to-green-100 border-0 hover:shadow-lg transition-shadow">
                        <CardHeader className="bg-green-200/50 text-center">
                          <CardTitle className="font-quicksand text-green-700">Primero de Básica (5-6 años)</CardTitle>
                        </CardHeader>
                        <CardContent className="p-6">
                          <ul className="space-y-2 text-sm text-gray-700 font-nunito">
                            <li>• 1 Mochila con ruedas</li>
                            <li>• 6 Lápices HB</li>
                            <li>• 12 Colores de madera</li>
                            <li>• 1 Regla de 20cm</li>
                            <li>• 3 Cuadernos cuadriculados</li>
                            <li>• 2 Cuadernos rayados</li>
                            <li>• 1 Cartuchera completa</li>
                            <li>• 1 Agenda escolar</li>
                            <li>• Material de arte variado</li>
                          </ul>
                          <Button className="w-full mt-4 bg-green-600 hover:bg-green-700 text-white font-nunito font-semibold rounded-full">
                            <Download className="mr-2 w-4 h-4" />
                            Descargar Lista
                          </Button>
                        </CardContent>
                      </Card>
                    </div>

<div className="bg-[#EAEAEA]/50 rounded-2xl p-8">
                      <div className="text-center mb-6">
                        <BookOpen className="w-16 h-16 text-[#0067AC] mx-auto mb-4" />
                        <h4 className="font-quicksand font-bold text-[#0067AC] mb-4">Información Importante</h4>
                      </div>

<div className="grid md:grid-cols-2 gap-6 text-left">
                        <div>
                          <h5 className="font-quicksand font-bold text-[#0067AC] mb-3">Recomendaciones:</h5>
                          <ul className="space-y-2 text-sm text-gray-600 font-nunito">
                            <li>• Marcar todos los útiles con nombre y apellido</li>
                            <li>• Usar etiquetas resistentes al agua</li>
                            <li>• Revisar periódicamente el estado de los útiles</li>
                            <li>• Reponer materiales según sea necesario</li>
                          </ul>
                        </div>
                        <div>
                          <h5 className="font-quicksand font-bold text-[#0067AC] mb-3">Fechas Importantes:</h5>
                          <ul className="space-y-2 text-sm text-gray-600 font-nunito">
                            <li>• Entrega de listas: Diciembre</li>
                            <li>• Compra recomendada: Enero</li>
                            <li>• Revisión de útiles: Primera semana de clases</li>
                            <li>• Reposición: Según necesidad</li>
                          </ul>
                        </div>
                      </div>

<div className="text-center mt-6">
                        <Button className="bg-[#0067AC] hover:bg-[#0067AC]/90 text-white font-nunito font-semibold rounded-full">
                          <FileText className="mr-2 w-4 h-4" />
                          Descargar Todas las Listas
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]plaintext:file="public/video-web-home.mp4" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/video-web-home.mp4-ONeITHnH4mQ4PJS1NwNyCyTSLDPuuO.mp4" isMoved="true"
[V0_FILE]png:file="public/logo_blanco_presco.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/logo_blanco_presco-0wbcgl4is2Ue76a8Ui3UlepIvcP5Zm.png"</article></body></html>