# Project export: Carbon Cut

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2024
- Tagline: Your one-stop shop for climate action and impact.
- Devpost: https://devpost.com/software/carbon-cut-3d5k2g
- GitHub: https://github.com/Charu-Gupta9/TreeHacks-UI.git
- Demo: https://treehacks-ui.onrender.com/
- Video: https://www.youtube.com/embed/StB77f6C4Ug?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Result: winner (Cotopaxi: Most Innovative Sustainability Hack (4x Allpha 35L Backpack))
- Team: 1 GitHub contributor(s) — Gursukh Sembi (2 commits)

## Devpost submission (written by the team)

### Overview

🌟

### Inspiration

Studies show that many people know about climate change and sustainable behaviors, but not as many people adjust their actions accordingly. This is largely due to inconvenience and the perception of no environmental impact. People know that climate change is bad, but they don’t know where to start. We want to bridge the gap between knowledge and action, making it easy for people to foster sustainable behaviors in their everyday lives. 💡

### What it does

Our website, Carbon Cut, assesses a person’s carbon footprint and offers personalized recommendations on how to make the most impact with the least effort. We want to emphasize that individuals are NOT the problem, but they CAN be part of the solution. By taking the effort of research out of their hands and quantifying their impact, Carbon Cut answers users’ two most prevalent pain points. We also have established the groundwork to implement credits, rewarding users for their sustainable choices. They will be able to use these credits for discounts on partner brands, such as (ideally!) Cotopaxi, Patagonia, Reformation, and other sustainable brands. These environmental features are: Item checker: You can upload a photo from the tag that contains the details of any product (mostly clothes) and it will assign a grade to your item based on the carbon impact it has. Sustainable Restaurants: You can input any location you want, and it will display you a map with the most sustainable restaurants near you in a map, with their name and location Transportation Tracker: Just select the origin and destination of your travel and it will display you the most sustainable solution to arrive at that place Furthermore, in order to create more consciousness about the environment, we have a chatbot in which you can "talk" to some of the priority places of the planet, such as the Amazon Rainforest, Northern Great Plains, the Coral Triangle, among others. You can ask whatever you want to these places as if they were a person 🛠️

### How we built it

In the creation of Carbon Cut, we began with research and brainstorming. Literature showed that high prices, perception of no environmental impact, greenwashing, inconvenience, and social image were among the biggest barriers to sustainable action. Thus, we established features to address many of these challenges and sought out feedback from other hackers (Doc link posted with all feedback and iterations). The resounding consensus of the 8 hackers we surveyed was that inconvenience and perception of no environmental impact were the two most prevalent barriers to action. With that reassurance in mind, we tailored our website to emphasize impact and optimize convenience. From a technical perspective, the front end was made using HTML, CSS, and Next.Js. The backend was made by creating an API using FastAPI. The Item Checker was made using Computer Vision (Optical Character Recognition) and a custom few-shot LLM built on gpt-3 The Restaurants feature was made using Google Places API The Routes feature was made using Google Routes API The Planet LLM is a Retrieval Augmented Generative Model trained with data from WWF, using a Vector Database from Chroma with dozens of documents 🚧

### Challenges we ran into

All's well that ends well. With that being said, no hackathon is complete without its challenges. We had 2 main challenges. Firstly, we had some issues when deploying our Chroma Vector Database, due to different dependencies and it being too heavy to be deployed on Render, so we used Google App Engine for the RAG model. Secondly, we also had some issues when deploying the image-to-text model, since we used Pytesseract and the model needed to install a file on our computer, which couldn't be done in the deployed instance, hence we had to change the way we identified the text in any image. 🏆

### Accomplishments we're proud of

We are proud of our team. Coming from universities in Pennsylvania, Florida, and Mexico, we formed our team on Slack and met at the TreeHacks orientation. From that moment on, we maintained open communication, kept a strong work ethic, and shared many laughs. We are also proud of the progress we have made on Carbon Cut in 36 hours and the potential it holds to shape the lives of many people. One hacker, who preferred to remain anonymous, said of Carbon Cut, "When you see carbon footprint used in marketing it's always very condemning. It’s nice to see something focused on action." Another noted, in our first round of user pain point research, that inconvenience was one of their major barriers and that they would use a website such as Carbon Cut, "especially if it showed me how much impact it would have." Thanks to our multi-disciplinary team and the thoughtful responses of our fellow hackers, Carbon Cut now features a dashboard that quantifies impact in a variety of ways, from percent change to trees planted to Olympic-sized swimming pools of water saved. Through the use of social math, we are proud that Carbon Cut can be used, understood, and enjoyed by a wide range of users. 📚

