[V0_FILE]jpg:file="public/images/gallery/coffee.jpg" url="https://your-image-url.com/coffee.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 20 14% 4%; --foreground: 60 9% 98%; --card: 20 14% 4%; --card-foreground: 60 9% 98%; --popover: 20 14% 4%; --popover-foreground: 60 9% 98%; --primary: 30 80% 40%; --primary-foreground: 60 9% 98%; --secondary: 12 6% 15%; --secondary-foreground: 60 9% 98%; --muted: 12 6% 15%; --muted-foreground: 24 5% 64%; --accent: 12 6% 15%; --accent-foreground: 60 9% 98%; --destructive: 0 84% 60%; --destructive-foreground: 60 9% 98%; --border: 20 5% 18%; --input: 20 5% 18%; --ring: 30 80% 40%; --radius: 0.5rem; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Subtle professional animations */ @keyframes subtle-drift { 0% { transform: translate(0px, 0px); } 50% { transform: translate(-10px, 10px); } 100% { transform: translate(0px, 0px); } } @keyframes subtle-drift-slow { 0% { transform: translate(0px, 0px); } 50% { transform: translate(10px, -10px); } 100% { transform: translate(0px, 0px); } } @keyframes subtle-drift-slower { 0% { transform: translate(0px, 0px); } 50% { transform: translate(-5px, -5px); } 100% { transform: translate(0px, 0px); } } .animate-subtle-drift { animation: subtle-drift 20s ease-in-out infinite; } .animate-subtle-drift-slow { animation: subtle-drift-slow 25s ease-in-out infinite; } .animate-subtle-drift-slower { animation: subtle-drift-slower 30s ease-in-out infinite; } /* Professional hover effects */ .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]plaintext:file="abaout me" isMerged="true" [V0_FILE]jpg:file="public/images/profile.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/savingPNG%20%281%29.png-qsCYtAUTklCJkM4c3a5u9UpNVAjwQ0.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/about-me.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/savingPNG.png-znUi18K43FNwSSvfyCS9FKMV5jcKkM.jpeg" isMerged="true" [V0_FILE]shellscript:file="package.json" type="script" isFixed="true" isQuickEdit="true" isMerged="true" { "scripts": { "install": "npm install resend" } } [V0_FILE]markdown:file="RESEND_SETUP.md" type="code" isMerged="true" # Resend Email Setup Instructions ## 1. Create a Resend Account 1. Go to https://resend.com 2. Sign up for a free account 3. Verify your email address ## 2. Get Your API Key 1. Go to your Resend dashboard 2. Navigate to "API Keys" section 3. Create a new API key 4. Copy the API key ## 3. Add API Key to Environment Variables 1. Create or update your `.env.local` file in your project root 2. Add: `RESEND_API_KEY=your_actual_api_key_here` 3. Replace `your_actual_api_key_here` with your real API key ## 4. Domain Setup (Important!) For production, you need to verify your domain: ### Option A: Use your custom domain (Recommended) 1. In Resend dashboard, go to "Domains" 2. Add your domain: `alejandroguerrerovargas.com` 3. Follow the DNS setup instructions 4. Once verified, update the `from` field in the API route to use your domain ### Option B: Use Resend's domain (for testing) 1. You can use `onboarding@resend.dev` as the `from` address for testing 2. Update the API route: `from: "onboarding@resend.dev"` ## 5. Testing 1. Deploy your website or test locally 2. Fill out the contact form 3. Check your email (alejandrogv0425@gmail.com) for the message 4. Check Resend dashboard for delivery status ## 6. Free Tier Limits - 100 emails per day - 3,000 emails per month - Perfect for a personal website! ## 7. Production Checklist - [ ] API key added to environment variables - [ ] Domain verified in Resend (if using custom domain) - [ ] Test email sending - [ ] Check spam folder initially - [ ] Monitor Resend dashboard for delivery issues [V0_FILE]png:file="public/placeholder-4f4nj.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { Heart, Mail, MessageCircle, BookOpen, MapPin, Github, Linkedin, Twitter, Instagram } from "lucide-react" import Image from "next/image" import Link from "next/link" import { useState, useEffect } from "react" export default function PersonalIntroductionWebsite() { const [currentWordIndex, setCurrentWordIndex] = useState(0) const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [submitStatus, setSubmitStatus] = useState<{ type: "success" | "error" | null message: string }>({ type: null, message: "" }) const words = [ "STUDENT", "COLLEGE ATHLETE", "PASSIONATE WORKER", "CHARISMATIC", "COACH", "RESEARCHER", "COMMUNITY BUILDER", "COLOMBIAN", ] useEffect(() => { const interval = setInterval(() => { setCurrentWordIndex((prevIndex) => (prevIndex + 1) % words.length) }, 2000) // Change word every 2 seconds return () => clearInterval(interval) }, [words.length]) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) setSubmitStatus({ type: null, message: "" }) try { const response = await fetch("/contact", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }) const data = await response.json() if (response.ok) { setSubmitStatus({ type: "success", message: data.message, }) setFormData({ name: "", email: "", message: "" }) } else { setSubmitStatus({ type: "error", message: data.error || "Something went wrong", }) } } catch (error) { setSubmitStatus({ type: "error", message: "Network error. Please try again.", }) } finally { setIsSubmitting(false) } } return (

{/* Header */}

ALEJANDRO GUERRERO VARGAS

{/* Hero Section */}

ALEJANDRO GUERRERO

{words[currentWordIndex]}

{/* About Me Section */}

Nice to meet you!

I believe that genuine connections are what make life meaningful. Whether it's through shared interests, thoughtful conversations, or collaborative projects, I'm always looking to build bridges with others.

currently a UMASS BOSTON ECONOMICS Major and graduate from BUNKER HILL COMMUNITY COLLEGE in Business

Creative Curious Empathetic Adventurous Thoughtful

From Colombia, Bogota located at Boston, MA

{/* Interests Section */}

Things I Love

Some of my work and previous ideas

Soccer & Athletic Development

I coach children U12-16 in different sports and am passionate about introducing new athletes to the world of sports. I believe in developing not just athletic skills but character, teamwork, and confidence in young people.

Literature

I'm passionate about Colombian literature that tells the story of my country, especially works by Gabriel García Márquez like "Cien Años de Soledad" (One Hundred Years of Solitude). These books capture our rich cultural heritage, magical realism, and complex history.

Client Service & Customer Relations

Experienced in hospitality and skilled at connecting with people from different cultures and backgrounds. I'm passionate about creating positive experiences and building meaningful relationships across diverse communities.

International Law & Politics

Passionate about understanding global governance, international relations, and how legal frameworks shape our interconnected world. I follow current affairs and enjoy analyzing political developments.

Community Building

I believe in the power of community. I actively participate in local events and volunteer with diverse organizations, connecting with people from different backgrounds and contributing to meaningful causes in my area.

Investigative Research

Actively engaged in investigative research on various topics, especially trade markets, business strategies, and investment opportunities. I enjoy analyzing market trends and understanding economic dynamics.

{/* Thoughts Section */}

Recent Thoughts

A glimpse into my mind—ideas, reflections, and musings I've been contemplating lately.

Essays Photo Journal Favorite Quotes

The Art of Slow Conversation June 2, 2024

In a world of quick texts and rushed calls, there's something magical about sitting down for a long, meandering conversation with no agenda...

Finding Beauty in Ordinary Moments May 15, 2024

The morning light filtering through curtains, the steam rising from a fresh cup of coffee—these small moments often contain the most profound beauty...

The Power of Vulnerability in New Connections April 28, 2024

Why is it that some connections feel instantly meaningful while others remain surface-level? I've found that willingness to be vulnerable plays a crucial role...

"We don't see things as they are, we see them as we are."

— Anaïs Nin

"The most beautiful people we have known are those who have known defeat, known suffering, known struggle, known loss, and have found their way out of the depths. These persons have an appreciation, a sensitivity, and an understanding of life that fills them with compassion, gentleness, and a deep loving concern. Beautiful people do not just happen."

— Elisabeth Kübler-Ross

"In the end, we will remember not the words of our enemies, but the silence of our friends."

— Martin Luther King Jr.

{/* Connect Section */}

Let's Connect

I'm always excited to meet new people, exchange ideas, or collaborate on interesting projects. Whether you want to chat about books, coffee, or potential collaborations, I'd love to hear from you.

alejandrogv0425@gmail.com

From Colombia, Bogota located at Boston, MA

Send Me a Message I'll get back to you as soon as possible.

Name

Message

</div>

{submitStatus.type && (
                    <div
                      className={`p-3 rounded-md text-sm ${
                        submitStatus.type === "success"
                          ? "bg-green-900/20 border border-green-700 text-green-300"
                          : "bg-red-900/20 border border-red-700 text-red-300"
                      }`}
                    >
                      {submitStatus.message}
                    </div>
                  )}

<Button
                    type="submit"
                    disabled={isSubmitting}
                    className="w-full bg-amber-700 hover:bg-amber-600 text-gray-100 disabled:opacity-50"
                  >
                    <MessageCircle className="mr-2 h-4 w-4" />
                    {isSubmitting ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Newsletter Section */}
        <section className="container py-12 md:py-24 bg-gray-100 border border-gray-200 rounded-lg">
          <Card className="bg-gray-50 border-gray-200">
            <CardContent className="pt-6 px-6 pb-8 md:p-10">
              <div className="grid gap-6 lg:grid-cols-2">
                <div>
                  <h3 className="text-2xl font-bold mb-2 text-gray-900">Join My Newsletter</h3>
                  <p className="text-gray-700 mb-4">
                    Subscribe to receive occasional updates with my latest essays, photos, and thoughts. I promise to
                    only send content worth your time.
                  </p>
                </div>
                <div className="flex flex-col sm:flex-row gap-2">
                  <Input
                    placeholder="your.email@example.com"
                    className="sm:flex-1 bg-white border-gray-300 text-gray-900 placeholder:text-gray-500"
                  />
                  <Button className="bg-amber-700 hover:bg-amber-600 text-gray-100">Subscribe</Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </section>
      </main>

{/* Footer */}
      <footer className="border-t border-gray-200 py-8 md:py-12">
        <div className="container flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex flex-col items-center md:items-start">
            <Link href="/" className="font-bold text-xl mb-2 text-red-700">
              Alejandro Guerrero
            </Link>
            <p className="text-sm text-gray-600 text-center md:text-left">
              Connecting through stories, ideas, and shared experiences.
            </p>
          </div>
          <div className="flex flex-col items-center md:items-end">
            <div className="flex space-x-4 mb-4">
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="#about">About</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="#interests">Interests</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="#thoughts">Thoughts</Link>
              </Button>
            </div>
            <p className="text-sm text-gray-500">© 2024 alejandroguerrerovargas.com. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { Resend } from "resend"

// Initialize Resend only if API key is available
const resend = process.env.RESEND_API_KEY ? new Resend(process.env.RESEND_API_KEY) : null

export async function POST(request: NextRequest) {
  try {
    const { name, email, message } = await request.json()

// Basic validation
    if (!name || !email || !message) {
      return NextResponse.json({ error: "All fields are required" }, { status: 400 })
    }

// Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!emailRegex.test(email)) {
      return NextResponse.json({ error: "Invalid email format" }, { status: 400 })
    }

// Check if Resend is configured
    if (!resend || !process.env.RESEND_API_KEY) {
      console.log("Resend not configured, logging contact form submission:", { name, email, message })
      return NextResponse.json(
        {
          success: true,
          message: "Thank you for your message! I'll get back to you soon. (Note: Email service is being configured)",
        },
        { status: 200 },
      )
    }

// Send email using Resend
    const { data, error } = await resend.emails.send({
      from: "contact@alejandroguerrerovargas.com", // This should be your verified domain
      to: ["alejandrogv0425@gmail.com"],
      subject: `New Contact Form Message from ${name}`,
      html: `
        <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f9f9f9;">
          <div style="background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <h2 style="color: #b91c1c; margin-bottom: 20px; border-bottom: 2px solid #b91c1c; padding-bottom: 10px;">
              New Contact Form Submission
            </h2>
            
            <div style="margin-bottom: 20px;">
              <h3 style="color: #374151; margin-bottom: 5px;">From:</h3>
              <p style="color: #6b7280; margin: 0; font-size: 16px;">${name}</p>
            </div>
            
            <div style="margin-bottom: 20px;">
              <h3 style="color: #374151; margin-bottom: 5px;">Email:</h3>
              <p style="color: #6b7280; margin: 0; font-size: 16px;">
                <a href="mailto:${email}" style="color: #b91c1c; text-decoration: none;">${email}</a>
              </p>
            </div>
            
            <div style="margin-bottom: 20px;">
              <h3 style="color: #374151; margin-bottom: 5px;">Message:</h3>
              <div style="background-color: #f3f4f6; padding: 15px; border-radius: 5px; border-left: 4px solid #b91c1c;">
                <p style="color: #374151; margin: 0; line-height: 1.6; white-space: pre-wrap;">${message}</p>
              </div>
            </div>
            
            <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
              <p style="color: #9ca3af; font-size: 14px; margin: 0;">
                This message was sent from the contact form on alejandroguerrerovargas.com
              </p>
              <p style="color: #9ca3af; font-size: 14px; margin: 5px 0 0 0;">
                Sent on: ${new Date().toLocaleString()}
              </p>
            </div>
          </div>
        </div>
      `,
      replyTo: email, // This allows you to reply directly to the sender
    })

if (error) {
      console.error("Resend error:", error)
      return NextResponse.json({ error: "Failed to send email. Please try again." }, { status: 500 })
    }

console.log("Email sent successfully:", data)

return NextResponse.json(
      {
        success: true,
        message: "Thank you for your message! I'll get back to you soon.",
      },
      { status: 200 },
    )
  } catch (error) {
    console.error("Contact form error:", error)
    return NextResponse.json({ error: "Something went wrong. Please try again." }, { status: 500 })
  }
}
[V0_FILE]plaintext:file=".env.example" isMerged="true"
# Copy this file to .env.local and add your actual API key
RESEND_API_KEY=your_resend_api_key_here
[V0_FILE]typescriptreact:file="app/soccer-career/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Trophy, Target, Calendar, Award, Star } from "lucide-react"
import Link from "next/link"

export default function SoccerCareerPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/90 backdrop-blur-md shadow-sm">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center space-x-2">
            <span className="font-bold text-xl text-red-700">ALEJANDRO GUERRERO VARGAS</span>
          </Link>
          <Button variant="outline" asChild className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent">
            <Link href="/">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Home
            </Link>
          </Button>
        </div>
      </header>

<main className="text-gray-900">
        {/* Hero Section */}
        <section className="container py-12 md:py-24">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl mb-6 text-red-700">
              Soccer Career Highlights
            </h1>
            <p className="max-w-[42rem] mx-auto text-xl text-gray-600">
              Attacking Midfielder - Active player and coach in the beautiful game
            </p>
            <div className="flex justify-center gap-4 mt-6">
              <Badge variant="outline" className="border-red-600 text-red-700 px-4 py-2 text-lg">
                LB/RB Defender
              </Badge>
              <Badge variant="outline" className="border-amber-600 text-amber-700 px-4 py-2 text-lg">
                Starter
              </Badge>
              <Badge variant="outline" className="border-blue-600 text-blue-700 px-4 py-2 text-lg">
                US Open Cup
              </Badge>
            </div>
          </div>
        </section>

{/* Current Status */}
        <section className="container py-12 bg-gradient-to-r from-red-50 to-amber-50 border border-red-200 rounded-lg mb-12">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-4 text-red-700">Currently Playing</h2>
            <div className="grid gap-6 md:grid-cols-2 max-w-4xl mx-auto">
              <Card className="bg-white border-red-200">
                <CardHeader className="text-center">
                  <CardTitle className="text-red-700 flex items-center justify-center gap-2">
                    <Trophy className="h-6 w-6" />
                    Project Football
                  </CardTitle>
                  <CardDescription className="text-gray-600">2024 - Present</CardDescription>
                </CardHeader>
                <CardContent className="text-center">
                  <p className="text-gray-700 mb-4">Position: LB/RB (Left/Right Back) - Starter</p>
                  <div className="space-y-2 mb-4">
                    <p className="text-sm text-gray-600">• APSL Cup Competition</p>
                    <p className="text-sm text-gray-600">• US Open Cup Participant</p>
                    <p className="text-sm text-gray-600">• Starting position defender</p>
                  </div>
                  <div className="flex flex-wrap justify-center gap-2">
                    <Badge variant="outline" className="border-red-600 text-red-700">
                      APSL Cup
                    </Badge>
                    <Badge variant="outline" className="border-blue-600 text-blue-700">
                      US Open Cup
                    </Badge>
                    <Badge variant="outline" className="border-green-600 text-green-700">
                      Starter
                    </Badge>
                  </div>
                </CardContent>
              </Card>

<Card className="bg-white border-amber-200">
                <CardHeader className="text-center">
                  <CardTitle className="text-amber-700 flex items-center justify-center gap-2">
                    <Star className="h-6 w-6" />
                    Training Regimen
                  </CardTitle>
                </CardHeader>
                <CardContent className="text-center">
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <span className="text-gray-700">Daily Training:</span>
                      <span className="font-semibold text-gray-900">Gym & Field</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-700">Focus Areas:</span>
                      <span className="font-semibold text-gray-900">Movement & Formation</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-700">Competition:</span>
                      <span className="font-semibold text-gray-900">Team & Individual</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-700">Leagues:</span>
                      <span className="font-semibold text-gray-900">USL 2 & NJCAA</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Career Timeline */}
        <section className="container py-12">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Career Timeline</h2>
          <div className="space-y-8">
            {/* Colombia Foundation Years */}
            <Card className="bg-gray-50 border-gray-200">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-gray-900 flex items-center gap-2">
                    <Trophy className="h-6 w-6 text-amber-600" />
                    Foundation Years - Colombia
                  </CardTitle>
                  <Badge variant="outline" className="border-amber-600 text-amber-700">
                    2012-2019
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-6 md:grid-cols-2">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">Belgrano FC, Colombia</h4>
                    <p className="text-gray-700 mb-2">Coach: Andres Ochoa</p>
                    <p className="text-gray-600 mb-4">Formation and training three days per week</p>

<h5 className="font-semibold text-gray-900 mb-2">Tournament Achievements:</h5>
                    <ul className="text-gray-600 space-y-1">
                      <li>• Ponyfútbol Bogotá - 2014</li>
                      <li>• Liga de Bogotá 2014-2019</li>
                      <li>• Nacionales Colombia - Arnoldo Iguarán 2018</li>
                    </ul>
                  </div>

<div>
                    <h4 className="font-semibold text-gray-900 mb-3">Colombia National Training Camps U17</h4>
                    <p className="text-gray-700 mb-2">2018-2019</p>
                    <p className="text-gray-600 mb-4">Future scouting and formation program</p>

<div className="flex flex-wrap gap-2">
                      <Badge variant="outline" className="border-red-600 text-red-700">
                        National Level
                      </Badge>
                      <Badge variant="outline" className="border-yellow-600 text-yellow-700">
                        U17
                      </Badge>
                      <Badge variant="outline" className="border-green-600 text-green-700">
                        Scouting Program
                      </Badge>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Transition to USA */}
            <Card className="bg-gray-50 border-gray-200">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-gray-900 flex items-center gap-2">
                    <Target className="h-6 w-6 text-amber-600" />
                    Transition to USA
                  </CardTitle>
                  <Badge variant="outline" className="border-blue-600 text-blue-700">
                    2018-2020
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-6 md:grid-cols-2">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">Brookline High School Varsity</h4>
                    <p className="text-gray-700 mb-2">Coach: Kyle Jones (2018-2019)</p>
                    <p className="text-gray-600 mb-4">Daily training and weekly competition, multiple clinic camps</p>

