Initial Code Commit

Project/app/mission/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import Image from 'next/image';
+import { Button } from "@nextui-org/react";
+import Link from "next/link";
+export default function MissionPage() {
+    return (
+        <div className="relative min-h-screen bg-orange-900/5">
+            {/* Large "About Us" text at the top */}
+            <div className="absolute top-0 left-0 right-0 z-10 flex justify-center items-center h-40">
+                <h1 className="text-6xl font-bold bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text drop-shadow-lg">Our Mission</h1>
+            </div>
+
+            <div className="relative min-h-screen">
+                <Image
+                    src="/demo.png"
+                    alt="Demo image"
+                    width={1920}
+                    height={3000}
+                    className="w-full h-auto"
+                />
+                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-background via-background to-transparent h-80 dark:from-background dark:via-background">
+                    {/* text at the bottom */}
+                    <div className="flex flex-col self-end items-center pb-16">
+                        <p className="mt-40 text-lg text-center max-w-2xl">
+                            One of the most neglected aspects of a building&apos;s carbon footprint is waste mismanagement and poor recycling practices. According to the EPA, landfills account for <span className="bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text">15% of U.S. methane emissions</span>, with commercial buildings generating over <span className="bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text">30% of the nation&apos;s total waste</span>.
+                            <br />
+                            <br />
+                            Studies show that up to <span className="bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text">25% of items</span> in recycling bins are actually non-recyclable, contaminating entire loads. Only 32% of commercial waste is recycled, compared to a potential 75% that could be. Proper recycling can reduce a building&apos;s carbon emissions <span className="bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text">by up to 40%</span>.
+                            <br />
+                            <br />
+                            <strong>Carbin</strong> uses a machine learning algorithm to identify the type of waste at the trash chute, nudging the occupants to recycle correctly with a friendly reminder. Our long term goal is to <span className="bg-gradient-to-r from-[#FF705B] to-[#FFB457] text-transparent bg-clip-text">educate building occupants</span>, something we know will truly revolutionize waste management, make efficient sorting and recycling the norm, and significantly curtail the carbon impact of our daily operations.
+                        </p>
+                        <Button
+                            as={Link}
+                            href="/buildings"
+                            variant="solid"
+                            size="lg"
+                            endContent={
+                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
+                                </svg>
+                            }
+                            className="mb-2 mt-6 bg-orange-500 text-white"
+                        >
+                            Intrigued? Explore participating buildings
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div >
+    );
+}