Dominate-X-Club · iAbhinav · May 22, 2024 · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # [Copod Studio](https://twitter.com/copodstudio)
 
 Go from 0 to 1st Podcast with our ready to shoot, Hospitality Centric, Managed Podcast studio.
+Book a slot for an instant podcast shoot at [copod.space](https://copod.space/)
 
 ## About Project
 
@@ -9,7 +10,8 @@ This project is the landing page cum dashboard web app for copod studio that is
 ### Tech Stack
 
 - **Framework** - [Next.js](https://nextjs.org/)
-- **UI** - [Shadcn UI](https://ui.shadcn.com/) 
+- **UI** - [Shadcn UI](https://ui.shadcn.com/)
+- **Neo Brutal Theme for Shadcn** - [NBRTLSM](https://neobrutalism-components.vercel.app/docs/resources)
 - **Auth** - [Supabase](https://supabase.com/auth)
 - **Database** - [Supabase (Postgres)](https://supabase.com/database)
 - **Payments** - [Paytm payments SDK](https://business.paytm.com/docs/getting-started)
@@ -23,3 +25,16 @@ To contribute to the project first fork it from Github and then create a new bra
 > Make sure you `fork` the project and not just simply `clone` it, forking the project will make a seperate copy on your github handle so that you can manage your own changes and only push the required ones to the main repo here.
 
 we also adhere to the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) standard for commiting messages so make sure you write your commit messages in that manner 
+
+## Deploying the App
+
+### Netlify
+- `Fork` the project
+- Create a new project in Netlify
+- Click `Deploy` > `using github` > Choose github repo
+- Create these 2 Environment Variables
+```
+NEXT_PUBLIC_SUPABASE_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY
+```
+> Create a supabase project with `postgres db` if not already, then find its `URL` and `ANON Key` on [supabase.com](supabase.com)
diff --git a/package.json b/package.json
@@ -9,7 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.4.2",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@supabase/ssr": "^0.3.0",
@@ -19,9 +23,13 @@
     "lucide-react": "^0.377.0",
     "next": "14.2.3",
     "react": "^18",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.4",
+    "react-popover": "^0.5.10",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
+      <head>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet"></link>
+
+<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet"></link>
+<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet"></link>
+      </head>
+      <body className={inter.className} style={{fontFamily:"DM Sans"}}>{children}</body>
+    </html >
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,28 @@
+
+
+import HeroFirst from "@/components/hero-section/hero-first";
+import NavBar from "@/components/nav/nav-bar";
+import WaitingForm from "@/components/waitinglist/WaitingForm";
+
 export default function Home() {
   return (
-    <main>
-      <p>this is the home page</p>
+    <main style={{
+      // backgroundImage: `url('/background/white-grid.jpg')`,
+      backgroundRepeat: 'round',
+    }}
+      className="h-[100vh] bg-black">
+      <NavBar></NavBar>
+      <div className="container mx-auto h-full flex flex-col lg:flex-row items-center justify-between">
+        <div className="w-full h-full align-middle lg:w-1/2 ">
+          <HeroFirst></HeroFirst>
+        </div>
+        <div className="w-full lg:w-1/2 flex justify-center lg:justify-end">
+          {/* <img src="/path-to-your-image.jpg" alt="Hero Image" className="w-full lg:w-3/4 h-auto" /> */}
+          <WaitingForm></WaitingForm>
+        </div>
+      </div>
+
+
     </main>
   );
 }
diff --git a/src/components/hero-section/hero-first.tsx b/src/components/hero-section/hero-first.tsx
@@ -0,0 +1,18 @@
+"use client"
+import { Label } from "@radix-ui/react-label";
+import { Button } from "../ui/button";
+
+export default function HeroFirst() {
+    return <>
+        <div className="flex flex-col h-full items-start space-y-2 justify-center">
+            <Label className="text-white text-5xl">go from</Label>
+            <Label className="text-white text-7xl">zero to 1st <b>&nbsp;podcast</b></Label>
+            <Label className="text-white text-3xl">& beyond 🚀</Label>
+            <Label className="text-white text-xl pt-[40px]">with our Ready to Shoot, Hospitality Centric</Label>
+            <Label className="text-white text-xl ">Managed Podcast Studio.</Label>
+            <div className="pt-[40px]">
+                <Button>Start Podcasting, Instantly!</Button>
+            </div>
+        </div>
+    </>
+}
diff --git a/src/components/nav/nav-bar.tsx b/src/components/nav/nav-bar.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { NavigationMenu, NavigationMenuList } from "@/components/ui/navigation-menu"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Label } from "@radix-ui/react-label"
+
+import { JSX, SVGProps } from "react"
+
+export default function NavBar() {
+
+  const links = [
+    {
+      name: "Home",
+      onClick: () => {
+        console.log("Home goo")
+      },
+      route: '/'
+    },
+    {
+      name: "Get Sponsored 🤑",
+      onClick: () => {
+        console.log("Contact")
+      },
+      route: '/get-sponsored'
+    },
+    {
+      name: "Contact",
+      onClick: () => {
+        console.log("Contact")
+      },
+      route: '/contact'
+    }
+  ]
+
+
+
+
+  return (
+    <header className="flex h-18 w-full shrink-0 items-center px-0  bg-black
+    border-main border-dashed border-b-[1px]">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button className="lg:hidden w-20 mr-4 ml-4 border-x-2" size="icon">
+            <MenuIcon className="h-6 w-6" />
+            <span className="sr-only">Toggle navigation menu</span>
+          </Button>
+        </SheetTrigger>
+        <SheetContent className="bg-white" side="left">
+          <div className="flex items-center justify-between gap-2 px-4 py-4 lg:hidden">
+            <img src="/logo/logo-white-bg-150-80.png"></img>
+
+          </div>
+          <div className="grid gap-4 py-6">
+            {links.map((key, index) => (
+              <Button className="justify-start w-full text-left px-4"
+                onClick={links[index].onClick}
+                variant='link' key={index}>{links[index].name}</Button>
+            ))}
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      <div className="flex w-full bg-black">
+        <Label className="flex border-x-0 h-[76px] justify-center 
+        text-4xl lg:px-16 sm:px-5 px-6 text-white border-r-[1px] border-main border-dashed"
+          style={{
+
+            fontWeight: "650",
+            letterSpacing: "-3.5px",
+            // textShadow: "-2px 2px 0 white",
+            textShadow: "2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 5px 4px 0 ",
+            fontFamily: "poppins",
+            justifyContent: "center",
+            display: "flex",
+            flexDirection: "column"
+          }}>copod</Label>
+      </div>
+      <div className="flex-1 hidden lg:flex justify-end">
+        <NavigationMenu>
+          <NavigationMenuList>
+
+            {links.map((link, index) => (
+              <Button
+                variant='link'
+                className={`text-xl h-[72px] px-10 text-white border-r-[1px] border-main border-dashed`}
+                onClick={link.onClick}
+                key={index}
+              >
+                {link.name}
+              </Button>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+      <div className="flex justify-end">
+
+        <Button className="mx-10 lg:size-lg sm:size-sm" 
+         >
+          Book Now!
+        </Button>
+      </div>
+    </header>
+  )
+}
+
+function MenuIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  )
+}
+
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -1,36 +1,33 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "@/lib/utils"
+import * as React from 'react'
+
+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",
+  'inline-flex items-center text-black justify-center whitespace-nowrap rounded-base text-sm font-base ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 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",
+        default:
+          'bg-main border-2 border-black shadow-base hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none',
+        noShadow: 'bg-main border-2 border-black',
+        link: 'underline-offset-4 hover:underline',
+        neutral: 'bg-white border-2 border-black',
       },
       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",
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 px-3',
+        lg: 'h-11 px-8 text-base',
+        icon: 'h-10 w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
-  }
+  },
 )
 
 export interface ButtonProps
@@ -41,16 +38,16 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button'
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
     )
-  }
+  },
 )
-Button.displayName = "Button"
+Button.displayName = 'Button'
 
-export { Button, buttonVariants }
+export { Button, buttonVariants }