feat: desktop homepage desing

DuBento · Sep 11, 2023 · 6344430 · 6344430
1 parent 3674e3e
commit 6344430
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -23,12 +23,12 @@ export default function Home() {
   const githubURL = process.env.NEXT_PUBLIC_GITHUB_REPO || "https://github.com";
 
   return (
-    <div className="min-h-screen flex-col bg-isabelline py-4">
+    <div className="min-h-screen flex-col bg-isabelline px-4 py-4 md:h-screen md:justify-between">
       {/* Header Menu */}
       <header className="flex-none pb-4 text-black">
-        <div className="container mx-auto flex h-16 items-center justify-between">
+        <div className="container mx-auto flex h-16 flex-wrap items-center justify-between">
           {/* Logo */}
-          <div className="h-16 w-16">
+          <div className="h-16 w-16 flex-none">
             <Logo className="fill-gray-600" />
           </div>
           {/* Navigation Menu */}
@@ -64,23 +64,25 @@ export default function Home() {
       </header>
 
       {/* Main Body */}
-      <main className="container relative mx-auto w-full max-w-[80%] grow pb-8 pt-2">
-        <div className="relative">
-          <div className="absolute inset-1 transform rounded-xl bg-gradient-to-r from-brunswick_green to-brown_sugar blur-lg"></div>
-          <div className="relative max-h-[90%] overflow-clip">
-            <Image
-              src="/images/clientViewScreenshotSmall.png"
-              width="450"
-              height="750"
-              sizes={"100vw"}
-              className="h-auto w-full rounded-xl"
-              placeholder="blur"
-              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPcUA8AAeUBMdl0U3EAAAAASUVORK5CYII"
-              alt="cv-screenshot"
-            />
-            <div className="absolute inset-0 rounded-xl bg-gradient-to-b from-transparent to-isabelline to-65%"></div>
+      <main className="container relative mx-auto w-full max-w-[80%] grow pb-8 pt-2 md:pt-6">
+        <div className="relative md:flex md:flex-row-reverse md:items-center md:justify-center md:gap-24">
+          <div className="relative">
+            <div className="absolute inset-1 transform rounded-xl bg-gradient-to-r from-brunswick_green to-brown_sugar blur-lg"></div>
+            <div className="relative overflow-hidden rounded-xl md:h-[500px] md:w-[275px]">
+              <Image
+                src="/images/clientViewScreenshotSmall.png"
+                width="450"
+                height="750"
+                sizes={"100vw"}
+                placeholder="blur"
+                blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPcUA8AAeUBMdl0U3EAAAAASUVORK5CYII"
+                alt="cv-screenshot"
+              />
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-b from-transparent to-isabelline to-65% md:bg-gradient-to-br md:to-80%"></div>
+            </div>
           </div>
-          <div className="absolute bottom-0 left-0 right-0 mx-auto mb-10 flex w-4/5 flex-col items-center font-body">
+
+          <div className="absolute bottom-0 left-0 right-0 mx-auto mb-10 flex w-4/5 flex-col items-center font-body md:relative md:m-0 md:w-auto">
             <h1 className="mb-1 font-display text-3xl font-black">Tracer</h1>
             <h2 className="font-display text-lg">
               Blockchain-Based Traceability