Added Event page

.env.example

@@ -0,0 +1 @@
+DATABASE_URL=postgres://...

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "rome.rome",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "vivaxy.vscode-conventional-commits"

.vscode/settings.json

@@ -3,5 +3,4 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   // "editor.formatOnSave": true,
-  "editor.defaultFormatter": "rome.rome"
 }

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contribution Guidelines
 
-Thank you for considering contributing to our Rome-based project! We welcome any and all contributions, including bug reports, feature requests, code changes, and documentation improvements. To ensure a smooth and efficient collaboration, please read and follow these guidelines before submitting your contribution.
+Thank you for considering contributing to our project! We welcome any and all contributions, including bug reports, feature requests, code changes, and documentation improvements. To ensure a smooth and efficient collaboration, please read and follow these guidelines before submitting your contribution.
 
 ## Getting Started
 
@@ -20,7 +20,7 @@ When making changes to the code, please keep the following in mind:
 1. Write clear and concise commit messages
 2. Follow the existing code style and conventions
 3. You code will be formatted using pre-commits before you commit any changes if you want to run it manually please run `pnpm run format:write`
-4. A linter will also run before every commit to ensure that your changes follow our code style if you want to perform manual check please run `pnpm run lint:next` and `pnpm run lint:rome`
+4. A linter will also run before every commit to ensure that your changes follow our code style if you want to perform manual check please run `pnpm run lint:next`
 5. Check that your changes type-check by running `pnpm run type:check`
 6. Update the documentation if necessary
 

actions/meetup.ts

@@ -0,0 +1,26 @@
+"use server";
+
+
+import { db } from "@/db"
+import { guests } from "@/db/schema"
+
+
+
+
+type Gender = "male" | "female" 
+type Fasting = "yes" | "no"
+export const registerDevs = async (firstName: string , lastName: string, email:string , phone: string , gender:string, fasting:string , comment: string , status: string , profession: string ) => {
+    const registered = await db.insert(guests).values({
+       email: email,
+       firstName:firstName,
+       lastName:lastName,
+       phone:phone,
+       gender: gender,
+       fasting: fasting,
+       comment: comment,
+       status: status,
+       profession: profession,
+    })
+    return registered
+
+}

actions/subsctibe.ts

@@ -0,0 +1,12 @@
+'use server'
+
+import { db } from "@/db"
+import { subscribers } from "@/db/schema"
+
+
+export const addSubscription = async (email: string) => {
+    const subs = await db.insert(subscribers).values({
+        email:email,
+    })
+    return subs
+}

app/dev-meet/page.tsx

@@ -0,0 +1,35 @@
+
+import { CountDown } from "@/components/events/countdown-wrapper";
+import { DevPic } from "@/components/events/dev-pic";
+import { Evented } from "@/components/events/evented";
+import { GetStarted } from "@/components/events/get-started";
+import HeroEvent from "@/components/events/here-event";
+import Organizers from "@/components/events/organizers";
+import { Schedule } from "@/components/events/schdule";
+import { Speakers } from "@/components/events/speakers";
+import { Sponsors } from "@/components/events/sponsors";
+import { Stats } from "@/components/events/stats";
+import { UpcomingEvent } from "@/components/events/upcoming-events";
+export const metadata = {
+  title: "CodeNight Events",
+  description: "Where we all gather and build the future"
+}
+const DevMeetupV2 = () => {
+  return (
+    <>
+      <HeroEvent />
+      <Evented />
+      <DevPic />
+      <CountDown />
+      <UpcomingEvent />
+      <Speakers />
+      <Schedule />
+      <Sponsors />
+      <Organizers />
+      <Stats />
+      <GetStarted />
+    </>
+  );
+};
+export default DevMeetupV2;
+

app/layout.tsx

@@ -1,19 +1,35 @@
 import StickyBottomBanner from "@/components/StickyBottomBanner";
 import Nav from "@/components/nav/Nav";
+import { Toaster } from "@/components/ui/toaster";
+
 import "@/styles/globals.css";
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
+      <link
+        rel="preconnect"
+        href="https://cdn.fontshare.com"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="stylesheet"
+        href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,500,700&display=swap"
+      />
+
+      <link rel="icon" href="/favicon.ico" />
+
       <body>
         <main>
           <Nav />
           {children}
           <StickyBottomBanner />
         </main>
+        <Toaster />
       </body>
     </html>
   );

app/page.tsx

@@ -222,13 +222,16 @@ const StickyBottomBanner = () => (
     </div>
   </div>
 );