### What we learned

This project was an exercise in all of our skills, including our ability to learn! We tackled Carbon Cut with an army of old and new skills, and even some that we learned at the various TreeHacks workshops. From Next.js to RAG Models to generative UI (shoutout to Guillermo Rauch from Vercel!), this weekend was nothing short of an exercise in experiential learning. 🔮

### What's next

Next up for Carbon Cut is increased precision carbon tracking, partnerships, and credits. We hope to continually improve our carbon emissions tracking and keep personalized recommendations modern and up-to-date with current technologies. Additionally, we plan to establish credits to reward users for choosing sustainable alternatives. These credits will be redeemable for discounts towards partnered sustainable brands, such as Cotopaxi and Patagonia. Lastly, as always, Carbon Cut is here to help you. If you have any requests or ideas on how to improve Carbon Cut, please don't hesitate to reach out!

## README (from the GitHub repository)

Checkout Our Docs: https://docs.tryterra.co/

Pre Requirements
1) Install Ngrok
2) Install NodeJS
3) Checkout our slack channel and sign up for a Terra developer account 

How to setup
1) Run:
    cd demo-app
    npm i
    npm run dev

1) Install ngrok and expose localhost 3000

2) Head to the terra dashboard https://dashboard.tryterra.co/user/login

3) Setup a webhook destination and paste in your ngrok url.

4) Copy your API Key and Dev ID from the bottom right corner of the connections page into the .env file.

5) Build your app!

## Detected evidence (automated analysis)

Indexed codebase: 24 recognized source files, 58 KB.
- CSS (language) — detected in the code
- JavaScript (language) — detected in the code
- Next.js (technology) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- FastAPI (technology) — claimed on Devpost, not found in the code
- HTML (language) — claimed on Devpost, not found in the code
- OpenAI (technology) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (31 of 31)

```
.env
.gitignore
app/components/ui/button.jsx
app/components/ui/input.jsx
app/components/ui/label.jsx
app/components/ui/navbar.jsx
app/components/ui/navitem.jsx
app/components/ui/select.jsx
app/components/ui/textarea.jsx
app/components/ui/worldmap.jsx
app/findRestaurant/page.jsx
app/getData/route.js
app/globals.css
app/itemChecker/page.jsx
app/layout.js
app/page.js
app/pages/api/hello.ts
app/pages/MainPage.jsx
app/trackTransport/page.jsx
components.json
components/dashboard.jsx
components/graph-carbon.jsx
components/ui/card.jsx
jsconfig.json
lib/utils.js
next.config.mjs
package.json
postcss.config.js
README.md
tailwind.config.js
tsconfig.json
```

### Dependencies

- package.json: @nivo/line@^0.84.0, @radix-ui/react-icons@^1.3.0, @radix-ui/react-label@^2.0.2, @radix-ui/react-select@^2.0.0, @radix-ui/react-slot@^1.0.2, @react-google-maps/api@^2.19.3, @types/leaflet@^1.9.8, @types/node@20.11.19, @uiw/react-json-view@^2.0.0-alpha.12, autoprefixer@^10.4.17, axios@^1.6.7, class-variance-authority@^0.7.0, clsx@^2.1.0, leaflet-defaulticon-compatibility@^0.1.2, lucide-react@^0.331.0, next@14.1.0, postcss@^8.4.35, react@^18, react-dom@^18, react-image-marker@^1.2.0, react-leaflet@^4.2.1, tailwind-merge@^2.2.1, tailwindcss@^3.4.1, tailwindcss-animate@^1.0.7, typescript@5.3.3, use-places-autocomplete@^4.0.1, util@^0.12.5

### Recent commits (newest first)

- changes
- changes for restaurant
- item checker
- transportation
- transportation
- transportation
- transportation
- item checker changes
- changes
- changes
- changes
- updates
- UI code
- UI Code
- Feat: Update readme for npm run dev
- Feat: Uploaded demo
- Initial commit from Create Next App

## Key source files (fetched from GitHub, selected and truncated for size)

### package.json

```
{
  "name": "demo-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@nivo/line": "^0.84.0",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@react-google-maps/api": "^2.19.3",
    "@uiw/react-json-view": "^2.0.0-alpha.12",
    "axios": "^1.6.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "leaflet-defaulticon-compatibility": "^0.1.2",
    "lucide-react": "^0.331.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-image-marker": "^1.2.0",
    "react-leaflet": "^4.2.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "use-places-autocomplete": "^4.0.1",
    "util": "^0.12.5"
  },
  "devDependencies": {
    "@types/leaflet": "^1.9.8",
    "@types/node": "20.11.19",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "5.3.3"
  }
}

```

