fix: mobile view

src/app/layout.tsx

@@ -9,12 +9,12 @@ export const metadata: Metadata = {
   title: "Ryan Aulia - Aulianza Landing Page",
   description: "My Personal Landing Page",
   icons: "/images/aulianza.png",
-  openGraph: {
-    images: "/images/aulianza.png",
-    url: "https://aulianza.com",
-    siteName: "Ryan Aulia - Aulianza Landing Page",
-    type: "website",
-  },
+  // openGraph: {
+  //   images: "/images/aulianza.png",
+  //   url: "https://aulianza.com",
+  //   siteName: "Ryan Aulia - Aulianza Landing Page",
+  //   type: "website",
+  // },
 };
 
 export default function RootLayout({

src/common/components/PageWrapper.tsx

@@ -10,6 +10,7 @@ const PageWrapper = ({ children }: { children: React.ReactNode }) => {
     AOS.init({
       duration: 800,
       delay: 50,
+      disable: "mobile",
     });
   }, []);
 

src/modules/homepage/components/ChitChat.tsx

@@ -12,8 +12,10 @@ const ChitChat = () => {
     >
       <div className="flex gap-5 items-start justify-between">
         <div className="space-y-1">
-          <div className="text-lg font-medium">1 on 1 Chit-chat Session</div>
-          <p className="text-neutral-400">
+          <div className="text-base md:text-lg font-medium">
+            1 on 1 Chit-chat Session
+          </div>
+          <p className="text-neutral-400 text-sm md:text-base">
             Let’s find some time to talk about anything!{" "}
           </p>
         </div>

src/modules/homepage/components/Contact.tsx

@@ -19,7 +19,7 @@ const Contact = () => {
   };
 
   return (
-    <div className="space-y-5">
+    <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>
@@ -32,15 +32,15 @@ const Contact = () => {
       >
         <EmailIcon size={24} className="text-neutral-800" />
         <div className="space-y-3">
-          <h6 className="font-medium text-xl">Drop Me an Email</h6>
+          <h6 className="font-medium text-lg md:text-xl">Drop Me an Email</h6>
           <div
-            className="hover:underline text-neutral-800 text-lg"
+            className="hover:underline text-neutral-800 text-lg md:text-lg"
             onClick={() => handleEmailClick("aulianza.dev@gmail.com")}
           >
             {copiedEmail ? "Copied!" : "aulianza.dev@gmail.com"}
           </div>
         </div>
-        <p className="text-sm text-neutral-600 leading-relaxed">
+        <p className="text-sm md:text-base text-neutral-600 leading-relaxed">
           Expect my rapid and eager reply – your message won't be kept waiting!
         </p>
       </div>

src/modules/homepage/components/Home.tsx

@@ -10,7 +10,7 @@ import Socials from "./Socials";
 
 const Home = () => {
   return (
-    <div className="p-6 mb-16 space-y-6" data-aos="fade-down">
+    <div className="p-6 mb-2 space-y-6" data-aos="fade-down">
       <Hero />
       <Socials />
       <ButtonLink />

src/modules/homepage/components/ServicesItem.tsx

@@ -24,8 +24,8 @@ const ServicesItem = ({
         <Image src={icon} alt={title} width={40} height={40} />
       </div>
       <div className={clsx("space-y-1", className)}>
-        <h5 className="text-lg font-medium">{title}</h5>
-        <p className="text-neutral-600">{description}</p>
+        <h5 className="text-base md:text-lg font-medium">{title}</h5>
+        <p className="text-neutral-600 text-sm md:text-base">{description}</p>
       </div>
     </div>
   );