-
+export const metadata = {
+  title: "CodeNight",
+  description: "Community of 🇪🇹 developers to showcase their projects"
+}
 export default function Home() {
   return (
     <>
-      <PageHead />
+      {/* <PageHead /> */}
       <main>
-        <Nav />
+        {/* <Nav /> */}
         <HeroSection />
         <Programs />
         <AboutUs />

components/Contributors.tsx

@@ -1,5 +1,7 @@
+'use client'
 import Image from "next/image";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
 const Contributors = () => {
   const [contributors, setContributors] = useState([]);

components/events/bg-image.tsx

@@ -0,0 +1,39 @@
+import Image from 'next/image'
+import clsx from 'clsx'
+
+import backgroundImage from '../../public/background.jpg'
+
+export function BackgroundImage({
+  className,
+  position = 'left',
+}: {
+  className?: string
+  position?: 'left' | 'right'
+}) {
+  return (
+    <div
+      className={clsx(
+        'absolute inset-0 overflow-hidden bg-indigo-50 z-1',
+        className,
+      )}
+    >
+      <Image
+        className={clsx(
+          'absolute top-0',
+          position === 'left' &&
+            'left-0 translate-x-[-55%] translate-y-[-10%] -scale-x-100 sm:left-1/2 sm:translate-x-[-98%] sm:translate-y-[-6%] lg:translate-x-[-106%] xl:translate-x-[-122%]',
+          position === 'right' &&
+            'left-full -translate-x-1/2 sm:left-1/2 sm:translate-x-[-20%] sm:translate-y-[-15%] md:translate-x-0 lg:translate-x-[5%] lg:translate-y-[4%] xl:translate-x-[27%] xl:translate-y-[-8%]',
+        )}
+        src={backgroundImage}
+        alt=""
+        width={918}
+        height={1495}
+        priority
+        unoptimized
+      />
+      <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-white" />
+      <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-white" />
+    </div>
+  )
+}

components/events/countdown-header.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { useRef } from "react"
+import { motion, useScroll, useTransform } from "framer-motion"
+
+const CountDownTimerHeader = () => {
+  const divRef = useRef(null)
+  const { scrollYProgress } = useScroll({
+    target: divRef,
+  })
+  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.4, 0])
+  return (
+    <motion.div ref={divRef} style={{ opacity }} className="flex justify-start items-start my-10 mr-auto">
+      <h1 className="text-5xl font-bold tracking-tighter text-blue-600 sm:text-7xl">We are almost there...</h1>
+    </motion.div>
+  )
+}
+export default CountDownTimerHeader

components/events/countdown-wrapper.tsx

@@ -0,0 +1,14 @@
+import ShiftingCountdown from "./countdown";
+import CountDownTimerHeader from "./countdown-header";
+import { Wrapper } from "./wrapper";
+
+export const CountDown = () => {
+  return (
+    <Wrapper size="lg" className="flex flex-col  justify-center items-center my-20 font-display">
+      <div className="ml-auto">
+        <CountDownTimerHeader />
+      </div>
+      <ShiftingCountdown />
+    </Wrapper>
+  );
+};

components/events/countdown.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+
+const COUNTDOWN_FROM = "4/14/2024";
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+
+const ShiftingCountdown = () => {
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const [remaining, setRemaining] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
+
+  useEffect(() => {
+    intervalRef.current = setInterval(handleCountdown, 1000);
+
+    return () => clearInterval(intervalRef.current || undefined);
+  }, []);
+
+  const handleCountdown = () => {
+    const end = new Date(COUNTDOWN_FROM);
+
+    const now = new Date();
+
+    const distance = +end - +now;
+
+    const days = Math.floor(distance / DAY);
+    const hours = Math.floor((distance % DAY) / HOUR);
+    const minutes = Math.floor((distance % HOUR) / MINUTE);
+    const seconds = Math.floor((distance % MINUTE) / SECOND);
+
+    setRemaining({
+      days,
+      hours,
+      minutes,
+      seconds,
+    });
+  };
+
+  return (
+    <div className="p-4 bg-gradient-to-br from-transparent to-transparent  rounded-3xl overflow-hidden ">
+      <div className="w-full max-w-full mx-auto flex items-center bg- overflow-hidden">
+        <CountdownItem num={remaining.days} text="days" />
+        <CountdownItem num={remaining.hours} text="hours" />
+        <CountdownItem num={remaining.minutes} text="minutes" /> 
+        <CountdownItem num={remaining.seconds} text="seconds" />
+      </div>
+    </div>
+  );
+};
+
+const CountdownItem = ({ num, text }: { num: number; text: string }) => {
+  return (
+    <div className="font-display sm:w-[120px] md:w-[200px] lg:w-[345px] h-20 md:h-full flex sm:mx-0 md:mx-5 lg:mx-10 flex-col gap-1 md:gap-2 items-center justify-center border-r-[1px] mb-0 z-20 border-slate-200">
+      <div className="w-full text-center relative overflow-hidden">
+        <AnimatePresence mode="popLayout">
+          <motion.span
+            key={num}
+            initial={{ y: "100%" }}
+            animate={{ y: "0%" }}
+            exit={{ y: "-100%" }}
+            transition={{ ease: "backIn", duration: 0.75 }}
+            className="block text-4xl font-heading2 md:text-5xl mr-10 lg:text-6xl xl:text-[14.5rem] font-medium bg-gradient-to-tr from-blue-400 to-purple-400 bg-clip-text text-transparent"
+          >
+
+            {num < 10 ? "0" + num : num} 
+          </motion.span>
+        </AnimatePresence>
+      </div>
+      <span className="text-sm md:text-xl lg:text-3xl tracking-wide font-light font-heading text-black">
+        {text}
+      </span>
+    </div>
+  );
+};
+
+export default ShiftingCountdown;