### app/layout.js

```javascript
import { Inter } from "next/font/google";
import "./globals.css";

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

export const metadata = {
  title: "Carbon Cut",
  description: "Use this as a skeleton for your project!",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

```

### app/page.js

```javascript
import Image from "next/image";
import Link from "next/link"
import MainPage from "./pages/MainPage";

export default function Home() {

  return (
    <main>
      <header className="px-4 lg:px-6 h-14 flex items-center">
        <Link className="flex items-center justify-center" href="#">
          <MountainIcon className="h-6 w-6" />
          <span className="sr-only">Acme Inc</span>
        </Link>
        <div>
         

        {/* <navbar className="text-sm font-medium hover:underline underline-offset-4" /> */}
        </div>
    
        <nav className="ml-auto flex gap-4 sm:gap-6">
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/">
            Home
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/itemChecker">
            Item Checker
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/findRestaurant">
            Sustainable Restaurants
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/trackTransport">
            Daily Transportation Tracker
          </Link>
        </nav>
      </header>
      <MainPage />
    </main>
  );
}
function MountainIcon(props) {
  return (
    (<svg
      {...props}
      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">
      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
    </svg>)
  );
}
```

### app/getData/route.js

```javascript
import { NextRequest, NextResponse } from "next/server"

export async function POST(req) {

  let res = await fetchUserData(
    req.headers.get("user_id"),
    req.headers.get("start_date"), 
    req.headers.get("end_date"), 
    req.headers.get("scope"))



  return NextResponse.json({"data": res})
}


// This is how to fetch data from our Rest API
async function fetchUserData(userID, start_date, end_date, scope) {

  let request = await fetch(`https://api.tryterra.co/v2/${scope}?user_id=${userID}&start_date=${start_date}&end_date=${end_date}&to_webhook=false`, {
    method: "GET",
    headers: {
      "auth_success_redirect_url": "http://localhost:3000",
      'dev-id': process.env.NEXT_PUBLIC_DEV_ID,
      'x-api-key': process.env.NEXT_PUBLIC_API_KEY
    }
  })


  let response = await request.text()

  return response
}
```

### app/findRestaurant/page.jsx

```javascript
"use client"
import React, { useEffect, useState } from "react";
import { Input } from "../components/ui/input.jsx"
import { Button } from "../components/ui/button"
import axios from 'axios';
import Link from "next/link"


function findRestaurant(){
    const [data, setData] = useState(null);
    const [clicked, isClicked] = useState(false);
    const [value, setValue] = useState("");

      function getData (value) {
        axios.get(`https://treehacks-api.onrender.com/restaurants?address=${value}`).then(res =>{
          console.log(res);
          setData(res.data);
          isClicked(true);
        });
    console.log(data);
        }
    // if (!data) {
    //     return <div>Loading...</div>;
    //   }
      console.log(clicked);
    return (  
        <><header className="px-4 lg:px-6 h-14 flex items-center">
        <Link className="flex items-center justify-center" href="#">
          <MountainIcon className="h-6 w-6" />
          <span className="sr-only">Acme Inc</span>
        </Link>
        <nav className="ml-auto flex gap-4 sm:gap-6">
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/">
            Home
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/itemChecker">
            Item Checker
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/findRestaurant">
            Sustainable Restaurants
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/trackTransport">
            Daily Transportation Tracker
          </Link>
        </nav>
      </header><div className="grid gap-6 items-start w-full lg:px-6">
          <div className="flex flex-col gap-2">
            <h1 className="text-3xl font-bold">Sustainable Restaurants</h1>
            <p className="text-gray-500 dark:text-gray-400">
              A list of sustainable restaurants along with their names and addresses.
            </p>
          </div>
          <div className="flex w-full max-w-sm items-center space-x-2">
            <Input className="w-300" placeholder="Search" type="search" value={value} onChange={e => setValue(e.target.value)}/>
            <Button type="submit" onClick={() => getData(value)}>Search</Button>
          </div>
        </div>
      {
        clicked ? 
        <div className="flex flex-col md:gap-4 pt-10 pl-6">
          <div className="grid md:grid-cols-3 gap-4">
            {
              data.names.map(items => (
                <div className="flex flex-col gap-1.5">
              <h3 className="font-bold">{items.name}</h3>
              <p className="text-sm">
                {items.direction}
              </p>
            </div>
              ))
            }
          </div>
          <div>
          </div>
          <div className="flex flex-col items-center gap-10">
            <img src={data.static_map} />
          </div>
          </div>  
          : null
      } 
      </>
      );
}
function MountainIcon(props) {
    return (
      (<svg
        {...props}
        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">
        <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
      </svg>)
    );
  }
