Untitled

import React from "react"; import { motion } from "framer-motion"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Heart, Globe, Users } from "lucide-react";

export default function AwarenessWebsite() { return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50 p-6"> {/* Hero Section */} <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} className="text-center max-w-3xl mx-auto" > <h1 className="text-4xl md:text-5xl font-bold mb-4">Save Our Environment 🌍</h1> <p className="text-lg text-gray-600 mb-6"> Join us in spreading awareness about climate change and protecting our planet for future generations. </p> <Button className="rounded-2xl px-6 py-3 text-base shadow-lg">Get Involved</Button> </motion.div>

{/* About Section */}
  <div className="grid md:grid-cols-3 gap-6 mt-12 max-w-6xl mx-auto">
      <Card className="rounded-2xl shadow-xl">
            <CardContent className="p-6 text-center">
                    <Globe className="mx-auto mb-4" size={40} />
                            <h2 className="text-xl font-semibold mb-2">Our Mission</h2>
                                    <p className="text-gray-600">
                                              To educate communities about environmental protection and sustainable living.
                                                      </p>
                                                            </CardContent>
                                                                </Card>
                                                                
                                                                    <Card className="rounded-2xl shadow-xl">
                                                                          <CardContent className="p-6 text-center">
                                                                                  <Users className="mx-auto mb-4" size={40} />
                                                                                          <h2 className="text-xl font-semibold mb-2">Community</h2>
                                                                                                  <p className="text-gray-600">
                                                                                                            Building a strong network of volunteers and eco-friendly supporters.
                                                                                                                    </p>
                                                                                                                          </CardContent>
                                                                                                                              </Card>
                                                                                                                              
                                                                                                                                  <Card className="rounded-2xl shadow-xl">
                                                                                                                                        <CardContent className="p-6 text-center">
                                                                                                                                                <Heart className="mx-auto mb-4" size={40} />
                                                                                                                                                        <h2 className="text-xl font-semibold mb-2">Take Action</h2>
                                                                                                                                                                <p className="text-gray-600">
                                                                                                                                                                          Participate in clean-up drives, tree plantation, and awareness campaigns.
                                                                                                                                                                                  </p>
                                                                                                                                                                                        </CardContent>
                                                                                                                                                                                            </Card>
                                                                                                                                                                                              </div>
                                                                                                                                                                                              
                                                                                                                                                                                                {/* Footer */}
                                                                                                                                                                                                  <div className="text-center mt-16 text-gray-500 text-sm">
                                                                                                                                                                                                      © 2026 Save Our Environment | Created for Awareness
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                        
                                                                                                                                                                                                        ); }