Optimise the content and Made it Mobile responsive properly

hmziqrs · Oct 9, 2024 · 2967a0f · 2967a0f
1 parent 6af53c7
commit 2967a0f
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 52 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -3,64 +3,20 @@ import SocialLinks from './socials';
 
 export default function Home() {
   return (
-    <main className="fixed h-full w-full flex flex-col items-center justify-center bg-red-900 font-[family-name:var(--font-geist-mono)]">
-      <div className="text-center sm:text-left">
-        <h1 className="text-3xl md:text-5xl sm:text-4xl">
-          Busy building and accelerating
-        </h1>
+    <main className="fixed h-full w-full flex flex-col items-center justify-center font-[family-name:var(--font-geist-mono)]">
+      <div className="text-center sm:text-left w-full sm:max-w-4xl sm:mx-auto bg-black">
+        <h1 className="text-4xl">Busy building</h1>
         <div className="h-2" />
         <p className="text-sm">more updates coming soon!</p>
         <div className="h-4" />
         <p className="text-lg sm:text-xl">follow @{username}</p>
         <div className="h-4" />
+        <SocialLinks />
       </div>
-      <SocialLinks />
     </main>
   );
 }
 
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/app/socials.tsx b/app/socials.tsx
@@ -3,16 +3,17 @@ import { links } from './data';
 
 export default function SocialLinks() {
   return (
-    <div className="flex flex-row space-x-5">
+    <div className="flex flex-row w-full flex-wrap justify-center sm:justify-start space-x-4 sm:px-0">
       {links.map(({ name, url, Icon }) => (
         <a
           target="_blank"
           key={url}
           href={url}
-          className="flex items-center space-x-3 px-4 py-2 bg-transparent border rounded-lg border-2 border-gray-400"
+          className="flex items-center py-2 sm:py-3 px-5 sm:px-7 my-2 bg-transparent rounded-lg border-2 border-gray-400"
         >
-          <Icon className="size-4" />
-          <span className="text-xs font-black">{name}</span>
+          <Icon className="size-4 sm:size-5" />
+          <div className="w-3" />
+          <span className="text-sm sm:text-base font-black">{name}</span>
         </a>
       ))}
     </div>
@@ -23,3 +24,96 @@ export default function SocialLinks() {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+