{/* Hero Section */}

Building a Sustainable Future Through Education

Join our community of learners and changemakers dedicated to creating a more sustainable world through knowledge, innovation, and action.

{/* Features Section */}

Our Approach

Empowering Sustainable Change

We combine cutting-edge research, practical education, and community engagement to address the world's most pressing sustainability challenges.

Education

Comprehensive courses and workshops on sustainability principles, practices, and innovations.

Research

Pioneering research on climate solutions, renewable energy, sustainable agriculture, and more.

Community

Building networks of sustainability advocates, professionals, and organizations for collective impact.

{/* Programs Section */}

Our Programs

Learning Pathways for Sustainability Leaders

Discover our diverse range of programs designed to equip you with the knowledge and skills to drive sustainable change.

Sustainability Leadership Certificate A comprehensive program for aspiring sustainability professionals

12 weeks

Develop the strategic vision and practical skills to lead sustainability initiatives in any organization.

Climate Solutions Workshop Hands-on training in climate mitigation and adaptation

4 weeks

Explore cutting-edge approaches to addressing climate change through policy, technology, and community action.

Sustainable Business Innovation Transforming business models for a sustainable economy

8 weeks

Learn how to integrate sustainability into business strategy, operations, and innovation processes.

{/* Resources Section */}

Resources

Knowledge Hub for Sustainability

Access our collection of resources to deepen your understanding of sustainability challenges and solutions.

{[ { title: "Research Reports", description: "In-depth analysis of sustainability trends and innovations", image: "/placeholder.svg?height=200&width=300", }, { title: "Case Studies", description: "Real-world examples of successful sustainability initiatives", image: "/placeholder.svg?height=200&width=300", }, { title: "Toolkits", description: "Practical guides and frameworks for implementing sustainable practices", image: "/placeholder.svg?height=200&width=300", }, { title: "Webinars", description: "Expert discussions on emerging sustainability topics", image: "/placeholder.svg?height=200&width=300", }, { title: "Policy Briefs", description: "Analysis of sustainability policies and their implications", image: "/placeholder.svg?height=200&width=300", }, { title: "Educational Videos", description: "Visual explanations of key sustainability concepts", image: "/placeholder.svg?height=200&width=300", }, ].map((resource, index) => (

{resource.title}

{resource.description}

Explore

))}

{/* Testimonials Section */}

Testimonials

Voices from Our Community

Hear from participants who have transformed their understanding and practice of sustainability through our programs.

{[ { quote: "The Sustainability Leadership program gave me the knowledge and confidence to implement meaningful changes in my organization.", name: "Sarah Johnson", role: "Sustainability Director, Green Tech Inc.", }, { quote: "I've applied the practical tools from the Climate Solutions Workshop to launch community initiatives that are making a real difference.", name: "Michael Chen", role: "Community Organizer", }, { quote: "The institute's approach to combining theory with practice has been invaluable for my research and teaching on environmental justice.", name: "Dr. Amara Okafor", role: "Professor of Environmental Studies", }, ].map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.role}

))}

{/* Contact Section */}

Get Involved

Join Our Community

Connect with us to learn more about our programs, research opportunities, and how you can contribute to building a sustainable future.

Visit Us

123 Sustainability Way, Green City, 12345

Email Us

info@sustainabilityinstitute.org

Call Us

(123) 456-7890

Contact Us

Fill out the form below and we'll get back to you as soon as possible.

First name

Last name

Subject

Message

</div>
                  <Button className="w-full bg-green-600 hover:bg-green-700">Send Message</Button>
                </form>
              </div>
            </div>
          </div>
        </section>

{/* Newsletter Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-green-100">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Stay Connected</h2>
                <p className="max-w-[600px] text-muted-foreground md:text-xl">
                  Subscribe to our newsletter to receive updates on our programs, events, and sustainability insights.
                </p>
              </div>
              <div className="mx-auto w-full max-w-md space-y-2">
                <form className="flex space-x-2">
                  <input
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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"
                    placeholder="Enter your email"
                    type="email"
                  />
                  <Button type="submit" className="bg-green-600 hover:bg-green-700">
                    Subscribe
                  </Button>
                </form>
                <p className="text-xs text-muted-foreground">We respect your privacy. Unsubscribe at any time.</p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <footer className="w-full border-t bg-green-900 text-white py-12">
        <div className="container px-4 md:px-6">
          <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <Leaf className="h-6 w-6" />
                <span className="text-xl font-bold">Sustainability Institute</span>
              </div>
              <p className="text-sm text-green-200">
                Building a sustainable future through education, research, and community engagement.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Quick Links</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="/" className="hover:underline">
                    Home
                  </Link>
                </li>
                <li>
                  <Link href="#about" className="hover:underline">
                    About
                  </Link>
                </li>
                <li>
                  <Link href="#programs" className="hover:underline">
                    Programs
                  </Link>
                </li>
                <li>
                  <Link href="#resources" className="hover:underline">
                    Resources
                  </Link>
                </li>
                <li>
                  <Link href="#contact" className="hover:underline">
                    Contact
                  </Link>
                </li>
              </ul>
            </div>
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Programs</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="#" className="hover:underline">
                    Sustainability Leadership
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:underline">
                    Climate Solutions Workshop
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:underline">
                    Sustainable Business Innovation
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:underline">
                    Environmental Policy
                  </Link>
                </li>
                <li>
                  <Link href="#" className="hover:underline">
                    Community Resilience
                  </Link>
                </li>
              </ul>
            </div>
            <div className="space-y-4">
              <h3 className="text-lg font-medium">Connect</h3>
              <ul className="space-y-2 text-sm">
                <li>
                  <Link href="#" className="flex items-center hover:underline">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 h-4 w-4"
                    >
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                    Facebook
                  </Link>
                </li>
                <li>
                  <Link href="#" className="flex items-center hover:underline">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 h-4 w-4"
                    >
                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                    </svg>
                    Twitter
                  </Link>
                </li>
                <li>
                  <Link href="#" className="flex items-center hover:underline">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 h-4 w-4"
                    >
                      <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
                    </svg>
                    Instagram
                  </Link>
                </li>
                <li>
                  <Link href="#" className="flex items-center hover:underline">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="mr-2 h-4 w-4"
                    >
                      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                      <rect width="4" height="12" x="2" y="9"></rect>
                      <circle cx="4" cy="4" r="2"></circle>
                    </svg>
                    LinkedIn
                  </Link>
                </li>
              </ul>
            </div>
          </div>
          <div className="mt-8 border-t border-green-800 pt-8 text-center text-sm">
            <p>© {new Date().getFullYear()} Sustainability Institute. All rights reserved.</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

[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: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 142 76% 36%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 142 76% 36%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 142 70% 50%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 142 70% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Sustainability and Learning Institute",
  description: "Building a sustainable future through education, research, and community engagement.",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}
</article></body></html>