[V0_FILE]typescriptreact:file="app/page.tsx" import Header from "@/components/header" import Hero from "@/components/hero" import Mission from "@/components/mission" import Goals from "@/components/goals" import Help from "@/components/help" import ExpansionAlt from "@/components/expansion-alt" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" import { Mail, MapPin, Phone } from "lucide-react" import Link from "next/link" import LogoAltInline from "./logo-alt-inline" export default function Header() { return (

Kira, Wakiso, Uganda

ayatgabriella@gmail.com

+31645396333

) } [V0_FILE]typescriptreact:file="components/mission.tsx" isQuickEdit="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" export default function Mission() { return ( Our Mission

We are on a mission to bring safe water, sanitation, and hygiene to Ugandan communities. Join us as we expand to the Netherlands to amplify our impact.

The word MISSION spelled out in letter tiles

) } [V0_FILE]typescriptreact:file="components/goals.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" import { CheckCircle } from "lucide-react" export default function Goals() { const goals = [ "Provide clean water to 1,000 families in 2025", "Build 5 community wells by 2026", "Open our Netherlands office to expand global outreach by 2027", ] return ( Our Goals

Child using a community water pump in Uganda

{goal}

) } [V0_FILE]typescriptreact:file="components/expansion.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" export default function Expansion() { return ( Our Expansion to the Netherlands

{/* Netherlands Map - Using a more realistic map image */}

{/* Amsterdam marker - positioned approximately where Amsterdam would be */}

Amsterdam

{/* Netherlands Flag */}

The Netherlands

We are establishing a presence in the Netherlands to connect with global partners, increase fundraising, and create long-term sustainability for Ugandan communities.

This expansion will help us build stronger international relationships and access additional resources to support our mission of providing clean water to those in need.

Our Netherlands office will open in Amsterdam in Q3 2025.

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @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: "#0077b6", foreground: "#ffffff", }, 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]typescriptreact:file="components/logo.tsx" import { DropletsIcon as WaterDropIcon } from "lucide-react" interface LogoProps { className?: string } export default function Logo({ className = "" }: LogoProps) { return (

OLUM FOUNDATION

) } [V0_FILE]typescriptreact:file="components/logo-alt.tsx" interface LogoProps { className?: string } export default function LogoAlt({ className = "" }: LogoProps) { return (

OLUM FOUNDATION Co. Ltd

) } [V0_FILE]typescriptreact:file="components/logo-alt-inline.tsx" interface LogoProps { className?: string } export default function LogoAltInline({ className = "" }: LogoProps) { return (

OLUM FOUNDATION Co. Ltd

) } [V0_FILE]typescriptreact:file="components/expansion-alt.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import Image from "next/image" export default function ExpansionAlt() { return ( Our Expansion to the Netherlands

{/* Netherlands Map - Using a more realistic map image */}

{/* Amsterdam marker - positioned approximately where Amsterdam would be */}

Amsterdam

{/* Netherlands Flag */}

The Netherlands

We are establishing a presence in the Netherlands to connect with global partners, increase fundraising, and create long-term sustainability for Ugandan communities.

This expansion will help us build stronger international relationships and access additional resources to support our mission of providing clean water to those in need.

Our Netherlands office will open in Amsterdam in Q3 2025.

) } [V0_FILE]typescriptreact:file="app/actions.ts" "use server" import { redirect } from "next/navigation" // Type definitions for our forms type DonationFormData = { name: string email: string amount: number paymentMethod: "credit_card" | "paypal" | "bank_transfer" recurring: boolean } type SubscriptionFormData = { email: string } type InvolvementFormData = { name: string email: string phone: string interestedIn: string[] message: string } // Donation form action export async function processDonation(formData: FormData) { try { // Extract form data const name = formData.get("name") as string const email = formData.get("email") as string const amount = Number(formData.get("amount")) const paymentMethod = formData.get("paymentMethod") as "credit_card" | "paypal" | "bank_transfer" const recurring = formData.get("recurring") === "on" // Validate form data if (!name || !email || !amount || !paymentMethod) { return { success: false, message: "Please fill out all required fields" } } // In a real application, you would: // 1. Process the payment through a payment gateway (Stripe, PayPal, etc.) // 2. Store the donation in your database // 3. Send a confirmation email to the donor // For now, we'll simulate a successful donation console.log("Processing donation:", { name, email, amount, paymentMethod, recurring }) // Redirect to thank you page redirect("/thank-you?type=donation") } catch (error) { console.error("Error processing donation:", error) return { success: false, message: "An error occurred while processing your donation" } } } // Newsletter subscription action export async function subscribeToNewsletter(formData: FormData) { try { const email = formData.get("email") as string if (!email || !email.includes("@")) { return { success: false, message: "Please enter a valid email address" } } // In a real application, you would: // 1. Store the email in your database or send to an email marketing service // 2. Send a confirmation email to the subscriber console.log("New newsletter subscription:", email) return { success: true, message: "Thank you for subscribing!" } } catch (error) { console.error("Error processing subscription:", error) return { success: false, message: "An error occurred while processing your subscription" } } } // Get involved form action export async function processInvolvement(formData: FormData) { try { const name = formData.get("name") as string const email = formData.get("email") as string const phone = formData.get("phone") as string const interestedIn = formData.getAll("interestedIn") as string[] const message = formData.get("message") as string if (!name || !email) { return { success: false, message: "Please fill out all required fields" } } // In a real application, you would: // 1. Store the information in your database // 2. Send a notification to your team // 3. Send a confirmation email to the volunteer console.log("New involvement request:", { name, email, phone, interestedIn, message }) // Redirect to thank you page redirect("/thank-you?type=involvement") } catch (error) { console.error("Error processing involvement request:", error) return { success: false, message: "An error occurred while processing your request" } } } [V0_FILE]typescriptreact:file="app/get-involved/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 { Checkbox } from "@/components/ui/checkbox" import { processInvolvement } from "../actions" import Header from "@/components/header" import Footer from "@/components/footer" export default function GetInvolvedPage() { return (

Get Involved

Join our mission to bring clean water to communities in Uganda. There are many ways you can contribute beyond donations.

How Would You Like to Help? Please fill out the form below and we'll get in touch with you.

Full Name

Email Address

Phone Number (Optional)

I'm interested in: (Select all that apply)

Volunteering

Fundraising

Corporate Partnership

Events

Professional Skills

Other

Message (Optional)

</div>

<Button type="submit" className="w-full bg-[#0077b6] hover:bg-[#00628f]">
                  Submit
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/thank-you/page.tsx"
import { Button } from "@/components/ui/button"
import Header from "@/components/header"
import Footer from "@/components/footer"
import Link from "next/link"
import { CheckCircle } from "lucide-react"

export default function ThankYouPage({ searchParams }: { searchParams: { type?: string } }) {
  const type = searchParams.type || "general"

let title = "Thank You!"
  let message = "Your submission has been received."

if (type === "donation") {
    title = "Thank You for Your Donation!"
    message =
      "Your generous contribution will help us provide clean water to communities in Uganda. We've sent a confirmation email with details of your donation."
  } else if (type === "involvement") {
    title = "Thank You for Getting Involved!"
    message =
      "We appreciate your interest in supporting our mission. A member of our team will contact you soon to discuss how you can get involved."
  } else if (type === "subscription") {
    title = "Thank You for Subscribing!"
    message = "You've been added to our newsletter. We'll keep you updated on our projects and impact."
  }

return (
    <div className="min-h-screen flex flex-col bg-[#eaf4fc]">
      <Header />
      <main className="flex-1 container max-w-6xl mx-auto py-10 px-4 flex items-center justify-center">
        <div className="max-w-2xl mx-auto text-center">
          <div className="flex justify-center mb-6">
            <CheckCircle className="h-24 w-24 text-green-500" />
          </div>
          <h1 className="text-3xl font-bold mb-6 text-[#0077b6]">{title}</h1>
          <p className="text-lg mb-8 text-gray-600">{message}</p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button asChild className="bg-[#0077b6] hover:bg-[#00628f]">
              <Link href="/">Return to Home</Link>
            </Button>
            {type === "donation" && (
              <Button asChild variant="outline" className="border-[#0077b6] text-[#0077b6]">
                <Link href="/get-involved">Get Involved</Link>
              </Button>
            )}
            {type === "involvement" && (
              <Button asChild variant="outline" className="border-[#0077b6] text-[#0077b6]">
                <Link href="/donate">Make a Donation</Link>
              </Button>
            )}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}

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

import type React from "react"

import { Facebook, Instagram, Twitter, Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { subscribeToNewsletter } from "@/app/actions"
import { useState } from "react"
import { useToast } from "@/hooks/use-toast"

export default function Footer() {
  const [email, setEmail] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { toast } = useToast()

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

const formData = new FormData()
    formData.append("email", email)

try {
      const result = await subscribeToNewsletter(formData)

if (result.success) {
        toast({
          title: "Success!",
          description: result.message,
        })
        setEmail("")
      } else {
        toast({
          title: "Error",
          description: result.message,
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "Something went wrong. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <footer className="bg-[#0077b6] text-white py-8">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 className="text-xl font-semibold mb-4">Contact Us</h3>
            <p className="mb-2">Kira, Wakiso, Uganda</p>
            <p className="mb-2">ayatgabriella@gmail.com</p>
            <p>+31645396333</p>
          </div>

<div>
            <h3 className="text-xl font-semibold mb-4">Follow Us</h3>
            <div className="flex space-x-4">
              <a href="#" className="hover:text-blue-200 transition-colors">
                <Facebook size={24} />
              </a>
              <a href="#" className="hover:text-blue-200 transition-colors">
                <Instagram size={24} />
              </a>
              <a href="#" className="hover:text-blue-200 transition-colors">
                <Twitter size={24} />
              </a>
              <a href="#" className="hover:text-blue-200 transition-colors">
                <Mail size={24} />
              </a>
            </div>
          </div>

<div>
            <h3 className="text-xl font-semibold mb-4">Subscribe for Updates</h3>
            <form onSubmit={handleSubmit} className="flex gap-2">
              <Input
                type="email"
                placeholder="Your email"
                className="bg-white/10 border-white/20 text-white placeholder:text-white/60"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <Button type="submit" variant="secondary" disabled={isSubmitting}>
                {isSubmitting ? "Subscribing..." : "Subscribe"}
              </Button>
            </form>
          </div>
        </div>

<div className="mt-8 pt-6 border-t border-white/20 text-center">
          <p>© {new Date().getFullYear()} OLUM Foundation Co. Ltd. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/hero.tsx"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function Hero() {
  return (
    <div className="relative h-[400px] md:h-[500px] flex items-center justify-center text-center">
      {/* Background image with overlay */}
      <div
        className="absolute inset-0 bg-cover bg-center z-0"
        style={{
          backgroundImage:
            "url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hero%20image.jpg-JfpGAVciAWRxB5OpdjrpmikyErOzT7.jpeg')",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      >
        <div className="absolute inset-0 bg-black/40 z-0"></div>
      </div>

{/* Content */}
      <div className="relative z-10 px-4 max-w-4xl">
        <h1 className="text-2xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
          "Be Part of the Change – Help Provide Clean Water Today!"
        </h1>
        <p className="text-white text-lg md:text-xl mb-8 max-w-2xl mx-auto">
          Join our mission to bring clean water to communities in Uganda
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          <Button size="lg" className="bg-[#0077b6] hover:bg-[#00628f]" asChild>
            <Link href="/donate">Donate Now</Link>
          </Button>
          <Button size="lg" className="bg-white text-[#0077b6] hover:bg-gray-100 transition-colors" asChild>
            <Link href="#about-us">About Our Mission</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/help.tsx"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Image from "next/image"
import Link from "next/link"

export default function Help() {
  return (
    <Card className="mb-10 overflow-hidden">
      <CardHeader className="bg-[#0077b6]/10 pb-2">
        <CardTitle className="text-2xl md:text-3xl text-center text-[#0077b6]">How You Can Help</CardTitle>
      </CardHeader>
      <CardContent className="pt-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
          <div>
            <p className="text-lg leading-relaxed mb-6">
              Every donation, volunteer, and partnership gets us closer to a water-secure future. Your support makes a
              direct impact on communities in need.
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button size="lg" className="bg-[#0077b6] hover:bg-[#00628f]" asChild>
                <Link href="/donate">Donate Now</Link>
              </Button>
              <Button size="lg" variant="outline" className="border-[#0077b6] text-[#0077b6]" asChild>
                <Link href="/get-involved">Get Involved</Link>
              </Button>
            </div>
          </div>
          <div className="relative h-[250px] w-full rounded-lg overflow-hidden">
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/How%20You%20Can%20Help%20section.jpg-M4wwH3DY0qyfOpaYVclIxJqmkutyZs.jpeg"
              alt="Hands joined together in unity and support"
              fill
              className="object-cover"
            />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="app/donate/custom-amount.tsx"
"use client"

import { useEffect } from "react"

export default function CustomAmountToggle() {
  useEffect(() => {
    const customRadio = document.getElementById("amount-custom") as HTMLInputElement
    const customAmountContainer = document.getElementById("custom-amount-container")
    const customAmountInput = document.getElementById("custom-amount") as HTMLInputElement
    const amountInputs = document.querySelectorAll('input[name="amount"]')

const toggleCustomAmount = () => {
      if (customRadio.checked) {
        customAmountContainer?.classList.remove("hidden")
        customAmountInput?.focus()
      } else {
        customAmountContainer?.classList.add("hidden")
        customAmountInput.value = ""
      }
    }

amountInputs.forEach((input) => {
      input.addEventListener("change", toggleCustomAmount)
    })

return () => {
      amountInputs.forEach((input) => {
        input.removeEventListener("change", toggleCustomAmount)
      })
    }
  }, [])

return null
}

[V0_FILE]typescriptreact:file="app/donate/page.tsx" isFixed="true" isQuickEdit="true"
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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { processDonation } from "../actions"
import Header from "@/components/header"
import Footer from "@/components/footer"
import CustomAmountToggle from "./custom-amount"

export default function DonatePage() {
  return (
    <div className="min-h-screen flex flex-col bg-[#eaf4fc]">
      <Header />
      <main className="flex-1 container max-w-6xl mx-auto py-10 px-4">
        <div className="max-w-3xl mx-auto">
          <h1 className="text-3xl font-bold text-center mb-6 text-[#0077b6]">Make a Donation</h1>
          <p className="text-center mb-8 text-gray-600">
            Your donation helps us provide clean water to communities in Uganda. 
            Every contribution makes a difference.
          </p>
          
          <Card>
            <CardHeader>
              <CardTitle>Donation Information</CardTitle>
              <CardDescription>
                Please fill out the form below to make your donation.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <form action={processDonation} className="space-y-6">
                <div className="grid gap-4">
                  <div className="grid gap-2">
                    <Label htmlFor="name">Full Name</Label>
                    <Input id="name" name="name" placeholder="John Doe" required />
                  </div>
                  
                  <div className="grid gap-2">
                    <Label htmlFor="email">Email Address</Label>
                    <Input id="email" name="email" type="email" placeholder="john@example.com" required />
                  </div>
                </div>
                
                <div className="space-y-4">
                  <Label>Donation Amount</Label>
                  <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                    <div>
                      <input type="radio" id="amount-25" name="amount" value="25" className="peer hidden" defaultChecked />
                      <label htmlFor="amount-25" className="flex items-center justify-center h-12 border rounded-md cursor-pointer peer-checked:bg-[#0077b6] peer-checked:text-white peer-checked:border-[#0077b6] hover:border-[#0077b6]\" peer-checked:text-white peer-checked:border-[#0077b6] hover:border-[#0077b6]">
                        €25
                      </label>
                    </div>
                    <div>
                      <input type="radio" id="amount-50" name="amount" value="50" className="peer hidden" />
                      <label htmlFor="amount-50" className="flex items-center justify-center h-12 border rounded-md cursor-pointer peer-checked:bg-[#0077b6] peer-checked:text-white peer-checked:border-[#0077b6] hover:border-[#0077b6]">
                        €50
                      </label>
                    </div>
                    <div>
                      <input type="radio" id="amount-100" name="amount" value="100" className="peer hidden" />
                      <label htmlFor="amount-100" className="flex items-center justify-center h-12 border rounded-md cursor-pointer peer-checked:bg-[#0077b6] peer-checked:text-white peer-checked:border-[#0077b6] hover:border-[#0077b6]">
                        €100
                      </label>
                    </div>
                    <div>
                      <input type="radio" id="amount-custom" name="amount" value="custom" className="peer hidden" />
                      <label htmlFor="amount-custom" className="flex items-center justify-center h-12 border rounded-md cursor-pointer peer-checked:bg-[#0077b6] peer-checked:text-white peer-checked:border-[#0077b6] hover:border-[#0077b6]">
                        Custom
                      </label>
                    </div>
                  </div>
                  <div id="custom-amount-container" className="hidden">
                    <Label htmlFor="custom-amount">Custom Amount (€)</Label>
                    <Input id="custom-amount" name="customAmount" type="number" placeholder="Enter amount" min="1" />
                  </div>
                  <CustomAmountToggle />
                </div>
                
                <div className="space-y-4">
                  <Label>Payment Method</Label>
                  <RadioGroup defaultValue="credit_card" name="paymentMethod" className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div className="flex items-center space-x-2 border rounded-md p-3">
                      <RadioGroupItem value="credit_card" id="credit_card" />
                      <Label htmlFor="credit_card" className="cursor-pointer">Credit Card</Label>
                    </div>
                    <div className="flex items-center space-x-2 border rounded-md p-3">
                      <RadioGroupItem value="paypal" id="paypal" />
                      <Label htmlFor="paypal" className="cursor-pointer">PayPal</Label>
                    </div>
                    <div className="flex items-center space-x-2 border rounded-md p-3">
                      <RadioGroupItem value="bank_transfer" id="bank_transfer" />
                      <Label htmlFor="bank_transfer" className="cursor-pointer">Bank Transfer</Label>
                    </div>
                  </RadioGroup>
                </div>
                
                <div className="flex items-center space-x-2">
                  <Checkbox id="recurring" name="recurring" />
                  <Label htmlFor="recurring" className="cursor-pointer">Make this a monthly donation</Label>
                </div>
                
                <Button type="submit" className="w-full bg-[#0077b6] hover:bg-[#00628f]">
                  Complete Donation
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>
      <Footer />
    </div>
  )
}
</article></body></html>