add domains

app/(default)/page.tsx

@@ -4,11 +4,13 @@ export const metadata = {
 }
 
 import Hero from '@/components/hero'
+import Domains from '@/components/domains'
 
 export default function Home() {
   return (
     <>
       <Hero />
+      <Domains />
     </>
   )
 }

app/globals.css

@@ -2,30 +2,71 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
 @layer utilities {
   .text-balance {
     text-wrap: balance;

components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "magicui": "@/components/magicui"
+  }
+}

components/domains.tsx

@@ -0,0 +1,80 @@
+import { cn } from "@/lib/utils";
+import Marquee from "@/components/magicui/marquee";
+
+const domains = [
+	{
+		name: "ACM - ICPC",
+		img: "https://icpc.global/regionals/abouticpc/foundationlogo.png",
+	},
+	{
+		name: "Kaggle",
+		img: "https://img.icons8.com/?size=100&id=Omk4fWoSmCHm&format=png&color=000000",
+	},
+	{
+		name: "IOT-ML",
+		img: "https://img.icons8.com/?size=100&id=Ih6zOUuHwOOs&format=png&color=000000",
+	},
+	{
+		name: "ML-Research",
+		img: "https://img.icons8.com/?size=100&id=114322&format=png&color=000000",
+	},
+	{
+		name: "DevOps",
+		img: "https://img.icons8.com/?size=100&id=13816&format=png&color=000000",
+	},
+	{
+		name: "Flutter Development",
+		img: "https://img.icons8.com/?size=100&id=7I3BjCqe9rjG&format=png&color=000000",
+	},
+	{
+		name: "React Development",
+		img: "https://img.icons8.com/?size=100&id=123603&format=png&color=000000",
+	},
+	{
+		name: "Open Source Hackathon",
+		img: "https://img.icons8.com/?size=100&id=63655&format=png&color=000000",
+	},
+	{
+		name: "Interview Prep",
+		img: "https://img.icons8.com/?size=100&id=13724&format=png&color=000000",
+	},
+];
+
+const Card = ({
+  img,
+  name,
+}: {
+  img: string;
+  name: string;
+}) => {
+  return (
+    <figure
+      className={cn(
+        "relative w-64 cursor-pointer overflow-hidden rounded-xl border p-4 border-gray-50/[.1] bg-gray-50/[.10] hover:bg-gray-50/[.15]",
+      )}
+    >
+      <div className="flex flex-col items-center gap-4">
+        <img className="rounded-full" width="64" height="64" alt="" src={img} />
+          <figcaption className="font-bold">
+            {name}
+          </figcaption>
+      </div>
+    </figure>
+  );
+};
+
+export default function Domains() {
+  return (
+    <div className="">
+			<h2 className="text-4xl font-bold text-center text-gray-200 m-2">Domains We Explore</h2>
+			<p className="text-xl text-center text-gray-100 mb-8">Our club covers a wide range of interests and fields, bringing unique perspectives and expertise to every project!</p>
+      <Marquee pauseOnHover className="[--duration:30s]">
+        {domains.map((domain) => (
+          <Card key={domain.name} {...domain} />
+        ))}
+      </Marquee>
+      <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-background"></div>
+      <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-background"></div>
+    </div>
+  );
+}