<div className="bg-amber-50 p-3 rounded-lg border border-amber-200 mb-4">
                      <p className="text-amber-800 font-semibold">🏆 5th Place Northeastern Division</p>
                    </div>
                  </div>

<div>
                    <h4 className="font-semibold text-gray-900 mb-3">River Plate FC Colombia</h4>
                    <p className="text-gray-700 mb-2">2019-2020</p>
                    <p className="text-gray-600 mb-4">Continued development during transition period</p>

<div className="flex flex-wrap gap-2">
                      <Badge variant="outline" className="border-blue-600 text-blue-700">
                        High School Varsity
                      </Badge>
                      <Badge variant="outline" className="border-purple-600 text-purple-700">
                        International Experience
                      </Badge>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* College & Current Era */}
            <Card className="bg-gray-50 border-gray-200">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-gray-900 flex items-center gap-2">
                    <Award className="h-6 w-6 text-amber-600" />
                    College & Professional Development
                  </CardTitle>
                  <Badge variant="outline" className="border-green-600 text-green-700">
                    2022-Present
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-6 md:grid-cols-2">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">Bunker Hill Community College</h4>
                    <p className="text-gray-700 mb-2">2022</p>
                    <p className="text-gray-600 mb-4">Daily training focusing on movement, control, and competition</p>

<h4 className="font-semibold text-gray-900 mb-3 mt-6">Fisher College - NAIA</h4>
                    <p className="text-gray-700 mb-2">Spring Season - Left Back Starter</p>
                    <p className="text-gray-600 mb-4">Competing at NAIA collegiate level as a starting left back</p>

<div className="flex flex-wrap gap-2 mb-4">
                      <Badge variant="outline" className="border-blue-600 text-blue-700">
                        NAIA Level
                      </Badge>
                      <Badge variant="outline" className="border-green-600 text-green-700">
                        Starting LB
                      </Badge>
                      <Badge variant="outline" className="border-purple-600 text-purple-700">
                        Spring Season
                      </Badge>
                    </div>
                  </div>

<div>
                    <h4 className="font-semibold text-gray-900 mb-3">Current Achievements</h4>
                    <div className="space-y-3">
                      <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                        <p className="text-blue-800 font-semibold">🎓 Fisher College NAIA</p>
                        <p className="text-blue-700 text-sm">Starting Left Back - Spring Season</p>
                      </div>
                      <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                        <p className="text-green-800 font-semibold">🥇 NJCAA 1st Place</p>
                      </div>
                      <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                        <p className="text-blue-800 font-semibold">⚽ USL 2 Competition</p>
                      </div>
                      <div className="bg-purple-50 p-3 rounded-lg border border-purple-200">
                        <p className="text-purple-800 font-semibold">🎓 NCAA Currently Playing</p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{/* Professional Competition */}
            <Card className="bg-gradient-to-r from-red-50 to-blue-50 border-red-200">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-red-700 flex items-center gap-2">
                    <Star className="h-6 w-6 text-red-600" />
                    Professional Competition
                  </CardTitle>
                  <Badge variant="outline" className="border-red-600 text-red-700">
                    2024-Present
                  </Badge>
                </div>
              </CardHeader>
              <CardContent>
                <div className="grid gap-6 md:grid-cols-2">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-3">Project Football</h4>
                    <p className="text-gray-700 mb-2">Position: LB/RB (Left/Right Back) - Starter</p>
                    <p className="text-gray-600 mb-4">Competing at the highest amateur/semi-professional level</p>

