ElixirTechCommunity · dewank07 · May 30, 2025 · May 29, 2025 · May 30, 2025 · May 30, 2025
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,7 @@
+/.vscode
+/node_modules
+./dist
+
+*.env
+.env
+.env.*
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,9 +2,13 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 
 import "./globals.css";
-import ClientAppLayout from "@/layouts/ClientAppLayout";
 import { ThemeProvider } from "./provider";
 import { Toaster } from "@/components/ui/toaster";
+import dynamic from "next/dynamic";
+
+const ClientAppLayout = dynamic(() => import("@/layouts/ClientAppLayout"), {
+  ssr: false,
+});
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -26,13 +30,13 @@ export default function RootLayout({
   return (
     <html lang='en' suppressHydrationWarning>
       <head>
-        <link rel='icon' href='/jsm-logo.png' sizes='any' />
+        <link rel='icon' href='/public/jsm-logo.webp' sizes='any' />
         <meta property='og:title' content='Elixir Tech Community' />
         <meta
           property='og:description'
           content='Elixir fosters a collaborative tech community dedicated to comprehensive learning, offering a supportive environment for growth and innovation.'
         />
-        <meta property='og:image' content='/HomeScreen.png' />
+        <meta property='og:image' content='/public/HomeScreen.webp' />
       </head>
       <body className={inter.className}>
         <ThemeProvider attribute='class' defaultTheme='dark' enableSystem disableTransitionOnChange>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,7 @@
 "use client";
 import Hero from "@/components/Hero";
-import Grid from "@/components/Grid";
 import Testimonials from "@/components/Testimonials";
 import ChapterSection from "@/components/ChapterSection";
-import { GlobeSection } from "@/components/GlobeSection";
 import Image from "next/image";
 import { motion } from "framer-motion";
 import LogoHero from "@/public/Elixir-logo.png";
@@ -13,15 +11,19 @@ const Home = () => {
   useEventApi();
 
   return (
-    <div className='max-w-7xl relative z-10 w-full -mt-10'>
-      <motion.div className='hidden  md:block absolute -rotate-12 top-96 -right-16  z-10 '>
-        <Image src={LogoHero} height={300} width={300} alt='tect' className='rounded-md' />
+    <div className="max-w-7xl relative z-10 w-full -mt-10">
+      <motion.div className="hidden  md:block absolute -rotate-12 top-96 -right-16  z-10 ">
+        <Image
+          src={LogoHero}
+          height={300}
+          width={300}
+          alt="tect"
+          className="rounded-md"
+        />
       </motion.div>
       <Hero />
-      <Grid />
       <ChapterSection />
       <Testimonials />
-      <GlobeSection />
     </div>
   );
 };

diff --git a/app/provider.tsx b/app/provider.tsx
@@ -2,8 +2,8 @@
 
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import { type PropsWithChildren } from "react";
 
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+export function ThemeProvider({ children, ...props }: PropsWithChildren<any>) {
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
diff --git a/components/Approach.tsx b/components/Approach.tsx
@@ -9,9 +9,8 @@ const Approach = () => {
       <h1 className='heading'>
         Our <span className='text-purple'>Core</span>
       </h1>
-      {/* remove bg-white dark:bg-black */}
       <div className='my-20 flex flex-col lg:flex-row items-center justify-center w-full gap-4'>
-        {/* add des prop */}
+
         <Card
           title='Planning & Strategy'
           icon={<AceternityIcon order='Phase 1' />}
@@ -21,7 +20,7 @@ const Approach = () => {
         >
           <CanvasRevealEffect
             animationSpeed={5.1}
-            // add these classed for the border rounded overflowing -> rounded-3xl overflow-hidden
+
             containerClassName='bg-emerald-900 rounded-3xl overflow-hidden'
           />
         </Card>
@@ -34,18 +33,16 @@ const Approach = () => {
         >
           <CanvasRevealEffect
             animationSpeed={3}
-            // change bg-black to bg-pink-900
+
             containerClassName='bg-pink-900 rounded-3xl overflow-hidden'
             colors={[
-              // change the colors of the
+
               [255, 166, 158],
               [221, 255, 247],
             ]}
             dotSize={2}
           />
-          {/* Radial gradient for the cute fade */}
-          {/* remove this one */}
-          {/* <div className="absolute inset-0 [mask-image:radial-gradient(400px_at_center,white,transparent)] bg-black/50 dark:bg-black/90" /> */}
+
         </Card>
         <Card
           title='Development & Launch'
@@ -71,7 +68,7 @@ const Card = ({
   title,
   icon,
   children,
-  // add this one for the desc
+
   des,
 }: {
   title: string;
@@ -84,17 +81,16 @@ const Card = ({
     <div
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
-      // change h-[30rem] to h-[35rem], add rounded-3xl
+
       className='border border-black/[0.2] group/canvas-card flex items-center justify-center
        dark:border-white/[0.2]  max-w-sm w-full mx-auto p-4 relative lg:h-[35rem] rounded-3xl '
       style={{
-        //   add these two
-        //   you can generate the color from here https://cssgradient.io/
+
         background: "rgb(4,7,29)",
         backgroundColor: "linear-gradient(90deg, rgba(4,7,29,1) 0%, rgba(12,14,35,1) 100%)",
       }}
     >
-      {/* change to h-10 w-10 , add opacity-30  */}
+
       <Icon className='absolute h-10 w-10 -top-3 -left-3 dark:text-white text-black opacity-30' />
       <Icon className='absolute h-10 w-10 -bottom-3 -left-3 dark:text-white text-black opacity-30' />
       <Icon className='absolute h-10 w-10 -top-3 -right-3 dark:text-white text-black opacity-30' />
@@ -110,22 +106,21 @@ const Card = ({
 
       <div className='relative z-20 px-10'>
         <div
-          // add this for making it center
-          // absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
+
           className='text-center group-hover/canvas-card:-translate-y-4 absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] 
         group-hover/canvas-card:opacity-0 transition duration-200 min-w-40 mx-auto flex items-center justify-center'
         >
           {icon}
         </div>
         <h2
-          // change text-3xl, add text-center
+
           className='dark:text-white text-center text-3xl opacity-0 group-hover/canvas-card:opacity-100
          relative z-10 text-black mt-4  font-bold group-hover/canvas-card:text-white 
          group-hover/canvas-card:-translate-y-2 transition duration-200'
         >
           {title}
         </h2>
-        {/* add this one for the description */}
+
         <p
           className='text-sm opacity-0 group-hover/canvas-card:opacity-100
          relative z-10 mt-4 group-hover/canvas-card:text-white text-center
@@ -138,14 +133,11 @@ const Card = ({
     </div>
   );
 };
-// add order prop for the Phase number change
+
 const AceternityIcon = ({ order }: { order: string }) => {
   return (
     <div>
-      {/* this btn is from https://ui.aceternity.com/components/tailwindcss-buttons border magic */}
-      {/* change rounded-lg, text-purple px-5 py-2 */}
-      {/* remove focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 cuz we don't need to focus */}
-      {/* remove text-sm font-medium h-12 , add font-bold text-2xl */}
+
       <button className='relative inline-flex overflow-hidden rounded-full p-[1px] '>
         <span
           className='absolute inset-[-1000%] animate-[spin_2s_linear_infinite]
@@ -159,24 +151,7 @@ const AceternityIcon = ({ order }: { order: string }) => {
         </span>
       </button>
     </div>
-    // remove the svg and add the button
-    // <svg
-    //   width="66"
-    //   height="65"
-    //   viewBox="0 0 66 65"
-    //   fill="none"
-    //   xmlns="http://www.w3.org/2000/svg"
-    //   className="h-10 w-10 text-black dark:text-white group-hover/canvas-card:text-white "
-    // >
-    //   <path
-    //     d="M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696"
-    //     stroke="currentColor"
-    //     strokeWidth="15"
-    //     strokeMiterlimit="3.86874"
-    //     strokeLinecap="round"
-    //     style={{ mixBlendMode: "darken" }}
-    //   />
-    // </svg>
+
   );
 };
 

diff --git a/components/ChapterSection.tsx b/components/ChapterSection.tsx
@@ -7,36 +7,43 @@ import Link from "next/link";
 
 const ChapterSection = () => {
   return (
-    <div className='py-20'>
-      <h1 className='heading'>
-        Our Core <span className='text-purple'>Societies</span>
+    <div className="py-20">
+      <h1 className="heading">
+        Our Core <span className="text-purple">Societies</span>
       </h1>
-      <div className='flex flex-wrap items-center justify-center p-4 gap-20 mt-10'>
+      <div className="flex flex-wrap items-center justify-center p-4 gap-20 mt-10">
         {Chapters.map((item, idx) => (
-          <div className='h-auto w-64 flex items-center justify-center' key={idx}>
-            <Link href={item.link} target='_blank'>
+          <div
+            className="h-auto w-64 flex items-center justify-center"
+            key={idx}
+          >
+            <Link href={item.link} target="_blank">
               <PinContainer title={item.title} href={item.link}>
                 <div
                   className={`flex basis-full flex-col p-4 tracking-tight text-slate-100/50 sm:basis-1/2 ${
-                    idx == 1 ? "md:w-[18rem] md:h-[22rem] w-[16rem] h-[20rem]" : " w-[16rem] h-[20rem]"
+                    idx == 1
+                      ? "md:w-[18rem] md:h-[22rem] w-[16rem] h-[20rem]"
+                      : " w-[16rem] h-[20rem]"
                   }`}
                 >
-                  <h3 className='max-w-xs !pb-2 !m-0 font-normal  text-base text-slate-100'>{item.title}</h3>
-                  <div className='text-sm !m-0 !p-0 font-normal'>
-                    <span className='text-slate-500 '>{item.des}</span>
+                  <h3 className="max-w-xs !pb-2 !m-0 font-normal  text-base text-slate-100">
+                    {item.title}
+                  </h3>
+                  <div className="text-sm !m-0 !p-0 font-normal">
+                    <span className="text-slate-500 ">{item.des}</span>
                   </div>
-                  <div className='flex flex-1 w-full rounded-lg object-contain mt-4'>
+                  <div className="flex flex-1 w-full rounded-lg object-contain mt-4">
                     <Image
                       src={item.img}
-                      alt='tect'
+                      alt="tect"
                       width={350}
                       height={200}
-                      className='flex flex-1 w-full rounded-lg '
+                      className="flex flex-1 w-full rounded-lg "
+                      loading="lazy"
                     />
                   </div>
                 </div>
               </PinContainer>
-
             </Link>
           </div>
         ))}

diff --git a/components/EventsCard.tsx b/components/EventsCard.tsx
@@ -31,57 +31,68 @@ export default function EventsCard({
   formLink,
 }: EventsCardProps): JSX.Element {
   return (
-    <CardContainer className='inter-var'>
-      <CardBody className='flex flex-col justify-between relative group/card  hover:shadow-2xl hover:shadow-emerald-500/[0.1] dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-background/[0.4] dark:border-white/[0.2] border-black/[0.1] w-auto max-w-[20rem] sm:max-w-[20rem] h-auto rounded-xl p-6 border  '>
-        <div className='flex justify-between items-center'>
-          <CardItem translateZ='50' className='text-xl font-bold text-neutral-600 dark:text-white'>
+    <CardContainer className="inter-var">
+      <CardBody className="flex flex-col justify-between relative group/card  hover:shadow-2xl hover:shadow-emerald-500/[0.1] dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-background/[0.4] dark:border-white/[0.2] border-black/[0.1] w-auto max-w-[20rem] sm:max-w-[20rem] h-auto rounded-xl p-6 border  ">
+        <div className="flex justify-between items-center">
+          <CardItem
+            translateZ={50}
+            className="text-xl font-bold text-neutral-600 dark:text-white"
+          >
             {title}
           </CardItem>
           {/* Event organizing club logo */}
-          <CardItem translateZ='50' className='text-neutral-500 dark:text-white'>
-            <div className='flex items-center gap-3'>
+          <CardItem
+            translateZ={50}
+            className="text-neutral-500 dark:text-white"
+          >
+            <div className="flex items-center gap-3">
               <Image
                 src={clubImage}
                 height={25}
                 width={25}
-                className='rounded-full object-cover aspect-[1/1] border-2 p-0 border-white ml-3'
+                className="rounded-full object-cover aspect-[1/1] border-2 p-0 border-white ml-3"
                 alt={clubName}
+                loading="lazy"
               />
             </div>
           </CardItem>
         </div>
-        <CardItem translateZ='100' className='my-4 self-center justify-self-center'>
+        <CardItem
+          translateZ={50}
+          className="my-4 self-center justify-self-center"
+        >
           <Image
             src={eventImage}
-            height='1000'
-            width='1000'
-            className='min-w-24 object-contain aspect-square rounded-xl group-hover/card:shadow-xl'
+            height="1000"
+            width="1000"
+            className="min-w-24 object-contain aspect-square rounded-xl group-hover/card:shadow-xl"
             alt={eventName}
+            loading="lazy"
           />
         </CardItem>
         <CardItem
-          as='p'
-          translateZ='60'
-          className='text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 line-clamp-3'
+          as="p"
+          translateZ={60}
+          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 line-clamp-3"
         >
           {description}
         </CardItem>
-        <div className=''>
-          <div className='w-full h-0.5 bg-neutral-200 dark:bg-neutral-700 mt-4' />
-          <div className=' flex justify-between items-center mt-5'>
+        <div className="">
+          <div className="w-full h-0.5 bg-neutral-200 dark:bg-neutral-700 mt-4" />
+          <div className=" flex justify-between items-center mt-5">
             <CardItem
               translateZ={20}
-              className='px-4 py-2 flex items-center gap-2 rounded-xl text-xs font-normal dark:text-white'
+              className="px-4 py-2 flex items-center gap-2 rounded-xl text-xs font-normal dark:text-white"
             >
               <IconClock size={20} />
               <p>{String(deadline)}</p>
             </CardItem>
             {isOver(deadline) ? null : (
-              <Link href={formLink} target='about_blank'>
+              <Link href={formLink} target="about_blank">
                 <CardItem
                   translateZ={20}
-                  as='button'
-                  className='px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold'
+                  as="button"
+                  className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
                 >
                   Register
                 </CardItem>