export default findRestaurant;
```

### app/itemChecker/page.jsx

```javascript
/**
 * This code was generated by v0 by Vercel.
 * @see https://v0.dev/t/kU0LFmFQ3Eb
 */
"use client"
import { Button } from "../components/ui/button"
import { Label } from "../components/ui/label"
import { Input } from "../components/ui/input"
import React, { useEffect, useState } from "react";
import axios from 'axios';
import Link from "next/link"
import { Card, CardHeader, CardTitle, CardDescription } from "../../components/ui/card"


function itemchecker() {
  const [data, setData] = useState(null);
  function toggleButtonState () {
    axios.get("https://treehacks-api.onrender.com/label_info?image_path=https://ibb.co/YQ88PjB").then(res =>{
      console.log(res);
      setData(res.data);
    });
console.log(data);
    }
;
  return (   
    (
       <><header className="px-4 lg:px-6 h-14 flex items-center">
        <Link className="flex items-center justify-center" href="#">
          <MountainIcon className="h-6 w-6" />
          <span className="sr-only">Acme Inc</span>
        </Link>
        <div>


          {/* <navbar className="text-sm font-medium hover:underline underline-offset-4" /> */}
        </div>

        <nav className="ml-auto flex gap-4 sm:gap-6">
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/">
            Home
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/itemChecker">
            Item Checker
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/findRestaurant">
            Sustainable Restaurants
          </Link>
          <Link
            className="text-sm font-medium hover:underline underline-offset-4"
            href="/trackTransport">
            Daily Transportation Tracker
          </Link>
        </nav>
      </header>
      <header className="px-4 py-6 md:px-6">
        <h1 className="text-2xl font-bold">Product Information</h1>
      </header>
        <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto px-4">
      <div className="flex flex-col gap-4 pr-12">
        <div className="grid gap-2">
          <Label className="text-sm" htmlFor="upload">
            Upload an image
          </Label>
          <Input accept="image/*" id="upload" type="file" />
          <div>Take a photo of a product's barcode to scan it</div>
        </div>
        <div className="grid gap-2">
          OR
          <Label className="text-sm" htmlFor="manual">
            Enter barcode manually
          </Label>
          <Input id="manual" placeholder="Enter barcode" type="text" />
          <div>Type the barcode number to look up a product</div>
          <button onClick={() => toggleButtonState()}>Check</button>
        </div>
      </div>
      <div className="grid gap-4">
        <div className="grid gap-2">
          <Label className="text-sm">Product Description</Label>
          
         {data ? <div>{
         data[0] === "answer" ? data[1] : data[0] }</div> : null}
        </div>
      </div>
    </div>
        
    {data ? 
    <div className="flex flex-col min-h-screen">
      <main className="flex-1">
        <section className="py-8">
        </section>
        <section className="py-8">
          <div className="container grid items-start gap-4 px-4 md:gap-10 lg:px-6 lg:grid-cols-3">
            <div className="flex flex-col gap-2 min-vh-[400px]:items-start">
              <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl">Recommended Brands</h2>
              <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed dark:text-gray-400">
                Here are some clothing brands we recommend based on your uploaded tags.
              </p>
            </div>
            <div className="space-y-4 lg:col-start-2 lg:col-span-2">
              <div className="grid grid-cols-2 gap-4">
                <div className="flex items-center gap-4">
                  <img
                    alt="Brand logo"
                    className="rounded-lg object-cover aspect-square border border-gray-200 border-gray-200 shadow-sm dark:border-gray-800"
                    height="100"
                    src="/download.jpeg"
                    width="100"
                  />
                  <div className="space-y-1">
                    <h3 className="font-bold">Urban Threads</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      Urban fashion for the modern city dweller. #streetstyle
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <img
                    alt="Brand logo"
                    className="rounded-lg object-cover aspect-square border border-gray-200 border-gray-200 shadow-sm dark:border-gray-800"
                    height="100"
                    src="/Sns.png"
                    width="100"
                  />
                  <div className="space-y-1">
                    <h3 className="font-bold">Sole & Style</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      Where sneakers meet fashion. #kicksandfits
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <img
                    alt="Brand logo"
                    className="rounded-lg object-cover aspect-square border border-gray-200 border-gray-200 shadow-sm dark:border-gray-800"
                    height="100"
                    src="/Patagonia.png"
                    width="100"
                  />
                  <div className="space-y-1">
                    <h3 className="font-bold">Patagonia</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400">
                      Elevate your style with luxury 
[truncated — 3687 more characters]
```

### app/trackTransport/page.jsx

```javascript
"use client"
import { Input } from "../components/ui/input"
import { Button } from "../components/ui/button"
import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "../../components/ui/card"
import { Label } from "../components/ui/label"
import { SelectValue, SelectTrigger, SelectItem, SelectContent, Select } from "../components/ui/select"
import axios from 'axios';
import Link from "next/link"
import React, { useEffect, useState } from "react";

function TrackTransport(){
        const [data, setData] = useState(null);
        const [clicked, isClicked] = useState(null);
        const [origin, getOrigin] = useState("");
        const [dest, getDest] = useState("");
        const [mode, getMode] = useState("");
        console.log(mode);
          function getData (origin,dest,mode) {
            axios.get(`https://treehacks-api.onrender.com/route_map?origin=${origin}&destination=${dest}&mode=${mode}`).then(res =>{
              console.log(res);
              setData(res.data);
              isClicked(true);
            });
        console.log(data);
            }
        // if (!data) {
        //     return <div>Loading...</div>;
        //   }
        return(
            <>
            <header className="px-4 lg:px-6 h-14 flex items-center">
            <Link className="flex items-center justify-center" href="#">
              <MountainIcon className="h-6 w-6" />
              <span className="sr-only">Acme Inc</span>
            </Link>
            <div>
      
      
              {/* <navbar className="text-sm font-medium hover:underline underline-offset-4" /> */}
            </div>
      
            <nav className="ml-auto flex gap-4 sm:gap-6">
              <Link
                className="text-sm font-medium hover:underline underline-offset-4"
                href="/">
                Home
              </Link>
              <Link
                className="text-sm font-medium hover:underline underline-offset-4"
                href="/itemChecker">
                Item Checker
              </Link>
              <Link
                className="text-sm font-medium hover:underline underline-offset-4"
                href="/findRestaurant">
                Sustainable Restaurants
              </Link>
              <Link
                className="text-sm font-medium hover:underline underline-offset-4"
                href="/trackTransport">
                Daily Transportation Tracker
              </Link>
            </nav>
          </header>
            <div className="grid gap-4 min-h-screen">
                    <div className="mx-auto max-w-4xl">
                        <header
                            className="flex items-center justify-between py-6 md:py-8 lg:py-12">
                        </header>
                        <main>
                            <section className="w-full pb-20">
                                <div
                                    className="container flex flex-col items-center justify-center space-y-4 px-4 text-center md:px-6">
                                    <div className="space-y-2 pb-8">
                                        <h1
                                            className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                                            Sustainable Transportation
                                        </h1>
                                        <p
                                            className="mx-auto max-w-[700px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                                            Discover eco-friendly ways to get around and reduce your carbon footprint.
                                        </p>
                                    </div>
                                </div>
                                <Card className="w-full flex flex-col">
      <CardHeader className="pb-0 md:pb-4 md:pr-4 md:border-r">
        <CardTitle className="text-lg">Select your mode of transportation</CardTitle>
        <CardDescription className="text-sm">Enter your origin, destination, and select a mode.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4 md:pl-4">
        <div className="flex space-x-4">
          <div className="w-1/2 space-y-2">
            <Label className="text-sm" htmlFor="origin">
              Origin
            </Label>
            <Input className="w-full max-w-xs text-black" id="origin" placeholder="Enter your origin" value={origin} onChange={e => getOrigin(e.target.value)}/>
          </div>
          <div className="w-1/2 space-y-2">
            <Label className="text-sm" htmlFor="destination">
              Destination
            </Label>
            <Input
              className="w-full max-w-xs text-black"
              id="destination"
              placeholder="Enter your destination" value={dest} onChange={e => getDest(e.target.value)}/>
          </div>
          </div>
           <div className="w-1/2 space-y-2">
            <Label className="text-sm" htmlFor="destination">
              Modes (Please type from one of the 3 modes -Transit, Walking or Driving)
            </Label>
            <Input
              className="w-full max-w-xs text-black"
              id="destination"
              placeholder="Enter your destination" value={mode} onChange={e => getMode(e.target.value)}/>
          </div>
   
        <Button type="submit" onClick={() => getData(origin, dest, mode)} >Submit</Button>
      </CardContent>
    </Card>
    { data ?
                                <div className="pt-10 h-full h-96">
                <iframe src={data.link} className="container grid items-center gap-12 px-10 md:px-6 h-full" />
            </div> : null }
                            </section>
                            <section className="grid gap-12">
                                <div className="container grid i
[truncated — 6113 more characters]
```

### postcss.config.js

```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```

### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
};

```

### lib/utils.js

```javascript
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

```

[14 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]