fix: content stuff

web/app/page.tsx

@@ -200,7 +200,7 @@ export default function Home() {
           </div> */}
           <HorizontalTranslate mainRef={mainRef} title={"Wall of Fame"} style={{ scale: fameScale }}>
             <CardsContainer style={{ paddingLeft: screenWidth > 650 ? "100px" : "5vw", paddingRight: screenWidth > 650 ? "100px" : "5vw" }} className='text-dark' ref={fameRef}>
-              {fame.map((f, i) => <FameCard key={"fame" + i} i={(numFameInView > i) ? i : 0} title={f.title} />)}
+              {fame.map((f, i) => <FameCard img={f.img} key={"fame" + i} i={(numFameInView > i) ? i : 0} title={f.title} />)}
             </CardsContainer>
           </HorizontalTranslate>
         </Section>

web/components/FameCard.tsx

@@ -1,24 +1,24 @@
 import Image from 'next/image';
 import Button from './Button';
 import { FC, ReactNode } from 'react';
-import fameImage from '@/assets/fame.png'
 import { title } from 'process';
 import Card from './Card';
 interface Props {
     title: ReactNode;
-    i: number
+    i: number;
+    img: string;
 }
-const FameCard: FC<Props> = ({ title, i }) => {
+const FameCard: FC<Props> = ({ title, i, img }) => {
     return (
         <Card bg={'white'} i={i}>
-            <div className='w-full p-5 border-2 border-black rounded-md '>
-                <Image src={fameImage} layout='responsive' width={300} height={300} alt='Logo' />
+            <div className='w-full border-2 border-black rounded-md aspect-square overflow-hidden'>
+                <Image src={img} className='w-full object-cover h-auto aspect-square' width={300} height={300} alt='Logo' />
             </div>
-            <h2 className='my-3 font-mono text-3xl'>
+            <h2 className='my-3 font-mono text-1xl'>
                 {title}
             </h2>
         </Card>
     );
 }
 
-export default FameCard;
+export default FameCard;

web/components/Footer.tsx

@@ -55,6 +55,7 @@ const Footer: FC<Props> = ({bg}) => {
             </h1>
           </div>
         </div>
+        <p className='pl-2 flex gap-1 text-sm items-center'><Icon icon='mail' xsmall name='mail' link='mailto:[email protected]' /> [email protected]</p>
         <div className='lg:m-0 gap-3 flex justify-between'>
           {socials.map((social, i) => <Icon small key={"soc" + i} {...social} />)}
         </div>

web/components/Icons/icons.ts

@@ -9,6 +9,7 @@ import youtube from "@/assets/youtube.svg";
 import github from "@/assets/github-mark-white.svg"
 import githubdark from "@/assets/github-mark.svg"
 import web from "@/assets/web.svg"
+import mail from "@/assets/mail.svg"
 
 export const getIcon = (name: string) => {
   const icons = {
@@ -22,7 +23,8 @@ export const getIcon = (name: string) => {
     github,
     githubdark,
     linkedindark,
-    web
+    web,
+    mail
   };
   return icons[name as keyof typeof icons];
 };

web/content/fame.json

@@ -1,14 +1,18 @@
 [
   {
-    "title": "Best Club Award 2020"
+    "title": "Best Club Award 2020",
+    "img":"/fame.png"
   },
   {
-    "title": "Poll Police Project"
+    "title": "Poll Police Project",
+    "img":"/fame.png"
   },
   {
-    "title": "Built the tech for some of India's largest college fests"
+    "title": "Built the tech for some of India's largest college fests",
+    "img":"/riviera.png"
   },
   {
-    "title": "K number of participants"
+    "title": "2000+ participants in events",
+    "img":"/2000.jpeg"
   }
 ]