refined design

app/connect/page.tsx

@@ -1,13 +1,11 @@
 import { DATA } from "@/app/resume";
 import Image from "next/image";
-import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
-import { CenteredImage } from "@/components/centered-image";
 import { BlurFade } from "@/components/magicui/blur-fade";
 import { TrackedLink } from "@/components/util-tracked-link";
 
-const BLUR_FADE_DELAY = 0.05;
+const BLUR_FADE_DELAY = 0.01;
 
 export default function ConnectPage() {
   const featuredSocials = ["Email", "LinkedIn", "GoogleScholar", "arXiv", "ResearchGate", "Gitea"];
@@ -16,10 +14,9 @@ export default function ConnectPage() {
 
   return (
     <main 
-      className="fixed inset-0 flex flex-col items-center justify-center bg-background"
+      className="inset-0 flex flex-col items-center justify-center bg-background"
     >
       <div className="flex flex-col items-center space-y-8 text-center max-w-sm w-full p-6">
-        
         <BlurFade delay={BLUR_FADE_DELAY * 1}>
           <Image
             src="/images/newshot_2.jpg"
@@ -35,11 +32,10 @@ export default function ConnectPage() {
             Dr. Steffen Illium
           </h1>
         </BlurFade>
-
         <BlurFade delay={BLUR_FADE_DELAY * 3}>
-          <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 w-full">              
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-2 w-full">              
             {socialLinks.map(([name, social]) => (
-                <TrackedLink href={social.url} key={name} eventName={`${name}-social`} target="_blank">
+                <TrackedLink className="truncate" href={social.url} key={name} eventName={`${name}-social`} target="_blank">
                     <Button variant="outline" className="w-full">
                         <social.icon className="size-4 mr-2" />
                         {name}
@@ -49,26 +45,20 @@ export default function ConnectPage() {
           </div>
         </BlurFade>
 
-        <div className="flex w-full flex-col items-center space-y-4 pb-8">
-          <div className="w-full px-8">
-            <BlurFade delay={BLUR_FADE_DELAY * 4}>
-              <hr className="w-full" />
-            </BlurFade>
-          </div>
+        <div className="flex w-full flex-col items-center space-y-4 pb-4">
 
           <BlurFade delay={BLUR_FADE_DELAY * 5}>
             <a href="/images/qr.png" download="SteffenIllium-QRCode.png">
               <Image
                 src="/images/qr.png"
                 alt="QR Code to connect"
-                width={256}
-                height={256}
+                width={240}
+                height={240}
                 className="rounded-xl shadow-lg hover:opacity-80 transition-opacity"
               />
             </a>
           </BlurFade>
         </div>
-
       </div>
     </main>
   );