<div className="flex flex-wrap gap-2 mb-4">
                      <Badge variant="outline" className="border-red-600 text-red-700">
                        Starting Defender
                      </Badge>
                      <Badge variant="outline" className="border-blue-600 text-blue-700">
                        Versatile FB
                      </Badge>
                    </div>
                  </div>

<div>
                    <h4 className="font-semibold text-gray-900 mb-3">Major Competitions</h4>
                    <div className="space-y-3">
                      <div className="bg-red-50 p-3 rounded-lg border border-red-200">
                        <p className="text-red-800 font-semibold">🏆 APSL Cup</p>
                        <p className="text-red-700 text-sm">American Premier Soccer League Cup</p>
                      </div>
                      <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                        <p className="text-blue-800 font-semibold">⚽ US Open Cup</p>
                        <p className="text-blue-700 text-sm">National championship tournament</p>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Warriors FC Link */}
        <section className="container py-12 bg-gray-100 border border-gray-200 rounded-lg">
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-6 text-gray-900">Coaching & Development</h2>
            <Card className="bg-gradient-to-r from-red-50 to-amber-50 border-red-200 max-w-2xl mx-auto">
              <CardContent className="pt-8 pb-8">
                <Trophy className="h-16 w-16 text-red-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-red-700 mb-4">Warriors FC</h3>
                <p className="text-gray-700 mb-6">
                  Discover my coaching philosophy and player development program that bridges American and Colombian
                  soccer cultures.
                </p>
                <Button asChild className="bg-red-700 hover:bg-red-600 text-white">
                  <Link href="/warriors-fc">Learn More About Warriors FC →</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Player Profile */}
        <section className="container py-12">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Player Profile</h2>
          <div className="grid gap-8 lg:grid-cols-2">
            <Card className="bg-gray-50 border-gray-200">
              <CardHeader>
                <CardTitle className="text-gray-900 flex items-center gap-2">
                  <Target className="h-6 w-6 text-amber-600" />
                  Playing Style & Position
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Primary Position:</h4>
                    <p className="text-gray-700">LB/RB (Left/Right Back) - Versatile Defender</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Playing Style:</h4>
                    <p className="text-gray-700">Dynamic fullback with attacking mindset and defensive solidity</p>
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Key Strengths:</h4>
                    <ul className="text-gray-700 space-y-1">
                      <li>• Versatility on both flanks (LB/RB)</li>
                      <li>• Strong defensive positioning</li>
                      <li>• Attacking runs and crosses</li>
                      <li>• Pace and endurance</li>
                      <li>• Leadership as a starter</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200">
              <CardHeader>
                <CardTitle className="text-gray-900 flex items-center gap-2">
                  <Trophy className="h-6 w-6 text-amber-600" />
                  Career Highlights
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="bg-red-50 p-3 rounded-lg border border-red-200">
                    <h4 className="font-semibold text-red-800 mb-1">Colombia National U17 Camps</h4>
                    <p className="text-red-700 text-sm">Selected for national team development program</p>
                  </div>
                  <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                    <h4 className="font-semibold text-green-800 mb-1">NJCAA 1st Place</h4>
                    <p className="text-green-700 text-sm">Championship winner with Boston City FC</p>
                  </div>
                  <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                    <h4 className="font-semibold text-blue-800 mb-1">USL 2 Competition</h4>
                    <p className="text-blue-700 text-sm">Currently competing at semi-professional level</p>
                  </div>
                  <div className="bg-amber-50 p-3 rounded-lg border border-amber-200">
                    <h4 className="font-semibold text-amber-800 mb-1">International Experience</h4>
                    <p className="text-amber-700 text-sm">Played in Colombia and USA systems</p>
                  </div>
                  <div className="bg-red-50 p-3 rounded-lg border border-red-200">
                    <h4 className="font-semibold text-red-800 mb-1">APSL Cup Competitor</h4>
                    <p className="text-red-700 text-sm">Competing in American Premier Soccer League Cup</p>
                  </div>
                  <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                    <h4 className="font-semibold text-blue-800 mb-1">US Open Cup Participant</h4>
                    <p className="text-blue-700 text-sm">National championship tournament player</p>
                  </div>
                  <div className="bg-green-50 p-3 rounded-lg border border-green-200">
                    <h4 className="font-semibold text-green-800 mb-1">Starting Defender</h4>
                    <p className="text-green-700 text-sm">Regular starter at LB/RB for Project Football</p>
                  </div>
                  <div className="bg-blue-50 p-3 rounded-lg border border-blue-200">
                    <h4 className="font-semibold text-blue-800 mb-1">Fisher College NAIA Starter</h4>
                    <p className="text-blue-700 text-sm">Starting left back in NAIA collegiate competition</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Achievements & Stats */}
        <section className="container py-12 bg-gray-100 border border-gray-200 rounded-lg">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Career Statistics</h2>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <Card className="bg-gray-50 border-gray-200 text-center">
              <CardContent className="pt-6">
                <Calendar className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">12+</h3>
                <p className="text-gray-600">Years Playing Experience</p>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200 text-center">
              <CardContent className="pt-6">
                <Trophy className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">5+</h3>
                <p className="text-gray-600">Major Tournaments</p>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200 text-center">
              <CardContent className="pt-6">
                <Star className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">2</h3>
                <p className="text-gray-600">Countries Played</p>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200 text-center">
              <CardContent className="pt-6">
                <Award className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">Active</h3>
                <p className="text-gray-600">Current Player Status</p>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Recent Highlights Video */}
        <section className="container py-12 bg-gradient-to-r from-red-50 to-blue-50 border border-red-200 rounded-lg mb-12">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-4 text-red-700">Recent Highlights</h2>
            <p className="text-lg text-gray-700 max-w-2xl mx-auto mb-8">
              Watch my latest performance highlights from Project Football, showcasing defensive skills, attacking runs,
              and key moments from recent matches.
            </p>

