[V0_FILE]typescript:file="tailwind.config.ts" isMerged="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: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "#059669", // emerald-600 foreground: "#ffffff", }, secondary: { DEFAULT: "#f0fdf4", // green-50 foreground: "#166534", // green-800 }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "#f0fdf4", // green-50 foreground: "#166534", // green-800 }, accent: { DEFAULT: "#dcfce7", // green-100 foreground: "#166534", // green-800 }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, emerald: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Award, Camera, Globe, Leaf, MapPin, Play, Plus, Upload, Youtube } from "lucide-react" import Image from "next/image" import Link from "next/link" export default function HomePage() { return (

{/* Navigation */} {/* Hero Section */}

Climate Artist & Activist

Halisi Monray

From Kenya, Based in Rwanda

Global Impact

Bridging art and activism to create powerful narratives around climate change and social justice across Africa. Through creative expression, I amplify voices and drive meaningful change in our communities.

Education

Diploma in International Organisation Management
University of Geneva

{/* Description Section */}

About My Work

<Button className="bg-emerald-600 hover:bg-emerald-700">Save Description</Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* YouTube Videos Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">My Creative Work</h2>
            <p className="text-emerald-600">Explore my artistic journey through video content</p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {[1, 2, 3].map((i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardContent className="p-4">
                  <div className="bg-emerald-100 rounded-lg aspect-video flex items-center justify-center mb-4">
                    <Play className="h-12 w-12 text-emerald-600" />
                  </div>
                  <h3 className="font-semibold text-emerald-800 mb-2">Climate Art Project {i}</h3>
                  <p className="text-sm text-emerald-600 mb-3">
                    Description of the artistic work and its impact on climate awareness.
                  </p>
                  <Button size="sm" variant="outline" className="w-full">
                    <Youtube className="h-4 w-4 mr-1" />
                    Watch Video
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800">Add New Video</CardTitle>
              <CardDescription>Embed your latest YouTube content</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="video-title">Video Title</Label>
                  <Input id="video-title" placeholder="Enter video title" className="border-emerald-200" />
                </div>
                <div>
                  <Label htmlFor="youtube-url">YouTube URL</Label>
                  <Input
                    id="youtube-url"
                    placeholder="https://youtube.com/watch?v=..."
                    className="border-emerald-200"
                  />
                </div>
              </div>
              <div>
                <Label htmlFor="video-description">Description</Label>
                <Textarea
                  id="video-description"
                  placeholder="Describe your video content..."
                  className="border-emerald-200"
                />
              </div>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <Plus className="h-4 w-4 mr-1" />
                Add Video
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Photo Gallery Section */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Photo Gallery</h2>
            <p className="text-emerald-600">Visual documentation of my artistic journey</p>
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800 flex items-center space-x-2">
                <Camera className="h-5 w-5" />
                <span>Upload New Photos</span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-emerald-300 rounded-lg p-8 text-center hover:border-emerald-400 transition-colors">
                <Upload className="h-12 w-12 text-emerald-400 mx-auto mb-4" />
                <p className="text-emerald-600 mb-2">Drag and drop your photos here</p>
                <p className="text-sm text-emerald-500 mb-4">or click to browse files</p>
                <Button variant="outline" className="border-emerald-300 text-emerald-600 hover:bg-emerald-50">
                  Choose Files
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Awards and Achievements */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Awards & Achievements</h2>
            <p className="text-emerald-600">Recognition for climate activism and artistic excellence</p>
          </div>

<div className="grid md:grid-cols-2 gap-6 mb-8">
            {[
              {
                title: "Climate Art Excellence Award",
                year: "2024",
                organization: "African Climate Foundation",
                description: "Recognized for outstanding contribution to climate awareness through artistic expression",
              },
              {
                title: "Social Justice Creative Impact",
                year: "2023",
                organization: "Rwanda Arts Council",
                description: "Honored for using art to promote social justice and community engagement",
              },
              {
                title: "Environmental Advocacy Recognition",
                year: "2023",
                organization: "East African Climate Network",
                description: "Acknowledged for innovative approaches to environmental education",
              },
              {
                title: "Community Leadership Award",
                year: "2022",
                organization: "Geneva International Centre",
                description: "Celebrated for bridging international relations and grassroots activism",
              },
            ].map((award, i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-start space-x-4">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <Award className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold text-emerald-800">{award.title}</h3>
                        <Badge variant="secondary" className="bg-emerald-100 text-emerald-700">
                          {award.year}
                        </Badge>
                      </div>
                      <p className="text-sm font-medium text-emerald-600 mb-2">{award.organization}</p>
                      <p className="text-sm text-emerald-700">{award.description}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800">Add New Achievement</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="award-title">Award/Achievement Title</Label>
                  <Input id="award-title" placeholder="Enter award title" className="border-emerald-200" />
                </div>
                <div>
                  <Label htmlFor="award-year">Year</Label>
                  <Input id="award-year" placeholder="2024" className="border-emerald-200" />
                </div>
              </div>
              <div>
                <Label htmlFor="award-org">Organization</Label>
                <Input id="award-org" placeholder="Awarding organization" className="border-emerald-200" />
              </div>
              <div>
                <Label htmlFor="award-desc">Description</Label>
                <Textarea id="award-desc" placeholder="Describe the achievement..." className="border-emerald-200" />
              </div>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <Plus className="h-4 w-4 mr-1" />
                Add Achievement
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Social Media Section */}
      <section className="py-16 px-4 bg-emerald-900">
        <div className="container mx-auto max-w-4xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-white mb-4">Connect With Me</h2>
            <p className="text-emerald-200">
              Follow my journey and stay updated on climate activism and creative projects
            </p>
          </div>

<Card className="border-emerald-700 bg-emerald-800/50 backdrop-blur-sm">
            <CardHeader>
              <CardTitle className="text-white flex items-center space-x-2">
                <span>Social Media Handles</span>
                <Button
                  size="sm"
                  variant="outline"
                  className="ml-auto border-emerald-400 text-emerald-200 hover:bg-emerald-700"
                >
                  <Plus className="h-4 w-4 mr-1" />
                  Edit
                </Button>
              </CardTitle>
              <CardDescription className="text-emerald-200">
                Manage your social media presence and contact information
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                {[
                  { platform: "Instagram", handle: "@halisimonray", icon: "📸", color: "bg-pink-500" },
                  { platform: "Twitter/X", handle: "@halisimonray", icon: "🐦", color: "bg-blue-500" },
                  { platform: "LinkedIn", handle: "halisi-monray", icon: "💼", color: "bg-blue-600" },
                  { platform: "YouTube", handle: "@HalisiMonrayArt", icon: "📺", color: "bg-red-500" },
                  { platform: "Facebook", handle: "HalisiMonrayClimateArt", icon: "👥", color: "bg-blue-700" },
                  { platform: "TikTok", handle: "@halisiclimate", icon: "🎵", color: "bg-black" },
                ].map((social, i) => (
                  <div
                    key={i}
                    className="flex items-center space-x-4 p-4 bg-emerald-700/30 rounded-lg border border-emerald-600"
                  >
                    <div
                      className={`w-12 h-12 ${social.color} rounded-full flex items-center justify-center text-white text-xl`}
                    >
                      {social.icon}
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold text-white">{social.platform}</h3>
                      <p className="text-emerald-200">{social.handle}</p>
                    </div>
                    <Button
                      size="sm"
                      variant="outline"
                      className="border-emerald-400 text-emerald-200 hover:bg-emerald-600"
                    >
                      Edit
                    </Button>
                  </div>
                ))}
              </div>

<div className="border-t border-emerald-600 pt-6">
                <h3 className="text-white font-semibold mb-4">Add New Social Media Platform</h3>
                <div className="grid md:grid-cols-3 gap-4">
                  <div>
                    <Label htmlFor="platform-name" className="text-emerald-200">
                      Platform
                    </Label>
                    <Input
                      id="platform-name"
                      placeholder="e.g., Instagram"
                      className="border-emerald-600 bg-emerald-800/50 text-white placeholder:text-emerald-300"
                    />
                  </div>
                  <div>
                    <Label htmlFor="platform-handle" className="text-emerald-200">
                      Handle/Username
                    </Label>
                    <Input
                      id="platform-handle"
                      placeholder="@username"
                      className="border-emerald-600 bg-emerald-800/50 text-white placeholder:text-emerald-300"
                    />
                  </div>
                  <div className="flex items-end">
                    <Button className="w-full bg-emerald-600 hover:bg-emerald-700">
                      <Plus className="h-4 w-4 mr-1" />
                      Add Platform
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-emerald-900 text-white py-12 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Leaf className="h-6 w-6" />
                <span className="text-xl font-bold">Halisi Monray</span>
              </div>
              <p className="text-emerald-200">
                Climate artist and activist creating change through creative expression.
              </p>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Quick Links</h3>
              <div className="space-y-2">
                <Link href="/" className="block text-emerald-200 hover:text-white">
                  About
                </Link>
                <Link href="/creative-awards" className="block text-emerald-200 hover:text-white">
                  Creative Awards
                </Link>
                <Link href="/awards-2025" className="block text-emerald-200 hover:text-white">
                  Awards 2025
                </Link>
              </div>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Contact</h3>
              <p className="text-emerald-200">
                Based in Rwanda
                <br />
                Climate Artist & Activist
                <br />
                University of Geneva Alumni
              </p>
            </div>
          </div>
          <div className="border-t border-emerald-800 mt-8 pt-8 text-center text-emerald-200">
            <p>© 2024 Halisi Monray. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/creative-awards/page.tsx" isEdit="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Award, Camera, Leaf, Plus, Trophy, Upload, Users } from "lucide-react"
import Image from "next/image"
import Link from "next/link"

export default function CreativeAwardsPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50">
      {/* Navigation */}
      <nav className="bg-white/80 backdrop-blur-md border-b border-emerald-200 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Leaf className="h-8 w-8 text-emerald-600" />
              <span className="text-2xl font-bold text-emerald-800">Halisi Monray</span>
            </div>
            <div className="hidden md:flex space-x-6">
              <Link href="/" className="text-emerald-700 hover:text-emerald-900 font-medium">
                About
              </Link>
              <Link
                href="/creative-awards"
                className="text-emerald-700 hover:text-emerald-900 font-medium border-b-2 border-emerald-600"
              >
                Creative Awards
              </Link>
              <Link href="/awards-2025" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Awards 2025
              </Link>
              <Link href="/contact" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Contact
              </Link>
            </div>
          </div>
        </div>
      </nav>

{/* Hero Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl text-center">
          <div className="space-y-6">
            <Badge className="bg-emerald-100 text-emerald-800 hover:bg-emerald-200 text-lg px-4 py-2">
              Celebrating Excellence
            </Badge>
            <h1 className="text-5xl lg:text-6xl font-bold text-emerald-900 leading-tight">
              Africa Climate & Social Justice
              <span className="block text-emerald-600">Creative Awards</span>
            </h1>
            <p className="text-xl text-emerald-700 max-w-3xl mx-auto leading-relaxed">
              Recognizing and celebrating African creatives who use their talents to address climate change and promote
              social justice across the continent.
            </p>
            <div className="flex items-center justify-center space-x-8 text-emerald-600">
              <div className="flex items-center space-x-2">
                <Trophy className="h-6 w-6" />
                <span className="font-medium">Excellence in Art</span>
              </div>
              <div className="flex items-center space-x-2">
                <Users className="h-6 w-6" />
                <span className="font-medium">Community Impact</span>
              </div>
              <div className="flex items-center space-x-2">
                <Leaf className="h-6 w-6" />
                <span className="font-medium">Climate Action</span>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Description Section */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-emerald-200 shadow-lg">
            <CardHeader>
              <CardTitle className="text-2xl text-emerald-800 flex items-center space-x-2">
                <span>About the Awards</span>
                <Button size="sm" variant="outline" className="ml-auto">
                  <Plus className="h-4 w-4 mr-1" />
                  Edit
                </Button>
              </CardTitle>
              <CardDescription className="text-emerald-600">
                Share the vision and mission behind these prestigious awards
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Textarea
                placeholder="Describe the purpose, vision, and impact of the Africa Climate & Social Justice Creative Awards..."
                className="min-h-40 border-emerald-200 focus:border-emerald-400"
                defaultValue="The Africa Climate & Social Justice Creative Awards celebrate the power of creativity in driving environmental and social change across Africa. These awards recognize artists, filmmakers, writers, musicians, and other creatives who use their platforms to raise awareness about climate issues while promoting social justice and equity.

Our mission is to amplify African voices in the global climate conversation, showcase innovative creative solutions to environmental challenges, and build a network of change-makers who understand that climate action and social justice are inseparably linked.

Through these awards, we aim to inspire a new generation of African creatives to use their talents for positive change, while providing recognition and support for those already making a difference in their communities."
              />
              <Button className="bg-emerald-600 hover:bg-emerald-700">Save Description</Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Achievements So Far */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Achievements So Far</h2>
            <p className="text-emerald-600">Milestones and impact of our creative awards program</p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            {[
              { number: "150+", label: "Applications Received", icon: Users },
              { number: "25", label: "Award Winners", icon: Trophy },
              { number: "12", label: "African Countries", icon: Leaf },
              { number: "50K+", label: "People Reached", icon: Award },
            ].map((stat, i) => (
              <Card key={i} className="border-emerald-200 text-center hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="bg-emerald-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <stat.icon className="h-8 w-8 text-emerald-600" />
                  </div>
                  <h3 className="text-3xl font-bold text-emerald-800 mb-2">{stat.number}</h3>
                  <p className="text-emerald-600 font-medium">{stat.label}</p>
                </CardContent>
              </Card>
            ))}
          </div>

<div className="grid md:grid-cols-2 gap-8 mb-8">
            {[
              {
                title: "Program Launch Success",
                description:
                  "Successfully launched the inaugural Africa Climate & Social Justice Creative Awards with overwhelming response from the creative community across Africa.",
                date: "January 2024",
              },
              {
                title: "Partnership Development",
                description:
                  "Established partnerships with leading African cultural institutions, environmental organizations, and international climate foundations.",
                date: "March 2024",
              },
              {
                title: "First Award Ceremony",
                description:
                  "Hosted the first annual award ceremony in Kigali, Rwanda, bringing together winners and climate advocates from across the continent.",
                date: "June 2024",
              },
              {
                title: "Impact Documentation",
                description:
                  "Published comprehensive impact report showcasing how award winners have influenced climate awareness in their communities.",
                date: "September 2024",
              },
            ].map((achievement, i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-start space-x-4">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <Award className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-2">
                        <h3 className="font-semibold text-emerald-800">{achievement.title}</h3>
                        <Badge variant="secondary" className="bg-emerald-100 text-emerald-700">
                          {achievement.date}
                        </Badge>
                      </div>
                      <p className="text-emerald-700">{achievement.description}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800">Add New Achievement</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="achievement-title">Achievement Title</Label>
                  <Input id="achievement-title" placeholder="Enter achievement title" className="border-emerald-200" />
                </div>
                <div>
                  <Label htmlFor="achievement-date">Date</Label>
                  <Input id="achievement-date" placeholder="Month Year" className="border-emerald-200" />
                </div>
              </div>
              <div>
                <Label htmlFor="achievement-desc">Description</Label>
                <Textarea
                  id="achievement-desc"
                  placeholder="Describe the achievement..."
                  className="border-emerald-200"
                />
              </div>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <Plus className="h-4 w-4 mr-1" />
                Add Achievement
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* 2024 Edition Photos */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">2024 Edition Highlights</h2>
            <p className="text-emerald-600">Capturing moments from our inaugural awards ceremony</p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
              <div key={i} className="relative group">
                <Image
                  src={`/placeholder.svg?height=300&width=400`}
                  alt={`2024 Awards ceremony photo ${i}`}
                  width={400}
                  height={300}
                  className="rounded-lg object-cover w-full h-64 group-hover:scale-105 transition-transform"
                />
                <div className="absolute inset-0 bg-emerald-900/0 group-hover:bg-emerald-900/20 rounded-lg transition-colors flex items-end p-4">
                  <p className="text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                    Award Ceremony Moment {i}
                  </p>
                </div>
              </div>
            ))}
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800 flex items-center space-x-2">
                <Camera className="h-5 w-5" />
                <span>Upload 2024 Edition Photos</span>
              </CardTitle>
              <CardDescription>Add more photos from the 2024 awards ceremony and events</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-emerald-300 rounded-lg p-8 text-center hover:border-emerald-400 transition-colors">
                <Upload className="h-12 w-12 text-emerald-400 mx-auto mb-4" />
                <p className="text-emerald-600 mb-2">Drag and drop your 2024 photos here</p>
                <p className="text-sm text-emerald-500 mb-4">or click to browse files</p>
                <Button variant="outline" className="border-emerald-300 text-emerald-600 hover:bg-emerald-50">
                  Choose Files
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-emerald-900 text-white py-12 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Leaf className="h-6 w-6" />
                <span className="text-xl font-bold">Halisi Monray</span>
              </div>
              <p className="text-emerald-200">
                Climate artist and activist creating change through creative expression.
              </p>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Quick Links</h3>
              <div className="space-y-2">
                <Link href="/" className="block text-emerald-200 hover:text-white">
                  About
                </Link>
                <Link href="/creative-awards" className="block text-emerald-200 hover:text-white">
                  Creative Awards
                </Link>
                <Link href="/awards-2025" className="block text-emerald-200 hover:text-white">
                  Awards 2025
                </Link>
              </div>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Contact</h3>
              <p className="text-emerald-200">
                Based in Rwanda
                <br />
                Climate Artist & Activist
                <br />
                University of Geneva Alumni
              </p>
            </div>
          </div>
          <div className="border-t border-emerald-800 mt-8 pt-8 text-center text-emerald-200">
            <p>© 2024 Halisi Monray. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/awards-2025/page.tsx" isEdit="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Calendar, Globe, Handshake, Leaf, Mail, Plus, Target, Users } from "lucide-react"
import Link from "next/link"

export default function Awards2025Page() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50">
      {/* Navigation */}
      <nav className="bg-white/80 backdrop-blur-md border-b border-emerald-200 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Leaf className="h-8 w-8 text-emerald-600" />
              <span className="text-2xl font-bold text-emerald-800">Halisi Monray</span>
            </div>
            <div className="hidden md:flex space-x-6">
              <Link href="/" className="text-emerald-700 hover:text-emerald-900 font-medium">
                About
              </Link>
              <Link href="/creative-awards" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Creative Awards
              </Link>
              <Link
                href="/awards-2025"
                className="text-emerald-700 hover:text-emerald-900 font-medium border-b-2 border-emerald-600"
              >
                Awards 2025
              </Link>
              <Link href="/contact" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Contact
              </Link>
            </div>
          </div>
        </div>
      </nav>

{/* Hero Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-6xl text-center">
          <div className="space-y-6">
            <Badge className="bg-emerald-100 text-emerald-800 hover:bg-emerald-200 text-lg px-4 py-2">
              Call for Partners
            </Badge>
            <h1 className="text-5xl lg:text-6xl font-bold text-emerald-900 leading-tight">
              Africa Climate & Social Justice
              <span className="block text-emerald-600">Awards 2025</span>
            </h1>
            <p className="text-xl text-emerald-700 max-w-3xl mx-auto leading-relaxed">
              Join us in expanding our impact across Africa. We're seeking partners who share our vision of empowering
              African creatives to drive climate action and social justice.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700 text-lg px-8 py-3">
                <Handshake className="h-5 w-5 mr-2" />
                Become a Partner
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="border-emerald-300 text-emerald-700 hover:bg-emerald-50 text-lg px-8 py-3"
              >
                <Mail className="h-5 w-5 mr-2" />
                Contact Us
              </Button>
            </div>
          </div>
        </div>
      </section>

{/* Partnership Call Section */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Why Partner With Us?</h2>
            <p className="text-emerald-600 max-w-2xl mx-auto">
              Together, we can amplify the voices of African creatives and create lasting change in climate action and
              social justice.
            </p>
          </div>

<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            {[
              {
                icon: Globe,
                title: "Continental Reach",
                description:
                  "Access to creative communities across all 54 African countries, expanding your organization's impact and visibility.",
              },
              {
                icon: Users,
                title: "Diverse Network",
                description:
                  "Connect with artists, filmmakers, writers, musicians, and activists who are driving change in their communities.",
              },
              {
                icon: Target,
                title: "Measurable Impact",
                description:
                  "Track and measure the real-world impact of creative projects on climate awareness and social justice initiatives.",
              },
              {
                icon: Handshake,
                title: "Collaborative Approach",
                description:
                  "Work alongside like-minded organizations to create synergies and maximize the effectiveness of climate action.",
              },
              {
                icon: Calendar,
                title: "Year-Round Engagement",
                description:
                  "Participate in workshops, mentorship programs, and events throughout the year, not just during awards season.",
              },
              {
                icon: Leaf,
                title: "Sustainable Development",
                description:
                  "Contribute to achieving UN Sustainable Development Goals through creative and innovative approaches.",
              },
            ].map((benefit, i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardContent className="p-6 text-center">
                  <div className="bg-emerald-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                    <benefit.icon className="h-8 w-8 text-emerald-600" />
                  </div>
                  <h3 className="text-xl font-semibold text-emerald-800 mb-3">{benefit.title}</h3>
                  <p className="text-emerald-700">{benefit.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>

<Card className="border-emerald-200 bg-gradient-to-r from-emerald-50 to-teal-50">
            <CardContent className="p-8 text-center">
              <h3 className="text-2xl font-bold text-emerald-800 mb-4">Ready to Make a Difference?</h3>
              <p className="text-emerald-700 mb-6 max-w-2xl mx-auto">
                Join our growing network of partners committed to supporting African creativity in the fight against
                climate change. Together, we can create a more sustainable and just future for Africa.
              </p>
              <Button size="lg" className="bg-emerald-600 hover:bg-emerald-700">
                <Handshake className="h-5 w-5 mr-2" />
                Start Partnership Discussion
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Description Section */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-4xl">
          <Card className="border-emerald-200 shadow-lg">
            <CardHeader>
              <CardTitle className="text-2xl text-emerald-800 flex items-center space-x-2">
                <span>2025 Awards Description</span>
                <Button size="sm" variant="outline" className="ml-auto">
                  <Plus className="h-4 w-4 mr-1" />
                  Edit
                </Button>
              </CardTitle>
              <CardDescription className="text-emerald-600">
                Outline the vision and plans for the 2025 awards program
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <Textarea
                placeholder="Describe the 2025 awards program, its expanded scope, new categories, and enhanced impact..."
                className="min-h-40 border-emerald-200 focus:border-emerald-400"
                defaultValue="The 2025 Africa Climate & Social Justice Awards represent a significant expansion of our program, building on the success of our inaugural year. This year, we're introducing new categories including Digital Innovation for Climate Action, Community-Led Environmental Solutions, and Youth Climate Leadership.

Our 2025 program will feature enhanced mentorship opportunities, connecting award winners with established climate advocates and creative industry leaders. We're also launching the Climate Creative Residency Program, offering selected artists the opportunity to develop their projects with full support and resources.

With partnerships across government, private sector, and civil society, the 2025 awards will reach more communities, support more artists, and create greater impact in addressing Africa's climate challenges while promoting social justice and equity."
              />
              <Button className="bg-emerald-600 hover:bg-emerald-700">Save Description</Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Goals Section */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">2025 Goals & Objectives</h2>
            <p className="text-emerald-600">Our ambitious targets for expanding impact across Africa</p>
          </div>

<div className="grid md:grid-cols-2 gap-8 mb-8">
            {[
              {
                category: "Reach & Participation",
                goals: [
                  "Receive 500+ applications from across Africa",
                  "Engage creatives from all 54 African countries",
                  "Establish regional hubs in 10 major African cities",
                  "Launch multilingual application process (English, French, Arabic, Portuguese)",
                ],
              },
              {
                category: "Impact & Innovation",
                goals: [
                  "Support 50 climate-focused creative projects",
                  "Reach 1 million people through award winners' work",
                  "Document measurable climate awareness improvements",
                  "Create 25 new partnerships with environmental organizations",
                ],
              },
              {
                category: "Capacity Building",
                goals: [
                  "Launch Climate Creative Academy with 100 participants",
                  "Establish mentorship program with 50 mentor-mentee pairs",
                  "Provide funding support to 30 emerging climate artists",
                  "Host 12 regional workshops on climate storytelling",
                ],
              },
              {
                category: "Sustainability & Growth",
                goals: [
                  "Secure funding for 5-year program sustainability",
                  "Develop alumni network of 200+ climate creatives",
                  "Create annual impact report with measurable outcomes",
                  "Establish endowment fund for long-term program support",
                ],
              },
            ].map((section, i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardHeader>
                  <CardTitle className="text-emerald-800 flex items-center space-x-2">
                    <Target className="h-5 w-5" />
                    <span>{section.category}</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-3">
                    {section.goals.map((goal, j) => (
                      <li key={j} className="flex items-start space-x-3">
                        <div className="bg-emerald-100 rounded-full p-1 mt-1">
                          <div className="w-2 h-2 bg-emerald-600 rounded-full" />
                        </div>
                        <span className="text-emerald-700">{goal}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>

<Card className="border-emerald-200">
            <CardHeader>
              <CardTitle className="text-emerald-800">Add New Goal</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid md:grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="goal-category">Category</Label>
                  <Input id="goal-category" placeholder="e.g., Reach & Participation" className="border-emerald-200" />
                </div>
                <div>
                  <Label htmlFor="goal-target">Target/Metric</Label>
                  <Input id="goal-target" placeholder="e.g., 500+ applications" className="border-emerald-200" />
                </div>
              </div>
              <div>
                <Label htmlFor="goal-description">Goal Description</Label>
                <Textarea
                  id="goal-description"
                  placeholder="Describe the goal and its expected impact..."
                  className="border-emerald-200"
                />
              </div>
              <Button className="bg-emerald-600 hover:bg-emerald-700">
                <Plus className="h-4 w-4 mr-1" />
                Add Goal
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

{/* Partnership Tiers */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Partnership Opportunities</h2>
            <p className="text-emerald-600">Choose the partnership level that aligns with your organization's goals</p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            {[
              {
                tier: "Supporting Partner",
                price: "$5,000 - $15,000",
                features: [
                  "Logo placement on awards materials",
                  "Social media recognition",
                  "Access to networking events",
                  "Quarterly impact reports",
                ],
                color: "emerald",
              },
              {
                tier: "Strategic Partner",
                price: "$15,000 - $50,000",
                features: [
                  "All Supporting Partner benefits",
                  "Speaking opportunities at events",
                  "Co-branded content creation",
                  "Direct access to award winners",
                  "Custom partnership activations",
                ],
                color: "emerald",
                featured: true,
              },
              {
                tier: "Founding Partner",
                price: "$50,000+",
                features: [
                  "All Strategic Partner benefits",
                  "Board representation",
                  "Program co-design opportunities",
                  "Exclusive partner events",
                  "Multi-year partnership agreement",
                  "Custom impact measurement",
                ],
                color: "emerald",
              },
            ].map((tier, i) => (
              <Card
                key={i}
                className={`border-emerald-200 ${tier.featured ? "ring-2 ring-emerald-400 shadow-lg" : ""} hover:shadow-lg transition-shadow`}
              >
                {tier.featured && (
                  <div className="bg-emerald-600 text-white text-center py-2 rounded-t-lg">
                    <span className="font-medium">Most Popular</span>
                  </div>
                )}
                <CardHeader className="text-center">
                  <CardTitle className="text-2xl text-emerald-800">{tier.tier}</CardTitle>
                  <CardDescription className="text-xl font-semibold text-emerald-600">{tier.price}</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <ul className="space-y-3">
                    {tier.features.map((feature, j) => (
                      <li key={j} className="flex items-start space-x-3">
                        <div className="bg-emerald-100 rounded-full p-1 mt-1">
                          <div className="w-2 h-2 bg-emerald-600 rounded-full" />
                        </div>
                        <span className="text-emerald-700">{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Button className="w-full bg-emerald-600 hover:bg-emerald-700">Choose {tier.tier}</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-emerald-900 text-white py-12 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Leaf className="h-6 w-6" />
                <span className="text-xl font-bold">Halisi Monray</span>
              </div>
              <p className="text-emerald-200">
                Climate artist and activist creating change through creative expression.
              </p>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Quick Links</h3>
              <div className="space-y-2">
                <Link href="/" className="block text-emerald-200 hover:text-white">
                  About
                </Link>
                <Link href="/creative-awards" className="block text-emerald-200 hover:text-white">
                  Creative Awards
                </Link>
                <Link href="/awards-2025" className="block text-emerald-200 hover:text-white">
                  Awards 2025
                </Link>
              </div>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Contact</h3>
              <p className="text-emerald-200">
                Based in Rwanda
                <br />
                Climate Artist & Activist
                <br />
                University of Geneva Alumni
              </p>
            </div>
          </div>
          <div className="border-t border-emerald-800 mt-8 pt-8 text-center text-emerald-200">
            <p>© 2024 Halisi Monray. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Mail, Phone, MapPin, Clock, Send, Leaf, Globe, MessageSquare, Calendar, Users, Award } from "lucide-react"
import Link from "next/link"

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-emerald-50 via-green-50 to-teal-50">
      {/* Navigation */}
      <nav className="bg-white/80 backdrop-blur-md border-b border-emerald-200 sticky top-0 z-50">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Leaf className="h-8 w-8 text-emerald-600" />
              <span className="text-2xl font-bold text-emerald-800">Halisi Monray</span>
            </div>
            <div className="hidden md:flex space-x-6">
              <Link href="/" className="text-emerald-700 hover:text-emerald-900 font-medium">
                About
              </Link>
              <Link href="/creative-awards" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Creative Awards
              </Link>
              <Link href="/awards-2025" className="text-emerald-700 hover:text-emerald-900 font-medium">
                Awards 2025
              </Link>
              <Link
                href="/contact"
                className="text-emerald-700 hover:text-emerald-900 font-medium border-b-2 border-emerald-600"
              >
                Contact
              </Link>
            </div>
          </div>
        </div>
      </nav>

{/* Hero Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto max-w-4xl text-center">
          <div className="space-y-6">
            <Badge className="bg-emerald-100 text-emerald-800 hover:bg-emerald-200 text-lg px-4 py-2">
              Get In Touch
            </Badge>
            <h1 className="text-5xl lg:text-6xl font-bold text-emerald-900 leading-tight">Contact Me</h1>
            <p className="text-xl text-emerald-700 max-w-2xl mx-auto leading-relaxed">
              Let's collaborate on climate action, discuss partnership opportunities, or connect about creative projects
              that drive social change.
            </p>
          </div>
        </div>
      </section>

{/* Contact Form and Info */}
      <section className="py-16 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Contact Form */}
            <Card className="border-emerald-200 shadow-lg">
              <CardHeader>
                <CardTitle className="text-2xl text-emerald-800 flex items-center space-x-2">
                  <MessageSquare className="h-6 w-6" />
                  <span>Send a Message</span>
                </CardTitle>
                <CardDescription className="text-emerald-600">
                  Fill out the form below and I'll get back to you as soon as possible.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="first-name">First Name *</Label>
                    <Input
                      id="first-name"
                      placeholder="Your first name"
                      className="border-emerald-200 focus:border-emerald-400"
                      required
                    />
                  </div>
                  <div>
                    <Label htmlFor="last-name">Last Name *</Label>
                    <Input
                      id="last-name"
                      placeholder="Your last name"
                      className="border-emerald-200 focus:border-emerald-400"
                      required
                    />
                  </div>
                </div>

<div>
                  <Label htmlFor="email">Email Address *</Label>
                  <Input
                    id="email"
                    type="email"
                    placeholder="your.email@example.com"
                    className="border-emerald-200 focus:border-emerald-400"
                    required
                  />
                </div>

<div>
                  <Label htmlFor="organization">Organization/Company</Label>
                  <Input
                    id="organization"
                    placeholder="Your organization (optional)"
                    className="border-emerald-200 focus:border-emerald-400"
                  />
                </div>

<div>
                  <Label htmlFor="subject">Subject *</Label>
                  <Select>
                    <SelectTrigger className="border-emerald-200 focus:border-emerald-400">
                      <SelectValue placeholder="Select a subject" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="partnership">Partnership Opportunity</SelectItem>
                      <SelectItem value="collaboration">Creative Collaboration</SelectItem>
                      <SelectItem value="awards">Awards Program Inquiry</SelectItem>
                      <SelectItem value="speaking">Speaking Engagement</SelectItem>
                      <SelectItem value="media">Media Interview</SelectItem>
                      <SelectItem value="general">General Inquiry</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label htmlFor="message">Message *</Label>
                  <Textarea
                    id="message"
                    placeholder="Tell me about your inquiry, project, or how we can work together..."
                    className="min-h-32 border-emerald-200 focus:border-emerald-400"
                    required
                  />
                </div>

<Button className="w-full bg-emerald-600 hover:bg-emerald-700 text-lg py-3">
                  <Send className="h-5 w-5 mr-2" />
                  Send Message
                </Button>

<p className="text-sm text-emerald-600 text-center">
                  * Required fields. I typically respond within 24-48 hours.
                </p>
              </CardContent>
            </Card>

{/* Contact Information */}
            <div className="space-y-6">
              {/* Contact Details */}
              <Card className="border-emerald-200 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-2xl text-emerald-800">Contact Information</CardTitle>
                  <CardDescription className="text-emerald-600">
                    Multiple ways to reach me for different types of inquiries
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center space-x-4 p-4 bg-emerald-50 rounded-lg">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <Mail className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-emerald-800">Email</h3>
                      <p className="text-emerald-700">halisi.monray@example.com</p>
                      <p className="text-sm text-emerald-600">For general inquiries and partnerships</p>
                    </div>
                  </div>

<div className="flex items-center space-x-4 p-4 bg-emerald-50 rounded-lg">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <Phone className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-emerald-800">Phone</h3>
                      <p className="text-emerald-700">+250 XXX XXX XXX</p>
                      <p className="text-sm text-emerald-600">Available Mon-Fri, 9AM-5PM EAT</p>
                    </div>
                  </div>

<div className="flex items-center space-x-4 p-4 bg-emerald-50 rounded-lg">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <MapPin className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-emerald-800">Location</h3>
                      <p className="text-emerald-700">Kigali, Rwanda</p>
                      <p className="text-sm text-emerald-600">Available for meetings and events</p>
                    </div>
                  </div>

<div className="flex items-center space-x-4 p-4 bg-emerald-50 rounded-lg">
                    <div className="bg-emerald-100 p-3 rounded-full">
                      <Clock className="h-6 w-6 text-emerald-600" />
                    </div>
                    <div>
                      <h3 className="font-semibold text-emerald-800">Response Time</h3>
                      <p className="text-emerald-700">24-48 hours</p>
                      <p className="text-sm text-emerald-600">Faster for urgent climate initiatives</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Social Media Links */}
              <Card className="border-emerald-200 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-2xl text-emerald-800">Follow My Work</CardTitle>
                  <CardDescription className="text-emerald-600">
                    Stay connected through social media platforms
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 gap-4">
                    {[
                      { platform: "Instagram", handle: "@halisimonray", icon: "📸", color: "bg-pink-500" },
                      { platform: "Twitter/X", handle: "@halisimonray", icon: "🐦", color: "bg-blue-500" },
                      { platform: "LinkedIn", handle: "halisi-monray", icon: "💼", color: "bg-blue-600" },
                      { platform: "YouTube", handle: "@HalisiMonrayArt", icon: "📺", color: "bg-red-500" },
                    ].map((social, i) => (
                      <div
                        key={i}
                        className="flex items-center space-x-3 p-3 bg-emerald-50 rounded-lg hover:bg-emerald-100 transition-colors cursor-pointer"
                      >
                        <div
                          className={`w-10 h-10 ${social.color} rounded-full flex items-center justify-center text-white text-lg`}
                        >
                          {social.icon}
                        </div>
                        <div>
                          <h4 className="font-medium text-emerald-800 text-sm">{social.platform}</h4>
                          <p className="text-emerald-600 text-xs">{social.handle}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Quick Actions */}
              <Card className="border-emerald-200 shadow-lg">
                <CardHeader>
                  <CardTitle className="text-2xl text-emerald-800">Quick Actions</CardTitle>
                </CardHeader>
                <CardContent className="space-y-3">
                  <Button
                    variant="outline"
                    className="w-full justify-start border-emerald-200 text-emerald-700 hover:bg-emerald-50"
                  >
                    <Calendar className="h-4 w-4 mr-2" />
                    Schedule a Meeting
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full justify-start border-emerald-200 text-emerald-700 hover:bg-emerald-50"
                  >
                    <Users className="h-4 w-4 mr-2" />
                    Partnership Inquiry
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full justify-start border-emerald-200 text-emerald-700 hover:bg-emerald-50"
                  >
                    <Award className="h-4 w-4 mr-2" />
                    Awards Program Info
                  </Button>
                  <Button
                    variant="outline"
                    className="w-full justify-start border-emerald-200 text-emerald-700 hover:bg-emerald-50"
                  >
                    <Globe className="h-4 w-4 mr-2" />
                    Speaking Engagement
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-16 px-4 bg-white/50">
        <div className="container mx-auto max-w-4xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-emerald-800 mb-4">Frequently Asked Questions</h2>
            <p className="text-emerald-600">Quick answers to common inquiries</p>
          </div>

<div className="grid md:grid-cols-2 gap-6">
            {[
              {
                question: "How can I collaborate on a climate art project?",
                answer:
                  "I'm always open to collaborating with fellow artists, organizations, and activists. Send me a message with your project details, timeline, and how you envision our collaboration.",
              },
              {
                question: "Can you speak at our climate event?",
                answer:
                  "Yes! I regularly speak at conferences, workshops, and events about climate art and activism. Please provide event details, date, location, and audience information.",
              },
              {
                question: "How do I apply for the Climate Awards?",
                answer:
                  "Applications for the Africa Climate & Social Justice Awards open annually. Visit the Creative Awards page for current application information and deadlines.",
              },
              {
                question: "Do you offer mentorship for young climate artists?",
                answer:
                  "I'm passionate about supporting emerging climate artists. Reach out with your portfolio and goals, and we can discuss mentorship opportunities.",
              },
              {
                question: "Can my organization partner with the awards program?",
                answer:
                  "We welcome partnerships! Check out our Awards 2025 page for partnership tiers and benefits, or contact me directly to discuss custom partnership opportunities.",
              },
              {
                question: "How can I support your climate activism work?",
                answer:
                  "There are many ways to support - from sharing my work on social media to partnering on projects or sponsoring awards. Let's discuss how your support can make the biggest impact.",
              },
            ].map((faq, i) => (
              <Card key={i} className="border-emerald-200 hover:shadow-lg transition-shadow">
                <CardContent className="p-6">
                  <h3 className="font-semibold text-emerald-800 mb-3">{faq.question}</h3>
                  <p className="text-emerald-700 text-sm leading-relaxed">{faq.answer}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-emerald-900 text-white py-12 px-4">
        <div className="container mx-auto max-w-6xl">
          <div className="grid md:grid-cols-3 gap-8">
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Leaf className="h-6 w-6" />
                <span className="text-xl font-bold">Halisi Monray</span>
              </div>
              <p className="text-emerald-200">
                Climate artist and activist creating change through creative expression.
              </p>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Quick Links</h3>
              <div className="space-y-2">
                <Link href="/" className="block text-emerald-200 hover:text-white">
                  About
                </Link>
                <Link href="/creative-awards" className="block text-emerald-200 hover:text-white">
                  Creative Awards
                </Link>
                <Link href="/awards-2025" className="block text-emerald-200 hover:text-white">
                  Awards 2025
                </Link>
                <Link href="/contact" className="block text-emerald-200 hover:text-white">
                  Contact
                </Link>
              </div>
            </div>
            <div>
              <h3 className="font-semibold mb-4">Contact</h3>
              <p className="text-emerald-200">
                Based in Rwanda
                <br />
                Climate Artist & Activist
                <br />
                University of Geneva Alumni
              </p>
            </div>
          </div>
          <div className="border-t border-emerald-800 mt-8 pt-8 text-center text-emerald-200">
            <p>© 2024 Halisi Monray. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>