From 9aef26f5581b505c528bf766bed47dc8facf904c Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Fri, 29 Dec 2023 16:31:10 -0800
Subject: [PATCH] feat: add example cards

---
 app/page.tsx           | 129 ++++++++++++++++++++++++++++++++---------
 components/ui/card.tsx |  79 +++++++++++++++++++++++++
 2 files changed, 181 insertions(+), 27 deletions(-)
 create mode 100644 components/ui/card.tsx

diff --git a/app/page.tsx b/app/page.tsx
index b1fd96e..d02c773 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,12 @@
-import Hero from "@/components/hero/Hero";
 import { Button, buttonVariants } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card";
 import {
     Popover,
     PopoverContent,
@@ -9,6 +16,27 @@ import { cn } from "@/lib/utils";
 import { HelpCircle, Search } from "lucide-react";
 import Link from "next/link";
 
+const EXAMPLES = [
+    {
+        uni: "UC Irvine",
+        ge: "GE IV - Arts and Humanities",
+        courses: 150,
+        link: "/search?uni=University%20of%20California%2C%20Irvine&ge=GE%20IV",
+    },
+    {
+        uni: "UC Santa Barbara",
+        ge: "GE E - Culture and Thought",
+        courses: 100,
+        link: "/search?uni=University%20of%20California%2C%20Santa%20Barbara&ge=GE%20E",
+    },
+    {
+        uni: "UC Irvine",
+        ge: "GE VIII - Multicultural Studies",
+        courses: 100,
+        link: "/search?uni=University%20of%20California%2C%20Irvine&ge=GE%20VII",
+    },
+];
+
 const ArticulatableDefinition = () => {
     return (
         <Popover>
@@ -37,6 +65,41 @@ const ArticulatableDefinition = () => {
     );
 };
 
+const Graphics = () => {
+    return (
+        <div>
+            <div className="relative isolate">
+                <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu blur-[52px] sm:-top-48"
+                >
+                    <div
+                        style={{
+                            clipPath:
+                                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+                        }}
+                        className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[26.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-blue-500 to-purple-500 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[42.1875rem]"
+                    />
+                </div>
+            </div>
+            <div className="relative isolate hidden md:flex">
+                <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu blur-[52px] sm:-top-72"
+                >
+                    <div
+                        style={{
+                            clipPath:
+                                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+                        }}
+                        className="relative aspect-[1155/678] w-[16.125rem] rotate-[30deg] bg-gradient-to-tr from-blue-500 to-purple-500 opacity-30 sm:w-[22.1875rem] md:-right-[0vw] lg:-right-[12vw] xl:-right-[20vw]"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
 export default function Home() {
     return (
         <main className="flex min-h-[calc(100vh-96px)] flex-col items-center">
@@ -88,34 +151,46 @@ export default function Home() {
                 </Link>
             </div>
 
-            <div>
-                <div className="relative isolate">
-                    <div
-                        aria-hidden="true"
-                        className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu blur-[52px] sm:-top-48"
-                    >
-                        <div
-                            style={{
-                                clipPath:
-                                    "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-                            }}
-                            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[26.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-blue-500 to-purple-500 opacity-30 sm:left-[calc(50%-30rem)] sm:w-[42.1875rem]"
-                        />
+            <Graphics />
+
+            <div className="mx-auto my-32 flex max-w-5xl flex-col gap-4">
+                <div className="px-6 lg:px-8">
+                    <div className="mx-auto flex max-w-2xl flex-col gap-4 sm:text-center">
+                        <h2 className="text-4xl font-bold text-slate-900 sm:text-5xl">
+                            Check out some searches
+                        </h2>
+                        <p className="text-lg text-slate-600">
+                            GE-Z makes course discovery simple. No complicated
+                            articulation agreements necessary.
+                        </p>
                     </div>
                 </div>
-                <div className="relative isolate hidden md:flex">
-                    <div
-                        aria-hidden="true"
-                        className="pointer-events-none absolute inset-x-0 -top-40 -z-10 transform-gpu blur-[52px] sm:-top-72"
-                    >
-                        <div
-                            style={{
-                                clipPath:
-                                    "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-                            }}
-                            className="relative aspect-[1155/678] w-[16.125rem] rotate-[30deg] bg-gradient-to-tr from-blue-500 to-purple-500 opacity-30 sm:w-[22.1875rem] md:-right-[5vw] lg:-right-[15vw] xl:-right-[20vw]"
-                        />
-                    </div>
+
+                <div className="flex flex-wrap gap-4 px-6 sm:justify-center lg:px-8">
+                    {EXAMPLES.map((example) => (
+                        <Card
+                            className="w-[275px] hover:shadow-md sm:w-[300px]"
+                            key={example.uni + example.ge}
+                        >
+                            <CardHeader>
+                                <CardTitle>{example.uni}</CardTitle>
+                                <CardDescription>{example.ge}</CardDescription>
+                            </CardHeader>
+                            <CardFooter className="flex justify-between">
+                                <span className="flex text-neutral-600 sm:hidden">
+                                    <b>{example.courses}+</b>&nbsp;Courses
+                                </span>
+                                <span className="hidden text-neutral-600 sm:flex">
+                                    <b>{example.courses}+</b>&nbsp;Courses Found
+                                </span>
+                                <Link href={example.link}>
+                                    <Button className="text-white">
+                                        Go To
+                                    </Button>
+                                </Link>
+                            </CardFooter>
+                        </Card>
+                    ))}
                 </div>
             </div>
         </main>
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }