Merge pull request #5 from aulianza/feat/enhance-image

perf: improve image performance

src/app/layout.tsx

@@ -8,9 +8,9 @@ const sora = Sora({ subsets: ["latin"] });
 export const metadata: Metadata = {
   title: "Ryan Aulia - Aulianza Landing Page",
   description: "My Personal Landing Page",
-  icons: "/images/aulianza.png",
+  icons: "/images/aulianza.webp",
   // openGraph: {
-  //   images: "/images/aulianza.png",
+  //   images: "/images/aulianza.webp",
   //   url: "https://aulianza.com",
   //   siteName: "Ryan Aulia - Aulianza Landing Page",
   //   type: "website",

src/common/components/Qris.tsx

@@ -5,14 +5,14 @@ import Image from "./Image";
 const Qris = ({ onBack }: { onBack: () => void }) => {
   const downloadQrisImage = () => {
     const link = document.createElement("a");
-    link.href = "/images/qris-aulianza.png";
-    link.download = "qris-aulianza.png";
+    link.href = "/images/qris-aulianza.webp";
+    link.download = "qris-aulianza.webp";
     link.click();
   };
 
   return (
     <>
-      <Image src="/images/qris-long.png" alt="QRIS" width={300} height={50} />
+      <Image src="/images/qris-long.webp" alt="QRIS" width={300} height={50} />
       <Image src="/images/qris.svg" alt="QRIS" width={500} height={500} />
       <div className="flex w-full px-3 gap-3">
         <button

src/common/constant/services.ts

@@ -5,18 +5,18 @@ export const SERVICES: ServicesProps[] = [
     title: "Innovative Web Solutions",
     description:
       "Transforming your ideas into captivating websites using powerful technologies.",
-    icon: "/images/ic-webdev.png",
+    icon: "/images/ic-webdev.webp",
   },
   {
     title: "Mobile App Redefined",
     description:
       "Crafting immersive mobile apps that come to life with the magic of React Native.",
-    icon: "/images/ic-appdev.png",
+    icon: "/images/ic-appdev.webp",
   },
   {
     title: "Strategic IT Partnership",
     description:
       "Expert advice guiding your business towards tech-driven success.",
-    icon: "/images/ic-itcons.png",
+    icon: "/images/ic-itcons.webp",
   },
 ];

src/modules/homepage/components/BuyACoffee.tsx

@@ -21,20 +21,20 @@ const BuyACoffee: React.FC = () => {
             onClick={handleShowQris}
           >
             <Image
-              src="/images/qris-logo.png"
+              src="/images/qris-logo.webp"
               alt="QRIS"
               width={70}
               height={50}
             />
           </button>
           <PaymentMethodButton
             href="https://www.paypal.com/paypalme/aulianza01"
-            imageSrc="/images/paypal.png"
+            imageSrc="/images/paypal.webp"
             altText="PayPal"
           />
           <PaymentMethodButton
             href="https://wise.com/share/ryana1181"
-            imageSrc="/images/wise.png"
+            imageSrc="/images/wise.webp"
             altText="Wise"
           />
         </div>

src/modules/homepage/components/Contact.tsx

@@ -21,8 +21,8 @@ const Contact = () => {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2 px-3">
-        <ContactIcon size={26} />
-        <h2 className="font-medium text-xl">Get in Touch</h2>
+        <ContactIcon size={24} />
+        <h2 className="font-medium text-lg md:text-xl">Get in Touch</h2>
       </div>
       <div
         className="bg-[#94d7c5] text-neutral-900 border p-8 rounded-2xl cursor-pointer space-y-5 bg-no-repeat bg-right"

src/modules/homepage/components/Hero.tsx

@@ -10,7 +10,7 @@ const Hero = () => {
         data-aos-duration="1000"
       >
         <Image
-          src="/images/aulianza.png"
+          src="/images/aulianza.webp"
           alt="Ryan Aulia"
           width={100}
           height={100}

src/modules/homepage/components/Services.tsx

@@ -10,8 +10,8 @@ const Services = () => {
   return (
     <div className="space-y-5">
       <div className="flex items-center gap-2 px-3">
-        <ServiceIcon size={26} />
-        <h2 className="font-medium text-xl">Services</h2>
+        <ServiceIcon size={24} />
+        <h2 className="font-medium text-lg md:text-xl">Services</h2>
       </div>
       <div className="space-y-3" data-aos="fade-up" data-aos-duration="1000">
         {servicesData.map((service, index) => (