the76devs · thal-sh · Jul 3, 2024 · Jul 3, 2024 · Jul 8, 2024
diff --git a/apps/website/app/globals.css b/apps/website/app/globals.css
@@ -2,70 +2,55 @@
 @tailwind components;
 @tailwind utilities;
 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
+    --card-foreground: 240 10% 3.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%;
-
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --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%;
-
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
     --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%;
-
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 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%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 
+
 @layer base {
   * {
     @apply border-border;

diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx
@@ -2,7 +2,14 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 import { Nav } from "@/components/nav";
-import { Providers } from "@/components/providers"
+import { Providers } from "@/components/providers";
+import localFont from "next/font/local";
+import Footer from "@/components/layout/Footer";
+
+const myFont = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "The 76 Devs",
@@ -15,16 +22,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-        <body>
-          <Providers>
-            <Nav />
-
-            <main className="max-w-5xl mx-auto p-3">
-              {children}        
-            </main>
-          </Providers>
-        </body>
+    <html lang="en" className={myFont.className}>
+      <body>
+        <Providers>
+          <Nav />
+          <main className="max-w- mx-auto p-">{children}</main>
+          <Footer />
+        </Providers>
+      </body>
     </html>
   );
 }
diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx
@@ -1,7 +1,25 @@
+"use client";
+import Community from "@/components/sections/Community";
+import DevnetDir from "@/components/sections/DevnetDir";
+import Header from "@/components/sections/Header";
+import JoinUs from "@/components/sections/JoinUs";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Lottie from "lottie-react";
+import Image from "next/image";
+import Link from "next/link";
+
 export default function Home() {
   return (
-    <div>
-
+    <div className="px-2">
+      <Header />
+      <div className="text-xl border text-center py-10 px-">
+        blah blah so you made it to the 76 devs website, welcome!
+      </div>
+      <JoinUs title="Community" desc=""/>
+      <JoinUs className="flex-row-reverse" title="Directory"/>
+      <JoinUs title="Devnet Faucet"/>
+      <JoinUs className="flex-row-reverse" title="The 76 Monorepo"/>
     </div>
   );
 }
