GFG | chore: cleanup code base

.vscode/settings.json

@@ -10,5 +10,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "editor.wordWrap": "on"
+  "editor.wordWrap": "on",
+  "postman.settings.dotenv-detection-notification-visibility": false
 }

app/page.tsx

@@ -1,31 +1,28 @@
-"use client";
 import Hero from "@/components/Hero";
 import Testimonials from "@/components/Testimonials";
 import ChapterSection from "@/components/ChapterSection";
 import Image from "next/image";
-import { motion } from "framer-motion";
-import LogoHero from "@/public/Elixir-logo.png";
-import useEventApi from "@/hooks/useEventApi";
-
-const Home = () => {
-  useEventApi();
+import HeroLogo from "@/public/Elixir-logo.webp";
 
+async function Home() {
   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 ">
+      <div className="hidden md:block absolute -rotate-12 top-96 -right-16 z-10">
         <Image
-          src={LogoHero}
+          src={HeroLogo}
           height={300}
           width={300}
-          alt="tect"
+          alt="Elixir Logo"
           className="rounded-md"
+          priority
+          quality={90}
         />
-      </motion.div>
+      </div>
       <Hero />
       <ChapterSection />
       <Testimonials />
     </div>
   );
-};
+}
 
 export default Home;

components/BackDrop/BackDrop.tsx

@@ -0,0 +1,28 @@
+import { Spotlight } from "../ui/Spotlight";
+
+export default function BackDrop() {
+  return (
+    <>
+      <div>
+        <Spotlight
+          className="-top-40 -left-10 md:-left-32 md:-top-20 h-screen"
+          fill="white"
+        />
+        <Spotlight
+          className="h-[80vh] w-[50vw] top-10 left-full"
+          fill="purple"
+        />
+        <Spotlight className="left-80 top-28 h-[80vh] w-[50vw]" fill="purple" />
+      </div>
+      <div
+        className="w-full bg-black-100 dark:bg-grid-white/[0.03] bg-grid-black-100/[0.2]
+       absolute top-0 left-0 flex items-center justify-center"
+      >
+        <div
+          className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black-100
+         bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"
+        />
+      </div>
+    </>
+  );
+}

components/ChapterSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Chapters } from "@/data";
+import { Chapters } from "@/constants/constants";
 import { PinContainer } from "./ui/Pin";
 import Image from "next/image";
 import Link from "next/link";

components/EventsCard.tsx

@@ -46,7 +46,7 @@ export default function EventsCard({
             className="text-neutral-500 dark:text-white"
           >
             <div className="flex items-center gap-3">
-              <Image
+              <img
                 src={clubImage}
                 height={25}
                 width={25}

components/Footer.tsx

@@ -1,24 +1,11 @@
 import { FaLocationArrow } from "react-icons/fa6";
-
-import { socialMedia } from "@/data";
+import { socialMedia } from "@/constants/constants";
 import MagicButton from "./MagicButton";
 import Image from "next/image";
 
 const Footer = () => {
   return (
     <footer className="w-full pt-20 pb-10" id="contact">
-      {/* background grid */}
-      <div className="w-full absolute left-0 -bottom-72 min-h-96">
-        <Image
-          src="/footer-grid.svg"
-          alt="Footer background grid"
-          className="w-full h-full  opacity-50"
-          loading="lazy"
-          width={20}
-          height={20}
-        />
-      </div>
-
       <div className="flex flex-col items-center">
         <h1 className="heading lg:max-w-[45vw] text-lg">
           Ready to take <span className="text-purple">your</span> skills to the
@@ -60,6 +47,17 @@ const Footer = () => {
           ))}
         </div>
       </div>
+      {/* background grid */}
+      <div className="w-full absolute left-0 bottom-0 min-h-96 -z-10">
+        <Image
+          src="/footer-grid.svg"
+          alt="Footer background grid"
+          className="w-full h-full  opacity-50"
+          loading="lazy"
+          width={20}
+          height={20}
+        />
+      </div>
     </footer>
   );
 };

components/Testimonials.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import React , { memo } from "react";
+import React, { memo } from "react";
 
-import { companies, testimonials } from "@/data";
+import { companies, testimonials } from "@/constants/constants";
 import { InfiniteMovingCards } from "./ui/InfiniteCards";
 import MagicButton from "./MagicButton";
 import { FaLocationArrow } from "react-icons/fa6";
@@ -64,4 +64,4 @@ const Testimonials = () => {
   );
 };
 
-export default memo(Testimonials);
+export default memo(Testimonials);

components/ui/TextGenerateEffect.tsx

@@ -5,7 +5,13 @@ import { motion, stagger, useAnimate } from "framer-motion";
 import { cn } from "@/lib/utils";
 import TypingAnimation from "../magicui/typing-animation";
 
-export const TextGenerateEffect = ({ words, className }: { words: string; className?: string }) => {
+export const TextGenerateEffect = ({
+  words,
+  className,
+}: {
+  words: string;
+  className?: string;
+}) => {
   const [scope, animate] = useAnimate();
   let wordsArray = words.split(" ");
   useEffect(() => {
@@ -17,7 +23,7 @@ export const TextGenerateEffect = ({ words, className }: { words: string; classN
       {
         duration: 2,
         delay: stagger(0.2),
-      },
+      }
     );
   }, [scope.current]);
 
@@ -29,7 +35,9 @@ export const TextGenerateEffect = ({ words, className }: { words: string; classN
             <motion.span
               key={word + idx}
               // change here if idx is greater than 3, change the text color to #CBACF9
-              className={` ${idx > 2 ? "text-purple" : "dark:text-white text-black"} opacity-0`}
+              className={` ${
+                idx > 2 ? "text-purple" : "dark:text-white text-black"
+              } opacity-0`}
             >
               {idx > 3 ? <TypingAnimation text={word} /> : word}{" "}
             </motion.span>
@@ -42,9 +50,11 @@ export const TextGenerateEffect = ({ words, className }: { words: string; classN
   return (
     <div className={cn("font-bold", className)}>
       {/* mt-4 to my-4 */}
-      <div className='my-4'>
+      <div className="my-4">
         {/* remove  text-2xl from the original */}
-        <div className=' dark:text-white text-black leading-snug tracking-wide'>{renderWords()}</div>
+        <div className=" dark:text-white text-black leading-snug tracking-wide">
+          {renderWords()}
+        </div>
       </div>
     </div>
   );

components/ui/toaster.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Toast,
@@ -7,11 +7,11 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -27,9 +27,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }