Merge pull request #24 from BETIS-Fasilkom-UI/development

Development
BETIS-Fasilkom-UI · Dec 31, 2024 · 43e6b99 · 43e6b99
2 parents dab40a7 + 2275e32
commit 43e6b99
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 12 deletions.
diff --git a/src/components/elements/ContactPerson.tsx b/src/components/elements/ContactPerson.tsx
@@ -10,13 +10,15 @@ export const ContactPerson = () => {
           src={getAsset("/ContactPersonBg.png")}
           fill
           alt=""
+          sizes="none"
           className="object-fill rounded-[40px]"
         />
       </div>
       <div className="absolute w-full h-full -z-10 md:hidden">
         <Image
           src={getAsset("/ContactPersonBgMob.png")}
           fill
+          sizes="none"
           alt=""
           className="object-fill rounded-[40px]"
         />
@@ -25,6 +27,7 @@ export const ContactPerson = () => {
         <Image
           src={getAsset("/ContactPersonLamp.png")}
           fill
+          sizes="none"
           alt=""
           className="object-contain rounded-[40px]"
         />
@@ -33,6 +36,7 @@ export const ContactPerson = () => {
         <Image
           src={getAsset("/ContactPersonBurung.png")}
           fill
+          sizes="none"
           alt=""
           className="object-contain rounded-[40px]"
         />
@@ -54,6 +58,7 @@ export const ContactPerson = () => {
                 src={getAsset("/social/LINE.svg")}
                 alt="line"
                 fill
+                sizes="none"
                 className="object-contain"
               />
             </div>
@@ -65,6 +70,7 @@ export const ContactPerson = () => {
                 src={getAsset("/social/Whatsapp.svg")}
                 alt="wa"
                 fill
+                sizes="none"
                 className="object-contain"
               />
             </div>
@@ -81,6 +87,7 @@ export const ContactPerson = () => {
                 src={getAsset("/social/LINE.svg")}
                 alt="line"
                 fill
+                sizes="none"
                 className="object-contain"
               />
             </div>
@@ -92,6 +99,7 @@ export const ContactPerson = () => {
                 src={getAsset("/social/Whatsapp.svg")}
                 alt="wa"
                 fill
+                sizes="none"
                 className="object-contain"
               />
             </div>

diff --git a/src/components/elements/testimony/TestimonyCarousel.tsx b/src/components/elements/testimony/TestimonyCarousel.tsx
@@ -117,6 +117,7 @@ const TestimonyCarousel: React.FC<PropType> = (props) => {
                     <Image
                       src={getAsset("/testimony/petik.png")}
                       fill
+                      sizes="none"
                       alt=""
                       className="object-contain"
                     />
@@ -125,6 +126,7 @@ const TestimonyCarousel: React.FC<PropType> = (props) => {
                     <Image
                       src={getAsset("/testimony/petik.png")}
                       fill
+                      sizes="none"
                       alt=""
                       className="object-contain"
                     />
@@ -133,6 +135,7 @@ const TestimonyCarousel: React.FC<PropType> = (props) => {
                     <Image
                       src={getAsset("/testimony/background.png")}
                       fill
+                      sizes="none"
                       alt=""
                       className="object-cover rounded-[32px]"
                     />
@@ -142,6 +145,7 @@ const TestimonyCarousel: React.FC<PropType> = (props) => {
                       src={slide.src}
                       alt={slide.alt}
                       fill
+                      sizes="none"
                       className="object-cover rounded-[10px]"
                     />
                   </div>

diff --git a/src/components/layout/Footer/index.tsx b/src/components/layout/Footer/index.tsx
@@ -17,6 +17,7 @@ export const Footer = () => {
                 src={getAsset("/Footer.png")}
                 alt="FooterLogo"
                 fill
+                sizes="none"
                 className="object-contain"
               />
             </div>
@@ -66,6 +67,7 @@ export const Footer = () => {
               src={getAsset("/Footer.png")}
               alt="FooterLogo"
               fill
+              sizes="none"
               className="object-contain"
             />
           </div>
@@ -127,12 +129,14 @@ const ContactLogo = ({ href, image }: { href: string; image: string }) => {
           src={getAsset(image)}
           alt="Logo"
           fill
+          sizes="none"
           className="object-contain max-md:hidden"
         />
         <Image
           src={getAsset(image.split(".").join("Mob."))}
           alt="Logo"
           fill
+          sizes="none"
           className="object-contain md:hidden"
         />
       </div>

diff --git a/src/components/layout/Navbar/index.tsx b/src/components/layout/Navbar/index.tsx
@@ -53,6 +53,7 @@ export const Navbar = ({ user }: { user: UserJWT | null }) => {
               <Image
                 src={getAsset("/Footer.png")}
                 fill
+                sizes="none"
                 className="object-contain"
                 alt="Logo"
               />

diff --git a/src/modules/HomePageModule/module-elements/BlurredStarIcon.tsx b/src/modules/HomePageModule/module-elements/BlurredStarIcon.tsx
@@ -22,9 +22,9 @@ export function BigBlurredStarIcon({ className = "" }: { className?: string }) {
           width="194.628"
           height="195.117"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feBlend
             mode="normal"
             in="SourceGraphic"
@@ -69,9 +69,9 @@ export function SmallBlurredStarIcon({
           width="74.1838"
           height="62.2844"
           filterUnits="userSpaceOnUse"
-          color-interpolation-filters="sRGB"
+          colorInterpolationFilters="sRGB"
         >
-          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
           <feBlend
             mode="normal"
             in="SourceGraphic"

diff --git a/src/modules/HomePageModule/sections/AboutBetis.tsx b/src/modules/HomePageModule/sections/AboutBetis.tsx
@@ -78,8 +78,9 @@ const AboutBetis = () => {
           <Image
             src={getAsset("/about/girl-illustration.png")}
             alt="Girl Illustration"
-            layout="fill"
-            objectFit="contain"
+            className="object-contain"
+            fill
+            sizes="none"
             priority={true}
           />
         </div>

diff --git a/src/modules/HomePageModule/sections/DocumentationCarousel.tsx b/src/modules/HomePageModule/sections/DocumentationCarousel.tsx
@@ -127,6 +127,7 @@ const DocumentationCarousel: React.FC<PropType> = (props) => {
                       src={slide.src}
                       alt={slide.alt}
                       fill
+                      sizes="none"
                       className="object-cover rounded-[10px]"
                     />
                   </div>

diff --git a/src/modules/HomePageModule/sections/Timeline.tsx b/src/modules/HomePageModule/sections/Timeline.tsx
@@ -17,6 +17,7 @@ const Timeline = () => {
           src={getAsset("/TimelineBg.png")}
           alt=" "
           fill
+          sizes="none"
           className="object-contain"
         />
       </div>
@@ -39,10 +40,11 @@ const Timeline = () => {
                                 lg:left-[-91.5px] lg:top-[-120px] lg:w-[175px] lg:h-[183px]`}
           >
             <Image
-              className=""
+              className="object-fill"
               src={getAsset("/TreasureChest.png")}
               alt=""
-              layout="fill"
+              fill
+              sizes="none"
               loading="eager"
             />
           </div>
@@ -124,7 +126,7 @@ const Timeline = () => {
                         lg:right-[-45vw] lg:top-[-10vw] lg:w-[280px] lg:h-[357px]
                         2xl:right-[-40vw] 2xl:top-[-7vw] 2xl:w-[330px] 2xl:h-[407px]`}
           >
-            <Image src={getAsset("/KelinciTimeline.png")} alt="" layout="fill" />
+            <Image src={getAsset("/KelinciTimeline.png")} alt="" fill className="object-fill" sizes="none" />
           </div>
         </div>
       </div>

diff --git a/src/modules/HomePageModule/sections/hero/assets/jalan.tsx b/src/modules/HomePageModule/sections/hero/assets/jalan.tsx
@@ -19,6 +19,7 @@ export default function Jalan(props: {className: string}) {
                 alt="Jalan" 
                 sizes="none"
                 fill
+                priority
             />
             <div className='z-[0]'>
                 <Mascot

diff --git a/src/modules/HomePageModule/sections/hero/assets/kupu.tsx b/src/modules/HomePageModule/sections/hero/assets/kupu.tsx
@@ -9,7 +9,8 @@ export default function KupuKupu(props: {className: string, reverse: boolean}) {
                 className={props.reverse ? 'transform scale-x-[-1]' : ''}
                 src={getAsset("/kupu-kupu1.png")}
                 alt="kupukupuk" 
-                layout="fill"
+                fill
+                sizes='none'
             />
         </div>
     )

diff --git a/src/modules/HomePageModule/sections/hero/assets/kupu2.tsx b/src/modules/HomePageModule/sections/hero/assets/kupu2.tsx
@@ -9,7 +9,8 @@ export default function KupuKupu(props: {className: string, reverse: boolean}) {
                 className={props.reverse ? 'transform scale-x-[-1]' : ''}
                 src={getAsset("/kupu-kupu2.png")}
                 alt="kupukupuk" 
-                layout="fill"
+                sizes='none'
+                fill
             />
             <div className='w-full h-full rounded-full origin-top-left bg-[#ff9a50] blur-[82.47px]'>
 

diff --git a/src/modules/ProfilePageModule/index.tsx b/src/modules/ProfilePageModule/index.tsx
@@ -12,7 +12,7 @@ export const ProfilePageModule = ({ user }: { user: User }) => {
       <StarryBackground />
       <section className="w-[80vw] p-6 lg:p-10 flex flex-col gap-6 bg-[#f8ebf30c] rounded-xl shadow-[4px_4px_12px_0px_rgba(254,245,255,0.40),-4px_-4px_12px_0px_rgba(254,245,255,0.40)] backdrop-blur-md my-40">
         <Avatar className="w-40 h-40 mb-6 max-md:mx-auto">
-          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarImage src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png" alt="profile" />
           <AvatarFallback>
             {user.fullname.charAt(0).toUpperCase()}
           </AvatarFallback>