diff --git a/apps/website/components/layout/Conatiner.tsx b/apps/website/components/layout/Conatiner.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+import React, { HTMLProps } from "react";
+
+interface ContainerProps extends HTMLProps<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export default function Conatiner({
+  children,
+  className,
+  ...props
+}: ContainerProps) {
+  return (
+    <div
+      className={cn("flex flex-col justify-center items-center", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/website/components/layout/Footer.tsx b/apps/website/components/layout/Footer.tsx
@@ -0,0 +1,32 @@
+import { Github, Twitter } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+export default function Footer() {
+  return (
+    <div>
+      <div className="mx-auto py-6 px-10 flex justify-between items-center border">
+        <div>The 76 Devs</div>
+        <div className="text-center w-1/2">
+          <h1 className="">Do not take us to court</h1>
+          <h2 className="font-light">Join our community Lorem ipsum dolor sit amet</h2>
+        </div>
+        <div className="flex flex-col gap-2 justify-center items">
+          <Link href={"/"} className="underline">
+            Product
+          </Link>
+          <Link href={"/"} className="underline">
+            DevnetDir
+          </Link>
+          <Link href={""} className="underline">
+            Other
+          </Link>
+          <div className="flex gap-4">
+            <Github />
+            <Twitter />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/website/components/layout/HeaderText.tsx b/apps/website/components/layout/HeaderText.tsx
@@ -0,0 +1,21 @@
+import { cn } from "@/lib/utils";
+import React, { HTMLProps } from "react";
+
+interface HeaderTextProps extends HTMLProps<HTMLHeadingElement> {
+  title: string;
+}
+
+export default function HeaderText({
+  title,
+  className,
+  ...props
+}: HeaderTextProps) {
+  return (
+    <h1
+      className={cn("text-xl sm:text-2xl md:text-3xl font-semibold text-center py-10", className)}
+      {...props}
+    >
+      {title}
+    </h1>
+  );
+}
diff --git a/apps/website/components/layout/Slider.tsx b/apps/website/components/layout/Slider.tsx
@@ -0,0 +1,38 @@
+"use client";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { slider } from "@/lib/config/slider";
+import Autoplay from "embla-carousel-autoplay";
+import Image from "next/image";
+
+export default function Slider() {
+  return (
+    <Carousel
+      opts={{
+        align: "start",
+        loop: true,
+      }}
+      plugins={[
+        Autoplay({
+          delay: 2000,
+          stopOnInteraction: false,
+        }),
+      ]}
+      orientation="vertical"
+      className="w-full max-w-xs"
+    >
+      <CarouselContent className="h-[40rem]">
+        {slider.map((slide, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/6 w-fit">
+            <Image src={slide.img} alt={slide.name} width={200} height={200} />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+    </Carousel>
+  );
+}
diff --git a/apps/website/components/nav.tsx b/apps/website/components/nav.tsx
@@ -2,10 +2,10 @@
 
 export function Nav() {
     return (
-        <nav className="border">
+        <nav>
             <div className="mx-auto p-3 max-w-6xl flex justify-between items-center">
                 <h2>The 76 Devs</h2>
-                <p>brb</p>
+                <p></p>
             </div>
         </nav>
     )

diff --git a/apps/website/components/sections/Community.tsx b/apps/website/components/sections/Community.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import Slider from "../layout/Slider";
+import Image from "next/image";
+import Conatiner from "../layout/Conatiner";
+import { community } from "@/lib/config/community";
+import HeaderText from "../layout/HeaderText";
+
+export default function Community() {
+  return (
+    <Conatiner className="px-2 sm:px-20">
+      <HeaderText title="Public Community Work" />
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10">
+        {community.map((source) => (
+          <div className="relative shadow-bottom-right">
+            <Image
+              src={source.img}
+              alt=""
+              width={500}
+              height={500}
+            />
+            <div className="flex flex-col bg-black/80 justify-center items-center cursor-pointer opacity-0 hover:opacity-100 absolute w-full h-full top-0 left-0 transition-all">
+              <p className="text-xl font-semibold">{source.name}</p>
+              <p>{source.info}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Conatiner>
+  );
+}
diff --git a/apps/website/components/sections/DevnetDir.tsx b/apps/website/components/sections/DevnetDir.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function DevnetDir() {
+  return (
+    <div>DevnetDir</div>
+  )
+}
diff --git a/apps/website/components/sections/Header.tsx b/apps/website/components/sections/Header.tsx
@@ -0,0 +1,42 @@
+"use client";
+import React from "react";
+import { Button, buttonVariants } from "../ui/button";
+import Lottie from "lottie-react";
+import wavey from "../../public/waves.json";
+import Image from "next/image";
+import bg from "../../public/images/background/bg.jpg";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import Slider from "../layout/Slider";
+
+export default function Header() {
+  return (
+    <div
+      className="relative flex flex-col gap-10 items-center justify-center h-[80vh] w-full mb-32"
+      style={{ backgroundImage: `url(${bg})` }}
+    >
+      <Image
+        src={"/images/background/bg.jpg"}
+        alt=""
+        fill
+        className="opacity-10"
+      />
+      <div className="flex flex-col gap-2 justify-center py-8 px-4 max-w-sm h-fit w-full shadow-bottom-right">
+        <h1 className="font-light">The</h1>
+        <h2 className="text-[10rem] font-extrabold text-center">76</h2>
+        <h3 className="text-3xl font-extrabold text-right">Devs</h3>
+        {/* <Slider /> */}
+      </div>
+      <Link
+        href={"/"}
+        className={cn(
+          buttonVariants({ variant: "outline", size: "lg" }),
+          "px-20 py-5 border-none shadow-bottom-right"
+        )}
+      >
+        Join Us Now
+      </Link>
+      {/* <Lottie animationData={wavey} loop={true} allowFullScreen={true} className="min-w-full"/> */}
+    </div>
+  );
+}