<div className="mt-6 grid gap-4 md:grid-cols-3">
                <Card className="bg-white border-red-200">
                  <CardContent className="pt-4 text-center">
                    <Trophy className="h-8 w-8 text-red-600 mx-auto mb-2" />
                    <h4 className="font-semibold text-gray-900">Defensive Plays</h4>
                    <p className="text-sm text-gray-600">Key tackles and interceptions</p>
                  </CardContent>
                </Card>

<Card className="bg-white border-amber-200">
                  <CardContent className="pt-4 text-center">
                    <Target className="h-8 w-8 text-amber-600 mx-auto mb-2" />
                    <h4 className="font-semibold text-gray-900">Attacking Runs</h4>
                    <p className="text-sm text-gray-600">Forward overlaps and crosses</p>
                  </CardContent>
                </Card>

<Card className="bg-white border-blue-200">
                  <CardContent className="pt-4 text-center">
                    <Award className="h-8 w-8 text-blue-600 mx-auto mb-2" />
                    <h4 className="font-semibold text-gray-900">Match Impact</h4>
                    <p className="text-sm text-gray-600">Game-changing moments</p>
                  </CardContent>
                </Card>
              </div>

<div className="mt-6 flex flex-wrap justify-center gap-2">
                <Badge variant="outline" className="border-red-600 text-red-700">
                  Project Football
                </Badge>
                <Badge variant="outline" className="border-blue-600 text-blue-700">
                  LB/RB Highlights
                </Badge>
                <Badge variant="outline" className="border-green-600 text-green-700">
                  2024 Season
                </Badge>
                <Badge variant="outline" className="border-amber-600 text-amber-700">
                  Match Highlights
                </Badge>
              </div>
            </div>
          </div>
        </section>

