Next.jsをゼロからマスターする Part 7

npx create-next-app@latest my-company-page
ここで、”my-shadcnui-app”はあなたのプロジェクト名です。好きな名前に変更できます。

import { Button } from “@/components/ui/button”
import { Input } from “@/components/ui/input”
import { Leaf, Users, Recycle, ChevronRight } from “lucide-react”
import Image from “next/image”
import Link from “next/link”

export default function ResponsibleLanding() {
return (
　<div className=”flex flex-col min-h-screen”>
　　<header className=”px-4 lg:px-6 h-14 flex items-center”>
　　　<Link className=”flex items-center justify-center” href=”#”>
　　　　<Leaf className=”h-6 w-6 text-green-600″ />
　　　　<span className=”sr-only”>EcoTech Solutions</span>
　　　</Link>
　　　<nav className=”ml-auto flex gap-4 sm:gap-6″>
　　　　<Link className=”text-sm font-medium hover:underline underline-offset-4″ href=”#mission”>
　　　　　Our Mission
　　　　</Link>
　　　　<Link className=”text-sm font-medium hover:underline underline-offset-4″ href=”#initiatives”>
　　　　　Initiatives
　　　　</Link>
　　　　<Link className=”text-sm font-medium hover:underline underline-offset-4″ href=”#join-us”>
　　　　　Join Us
　　　　</Link>
　　　</nav>
　　</header>
　　<main className=”flex-1″>
　　　<section className=”w-full py-12 md:py-24 lg:py-32 xl:py-48 bg-green-100″>
　　　　<div className=”container px-4 md:px-6″>
　　　　　<div className=”flex flex-col items-center space-y-4 text-center”>
　　　　　　<div className=”space-y-2″>
　　　　　　　<h1 className=”text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none”>
　　　　　　　　Innovating for a Sustainable Future
　　　　　　　</h1>
　　　　　　　<p className=”mx-auto max-w-[700px] text-gray-600 md:text-xl”>
　　　　　　　　At EcoTech Solutions, we’re committed to developing technologies that protect our planet and empower communities.
　　　　　　　</p>
　　　　　　</div>
　　　　　　<div className=”space-x-4″>
　　　　　　　<Link href=”#join-us”>
　　　　　　　　<Button>Join Our Mission</Button>
　　　　　　　</Link>
　　　　　　　<Link href=”#initiatives”>
　　　　　　　　<Button variant=”outline”>Learn More</Button>
　　　　　　　</Link>
　　　　　　</div>
　　　　　</div>
　　　　</div>
　　　</section>
　　　<section id=”mission” className=”w-full py-12 md:py-24 lg:py-32″>
　　　　<div className=”container px-4 md:px-6″>
　　　　　<div className=”grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]”>
　　　　　　<Image
　　　　　　alt=”Diverse team working on sustainable solutions”
　　　　　　className=”mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last”
　　　　　　height=”550″
　　　　　　src=”/placeholder.svg?height=550&width=550″
　　　　　　width=”550″
　　　　　　/>
　　　　　　<div className=”flex flex-col justify-center space-y-4″>
　　　　　　　<div className=”space-y-2″>
　　　　　　　　<h2 className=”text-3xl font-bold tracking-tighter sm:text-4xl”>Our Mission</h2>
　　　　　　　　<p className=”max-w-[600px] text-gray-600 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed”>
　　　　　　　　We believe in harnessing the power of technology to create a more sustainable and equitable world. Our mission is to develop innovative solutions that address climate change, promote renewable energy, and foster social responsibility.
　　　　　　　　</p>
　　　　　　　</div>
　　　　　　　<ul className=”grid gap-2 py-4″>
　　　　　　　　<li className=”flex items-center gap-2″>
　　　　　　　　　<ChevronRight className=”h-4 w-4 text-green-600″ />
　　　　　　　　　<span>Reducing carbon footprint through smart technologies</span>
　　　　　　　　</li>
　　　　　　　　<li className=”flex items-center gap-2″>
　　　　　　　　　<ChevronRight className=”h-4 w-4 text-green-600″ />
　　　　　　　　　<span>Promoting renewable energy adoption worldwide</span>
　　　　　　　　</li>
　　　　　　　　<li className=”flex items-center gap-2″>
　　　　　　　　　<ChevronRight className=”h-4 w-4 text-green-600″ />
　　　　　　　　　<span>Empowering communities with sustainable solutions</span>
　　　　　　　　</li>
　　　　　　　</ul>
　　　　　　</div>
　　　　　</div>
　　　　</div>
　　　</section>
　　　　<section id=”initiatives” className=”w-full py-12 md:py-24 lg:py-32 bg-gray-100″>
　　　　　<div className=”container px-4 md:px-6″>
　　　　　　<h2 className=”text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-8″>Our Key Initiatives</h2>
　　　　　　<div className=”grid gap-6 sm:grid-cols-2 lg:grid-cols-3″>
　　　　　　　<div className=”flex flex-col items-center space-y-2 border-gray-200 p-4 rounded-lg bg-white shadow-sm”>
　　　　　　　　<Leaf className=”h-10 w-10 text-green-600″ />
　　　　　　　　<h3 className=”text-xl font-bold”>Green Energy Solutions</h3>
　　　　　　　　<p className=”text-sm text-gray-600 text-center”>Developing cutting-edge renewable energy technologies to power a cleaner future.</p>
　　　　　</div>
　　　　　<div className=”flex flex-col items-center space-y-2 border-gray-200 p-4 rounded-lg bg-white shadow-sm”>
　　　　　　<Users className=”h-10 w-10 text-blue-600″ />
　　　　　　<h3 className=”text-xl font-bold”>Community Empowerment</h3>
　　　　　　<p className=”text-sm text-gray-600 text-center”>Creating programs that educate and enable communities to adopt sustainable practices.</p>
　　　　　</div>
　　　　　<div className=”flex flex-col items-center space-y-2 border-gray-200 p-4 rounded-lg bg-white shadow-sm”>
　　　　　　<Recycle className=”h-10 w-10 text-purple-600″ />
　　　　　　<h3 className=”text-xl font-bold”>Circular Economy</h3>
　　　　　　<p className=”text-sm text-gray-600 text-center”>Innovating in recycling and upcycling to minimize waste and maximize resource efficiency.</p>
　　　　　</div>
　　　　</div>
　　　</div>
　　　</section>
　　　<section id=”join-us” className=”w-full py-12 md:py-24 lg:py-32″>
　　　　<div className=”container px-4 md:px-6″>
　　　　　<div className=”flex flex-col items-center space-y-4 text-center”>
　　　　　　<div className=”space-y-2″>
　　　　　　　<h2 className=”text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl”>Join Our Mission</h2>
　　　　　　　　<p className=”mx-auto max-w-[600px] text-gray-600 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed”>
　　　　　　　　Be part of the change. Sign up for our newsletter to stay updated on our latest initiatives and how you can contribute to a sustainable future.
　　　　　　　　</p>
　　　　　　　</div>
　　　　　　<div className=”w-full max-w-sm space-y-2″>
　　　　　　　<form className=”flex flex-col gap-2 min-[400px]:flex-row”>
　　　　　　　　<Input className=”max-w-lg flex-1″ placeholder=”Enter your email” type=”email” />
　　　　　　　　<Button type=”submit”>Subscribe</Button>
　　　　　　　</form>
　　　　　　　<p className=”text-xs text-gray-600″>
　　　　　　　By subscribing, you agree to our{” “}
　　　　　　　　<Link className=”underline underline-offset-2″ href=”#”>
　　　　　　　　　Terms & Conditions
　　　　　　　　</Link>
　　　　　　　　.
　　　　　　　</p>
　　　　　　</div>
　　　　　</div>
　　　　</div>
　　　</section>
　　</main>
　　<footer className=”flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t”>
　　　<p className=”text-xs text-gray-600″>© 2024 EcoTech Solutions. All rights reserved.</p>
　　　<nav className=”sm:ml-auto flex gap-4 sm:gap-6″>
　　　　<Link className=”text-xs hover:underline underline-offset-4″ href=”#”>
　　　　　Terms of Service
　　　　</Link>
　　　　<Link className=”text-xs hover:underline underline-offset-4″ href=”#”>
　　　　　Privacy
　　　　</Link>
　　　</nav>
　　</footer>
　</div>
　)
}