From ab948cde246a2e57ab9157020b09e3296df4dd43 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Thu, 4 Jan 2024 19:52:50 +0530
Subject: [PATCH 1/6] install shadcn and tailwind

---
 app/globals.css          |  76 ++++
 components.json          |  17 +
 components/ui/button.jsx |  47 +++
 components/ui/card.jsx   |  50 +++
 components/ui/input.jsx  |  19 +
 components/ui/label.jsx  |  18 +
 components/ui/select.jsx | 122 ++++++
 jsconfig.json            |   8 +
 lib/utils.js             |   6 +
 package-lock.json        | 795 ++++++++++++++++++++++++++++++++++++++-
 package.json             |  11 +
 src/App.css              |  64 ++--
 src/App.js               |   2 +
 src/components/Navbar.js |   5 +-
 src/components/SignUp.js |  61 +++
 tailwind.config.js       |  77 ++++
 16 files changed, 1320 insertions(+), 58 deletions(-)
 create mode 100644 app/globals.css
 create mode 100644 components.json
 create mode 100644 components/ui/button.jsx
 create mode 100644 components/ui/card.jsx
 create mode 100644 components/ui/input.jsx
 create mode 100644 components/ui/label.jsx
 create mode 100644 components/ui/select.jsx
 create mode 100644 jsconfig.json
 create mode 100644 lib/utils.js
 create mode 100644 src/components/SignUp.js
 create mode 100644 tailwind.config.js

diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..6a75725
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..733348f
--- /dev/null
+++ b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
\ No newline at end of file
diff --git a/components/ui/button.jsx b/components/ui/button.jsx
new file mode 100644
index 0000000..9bdf65b
--- /dev/null
+++ b/components/ui/button.jsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+  return (
+    (<Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      ref={ref}
+      {...props} />)
+  );
+})
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/card.jsx b/components/ui/card.jsx
new file mode 100644
index 0000000..dd79b51
--- /dev/null
+++ b/components/ui/card.jsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ 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(({ 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(({ 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(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ 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 }
diff --git a/components/ui/input.jsx b/components/ui/input.jsx
new file mode 100644
index 0000000..c74d919
--- /dev/null
+++ b/components/ui/input.jsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+  return (
+    (<input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props} />)
+  );
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/label.jsx b/components/ui/label.jsx
new file mode 100644
index 0000000..d3cfbaf
--- /dev/null
+++ b/components/ui/label.jsx
@@ -0,0 +1,18 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/select.jsx b/components/ui/select.jsx
new file mode 100644
index 0000000..40b28e2
--- /dev/null
+++ b/components/ui/select.jsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn("p-1", position === "popper" &&
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..4e16ffe
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+      "paths": {
+        "@/*": ["./*"]
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/lib/utils.js b/lib/utils.js
new file mode 100644
index 0000000..20aa603
--- /dev/null
+++ b/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
diff --git a/package-lock.json b/package-lock.json
index fc0d649..b9dab90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,16 +11,27 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-slot": "^1.0.2",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.0",
         "fs": "^0.0.1-security",
+        "lucide-react": "^0.303.0",
         "path": "^0.12.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "tailwind-merge": "^2.2.0",
+        "tailwindcss-animate": "^1.0.7",
         "util": "^0.12.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.0"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1970,16 +1981,21 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
-      "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
+      "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
@@ -2394,6 +2410,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
+      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
@@ -3322,6 +3372,525 @@
         }
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+      "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+      "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
+      "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
+      "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+      "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+      "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+      "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+      "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+      "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+      "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+      "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5122,6 +5691,17 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -5984,6 +6564,25 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
       "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -6013,6 +6612,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6834,6 +7441,11 @@
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/detect-port-alt": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
@@ -8127,9 +8739,9 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8668,6 +9280,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-own-enumerable-property-symbols": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
@@ -9330,6 +9950,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -11804,9 +12432,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.18.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
-      "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12117,6 +12745,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.303.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.303.0.tgz",
+      "integrity": "sha512-B0B9T3dLEFBYPCUlnUS1mvAhW1craSbF9HO+JfBjAtpFUJ7gMIqmEwNSclikY3RiN2OnCkj/V1ReAQpaHae8Bg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -14662,6 +15298,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14734,6 +15415,28 @@
         }
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16065,20 +16768,32 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.0.tgz",
+      "integrity": "sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
-      "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz",
+      "integrity": "sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.18.2",
+        "jiti": "^1.19.1",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -16090,7 +16805,6 @@
         "postcss-load-config": "^4.0.1",
         "postcss-nested": "^6.0.1",
         "postcss-selector-parser": "^6.0.11",
-        "postcss-value-parser": "^4.2.0",
         "resolve": "^1.22.2",
         "sucrase": "^3.32.0"
       },
@@ -16102,6 +16816,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -16605,6 +17327,47 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
+      "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
diff --git a/package.json b/package.json
index 6965c45..61331e7 100644
--- a/package.json
+++ b/package.json
@@ -6,14 +6,22 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "fs": "^0.0.1-security",
+    "lucide-react": "^0.303.0",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss-animate": "^1.0.7",
     "util": "^0.12.5",
     "web-vitals": "^2.1.4"
   },
@@ -40,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.0"
   }
 }
diff --git a/src/App.css b/src/App.css
index c406c3c..4b4c209 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 /* App.css */
 body {
   font-family: 'Google Sans', sans-serif;
-  background-color: #19191c;
+  background-color: #0a0a0a;
   
 }
 .app {
@@ -13,7 +13,7 @@ body {
 .navbar {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 2px solid #484848;
   font-family: 'Google Sans', sans-serif;
   margin-bottom: 30px;
   backdrop-filter: blur(10px); 
@@ -24,6 +24,7 @@ body {
 .logo-container {
   display: flex;
   align-items: center;
+  padding-left: 40px;
 }
 
 .logo {
@@ -44,7 +45,7 @@ body {
   padding: 5px;
   margin-right: 10px;
   font-family: 'Google Sans', sans-serif;
-  background-color: #2f2f31;
+  background-color: #484848;
   color: #ffffff;
   border-radius: 10px;
 }
@@ -53,9 +54,8 @@ body {
   color: #e5e5e8;
 }
 
-.search-filter button {
+.search-filter  {
   padding: 5px 10px;
-  background-color: #2f2f31;
   cursor: pointer;
   font-family: 'Google Sans', sans-serif;
   color: #e5e5e8;
@@ -63,50 +63,29 @@ body {
 }
 
 .Btn {
-  width: 140px;
-  height: 30px;
-  border: none;
-  border-radius: 10px;
-  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
-  background-size: 250%;
-  background-position: left;
-  color: #ffd277;
-  position: relative;
   display: flex;
+  background-color: rgb(0, 0, 0);
+  color: #ffffff;
+  padding: 0.3rem 1rem;
+  font-size: 0.7rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+  text-align: center;
+  vertical-align: middle;
   align-items: center;
-  justify-content: center;
+  border-radius: 0.5rem;
+  gap: 0.75rem;
+  border-color: #484848;
   cursor: pointer;
-  transition-duration: 1s;
-  overflow: hidden;
+  transition: .6s ease;
 }
 
-.Btn::before {
-  position: absolute;
-  content: "STAR ON GITHUB";
-  color: #ffd277;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 97%;
-  height: 90%;
-  border-radius: 8px;
-  transition-duration: 1s;
-  background-color: rgba(0, 0, 0, 0.842);
-  background-size: 200%;
+.Btn svg {
+  height: 20px;
 }
 
 .Btn:hover {
-  background-position: right;
-  transition-duration: 1s;
-}
-
-.Btn:hover::before {
-  background-position: right;
-  transition-duration: 1s;
-}
-
-.Btn:active {
-  transform: scale(0.95);
+  box-shadow: none;
 }
 
 /* Cards styling */
@@ -114,6 +93,8 @@ body {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
+  padding-left: 40px;
+  padding-right: 40px;
 }
 
 .card-item {
@@ -326,6 +307,7 @@ h3 {
     display: flex;
     flex-wrap: wrap; 
     justify-content: space-around;
+    padding: 0;
   }
   .card-item {
     width: 100%; 
diff --git a/src/App.js b/src/App.js
index 68c1495..c9998c9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import CardList from './components/CardList';
 import CardModal from './components/CardModal'; 
 import Footer from './components/Footer';
 import ScrollToTopButton from './components/ScrollToTopButton';
+import SignUp from './components/SignUp'
 
 const App = () => {
   const [cards, setCards] = useState([]);
@@ -55,6 +56,7 @@ const App = () => {
 
   return (
     <div className="app">
+      <SignUp />
       <Navbar
         searchTerm={searchTerm}
         handleSearchChange={(event) => setSearchTerm(event.target.value)}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 6779c86..87b2cde 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -29,7 +29,10 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
           onChange={handleSearchChange}
           placeholder="Search by Name"
         />
-        <button class="Btn" onClick={navigateToGitHub}>
+        <button class="Btn" 
+        onClick={navigateToGitHub} >
+        <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <title>github</title> <rect fill="none" height="24" width="24"></rect> <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"></path> </g></svg>
+        STAR ON GITHUB
         </button>
       </div>
     </nav>
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
new file mode 100644
index 0000000..7909c45
--- /dev/null
+++ b/src/components/SignUp.js
@@ -0,0 +1,61 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+function SignUp() {
+  return (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one-click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" placeholder="Name of your project" />
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="framework">Framework</Label>
+              <Select>
+                <SelectTrigger id="framework">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent position="popper">
+                  <SelectItem value="next">Next.js</SelectItem>
+                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                  <SelectItem value="astro">Astro</SelectItem>
+                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </form>
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <Button variant="outline">Cancel</Button>
+        <Button>Deploy</Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export default SignUp;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..0a5fa43
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{js,jsx}',
+    './components/**/*.{js,jsx}',
+    './app/**/*.{js,jsx}',
+    './src/**/*.{js,jsx}',
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
\ No newline at end of file

From c9a8be5771c07581a19126f637c2af0c0256ccc5 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Thu, 4 Jan 2024 22:11:50 +0530
Subject: [PATCH 2/6] SignUp Card implementation

---
 components.json                              |   2 +-
 src/App.css                                  |   4 +-
 src/App.js                                   |   3 +-
 {app => src/app}/globals.css                 |   0
 src/components/SignUp.js                     |  83 ++++++-----
 {components => src/components}/ui/button.jsx |   2 +-
 {components => src/components}/ui/card.jsx   |   2 +-
 src/components/ui/icons.jsx                  | 149 +++++++++++++++++++
 {components => src/components}/ui/input.jsx  |   2 +-
 {components => src/components}/ui/label.jsx  |   2 +-
 {components => src/components}/ui/select.jsx |   2 +-
 src/index.css                                |  85 +++++++++--
 src/index.js                                 |   5 +-
 {lib => src/lib}/utils.js                    |   0
 14 files changed, 277 insertions(+), 64 deletions(-)
 rename {app => src/app}/globals.css (100%)
 rename {components => src/components}/ui/button.jsx (97%)
 rename {components => src/components}/ui/card.jsx (97%)
 create mode 100644 src/components/ui/icons.jsx
 rename {components => src/components}/ui/input.jsx (94%)
 rename {components => src/components}/ui/label.jsx (93%)
 rename {components => src/components}/ui/select.jsx (99%)
 rename {lib => src/lib}/utils.js (100%)

diff --git a/components.json b/components.json
index 733348f..f6ae1a5 100644
--- a/components.json
+++ b/components.json
@@ -8,7 +8,7 @@
     "css": "app/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
-    "prefix": ""
+    "prefix": "tw-"
   },
   "aliases": {
     "components": "@/components",
diff --git a/src/App.css b/src/App.css
index 4b4c209..9f4b96c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -280,8 +280,8 @@ h3 {
   }
 
   .logo-container {
-    width: 70%; 
-    margin-bottom: 0; 
+    margin:auto;
+    padding: 0;
     height: 25px;
   }
   .search-filter {
diff --git a/src/App.js b/src/App.js
index c9998c9..8e53d58 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import CardList from './components/CardList';
 import CardModal from './components/CardModal'; 
 import Footer from './components/Footer';
 import ScrollToTopButton from './components/ScrollToTopButton';
-import SignUp from './components/SignUp'
+//import SignUp from './components/SignUp'
 
 const App = () => {
   const [cards, setCards] = useState([]);
@@ -56,7 +56,6 @@ const App = () => {
 
   return (
     <div className="app">
-      <SignUp />
       <Navbar
         searchTerm={searchTerm}
         handleSearchChange={(event) => setSearchTerm(event.target.value)}
diff --git a/app/globals.css b/src/app/globals.css
similarity index 100%
rename from app/globals.css
rename to src/app/globals.css
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
index 7909c45..27debfc 100644
--- a/src/components/SignUp.js
+++ b/src/components/SignUp.js
@@ -1,6 +1,7 @@
-import * as React from "react"
+"use client"
 
-import { Button } from "@/components/ui/button"
+import { Icons } from "./ui/icons"
+import { Button } from "./ui/button"
 import {
   Card,
   CardContent,
@@ -8,51 +9,51 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+} from "./ui/card"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
 
 function SignUp() {
   return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
+    <Card className="w-[450px] mx-auto">
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl text-black">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
       </CardHeader>
-      <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-              <Select>
-                <SelectTrigger id="framework">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent position="popper">
-                  <SelectItem value="next">Next.js</SelectItem>
-                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                  <SelectItem value="astro">Astro</SelectItem>
-                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <Icons.google className="mr-2 h-4 w-4" />
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
           </div>
-        </form>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="Kiran@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
       </CardContent>
-      <CardFooter className="flex justify-between">
-        <Button variant="outline">Cancel</Button>
-        <Button>Deploy</Button>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
       </CardFooter>
     </Card>
   )
diff --git a/components/ui/button.jsx b/src/components/ui/button.jsx
similarity index 97%
rename from components/ui/button.jsx
rename to src/components/ui/button.jsx
index 9bdf65b..f93eb30 100644
--- a/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
diff --git a/components/ui/card.jsx b/src/components/ui/card.jsx
similarity index 97%
rename from components/ui/card.jsx
rename to src/components/ui/card.jsx
index dd79b51..525788c 100644
--- a/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
diff --git a/src/components/ui/icons.jsx b/src/components/ui/icons.jsx
new file mode 100644
index 0000000..0b3d0ca
--- /dev/null
+++ b/src/components/ui/icons.jsx
@@ -0,0 +1,149 @@
+
+const Icons = {
+  logo: (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <rect width="256" height="256" fill="none" />
+      <line
+        x1="208"
+        y1="128"
+        x2="128"
+        y2="208"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+      <line
+        x1="192"
+        y1="40"
+        x2="40"
+        y2="192"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="16"
+      />
+    </svg>
+  ),
+  twitter: (props) => (
+    <svg
+      {...props}
+      height="23"
+      viewBox="0 0 1200 1227"
+      width="23"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  ),
+  gitHub: (props) => (
+    <svg viewBox="0 0 438.549 438.549" {...props}>
+      <path
+        fill="currentColor"
+        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      ></path>
+    </svg>
+  ),
+  radix: (props) => (
+    <svg viewBox="0 0 25 25" fill="none" {...props}>
+      <path
+        d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
+        fill="currentcolor"
+      ></path>
+      <path d="M12 0H4V8H12V0Z" fill="currentcolor"></path>
+      <path
+        d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+        fill="currentcolor"
+      ></path>
+    </svg>
+  ),
+  aria: (props) => (
+    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
+    </svg>
+  ),
+  npm: (props) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  yarn: (props) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  pnpm: (props) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  react: (props) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  tailwind: (props) => (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  google: (props) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+      />
+    </svg>
+  ),
+  apple: (props) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  paypal: (props) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  spinner: (props) => (
+    <svg
+      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"
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  ),
+}
+
+export { Icons };
\ No newline at end of file
diff --git a/components/ui/input.jsx b/src/components/ui/input.jsx
similarity index 94%
rename from components/ui/input.jsx
rename to src/components/ui/input.jsx
index c74d919..809da3b 100644
--- a/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
   return (
diff --git a/components/ui/label.jsx b/src/components/ui/label.jsx
similarity index 93%
rename from components/ui/label.jsx
rename to src/components/ui/label.jsx
index d3cfbaf..07760e8 100644
--- a/components/ui/label.jsx
+++ b/src/components/ui/label.jsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/components/ui/select.jsx b/src/components/ui/select.jsx
similarity index 99%
rename from components/ui/select.jsx
rename to src/components/ui/select.jsx
index 40b28e2..6a13b6b 100644
--- a/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const Select = SelectPrimitive.Root
 
diff --git a/src/index.css b/src/index.css
index ec2585e..db8e194 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,76 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
diff --git a/src/index.js b/src/index.js
index d563c0f..030cd54 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+//import App from './App';
 import reportWebVitals from './reportWebVitals';
+import SignUp from '../src/components/SignUp'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <SignUp />
   </React.StrictMode>
 );
 
diff --git a/lib/utils.js b/src/lib/utils.js
similarity index 100%
rename from lib/utils.js
rename to src/lib/utils.js

From 7dd334e9b2e4586423d0c0901fd292b027a22529 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Sun, 7 Jan 2024 11:59:03 +0530
Subject: [PATCH 3/6] Updates

---
 .gitignore                              |   1 +
 package-lock.json                       | 170 +++++++++++++++++++++++-
 package.json                            |   3 +
 src/App.css                             | 147 +++++++++++++++++---
 src/App.js                              |  35 +++--
 src/components/CardModal.css            |   1 +
 src/components/Navbar.js                |  18 ++-
 src/components/SignUp.js                |  92 ++++++-------
 src/components/user-auth-form-login.js  | 132 ++++++++++++++++++
 src/components/user-auth-form-signup.js | 132 ++++++++++++++++++
 src/index.js                            |   8 +-
 11 files changed, 647 insertions(+), 92 deletions(-)
 create mode 100644 src/components/user-auth-form-login.js
 create mode 100644 src/components/user-auth-form-signup.js

diff --git a/.gitignore b/.gitignore
index 81b368c..d5c4c2e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/package-lock.json b/package-lock.json
index b9dab90..6e2d2ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,16 +14,19 @@
         "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
+        "@supabase/supabase-js": "^2.39.2",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "dotenv": "^16.3.1",
         "fs": "^0.0.1-security",
         "lucide-react": "^0.303.0",
         "path": "^0.12.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "tailwind-merge": "^2.2.0",
         "tailwindcss-animate": "^1.0.7",
@@ -3891,6 +3894,14 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz",
+      "integrity": "sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3991,6 +4002,111 @@
         "@sinonjs/commons": "^1.7.0"
       }
     },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.5.tgz",
+      "integrity": "sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/gotrue-js": {
+      "version": "2.62.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.62.0.tgz",
+      "integrity": "sha512-4eBuZNXGOk7ewqJuHPYMnk8clCtEx6Hfnu6yHLjZlx7w18TqcojcTRUBZagErtpgwwdfzUwKbquexhbrpH/ysw==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/@supabase/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/@supabase/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.9.1.tgz",
+      "integrity": "sha512-xZD2AZDek4ckjuTU+gt32hCN6fz6L3dFJudbiMqsrJ+Ml/RS9k1Kw6VWj5EAdFUJEYB0O/TKEt6oF5VoUwhn+g==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.9.1.tgz",
+      "integrity": "sha512-OxmY2qj+y6+KI4ifTL92j5+WYP+u5/PdThlYxVb0GMcMiMHfA7yIku9yaQNC5/oRdIvhuRpTMG/8/R40eB+8pA==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14",
+        "@types/phoenix": "^1.5.4",
+        "ws": "^8.14.2"
+      }
+    },
+    "node_modules/@supabase/realtime-js/node_modules/ws": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.5.tgz",
+      "integrity": "sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w==",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.39.2",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.39.2.tgz",
+      "integrity": "sha512-P+raK0epLef7x/s4MOUx6/TM2DX2UqMwbQXcV8PKYBX6xvX/zXARzakHsBrL/W5mA52S1vsRZjR8l7HhEPKmqA==",
+      "dependencies": {
+        "@supabase/functions-js": "^2.1.5",
+        "@supabase/gotrue-js": "^2.60.0",
+        "@supabase/node-fetch": "^2.6.14",
+        "@supabase/postgrest-js": "^1.9.0",
+        "@supabase/realtime-js": "^2.8.4",
+        "@supabase/storage-js": "^2.5.4"
+      }
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -4956,6 +5072,11 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.4.tgz",
+      "integrity": "sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA=="
+    },
     "node_modules/@types/prettier": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz",
@@ -7624,11 +7745,14 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
     "node_modules/dotenv-expand": {
@@ -15343,6 +15467,36 @@
         }
       }
     },
+    "node_modules/react-router": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz",
+      "integrity": "sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.1.tgz",
+      "integrity": "sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==",
+      "dependencies": {
+        "@remix-run/router": "1.14.1",
+        "react-router": "6.21.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15415,6 +15569,14 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index 61331e7..ccbdaaa 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,19 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@supabase/supabase-js": "^2.39.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "dotenv": "^16.3.1",
     "fs": "^0.0.1-security",
     "lucide-react": "^0.303.0",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/src/App.css b/src/App.css
index 9f4b96c..f705249 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 /* App.css */
 body {
   font-family: 'Google Sans', sans-serif;
-  background-color: #0a0a0a;
+  background-color: #181818;
   
 }
 .app {
@@ -55,7 +55,7 @@ body {
 }
 
 .search-filter  {
-  padding: 5px 10px;
+  padding: 2px 10px;
   cursor: pointer;
   font-family: 'Google Sans', sans-serif;
   color: #e5e5e8;
@@ -63,31 +63,142 @@ body {
 }
 
 .Btn {
+  width: 35px;
+  height: 35px;
   display: flex;
-  background-color: rgb(0, 0, 0);
-  color: #ffffff;
-  padding: 0.3rem 1rem;
-  font-size: 0.7rem;
-  line-height: 1.25rem;
-  font-weight: 700;
-  text-align: center;
-  vertical-align: middle;
   align-items: center;
-  border-radius: 0.5rem;
-  gap: 0.75rem;
-  border-color: #484848;
+  justify-content: center;
+  border: none;
+  background-color: transparent;
+  position: relative;
+  /* overflow: hidden; */
+  border-radius: 7px;
   cursor: pointer;
-  transition: .6s ease;
+  transition: all .3s;
 }
 
-.Btn svg {
-  height: 20px;
+.svgContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  backdrop-filter: blur(0px);
+  letter-spacing: 0.8px;
+  border-radius: 10px;
+  transition: all .3s;
+  border: 1px solid rgba(156, 156, 156, 0.466);
 }
 
-.Btn:hover {
-  box-shadow: none;
+.BG {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: #000000;
+  z-index: -1;
+  border-radius: 10px;
+  pointer-events: none;
+  transition: all .3s;
 }
 
+.Btn:hover .BG {
+  transform: rotate(35deg);
+  transform-origin: bottom;
+}
+
+.Btn:hover .svgContainer {
+  background-color: rgba(156, 156, 156, 0.466);
+  backdrop-filter: blur(4px);
+}
+
+.signup {
+  position: relative;
+  margin-right: 10px;
+  padding: 5px 7px;
+  outline: none;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  text-transform: uppercase;
+  background-color: #333;
+  border-radius: 10px;
+  color: #fff;
+  font-weight: 300;
+  font-size: 18px;
+  font-family: inherit;
+  z-index: 0;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
+}
+
+.signup:hover {
+  animation: sh0 0.5s ease-in-out both;
+}
+
+@keyframes sh0 {
+  0% {
+    transform: rotate(0deg) translate3d(0, 0, 0);
+  }
+
+  25% {
+    transform: rotate(7deg) translate3d(0, 0, 0);
+  }
+
+  50% {
+    transform: rotate(-7deg) translate3d(0, 0, 0);
+  }
+
+  75% {
+    transform: rotate(1deg) translate3d(0, 0, 0);
+  }
+
+  100% {
+    transform: rotate(0deg) translate3d(0, 0, 0);
+  }
+}
+
+.signup:hover span {
+  animation: storm 0.7s ease-in-out both;
+  animation-delay: 0.06s;
+}
+
+.signup::before,
+.signup::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: #fff;
+  opacity: 0;
+  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
+  z-index: -1;
+  transform: translate(100%, -25%) translate3d(0, 0, 0);
+}
+
+.signup:hover::before,
+.signup:hover::after {
+  opacity: 0.15;
+  transition: transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
+}
+
+.signup:hover::before {
+  transform: translate3d(50%, 0, 0) scale(0.9);
+}
+
+.signup:hover::after {
+  transform: translate(50%, 0) scale(1.1);
+}
+
+
+
 /* Cards styling */
 .card-list {
   display: grid;
diff --git a/src/App.js b/src/App.js
index 8e53d58..12d6dc0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,13 @@
 
 import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
 import Navbar from './components/Navbar';
 import CardList from './components/CardList';
 import CardModal from './components/CardModal'; 
 import Footer from './components/Footer';
 import ScrollToTopButton from './components/ScrollToTopButton';
-//import SignUp from './components/SignUp'
+import SignUp from './components/SignUp'
 
 const App = () => {
   const [cards, setCards] = useState([]);
@@ -55,16 +56,28 @@ const App = () => {
   
 
   return (
-    <div className="app">
-      <Navbar
-        searchTerm={searchTerm}
-        handleSearchChange={(event) => setSearchTerm(event.target.value)}
-      />
-      <CardList cards={filteredCards} onCardClick={(card) => handleCardClick(card)} />
-      <CardModal card={selectedCard} onClose={handleCloseModal} />
-      <ScrollToTopButton />
-      <Footer />
-    </div>
+    <Router>
+      <div className="app">
+        <Routes>
+          <Route path="/signup" element={<SignUp />} />
+          <Route
+            path="/"
+            element={
+              <>
+                <Navbar
+                  searchTerm={searchTerm}
+                  handleSearchChange={(event) => setSearchTerm(event.target.value)}
+                />
+                <CardList cards={filteredCards} onCardClick={(card) => handleCardClick(card)} />
+                <CardModal card={selectedCard} onClose={handleCloseModal} />
+                <ScrollToTopButton />
+                <Footer />
+              </>
+            }
+          />
+        </Routes>
+      </div>
+    </Router>
   );
 };
 
diff --git a/src/components/CardModal.css b/src/components/CardModal.css
index ab809b9..1762b92 100644
--- a/src/components/CardModal.css
+++ b/src/components/CardModal.css
@@ -33,6 +33,7 @@
   
   .modal-content h2 {
     margin-bottom: 16px;
+    font-size: large;
   }
   
   .modal-content p {
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 87b2cde..e380880 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -8,6 +8,10 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
     window.open(githubRepoUrl, '_blank');
   };
 
+  const navigateToSignUp = () => {
+    const signUpUrl = '/signup';
+    window.open(signUpUrl, '_blank');
+  };
   return (
     <nav className="navbar">
       <div className="logo-container">
@@ -23,16 +27,22 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
         </div>
       </div>
       <div className="search-filter">
-        <input
+          <input
           type="text"
           value={searchTerm}
           onChange={handleSearchChange}
           placeholder="Search by Name"
         />
-        <button class="Btn" 
+        <button className='signup' onClick={navigateToSignUp}>
+          <span>sign UP</span>
+        </button>
+
+        <button className="Btn" 
         onClick={navigateToGitHub} >
-        <svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <title>github</title> <rect fill="none" height="24" width="24"></rect> <path d="M12,2A10,10,0,0,0,8.84,21.5c.5.08.66-.23.66-.5V19.31C6.73,19.91,6.14,18,6.14,18A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.1,2.1,0,0,1,1.53,1,2.15,2.15,0,0,0,2.91.83,2.16,2.16,0,0,1,.63-1.34C8,16.17,5.62,15.31,5.62,11.5a3.87,3.87,0,0,1,1-2.71,3.58,3.58,0,0,1,.1-2.64s.84-.27,2.75,1a9.63,9.63,0,0,1,5,0c1.91-1.29,2.75-1,2.75-1a3.58,3.58,0,0,1,.1,2.64,3.87,3.87,0,0,1,1,2.71c0,3.82-2.34,4.66-4.57,4.91a2.39,2.39,0,0,1,.69,1.85V21c0,.27.16.59.67.5A10,10,0,0,0,12,2Z"></path> </g></svg>
-        STAR ON GITHUB
+        <span className="svgContainer">
+          <svg fill="white" viewBox="0 0 496 512" height="1.6em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
+        </span>
+        <span className="BG"></span>
         </button>
       </div>
     </nav>
diff --git a/src/components/SignUp.js b/src/components/SignUp.js
index 27debfc..94d5e88 100644
--- a/src/components/SignUp.js
+++ b/src/components/SignUp.js
@@ -1,62 +1,50 @@
-"use client"
-
-import { Icons } from "./ui/icons"
-import { Button } from "./ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "./ui/card"
-import { Input } from "./ui/input"
-import { Label } from "./ui/label"
+import { UserAuthSignUpForm } from "./user-auth-form-signup";
+import { UserAuthLoginForm } from './user-auth-form-login';
 
 function SignUp() {
   return (
-    <Card className="w-[450px] mx-auto">
-      <CardHeader className="space-y-1">
-        <CardTitle className="text-2xl text-black">Create an account</CardTitle>
-        <CardDescription>
-          Enter your email below to create your account
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className="grid grid-cols-2 gap-6">
-          <Button variant="outline">
-            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
-          </Button>
-          <Button variant="outline">
-            <Icons.google className="mr-2 h-4 w-4" />
-            Google
-          </Button>
-        </div>
-        <div className="relative">
-          <div className="absolute inset-0 flex items-center">
-            <span className="w-full border-t" />
+    <>
+      <div className="container grid relative min-h-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <div className="relative  h-full flex-col  p-10 text-white dark:border-r lg:flex" >
+          <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            A W E S O M E 
           </div>
-          <div className="relative flex justify-center text-xs uppercase">
-            <span className="bg-background px-2 text-muted-foreground">
-              Or continue with
-            </span>
+          <div className="relative z-20 mt-auto">
+            <blockquote className="space-y-2">
+              <p className="text-lg">
+                  &ldquo;Hello there! Thanks for visiting this page. Please signup or login for adding your portfolio and for accessing beautiful features. Thanks&rdquo;              
+              </p>
+              <footer className="text-sm">Kiran Naragund</footer>
+            </blockquote>
           </div>
         </div>
-        <div className="grid gap-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="Kiran@example.com" />
-        </div>
-        <div className="grid gap-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
+        <div className="relative  h-full flex-col bg-white p-3 dark:border-r lg:flex" >
+          <div className="lg:p-3">
+            <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+              <div className="flex flex-col space-y-2 text-center">
+                <h1 className="text-2xl font-semibold tracking-tight">
+                  Create an account
+                </h1>
+                <p className="text-sm text-muted-foreground">
+                  Enter your email below to create your account
+                </p>
+              </div>
+              <UserAuthSignUpForm />
+            </div>
+          </div>
+          <div className="lg:p-3">
+            <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+              <h1 className="text-2xl font-semibold tracking-tight text-center">
+                Have an account? Log in now
+              </h1>
+              <UserAuthLoginForm />
+            </div>
+          </div>
         </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Create account</Button>
-      </CardFooter>
-    </Card>
-  )
+      </div>
+    </>
+  );
 }
 
 export default SignUp;
\ No newline at end of file
diff --git a/src/components/user-auth-form-login.js b/src/components/user-auth-form-login.js
new file mode 100644
index 0000000..4b4db30
--- /dev/null
+++ b/src/components/user-auth-form-login.js
@@ -0,0 +1,132 @@
+"use client"
+import { useState } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import { useNavigate } from 'react-router-dom';
+import * as React from "react"
+import { cn } from "../lib/utils"
+import { Icons } from "./ui/icons"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+
+const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_API_KEY);
+
+
+export function UserAuthLoginForm({ className, ...props }) {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate(); 
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
+
+  const signInWithEmailPassword = async () => {
+    try {
+      const { data, error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) {
+        console.error('Email/password login error:', error.message);
+      } else {
+        console.log('Email/password login successful:', data);
+        // Redirect to localhost page after successful signup
+        navigate('/'); 
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  async function signInWithGithub() {
+    try {
+      const { user, session, error } = await supabase.auth.signInWithOAuth({
+        provider: 'github',
+      });
+  
+      if (error) {
+        // Handle GitHub sign-in error
+        console.error('GitHub login error:', error.message);
+      } else {
+        // Handle successful GitHub sign-in
+        console.log('GitHub login successful:', user, session);
+      }
+    } catch (error) {
+      // Handle other errors
+      console.error(error);
+    }
+  }
+
+  return (
+    <div className={cn("grid gap-6", className)} {...props}>
+      <form onSubmit={onSubmit}>
+        <div className="grid gap-2">
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="email">
+              Email
+            </Label>
+            <Input
+              id="email"
+              placeholder="Enter your Email"
+              type="email"
+              autoCapitalize="none"
+              autoComplete="email"
+              autoCorrect="off"
+              disabled={isLoading}
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+        <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="password">
+              Password
+            </Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your Password"
+              disabled={isLoading}
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+        </div>
+          <Button disabled={isLoading} onClick={signInWithEmailPassword}>
+            {isLoading && (
+              // eslint-disable-next-line 
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Login
+          </Button>
+        </div>
+      </form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <Button variant="outline" type="button" disabled={isLoading} onClick={signInWithGithub}>
+        {isLoading ? (
+          // eslint-disable-next-line 
+          <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          // eslint-disable-next-line 
+          <Icons.gitHub className="mr-2 h-4 w-4" />
+        )}{" "}
+        Github
+      </Button>
+    </div>
+  )
+}
diff --git a/src/components/user-auth-form-signup.js b/src/components/user-auth-form-signup.js
new file mode 100644
index 0000000..ceb4e2e
--- /dev/null
+++ b/src/components/user-auth-form-signup.js
@@ -0,0 +1,132 @@
+// "use client"
+import * as React from "react"
+import { useState } from 'react';
+import { createClient } from '@supabase/supabase-js';
+import { useNavigate } from 'react-router-dom';
+import { cn } from "../lib/utils"
+import { Icons } from "./ui/icons"
+import { Button } from "./ui/button"
+import { Input } from "./ui/input"
+import { Label } from "./ui/label"
+
+console.log('SUPABASE_URL from env:', process.env.REACT_APP_SUPABASE_URL);
+console.log('SUPABASE_API_KEY from env:', process.env.REACT_APP_SUPABASE_API_KEY);
+
+const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_API_KEY);
+
+export function UserAuthSignUpForm({ className, ...props }) {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate(); 
+
+  async function onSubmit(event) {
+    event.preventDefault()
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
+  
+  const signUpWithEmailPassword = async () => {
+    try {
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+      });
+
+      if (error) {
+        console.error('Email/password sign-up error:', error.message);
+      } else {
+        console.log('Email/password sign-up successful:', data);
+        // Redirect to main page after successful signup
+        navigate('/');
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  async function signInWithGithub() {
+    try {
+      const { user, session, error } = await supabase.auth.signInWithOAuth({
+        provider: 'github',
+      });
+  
+      if (error) {
+        console.error('GitHub sign-in error:', error.message);
+      } else {
+        console.log('GitHub sign-in successful:', user, session);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+  
+  
+  return (
+    <div className={cn("grid gap-6", className)} {...props}>
+      <form onSubmit={onSubmit}>
+        <div className="grid gap-2">
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="email">
+              Email
+            </Label>
+            <Input
+              id="email"
+              placeholder="Enter your Email"
+              type="email"
+              autoCapitalize="none"
+              autoComplete="email"
+              autoCorrect="off"
+              disabled={isLoading}
+              value={email} 
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="password">
+              Password
+            </Label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Enter your Password"
+              disabled={isLoading}
+              value={password} 
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <Button disabled={isLoading} onClick={signUpWithEmailPassword}>
+            {isLoading && (
+              // eslint-disable-next-line 
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Sign Up with Email
+          </Button>
+        </div>
+      </form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <Button variant="outline" type="button" disabled={isLoading} onClick={signInWithGithub}>
+        {isLoading ? (
+          // eslint-disable-next-line 
+          <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          // eslint-disable-next-line 
+          <Icons.gitHub className="mr-2 h-4 w-4" />
+        )}{" "}
+        Github
+      </Button>
+    </div>
+  )
+}
diff --git a/src/index.js b/src/index.js
index 030cd54..9a11fba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,16 @@
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-//import App from './App';
+import App from './App';
 import reportWebVitals from './reportWebVitals';
-import SignUp from '../src/components/SignUp'
+//import SignUp from '../src/components/SignUp'
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <SignUp />
+    <App />
   </React.StrictMode>
 );
 

From 61ea9ec8debefc8fbdd05a142b674e07261f3300 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Sat, 13 Jan 2024 12:46:06 +0530
Subject: [PATCH 4/6] Updates

---
 package-lock.json                       |  24 ++++--
 package.json                            |   1 +
 src/App.css                             | 108 +++++-------------------
 src/components/CardList.js              |  20 +++++
 src/components/Navbar.js                |  16 ++--
 src/components/ScrollToTopButton.js     |   4 +-
 src/components/user-auth-form-signup.js |   3 -
 7 files changed, 69 insertions(+), 107 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6e2d2ba..2a52132 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "cards",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.1",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
         "@fortawesome/react-fontawesome": "^0.2.0",
@@ -2456,6 +2457,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz",
+      "integrity": "sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/fontawesome-svg-core": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
@@ -13161,9 +13171,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -13833,9 +13843,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "funding": [
         {
           "type": "opencollective",
@@ -13851,7 +13861,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
diff --git a/package.json b/package.json
index ccbdaaa..0c6f3db 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
diff --git a/src/App.css b/src/App.css
index f705249..8137198 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,7 @@
 /* App.css */
 body {
   font-family: 'Google Sans', sans-serif;
-  background-color: #181818;
+  background-color: #000000;
   
 }
 .app {
@@ -13,7 +13,7 @@ body {
 .navbar {
   display: flex;
   justify-content: space-between;
-  border-bottom: 2px solid #484848;
+  border-bottom: 1px solid #484848;
   font-family: 'Google Sans', sans-serif;
   margin-bottom: 30px;
   backdrop-filter: blur(10px); 
@@ -212,9 +212,9 @@ body {
   position: relative;
   flex-basis: 100%;
   backdrop-filter: blur(10px);
-  border-radius: 10px;
+  border-radius: 15px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  padding: 15px;
+  /*padding: 15px;*/
   margin-bottom: 15px;
   margin-left: 20px;
   margin-right: 20px;
@@ -222,10 +222,11 @@ body {
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-fill-mode: forwards;
-  overflow:visible;
+  overflow:hidden;
   height: auto;
   color: #e5e5e8;
-  background-color: #2f2f31;
+  background-color: #000000;
+  border: 2px solid rgba(255, 255, 255, 0.25);;
   
 }
 
@@ -249,46 +250,11 @@ h3 {
   }
 }
 
-.card-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border-radius: 10px; 
-  transition: opacity 0.3s ease-out; 
-  pointer-events: none; 
-}
-
-.card-item:hover::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-radius: 10px;
-  transition: opacity 0.3s ease-out;
-  pointer-events: none;
-  animation: smoke 2s infinite linear; 
-}
-
-@keyframes smoke {
-  0%, 100% {
-    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); 
-  }
-  50% {
-    box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); 
-  }
-}
 
 .card-name {
   font-weight: bold;
   font-size: 20px;
-  
+  margin-bottom: 5px;
   font-family: 'Google Sans', sans-serif;
   text-align: center;
 }
@@ -323,53 +289,8 @@ h3 {
   position: relative;
   background: transparent;
   overflow: hidden;
-
-}
-
-.box:before {
-  content: "P";
-  position: absolute;
-  top: 0;
-  background: #fff;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(100%);
-  transition: transform .4s;
-  color: #0f0f0f;
-}
-
-.box:nth-child(2)::before {
-  transform: translateY(-100%);
-  content: 'R';
-}
-
-.box:nth-child(3)::before {
-  content: 'O';
-}
-
-.box:nth-child(4)::before {
-  transform: translateY(-100%);
-  content: 'F';
-}
-
-.box:nth-child(5)::before {
-  content: 'I';
 }
 
-.box:nth-child(6)::before {
-  content: 'L';
-}
-
-.box:nth-child(7)::before {
-  content: 'E';
-}
-
-.button:hover .box:before {
-  transform: translateY(0);
-}
 
 /* Footer style */
 .footer {
@@ -426,5 +347,18 @@ h3 {
   }
 }
 
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px 10px 15px;
+  border-top: 1px solid #484848;
+}
 
+.icon-button {
+  margin: 0 5px 0 5px;
+}
 
+.icon-button:hover {
+  cursor: default;
+}
\ No newline at end of file
diff --git a/src/components/CardList.js b/src/components/CardList.js
index 02c1b1f..4406c2b 100644
--- a/src/components/CardList.js
+++ b/src/components/CardList.js
@@ -6,7 +6,27 @@ const CardList = ({ cards, onCardClick  }) => (
       <div className="card-item" onClick={() => onCardClick(card)}>
         <img className="card-type-icon" src={card.image} alt='screenshot'/>
         <div className="card-name">{card.name}</div>
+        <div className="card-footer">
+          <div className="likes">{`${card.likes} people liked this`}</div>
+          <div className="actions">
+            {/* Like Button */}
+            <button className="icon-button">
+            <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.89346 2.35248C3.49195 2.35248 2.35248 3.49359 2.35248 4.90532C2.35248 6.38164 3.20954 7.9168 4.37255 9.33522C5.39396 10.581 6.59464 11.6702 7.50002 12.4778C8.4054 11.6702 9.60608 10.581 10.6275 9.33522C11.7905 7.9168 12.6476 6.38164 12.6476 4.90532C12.6476 3.49359 11.5081 2.35248 10.1066 2.35248C9.27059 2.35248 8.81894 2.64323 8.5397 2.95843C8.27877 3.25295 8.14623 3.58566 8.02501 3.88993C8.00391 3.9429 7.98315 3.99501 7.96211 4.04591C7.88482 4.23294 7.7024 4.35494 7.50002 4.35494C7.29765 4.35494 7.11523 4.23295 7.03793 4.04592C7.01689 3.99501 6.99612 3.94289 6.97502 3.8899C6.8538 3.58564 6.72126 3.25294 6.46034 2.95843C6.18109 2.64323 5.72945 2.35248 4.89346 2.35248ZM1.35248 4.90532C1.35248 2.94498 2.936 1.35248 4.89346 1.35248C6.0084 1.35248 6.73504 1.76049 7.20884 2.2953C7.32062 2.42147 7.41686 2.55382 7.50002 2.68545C7.58318 2.55382 7.67941 2.42147 7.79119 2.2953C8.265 1.76049 8.99164 1.35248 10.1066 1.35248C12.064 1.35248 13.6476 2.94498 13.6476 4.90532C13.6476 6.74041 12.6013 8.50508 11.4008 9.96927C10.2636 11.3562 8.92194 12.5508 8.00601 13.3664C7.94645 13.4194 7.88869 13.4709 7.83291 13.5206C7.64324 13.6899 7.3568 13.6899 7.16713 13.5206C7.11135 13.4709 7.05359 13.4194 6.99403 13.3664C6.0781 12.5508 4.73641 11.3562 3.59926 9.96927C2.39872 8.50508 1.35248 6.74041 1.35248 4.90532Z" fill="#e04b4c" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            </button>
+
+            {/* Save Button */}
+            <button className="icon-button">
+            <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.7761 2 12 2.22386 12 2.5V13.5C12 13.6818 11.9014 13.8492 11.7424 13.9373C11.5834 14.0254 11.3891 14.0203 11.235 13.924L7.5 11.5896L3.765 13.924C3.61087 14.0203 3.41659 14.0254 3.25762 13.9373C3.09864 13.8492 3 13.6818 3 13.5V2.5ZM4 3V12.5979L6.97 10.7416C7.29427 10.539 7.70573 10.539 8.03 10.7416L11 12.5979V3H4Z" fill="#f5ac06" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            </button>
+
+            {/* Share Button */}
+            <button className="icon-button" >
+            <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.50003C5 8.32845 4.32843 9.00003 3.5 9.00003C2.67157 9.00003 2 8.32845 2 7.50003C2 6.6716 2.67157 6.00003 3.5 6.00003C4.32843 6.00003 5 6.6716 5 7.50003ZM5.71313 8.66388C5.29445 9.45838 4.46048 10 3.5 10C2.11929 10 1 8.88074 1 7.50003C1 6.11931 2.11929 5.00003 3.5 5.00003C4.46048 5.00003 5.29445 5.54167 5.71313 6.33616L9.10424 4.21671C9.03643 3.98968 9 3.74911 9 3.50003C9 2.11932 10.1193 1.00003 11.5 1.00003C12.8807 1.00003 14 2.11932 14 3.50003C14 4.88074 12.8807 6.00003 11.5 6.00003C10.6915 6.00003 9.97264 5.61624 9.51566 5.0209L5.9853 7.22738C5.99502 7.31692 6 7.40789 6 7.50003C6 7.59216 5.99502 7.68312 5.9853 7.77267L9.51567 9.97915C9.97265 9.38382 10.6915 9.00003 11.5 9.00003C12.8807 9.00003 14 10.1193 14 11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5C9 11.2509 9.03643 11.0104 9.10425 10.7833L5.71313 8.66388ZM11.5 5.00003C12.3284 5.00003 13 4.32846 13 3.50003C13 2.6716 12.3284 2.00003 11.5 2.00003C10.6716 2.00003 10 2.6716 10 3.50003C10 4.32846 10.6716 5.00003 11.5 5.00003ZM13 11.5C13 12.3285 12.3284 13 11.5 13C10.6716 13 10 12.3285 10 11.5C10 10.6716 10.6716 10 11.5 10C12.3284 10 13 10.6716 13 11.5Z" fill="#217ccb" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+            </button>
+          </div>
+        </div>
       </div>
+    
     ))}
   </div>
 );
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index e380880..35a88aa 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -16,14 +16,14 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
     <nav className="navbar">
       <div className="logo-container">
         {/* <img src="logo.png" alt="Logo" className="logo" /> */}
-        <div class="button">
-          <div class="box">A</div>
-          <div class="box">W</div>
-          <div class="box">E</div>
-          <div class="box">S</div>
-          <div class="box">O</div>
-          <div class="box">M</div>
-          <div class="box">E</div>
+        <div className="button">
+          <div className="box">A</div>
+          <div className="box">W</div>
+          <div className="box">E</div>
+          <div className="box">S</div>
+          <div className="box">O</div>
+          <div className="box">M</div>
+          <div className="box">E</div>
         </div>
       </div>
       <div className="search-filter">
diff --git a/src/components/ScrollToTopButton.js b/src/components/ScrollToTopButton.js
index c8fc2bb..425217f 100644
--- a/src/components/ScrollToTopButton.js
+++ b/src/components/ScrollToTopButton.js
@@ -34,8 +34,8 @@ const ScrollToTopButton = () => {
     <button className={`top-button ${isVisible ? 'visible' : ''}`}
     onClick={scrollToTop}
     >
-      <svg height="1.2em" class="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
-    <p class="text">Back to Top</p>
+      <svg height="1.2em" className="arrow" viewBox="0 0 512 512"><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"></path></svg>
+    <p className="text">Back to Top</p>
     </button>
 
   );
diff --git a/src/components/user-auth-form-signup.js b/src/components/user-auth-form-signup.js
index ceb4e2e..e3a2136 100644
--- a/src/components/user-auth-form-signup.js
+++ b/src/components/user-auth-form-signup.js
@@ -9,9 +9,6 @@ import { Button } from "./ui/button"
 import { Input } from "./ui/input"
 import { Label } from "./ui/label"
 
-console.log('SUPABASE_URL from env:', process.env.REACT_APP_SUPABASE_URL);
-console.log('SUPABASE_API_KEY from env:', process.env.REACT_APP_SUPABASE_API_KEY);
-
 const supabase = createClient(process.env.REACT_APP_SUPABASE_URL, process.env.REACT_APP_SUPABASE_API_KEY);
 
 export function UserAuthSignUpForm({ className, ...props }) {

From 78b75248dc74fb4a2d902c81ec350fa22d824703 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Sat, 20 Jan 2024 18:00:26 +0530
Subject: [PATCH 5/6] Updates

---
 package-lock.json          |  40 ++++
 package.json               |   2 +
 public/favicon.ico         | Bin 15406 -> 4286 bytes
 src/App.css                |   2 +-
 src/App.js                 |   4 +-
 src/Home.js                | 405 +++++++++++++++++++++++++++++++++++++
 src/components/CardList.js |  10 +-
 src/components/Navbar.js   |  14 +-
 src/index.js               |   5 +-
 9 files changed, 468 insertions(+), 14 deletions(-)
 create mode 100644 src/Home.js

diff --git a/package-lock.json b/package-lock.json
index 2a52132..70021c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,8 @@
         "path": "^0.12.7",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
+        "react-player": "^2.14.1",
         "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "tailwind-merge": "^2.2.0",
@@ -12787,6 +12789,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -12957,6 +12964,11 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -15419,11 +15431,39 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-player": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.14.1.tgz",
+      "integrity": "sha512-jILj7F9o+6NHzrJ1GqZIxfJgskvGmKeJ05FNhPvgiCpvMZFmFneKEkukywHcULDO2lqITm+zcEkLSq42mX0FbA==",
+      "dependencies": {
+        "deepmerge": "^4.0.0",
+        "load-script": "^1.0.0",
+        "memoize-one": "^5.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/package.json b/package.json
index 0c6f3db..76d23a5 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-player": "^2.14.1",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "tailwind-merge": "^2.2.0",
diff --git a/public/favicon.ico b/public/favicon.ico
index 8e1666203e7ec427f7b392648f0f4dcb9499973d..907a9cd7d4a53602da737bbda399421e7d3dad63 100644
GIT binary patch
literal 4286
zcmeH}dq@>_6vxlKrrsr+!_8`2bVG}B4c20hpvMiQjR@B^88u>a#vuA<IKgd(TW+%n
z!cY=13X;rlC6p<O=rqmDe59h8nXl_xGfR8et#00Z&Rt#@KIW)DHt;9sdj0)==k-0`
zbAE~#_*uGC^izI+QDlLLtVGz7O^EJ07iV*84uStG0w+(Nl*5M)8_%9S>swh_xu&M3
zX0u8~MaA3fElNvEbIZ!gdgkdB6%`3~-K(psE!VDHJJj3TdwFPRsAqV1xLf7=_3OPo
zJv~jFrEq6+US6JONlD2wiG$qa{Q2`f&CSgR@Y8qi-n~B_J$e-O`0?XS$f_r@iM?+)
zE8@-|cT+B0xZrp7>Q%|e$atza`uh3=dtcqYeY?wUw{J)0I~)$Vb?cVPE?9`}5rY@!
zpWeB1r=g>xqmtNHH#Rm(Zf>sY?!Wz_ez3L2X0u&>`0(K?_wV1I*2I$-WPE&lnPP!n
zMOj&yUsY9=BqStEt2fg@eSN*u*48c`9UW~3>o3%Y;yTr;tE-bsmo9n1%>ZIu0S<NC
zJ(8K3=|K&rQkimZ=gyt7W5*8Jwr!i?#EBDn$I##3e*l}g;PBko*x29n!o$O*v$Ip0
znwp*;92|^kYio<pIH^T2fA_-4KysLM9b#i+B`z+`w0G}bQ*?B+w6?aY?X`FB-fhLE
z1rhBDU4?~(5)~C?fcq=p-cL7f+$d~mX<6OX)g|ENg-$;FImA`NY<gnXu3d8M*fBYE
z>eQm+$B&y*Q&Z*KxpP8qd%&{{IF?K-2Jkde8?P%@uB>QpZx02Z@4)*r`1(UmPL8|k
zC<b8mb$54nJ@NXMmzO(Zp6Me!Jza>?$laB2XI_4Oz9c0j3Arf`KZJjc*j!GXU&8M?
z^4to>Z#{VMz%(*45^l9x-yawl5PyGv?FX&F2F|VY!kfy&e_Gku*@ABma(frtjoSaZ
zRJXLW)Egf~*mTwxjvF*bIH9r}>=TLW1;nXCoZ1Tk?6<MEabn+jIL!yxsV`4_2cqXj
z?VLA{9zE*Bli9bMTuTuj?L~4E{Y@+p)F6bKOG-+LQ%CbBzLnT%#rKBU_@`HN-pzy0
zA2D0!-@JL#6)ClrhK7dMsB<N@gC}w)Pc!|Q1_xiAh*y=K;J=O-TQ6R`_y&FHvNhco
zja}_h>rbe;AF;cxDmHq?UNk<_iNjs<1^X~!jnp%}qf2K5*en0`z`yE(f&w4-<gzu>
z7y3u_-{DOO*7*b0uIt+8@a}bHKovY#gZ%|ye;OaFxbM2BGlF<b^j|iZBxr2P<=HIW
z4ne%|6G2{!5to|Iv7n$JBX}o)?=Qr*o9~H{k&#B#)1`4}?woI>7h1smJ>F>v2?=r8
zndwV%a<b+qyd4|i+qc*<P0an!&`{BMu)7}LHAn?@+DKnWL_~zMPjo&ZONgrs9OL%y
z->?5O%;a*?na;O^2M-$QgWb%XaOymNA_lDqJ?csQkAQC~xtWxk@L&CE-itXqLk`)@
z5?{DC$^L9MRFAk#%=0jE{EeChP)CDuj@)!Ed&3oP?SFWnzTNp9$XQ8yM|&oGGwa-s
ziHVtwyD9H5bM)PC2gi?@t!cc+zrwc<z}=rXe36CZ8$b-($vKTUYvJ3E#l^)w+V48g
zpLWH^$2<ED9xWv2&*9f0dO8yx<RJOfrwHuNfKw!IT|i=DqLKIGY28lJH<?U=ec@f2
z2iIQ)TR-0XWz=aA{yeqEwrtrlNpEgr4uStF0&sTn8u4~GirpNJX#Ty3wK^Q}wtbHH
z5zBaNm&IQGv)NwkX0};9&9<&`vu(5%i8tGADaaCw{re@B@%8I1<BQksb9j9Dmklen
KZ05;+*!dGDQ=+{9

literal 15406
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

diff --git a/src/App.css b/src/App.css
index 8137198..0189fcf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -298,7 +298,7 @@ h3 {
   padding: 1px;
   backdrop-filter: blur(10px);
   color: #fff;
-  position: fixed;
+  position: relative;
   bottom: 0;
   width: 100%;
   border-top: 1px solid #ccc;
diff --git a/src/App.js b/src/App.js
index 12d6dc0..25f2834 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@ import CardModal from './components/CardModal';
 import Footer from './components/Footer';
 import ScrollToTopButton from './components/ScrollToTopButton';
 import SignUp from './components/SignUp'
+import Home from './Home';
 
 const App = () => {
   const [cards, setCards] = useState([]);
@@ -60,8 +61,9 @@ const App = () => {
       <div className="app">
         <Routes>
           <Route path="/signup" element={<SignUp />} />
+          <Route path="/" element={<Home />} />
           <Route
-            path="/"
+            path="/portfolios"
             element={
               <>
                 <Navbar
diff --git a/src/Home.js b/src/Home.js
new file mode 100644
index 0000000..e14bf88
--- /dev/null
+++ b/src/Home.js
@@ -0,0 +1,405 @@
+// src/App.js
+import React from 'react';
+//import ReactPlayer from 'react-player';
+//import { Link } from 'react-router-dom';
+import { SiX, SiGithub, SiLinkedin, SiInstagram, SiGmail } from "react-icons/si"
+
+
+
+function Home() {
+    const getCurrentYear = () => new Date().getFullYear()
+
+  const footerLinks = [
+    {
+      name: "Twitter",
+      link: "https://twitter.com/kiran__a__n",
+      icon: (
+        <SiX aria-label="Follow us on Twitter" title="Twitter" />
+      ),
+      hover: " text-xl  text-gray-300 cursor-pointer hover:text-white"
+    },
+    {
+      name: "GitHub",
+      link: "https://github.com/Kiran1689",
+      icon: (
+        <SiGithub
+          aria-label="Follow us on GitHub"
+          title="GitHub(Kiran1689)"
+        />
+      ),
+      hover: " text-xl  text-gray-300 cursor-pointer hover:text-white"
+    },
+    {
+      name: "Linkedin",
+      link: "https://linkedin.com/in/kiran-a-n",
+      icon: (
+        <SiLinkedin
+          aria-label="Follow us on LinkedIn"
+          title="LinkedIn"
+        />
+      ),
+      hover: " text-xl  text-gray-300 cursor-pointer hover:text-white"
+    },
+    {
+      name: "Instagram",
+      link: "https://instagram.com/kiran_a_n",
+      icon: (
+        <SiInstagram
+          aria-label="Follow us on Instagram"
+          title="Instagram"
+        />
+      ),
+      hover: " text-xl text-gray-300 cursor-pointer hover:text-white"
+    },
+    {
+      name: "Gmail",
+      link: "mailto:kirannaragund197@gmail.com",
+      icon: (
+        <SiGmail
+          aria-label="Mail us"
+          title="Gmail"
+        />
+      ),
+      hover: " text-xl  text-gray-300 cursor-pointer hover:text-white"
+    }
+  ]
+
+  const footerdocsLinks = [
+    {
+      title: "Documentation",
+      child: [
+        {
+          name: "Contributing Guide",
+          link:
+            "https://github.com/Kiran1689/Awesome-Dev-Portfolios/blob/main/CONTRIBUTING.md"
+        },
+        {/*
+        {
+          name: "Add projects via GitHub",
+          link:
+            "https://github.com/Kiran1689/Awesome-Dev-Portfolios"
+        },
+        {
+          name: "Run the project locally",
+          link:
+            "https://github.com/Kiran1689/Awesome-Dev-Portfolios"
+        }
+      */}
+      ]
+    }
+  ]
+
+  const footerServiceLinks = [
+    {
+      title: "License",
+      child: [
+        {
+          name: "MIT License",
+          link: "https://github.com/Kiran1689/Awesome-Dev-Portfolios/blob/main/LICENSE"
+        },
+        {/*
+        {
+          name: "Code of Conduct",
+          link:
+            "https://github.com/Kiran1689/Awesome-Dev-Portfolios/blob/main/LICENSE"
+        }
+        */}
+      ]
+    }
+  ]
+  return (
+    <section>
+    {/* Navbar */}
+    <header className="bg-black border-b border-gray-500">
+        <div className="px-4 mx-auto sm:px-6 lg:px-8 xl:px-12">
+            <div className="flex items-center justify-between h-16 lg:h-[72px]">
+                <div className="flex items-center flex-shrink-0">
+                    <a href="/" title="" className="inline-flex">
+                    <h1 className=" text-white font-medium">A W E S O M E</h1>
+                    </a>
+                </div>
+
+                <div className="hidden lg:flex lg:justify-center lg:space-x-10 xl:space-x-14">
+                    <a href="/" title="" className="text-base font-medium text-gray-300  focus:text-white hover:text-white"> Home </a>
+
+                    <a href="/portfolios" title="" className="text-base font-medium text-gray-300  focus:text-white hover:text-white"> Portfolios </a>
+
+                    <a href="https://github.com/Kiran1689/Awesome-Dev-Portfolios/blob/main/CONTRIBUTING.md" title="Documentation" className="text-base font-medium text-gray-300  focus:text-white hover:text-white"> Documentation </a>
+
+                    <a href="https://github.com/Kiran1689/Awesome-Dev-Portfolios/issues/new/choose" title="" className="text-base font-medium text-gray-300  focus:text-white hover:text-white"> Help </a>
+                </div>
+
+                <div className="flex items-center justify-end space-x-5">
+                    <button type="button" className="p-2 -m-2 text-white transition-all duration-200 lg:hidden hover:text-gray-200">
+                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+
+                    <div class="group relative">
+                      <a
+                        href="https://github.com/Kiran1689/Awesome-Dev-Portfolios"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="GitHub repository"
+                      >
+                      
+                      <button className='text-gray-300'>
+                      <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" class="w-8 hover:scale-100 duration-200 hover:stroke-white"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                      </button>
+                      </a>
+                      <span class="absolute -top-14 left-[50%] -translate-x-[50%] 
+                      z-20 origin-left scale-0 px-3 rounded-lg border 
+                      border-white bg-white py-2 text-sm font-bold
+                      shadow-md transition-all duration-300 ease-in-out 
+                      group-hover:scale-100">GitHub<span>
+                    </span></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    {/*Hero section*/}
+    <div className="relative pt-12 bg-black sm:py-16 lg:py-20 xl:pt-32 xl:pb-44">
+        <div className="absolute inset-0 hidden lg:block">
+            <img className="object-cover object-right-bottom w-full h-full" src="https://iili.io/JYiTEe1.png" alt="" />
+        </div>
+
+        <div className="relative px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
+            <div className="max-w-xl mx-auto text-center lg:max-w-md xl:max-w-lg lg:text-left lg:mx-0">
+                <h1 className="text-3xl font-bold text-white sm:text-4xl xl:text-5xl xl:leading-tight">Want to build awesome portfolio?</h1>
+                <p className="mt-8 text-base font-normal leading-7 text-gray-400 lg:max-w-md xl:pr-0 lg:pr-16">On the Awesome Dev Portfolios platform, you can showcase your impressive portfolio to the world. If you're looking to build your own, feel free to browse through the projects for inspiration.</p>
+                <div className="flex items-center justify-center mt-8 space-x-5 xl:mt-16 lg:justify-start">
+                    <a
+                        href="/portfolios"
+                        title="Portfolios"
+                        className="
+                            inline-flex
+                            items-center
+                            justify-center
+                            px-3
+                            py-3
+                            text-base
+                            font-bold
+                            leading-7
+                            text-gray-900
+                            transition-all
+                            duration-200
+                            bg-white
+                            border border-transparent
+                            rounded-md
+                            sm:px-6
+                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-white
+                            hover:bg-gray-200
+                        "
+                        role="button"
+                    >
+                        BROWSE PROJECTS
+                    </a>
+
+                    <a
+                        href="https://github.com/Kiran1689/Awesome-Dev-Portfolios/blob/main/CONTRIBUTING.md"
+                        title="GitHub"
+                        className="
+                            inline-flex
+                            items-center
+                            justify-center
+                            px-2
+                            py-3
+                            text-base
+                            font-bold
+                            leading-7
+                            text-white
+                            transition-all
+                            duration-200
+                            bg-transparent
+                            border border-transparent
+                            rounded-md
+                            sm:px-4
+                            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-700
+                            hover:bg-gray-700
+                        "
+                        role="button"
+                    >
+                        ADD YOUR PORTFOLIO
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div className="mt-8 lg:hidden">
+            <img className="object-cover w-full h-full" src="https://iili.io/JYPUxLX.png" alt="" />
+        </div>
+    </div>
+    
+    {/*Feature section*/}
+    <div className="flex items-center justify-center flex-col sm:flex py-8 bg-white sm:py-16 lg:py-20 xl:pt-32 xl:pb-44">
+      <div className="text-center mb-8 items-center justify-center">
+        <h1 className="text-3xl font-bold text-black sm:text-4xl xl:text-5xl xl:leading-tight">Let's Showcase & get inspired</h1>
+      </div>
+      <div className="text-center items-center justify-center">
+        <p className="mb-8 text-base font-normal leading-7 text-gray-600 lg:max-w-md xl:pr-0">
+        Whether you're crafting a new portfolio or showcasing your existing one, our platform is the ideal space for inspiration. 
+        </p>
+      </div>
+      <div className="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4">
+        <div className="bg-black p-4 rounded-md shadow-md max-w-xs text-center">
+          <h3 className="text-white mb-2 mt-4">DESIGN FAST</h3>
+          <p className="text-gray-400 tracking-tighter p-5">
+          Create a stunning design portfolio by leveraging the work of other developers. Draw inspiration from their projects to enhance the visual appeal and effectiveness of your own portfolio.
+          </p>
+          <div class="v ab bb dc bf cf">
+            <img class="zg zc" src="https://iili.io/JYZHFyv.png" alt=""></img>
+          </div>
+        </div>
+
+        {/*  Card 2 */}
+        <div className="bg-black p-4 rounded-md shadow-md max-w-xs text-center">
+          <h3 className="text-white mb-2 mt-4">CONNECT</h3>
+          <p className="text-gray-400  tracking-tighter p-5">
+          Connect with developers worldwide, sharing experiences and collaborating on exciting projects. Reach out directly if you need assistance with their portfolio projects.
+          </p>
+          <div class="v ab bb dc bf cf ih wh">
+              <img class="zg zc" src="https://iili.io/JYtFmXf.png" alt=""></img>
+          </div>
+        </div>
+
+        {/* Card 3 */}
+        <div className="bg-black p-4 rounded-md shadow-md max-w-xs text-center">
+          <h3 className="text-white mb-2 mt-4">OPEN SOURCE</h3>
+          <p className="text-gray-400 tracking-tighter p-5">
+          Contribute to the open-source community by showcasing your GitHub repositories. Collaborate on exciting projects and make your mark in the world of open source.
+          </p>
+          <div class="v ab bb dc bf cf ih wh">
+              <img class="zg zc" src="https://iili.io/JYp193v.png" alt=""></img>
+          </div>
+        </div>
+      </div>
+    </div>
+    {/*footer section*/}
+    <div className="border-t border-gray-800 bg-black">
+      <div className="mx-auto max-w-screen-xl pt-8 sm:pt-16 px-4 sm:px-6 lg:px-8 pb-8">
+        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-4">
+          <div className="text-center lg:text-left">
+            <div className="flex h-10 items-center justify-center lg:justify-start text-white rounded-lg font-extrabold text-2xl">
+              A W E S O M E
+            </div>
+            <p className="mt-4 text-center text-gray-200 dark:text-gray-400 lg:text-left lg:text-lg">
+             Awesome Dev Portfolios platform aims to collect portfolios and their repositories from developers around the world.
+            </p>
+
+            <div className="mt-6 flex justify-center lg:justify-start gap-4">
+              {footerLinks.map(footerLink => (
+                <li key={footerLink.link}>
+                  <a
+                    href={footerLink.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={footerLink.hover}
+                    aria-label={`footer link of ${footerLink.link}`}
+                  >
+                    {footerLink.icon}
+                  </a>
+                </li>
+              ))}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mx-auto">
+            <ul className="font-medium text-gray-200 pt-5 text-center lg:text-left">
+              {footerdocsLinks.map((section, index) => (
+                <div key={index}>
+                  <h3 className="text-xl font-extrabold mb-4 text-gray-200">
+                    {section.title}
+                  </h3>
+                  <ul>
+                    {section.child.map((link, linkIndex) => (
+                      <li key={linkIndex} className="pt-2">
+                        <a
+                          href={link.link}
+                          className="hover:text-gray-300 "
+                          rel="noopener noreferrer"
+                          target="_blank"
+                          aria-label="footer docs link"
+                        >
+                          {link.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </ul>
+
+            <ul className="font-medium text-gray-200 text-center lg:text-left">
+              {footerServiceLinks.map((section, index) => (
+                <div key={index}>
+                  <h3 className="text-xl font-extrabold mt-5 mb-4 text-gray-200">
+                    {section.title}
+                  </h3>
+                  <ul>
+                    {section.child.map((link, linkIndex) => (
+                      <li key={linkIndex} className="pt-2">
+                        <a
+                          href={link.link}
+                          className="hover:text-gray-300  "
+                          rel="noopener noreferrer"
+                          target="_blank"
+                          aria-label="footer service link"
+                        >
+                          {link.name}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </ul>
+            <div className="mt-[25px] ">
+              <div className="p-2 rounded-lg  mx-auto">
+                <a
+                  href="https://github.com/Kiran1689/Awesome-Dev-Portfolios"
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label="GitHub repository"
+                >
+                 <button
+                    className="group flex justify-center items-center gap-2 group-hover:before:duration-500 group-hover:after:duration-500 after:duration-500 hover:border-neutral-900 duration-500 hover:duration-500 origin-left hover:decoration-2 hover:text-neutral-300 relative bg-neutral-900 px-10 py-4 border text-left p-3 text-gray-50 text-base font-bold rounded-lg overflow-hidden after:absolute after:z-10 after:w-12 after:h-12 after:content[''] after:bg-sky-900 after:-left-8 after:top-8 after:rounded-full after:blur-lg hover:after:animate-pulse"
+                  >
+                    <svg
+                      className="w-6 h-6 fill-neutral-50"
+                      height="100"
+                      preserveAspectRatio="xMidYMid meet"
+                      viewBox="0 0 100 100"
+                      width="100"
+                      x="0"
+                      xmlns="http://www.w3.org/2000/svg"
+                      y="0"
+                    >
+                      <path
+                        className="svg-fill-primary"
+                        d="M50,1.23A50,50,0,0,0,34.2,98.68c2.5.46,3.41-1.09,3.41-2.41s0-4.33-.07-8.5c-13.91,3-16.84-6.71-16.84-6.71-2.28-5.77-5.55-7.31-5.55-7.31-4.54-3.1.34-3,.34-3,5,.35,7.66,5.15,7.66,5.15C27.61,83.5,34.85,81.3,37.7,80a10.72,10.72,0,0,1,3.17-6.69C29.77,72.07,18.1,67.78,18.1,48.62A19.34,19.34,0,0,1,23.25,35.2c-.52-1.26-2.23-6.34.49-13.23,0,0,4.19-1.34,13.75,5.13a47.18,47.18,0,0,1,25,0C72.07,20.63,76.26,22,76.26,22c2.72,6.89,1,12,.49,13.23a19.28,19.28,0,0,1,5.14,13.42c0,19.21-11.69,23.44-22.83,24.67,1.8,1.55,3.4,4.6,3.4,9.26,0,6.69-.06,12.08-.06,13.72,0,1.34.9,2.89,3.44,2.4A50,50,0,0,0,50,1.23Z"
+                      ></path>
+                    </svg>
+                    ⭐GITHUB
+                  </button>
+ 
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="mt-16 pt-8 dark:border-gray-800 text-center lg:text-center ">
+          <p className="text-gray-200 mx-auto lg:mx-0">
+            © Awesome Dev Portfolios {getCurrentYear()} All rights reserved
+          </p>
+        </div>
+      </div>
+    </div>
+</section>
+
+  );
+}
+
+
+export default Home;
diff --git a/src/components/CardList.js b/src/components/CardList.js
index 4406c2b..c6ab30e 100644
--- a/src/components/CardList.js
+++ b/src/components/CardList.js
@@ -6,25 +6,27 @@ const CardList = ({ cards, onCardClick  }) => (
       <div className="card-item" onClick={() => onCardClick(card)}>
         <img className="card-type-icon" src={card.image} alt='screenshot'/>
         <div className="card-name">{card.name}</div>
+        {/*
         <div className="card-footer">
-          <div className="likes">{`${card.likes} people liked this`}</div>
+          <div className="likes">120 people liked this</div>
           <div className="actions">
-            {/* Like Button */}
+            //Like
             <button className="icon-button">
             <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.89346 2.35248C3.49195 2.35248 2.35248 3.49359 2.35248 4.90532C2.35248 6.38164 3.20954 7.9168 4.37255 9.33522C5.39396 10.581 6.59464 11.6702 7.50002 12.4778C8.4054 11.6702 9.60608 10.581 10.6275 9.33522C11.7905 7.9168 12.6476 6.38164 12.6476 4.90532C12.6476 3.49359 11.5081 2.35248 10.1066 2.35248C9.27059 2.35248 8.81894 2.64323 8.5397 2.95843C8.27877 3.25295 8.14623 3.58566 8.02501 3.88993C8.00391 3.9429 7.98315 3.99501 7.96211 4.04591C7.88482 4.23294 7.7024 4.35494 7.50002 4.35494C7.29765 4.35494 7.11523 4.23295 7.03793 4.04592C7.01689 3.99501 6.99612 3.94289 6.97502 3.8899C6.8538 3.58564 6.72126 3.25294 6.46034 2.95843C6.18109 2.64323 5.72945 2.35248 4.89346 2.35248ZM1.35248 4.90532C1.35248 2.94498 2.936 1.35248 4.89346 1.35248C6.0084 1.35248 6.73504 1.76049 7.20884 2.2953C7.32062 2.42147 7.41686 2.55382 7.50002 2.68545C7.58318 2.55382 7.67941 2.42147 7.79119 2.2953C8.265 1.76049 8.99164 1.35248 10.1066 1.35248C12.064 1.35248 13.6476 2.94498 13.6476 4.90532C13.6476 6.74041 12.6013 8.50508 11.4008 9.96927C10.2636 11.3562 8.92194 12.5508 8.00601 13.3664C7.94645 13.4194 7.88869 13.4709 7.83291 13.5206C7.64324 13.6899 7.3568 13.6899 7.16713 13.5206C7.11135 13.4709 7.05359 13.4194 6.99403 13.3664C6.0781 12.5508 4.73641 11.3562 3.59926 9.96927C2.39872 8.50508 1.35248 6.74041 1.35248 4.90532Z" fill="#e04b4c" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
             </button>
 
-            {/* Save Button */}
+            //Save
             <button className="icon-button">
             <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H11.5C11.7761 2 12 2.22386 12 2.5V13.5C12 13.6818 11.9014 13.8492 11.7424 13.9373C11.5834 14.0254 11.3891 14.0203 11.235 13.924L7.5 11.5896L3.765 13.924C3.61087 14.0203 3.41659 14.0254 3.25762 13.9373C3.09864 13.8492 3 13.6818 3 13.5V2.5ZM4 3V12.5979L6.97 10.7416C7.29427 10.539 7.70573 10.539 8.03 10.7416L11 12.5979V3H4Z" fill="#f5ac06" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
             </button>
 
-            {/* Share Button */}
+            //Share Button 
             <button className="icon-button" >
             <svg width="20" height="20" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.50003C5 8.32845 4.32843 9.00003 3.5 9.00003C2.67157 9.00003 2 8.32845 2 7.50003C2 6.6716 2.67157 6.00003 3.5 6.00003C4.32843 6.00003 5 6.6716 5 7.50003ZM5.71313 8.66388C5.29445 9.45838 4.46048 10 3.5 10C2.11929 10 1 8.88074 1 7.50003C1 6.11931 2.11929 5.00003 3.5 5.00003C4.46048 5.00003 5.29445 5.54167 5.71313 6.33616L9.10424 4.21671C9.03643 3.98968 9 3.74911 9 3.50003C9 2.11932 10.1193 1.00003 11.5 1.00003C12.8807 1.00003 14 2.11932 14 3.50003C14 4.88074 12.8807 6.00003 11.5 6.00003C10.6915 6.00003 9.97264 5.61624 9.51566 5.0209L5.9853 7.22738C5.99502 7.31692 6 7.40789 6 7.50003C6 7.59216 5.99502 7.68312 5.9853 7.77267L9.51567 9.97915C9.97265 9.38382 10.6915 9.00003 11.5 9.00003C12.8807 9.00003 14 10.1193 14 11.5C14 12.8807 12.8807 14 11.5 14C10.1193 14 9 12.8807 9 11.5C9 11.2509 9.03643 11.0104 9.10425 10.7833L5.71313 8.66388ZM11.5 5.00003C12.3284 5.00003 13 4.32846 13 3.50003C13 2.6716 12.3284 2.00003 11.5 2.00003C10.6716 2.00003 10 2.6716 10 3.50003C10 4.32846 10.6716 5.00003 11.5 5.00003ZM13 11.5C13 12.3285 12.3284 13 11.5 13C10.6716 13 10 12.3285 10 11.5C10 10.6716 10.6716 10 11.5 10C12.3284 10 13 10.6716 13 11.5Z" fill="#217ccb" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
             </button>
           </div>
         </div>
+         */}
       </div>
     
     ))}
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 35a88aa..84cea81 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -7,16 +7,17 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
     const githubRepoUrl = 'https://github.com/Kiran1689/Awesome-Dev-Portfolios';
     window.open(githubRepoUrl, '_blank');
   };
-
-  const navigateToSignUp = () => {
-    const signUpUrl = '/signup';
-    window.open(signUpUrl, '_blank');
+  
+  const navigateToHome = () => {
+    const HomeUrl = '/';
+    window.open(HomeUrl, '_self');
   };
+  
   return (
     <nav className="navbar">
       <div className="logo-container">
         {/* <img src="logo.png" alt="Logo" className="logo" /> */}
-        <div className="button">
+        <div className="button" onClick={navigateToHome}>
           <div className="box">A</div>
           <div className="box">W</div>
           <div className="box">E</div>
@@ -33,10 +34,11 @@ const Navbar = ({ searchTerm, handleSearchChange }) => {
           onChange={handleSearchChange}
           placeholder="Search by Name"
         />
+        {/*
         <button className='signup' onClick={navigateToSignUp}>
           <span>sign UP</span>
         </button>
-
+        */}
         <button className="Btn" 
         onClick={navigateToGitHub} >
         <span className="svgContainer">
diff --git a/src/index.js b/src/index.js
index 9a11fba..1c792b8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+//import Home from './Home';
 import reportWebVitals from './reportWebVitals';
 //import SignUp from '../src/components/SignUp'
-
+//import { BrowserRouter } from 'react-router-dom'
+import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

From 5782fce731b0eab5de59c74f2466f81007dd7e22 Mon Sep 17 00:00:00 2001
From: Kiran1689 <kirannaragund197@gmail.com>
Date: Sat, 20 Jan 2024 18:11:19 +0530
Subject: [PATCH 6/6] Updates

---
 src/components/SignUp.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SignUp.js b/src/components/SignUp.js
index 94d5e88..3331fef 100644
--- a/src/components/SignUp.js
+++ b/src/components/SignUp.js
@@ -36,7 +36,7 @@ function SignUp() {
           <div className="lg:p-3">
             <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
               <h1 className="text-2xl font-semibold tracking-tight text-center">
-                Have an account? Log in now
+                Have an account? Log in Now
               </h1>
               <UserAuthLoginForm />
             </div>