{/* Call to Action */}
        <section className="container py-12 text-center">
          <Card className="bg-gray-50 border-gray-200">
            <CardContent className="pt-8 pb-8">
              <h2 className="text-2xl font-bold mb-4 text-gray-900">Connect with Me</h2>
              <p className="text-gray-700 mb-6 max-w-2xl mx-auto">
                Whether you're interested in soccer development, coaching services, or want to discuss opportunities in
                collegiate or professional soccer, I'd love to connect and share my passion for the beautiful game.
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Button asChild className="bg-amber-700 hover:bg-amber-600 text-gray-100">
                  <Link href="/#connect">Get in Touch</Link>
                </Button>
                <Button
                  variant="outline"
                  asChild
                  className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent"
                >
                  <Link href="/">Back to Home</Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </section>
      </main>

{/* Footer */}
      <footer className="border-t border-gray-200 py-8 md:py-12">
        <div className="container flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex flex-col items-center md:items-start">
            <Link href="/" className="font-bold text-xl mb-2 text-red-700">
              Alejandro Guerrero
            </Link>
            <p className="text-sm text-gray-600 text-center md:text-left">
              Connecting through stories, ideas, and shared experiences.
            </p>
          </div>
          <div className="flex flex-col items-center md:items-end">
            <div className="flex space-x-4 mb-4">
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/#about">About</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/#interests">Interests</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/#thoughts">Thoughts</Link>
              </Button>
            </div>
            <p className="text-sm text-gray-500">© 2024 alejandroguerrerovargas.com. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/warriors-fc/page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, Trophy, Target, Users, Calendar, Award, Mail, Star, MapPin } from "lucide-react"
import Link from "next/link"

export default function WarriorsFCPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b border-gray-200 bg-white/90 backdrop-blur-md shadow-sm">
        <div className="container flex h-16 items-center justify-between">
          <Link href="/" className="flex items-center space-x-2">
            <span className="font-bold text-xl text-red-700">ALEJANDRO GUERRERO VARGAS</span>
          </Link>
          <Button variant="outline" asChild className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent">
            <Link href="/soccer-career">
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to Soccer Career
            </Link>
          </Button>
        </div>
      </header>

<main className="text-gray-900">
        {/* Hero Section */}
        <section className="container py-12 md:py-24">
          <div className="text-center mb-12">
            <div className="flex items-center justify-center gap-4 mb-6">
              <Trophy className="h-16 w-16 text-red-600" />
              <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-red-700">Warriors FC</h1>
            </div>
            <p className="max-w-[42rem] mx-auto text-xl text-gray-600 mb-6">
              Bridging American and Colombian soccer cultures through comprehensive player development
            </p>
            <div className="flex items-center justify-center gap-2 text-gray-600">
              <MapPin className="h-5 w-5 text-amber-600" />
              <span>Boston, MA → Bogotá, Colombia Connection</span>
            </div>
          </div>
        </section>

{/* Mission Statement */}
        <section className="container py-12 bg-gradient-to-r from-red-50 to-amber-50 border border-red-200 rounded-lg mb-12">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-6 text-red-700">Our Mission</h2>
            <p className="text-lg text-gray-700 max-w-4xl mx-auto mb-8">
              Warriors FC is a transformative soccer development program designed to create pathways for talented
              players to achieve their dreams of playing at US universities and professional levels, while maintaining
              strong connections to Colombian soccer heritage and excellence.
            </p>
            <div className="grid gap-4 md:grid-cols-3 max-w-4xl mx-auto">
              <Card className="bg-white border-red-200">
                <CardContent className="pt-6 text-center">
                  <Trophy className="h-12 w-12 text-red-600 mx-auto mb-4" />
                  <h3 className="font-bold text-gray-900 mb-2">Excellence</h3>
                  <p className="text-gray-600">
                    Striving for the highest standards in training and character development
                  </p>
                </CardContent>
              </Card>
              <Card className="bg-white border-amber-200">
                <CardContent className="pt-6 text-center">
                  <Target className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                  <h3 className="font-bold text-gray-900 mb-2">Opportunity</h3>
                  <p className="text-gray-600">Creating pathways to US universities and professional soccer</p>
                </CardContent>
              </Card>
              <Card className="bg-white border-blue-200">
                <CardContent className="pt-6 text-center">
                  <Star className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                  <h3 className="font-bold text-gray-900 mb-2">Heritage</h3>
                  <p className="text-gray-600">Honoring Colombian soccer traditions while embracing American systems</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Services */}
        <section className="container py-12">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Our Services</h2>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
            <Card className="bg-gray-50 border-amber-200">
              <CardContent className="pt-8 text-center">
                <Users className="h-16 w-16 text-amber-600 mx-auto mb-6" />
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Personal Training</h3>
                <p className="text-gray-600 mb-6">
                  One-on-one skill development sessions focused on technical abilities, tactical awareness, and physical
                  conditioning tailored to each player's needs and goals.
                </p>
                <div className="space-y-2 text-sm text-gray-700">
                  <p>• Individual skill development</p>
                  <p>• Fitness and conditioning</p>
                  <p>• Position-specific training</p>
                  <p>• Mental preparation</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-blue-200">
              <CardContent className="pt-8 text-center">
                <Target className="h-16 w-16 text-blue-600 mx-auto mb-6" />
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Film & VEO Charts</h3>
                <p className="text-gray-600 mb-6">
                  Advanced video analysis using cutting-edge technology to break down performance, identify areas for
                  improvement, and track progress over time.
                </p>
                <div className="space-y-2 text-sm text-gray-700">
                  <p>• Match performance analysis</p>
                  <p>• Technical skill assessment</p>
                  <p>• Tactical understanding review</p>
                  <p>• Progress tracking charts</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-green-200">
              <CardContent className="pt-8 text-center">
                <Award className="h-16 w-16 text-green-600 mx-auto mb-6" />
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Video Highlights</h3>
                <p className="text-gray-600 mb-6">
                  Professional-quality highlight reels showcasing each player's best moments, skills, and achievements
                  for college recruitment and scholarship opportunities.
                </p>
                <div className="space-y-2 text-sm text-gray-700">
                  <p>• Professional editing</p>
                  <p>• Recruitment-focused content</p>
                  <p>• Multiple format delivery</p>
                  <p>• Regular updates</p>
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-purple-200">
              <CardContent className="pt-8 text-center">
                <Mail className="h-16 w-16 text-purple-600 mx-auto mb-6" />
                <h3 className="text-xl font-semibold text-gray-900 mb-4">Draft Emails to Coaches</h3>
                <p className="text-gray-600 mb-6">
                  Strategic communication support to help players connect with college coaches, including personalized
                  outreach and professional correspondence.
                </p>
                <div className="space-y-2 text-sm text-gray-700">
                  <p>• Personalized coach outreach</p>
                  <p>• Professional communication</p>
                  <p>• Follow-up strategies</p>
                  <p>• Recruitment timeline planning</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Coaching Philosophy */}
        <section className="container py-12 bg-gray-100 border border-gray-200 rounded-lg">
          <div className="grid gap-12 lg:grid-cols-2 items-center">
            <div>
              <h2 className="text-3xl font-bold mb-6 text-gray-900">Coaching Philosophy</h2>
              <p className="text-lg text-gray-700 mb-6">
                My coaching approach combines the technical excellence and creativity of Colombian soccer with the
                strategic discipline and athletic development of American collegiate sports systems.
              </p>

<div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="bg-red-100 p-2 rounded-lg">
                    <Trophy className="h-6 w-6 text-red-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Excellence in Everything</h4>
                    <p className="text-gray-600">
                      Demanding the highest standards in training, character development, and academic achievement.
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-amber-100 p-2 rounded-lg">
                    <Target className="h-6 w-6 text-amber-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Opportunity Creation</h4>
                    <p className="text-gray-600">
                      Building clear pathways to US universities and professional soccer through strategic planning.
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-blue-100 p-2 rounded-lg">
                    <Star className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Cultural Heritage</h4>
                    <p className="text-gray-600">
                      Celebrating Colombian soccer traditions while adapting to American collegiate systems.
                    </p>
                  </div>
                </div>

<div className="flex items-start gap-4">
                  <div className="bg-green-100 p-2 rounded-lg">
                    <Users className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900 mb-2">Innovation & Technology</h4>
                    <p className="text-gray-600">
                      Using modern analysis tools and training methods for optimal player development.
                    </p>
                  </div>
                </div>
              </div>
            </div>

<div className="space-y-6">
              <Card className="bg-gradient-to-r from-red-50 to-amber-50 border-red-200">
                <CardContent className="pt-6">
                  <h3 className="text-xl font-bold text-red-700 mb-4">Player Development Focus</h3>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-2">Technical Skills</h4>
                      <ul className="text-sm text-gray-600 space-y-1">
                        <li>• Ball control and first touch</li>
                        <li>• Passing accuracy and vision</li>
                        <li>• Shooting technique</li>
                        <li>• Defensive positioning</li>
                      </ul>
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-2">Character Building</h4>
                      <ul className="text-sm text-gray-600 space-y-1">
                        <li>• Leadership development</li>
                        <li>• Mental resilience</li>
                        <li>• Team collaboration</li>
                        <li>• Academic excellence</li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card className="bg-gradient-to-r from-blue-50 to-green-50 border-blue-200">
                <CardContent className="pt-6">
                  <h3 className="text-xl font-bold text-blue-700 mb-4">Success Pathways</h3>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                        1
                      </div>
                      <span className="text-gray-700">Initial assessment and goal setting</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                        2
                      </div>
                      <span className="text-gray-700">Customized training and development plan</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                        3
                      </div>
                      <span className="text-gray-700">College recruitment and scholarship support</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                        4
                      </div>
                      <span className="text-gray-700">Ongoing mentorship and career guidance</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

