From c21d36851ab25746e6da47a7a133f8b921c5bb12 Mon Sep 17 00:00:00 2001
From: anirudh <anirudh04mishra@gmail.com>
Date: Mon, 30 Oct 2023 20:44:36 +0530
Subject: [PATCH] fix: cleanup

---
 web/app/page.tsx                   | 13 ++++++++-----
 web/components/Icons/index.tsx     |  4 ++--
 web/components/ProjectCard.tsx     |  7 ++++---
 web/components/TeamCard.tsx        |  9 ++++++++-
 web/components/TeamCardForGrid.tsx |  6 +++---
 5 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/web/app/page.tsx b/web/app/page.tsx
index a9a392a..1ce89ab 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -95,7 +95,7 @@ export default function Home() {
     slidesToScroll: 3,
     arrows: false,
     dots: false,
-    beforeChange: (_: any, next: any) => { setSlideIndex(next); console.log(next); },
+    beforeChange: (_: any, next: any) => { setSlideIndex(next); },
     responsive: [
       {
         breakpoint: 1000,
@@ -239,13 +239,16 @@ export default function Home() {
                             <Image
                               style={{
                                 position: 'absolute',
-                                width: '100%',
-                                height: '100%',
                               }}
+                              // width={300}
+                              // height={300}
                               src={pic.img}
-                              layout='fill' // Fills the parent container
-                              objectFit='cover' // Enlarges/shrinks the image to cover the container
+                              fill
+                              sizes='100vw'
+                              // layout='fill' // Fills the parent container
+                              // objectFit='cover' // Enlarges/shrinks the image to cover the container
                               alt='event'
+                              className='object-cover '
                             />
                           </div>
                         </div>
diff --git a/web/components/Icons/index.tsx b/web/components/Icons/index.tsx
index bd04238..89e5a96 100644
--- a/web/components/Icons/index.tsx
+++ b/web/components/Icons/index.tsx
@@ -15,8 +15,8 @@ type Props = {
 
 const Icon = ({ icon, name, link, small, xsmall }: Props) => {
     return (
-        <Link target="blank" href={link} className={`flex items-center ${xsmall ? "w-[1.5rem] h-[1.5rem]" : small ? "w-[2rem] h-[2rem]": "w-[3rem] h-[3rem]"} opacity-60 hover:opacity-100`} >
-            <Image  src={getIcon(icon)} alt={name} layout="responsive" />
+        <Link target="_blank" href={link} className={`flex items-center ${xsmall ? "w-[1.5rem] h-[1.5rem]" : small ? "w-[2rem] h-[2rem]": "w-[3rem] h-[3rem]"} opacity-60 hover:opacity-100`} >
+            <Image  src={getIcon(icon)} alt={name} className="w-full h-auto" />
         </Link>
     );
 }
diff --git a/web/components/ProjectCard.tsx b/web/components/ProjectCard.tsx
index 6d6406a..fa9c87c 100644
--- a/web/components/ProjectCard.tsx
+++ b/web/components/ProjectCard.tsx
@@ -19,12 +19,13 @@ const ProjectCard = ({ img, title, description, link, i, github }: Props) => {
                 <div style={{ width: '100%', overflow: 'hidden' }}>
                     <Image
                         src={img}
-                        layout='responsive'
+                        // layout='responsive'
+                        sizes='100vw'
                         width={300}
                         height={300}
-                        objectFit='contain'
+                        // objectFit='contain'
                         alt='proj'
-                        className='aspect-video'
+                        className='aspect-video w-full h-auto object-cover'
                     />
                 </div>
             </div>
diff --git a/web/components/TeamCard.tsx b/web/components/TeamCard.tsx
index c423dba..8acdc10 100644
--- a/web/components/TeamCard.tsx
+++ b/web/components/TeamCard.tsx
@@ -17,7 +17,14 @@ const TeamCard = ({ img, title, subtitle, i, linkedin, github, link }: Props) =>
     return (
         <Card bg='white' i={i}>
             <div className='w-full border-2 border-black rounded-md'>
-                <Image src={img} layout='responsive' width={300} height={300} alt='Logo' />
+                <Image 
+                    src={img} 
+                    sizes='100vw'
+                    width={300}
+                    height={300}
+                    className='w-full h-auto' 
+                    alt='pfp' 
+                />
             </div>
             <h2 className='my-3 font-sans text-2xl font-semibold'>
                 {title}
diff --git a/web/components/TeamCardForGrid.tsx b/web/components/TeamCardForGrid.tsx
index 976fe5f..32bae75 100644
--- a/web/components/TeamCardForGrid.tsx
+++ b/web/components/TeamCardForGrid.tsx
@@ -19,11 +19,11 @@ const TeamCardForGrid = ({ img, title, subtitle, i, github, link, linkedin }: Pr
                 <div className='aspect-square' style={{ width: '100%', overflow: 'hidden' }}>
                     <Image
                         src={img}
-                        layout='responsive'
+                        sizes='100vw'
                         width={300}
                         height={300}
-                        objectFit='cover'
-                        alt='Logo'
+                        className='w-full h-auto object-cover'
+                        alt='pfp'
                     />
                 </div>
             </div>