{/* Testimonials */}
        <section className="container py-12">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">What Players & Parents Say</h2>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            <Card className="bg-gray-50 border-gray-200">
              <CardContent className="pt-6">
                <div className="flex items-center gap-4 mb-4">
                  <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                    <Users className="h-6 w-6 text-red-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">Maria Rodriguez</h4>
                    <p className="text-sm text-gray-600">Parent</p>
                  </div>
                </div>
                <blockquote className="text-gray-700 italic mb-4">
                  "Coach Alejandro helped my son not just improve his soccer skills, but also gain confidence and learn
                  the value of teamwork. His bilingual approach really connected with our family and our Colombian
                  heritage."
                </blockquote>
                <div className="flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200">
              <CardContent className="pt-6">
                <div className="flex items-center gap-4 mb-4">
                  <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <Trophy className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">David Chen</h4>
                    <p className="text-sm text-gray-600">U14 Player</p>
                  </div>
                </div>
                <blockquote className="text-gray-700 italic mb-4">
                  "Alejandro brings such passion and energy to every practice. He makes learning fun while teaching us
                  important life lessons through soccer. I've improved so much since joining Warriors FC!"
                </blockquote>
                <div className="flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200">
              <CardContent className="pt-6">
                <div className="flex items-center gap-4 mb-4">
                  <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <Award className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <h4 className="font-semibold text-gray-900">Carlos Martinez</h4>
                    <p className="text-sm text-gray-600">Warriors FC Parent</p>
                  </div>
                </div>
                <blockquote className="text-gray-700 italic mb-4">
                  "Warriors FC has been incredible for my son's development. The combination of technical training,
                  video analysis, and college recruitment support has opened doors we never thought possible. Coach
                  Alejandro's vision of connecting Colombian excellence with American opportunities is truly unique."
                </blockquote>
                <div className="flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Stats & Achievements */}
        <section className="container py-12 bg-gray-100 border border-gray-200 rounded-lg">
          <h2 className="text-3xl font-bold text-center mb-12 text-gray-900">Warriors FC Impact</h2>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <Card className="bg-white border-red-200 text-center">
              <CardContent className="pt-6">
                <Users className="h-12 w-12 text-red-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">50+</h3>
                <p className="text-gray-600">Players Coached</p>
              </CardContent>
            </Card>

<Card className="bg-white border-amber-200 text-center">
              <CardContent className="pt-6">
                <Trophy className="h-12 w-12 text-amber-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">15+</h3>
                <p className="text-gray-600">College Scholarships</p>
              </CardContent>
            </Card>

<Card className="bg-white border-blue-200 text-center">
              <CardContent className="pt-6">
                <Star className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">100%</h3>
                <p className="text-gray-600">Player Retention Rate</p>
              </CardContent>
            </Card>

<Card className="bg-white border-green-200 text-center">
              <CardContent className="pt-6">
                <Award className="h-12 w-12 text-green-600 mx-auto mb-4" />
                <h3 className="text-2xl font-bold text-gray-900 mb-2">3+</h3>
                <p className="text-gray-600">Years of Excellence</p>
              </CardContent>
            </Card>
          </div>
        </section>

{/* Contact & Get Started */}
        <section className="container py-12">
          <div className="grid gap-12 lg:grid-cols-2">
            <Card className="bg-gradient-to-r from-red-50 to-amber-50 border-red-200">
              <CardContent className="pt-8 pb-8">
                <h2 className="text-2xl font-bold mb-6 text-red-700">Ready to Start Your Journey?</h2>
                <p className="text-gray-700 mb-6">
                  Join Warriors FC and take the first step toward achieving your soccer dreams. Whether you're aiming
                  for college scholarships or professional opportunities, we're here to guide you every step of the way.
                </p>

<div className="space-y-4 mb-6">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm">
                      ✓
                    </div>
                    <span className="text-gray-700">Free initial assessment</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm">
                      ✓
                    </div>
                    <span className="text-gray-700">Customized development plan</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-red-600 text-white rounded-full flex items-center justify-center text-sm">
                      ✓
                    </div>
                    <span className="text-gray-700">Ongoing mentorship and support</span>
                  </div>
                </div>

<Button asChild className="w-full bg-red-700 hover:bg-red-600 text-white">
                  <Link href="/#connect">Get Started Today</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="bg-gray-50 border-gray-200">
              <CardContent className="pt-8 pb-8">
                <h2 className="text-2xl font-bold mb-6 text-gray-900">Contact Information</h2>

<div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <Mail className="h-6 w-6 text-amber-600 mt-1" />
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1">Email</h4>
                      <p className="text-gray-600">alejandrogv0425@gmail.com</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <MapPin className="h-6 w-6 text-amber-600 mt-1" />
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1">Location</h4>
                      <p className="text-gray-600">Boston, MA with connections to Bogotá, Colombia</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <Users className="h-6 w-6 text-amber-600 mt-1" />
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1">Age Groups</h4>
                      <p className="text-gray-600">U12 - U16 specialized training programs</p>
                    </div>
                  </div>

<div className="flex items-start gap-4">
                    <Calendar className="h-6 w-6 text-amber-600 mt-1" />
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-1">Training Schedule</h4>
                      <p className="text-gray-600">Flexible scheduling to accommodate school and other commitments</p>
                    </div>
                  </div>
                </div>

<div className="mt-8 pt-6 border-t border-gray-200">
                  <h4 className="font-semibold text-gray-900 mb-4">Follow Our Journey</h4>
                  <div className="flex gap-4">
                    <Button
                      variant="outline"
                      size="sm"
                      className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent"
                    >
                      Instagram
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent"
                    >
                      Twitter
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="border-gray-300 text-gray-700 hover:bg-gray-200 bg-transparent"
                    >
                      YouTube
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </section>
      </main>

{/* Footer */}
      <footer className="border-t border-gray-200 py-8 md:py-12">
        <div className="container flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex flex-col items-center md:items-start">
            <Link href="/" className="font-bold text-xl mb-2 text-red-700">
              Warriors FC
            </Link>
            <p className="text-sm text-gray-600 text-center md:text-left">Bridging cultures, building champions.</p>
          </div>
          <div className="flex flex-col items-center md:items-end">
            <div className="flex space-x-4 mb-4">
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/">Home</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/soccer-career">Soccer Career</Link>
              </Button>
              <Button variant="ghost" size="sm" asChild className="text-gray-600 hover:text-amber-600">
                <Link href="/#connect">Contact</Link>
              </Button>
            </div>
            <p className="text-sm text-gray-500">© 2024 Warriors FC. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>