Apply responsive layout to marketing home page

hemilabs · Feb 14, 2024 · 9392fe6 · 9392fe6
1 parent d56c21f
commit 9392fe6
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/marketing/app/[locale]/header.tsx b/marketing/app/[locale]/header.tsx
@@ -95,7 +95,7 @@ export const Header = function () {
         </div>
 
         {/* Tablet / Desktop header */}
-        <div className="mx-auto hidden overflow-x-auto md:block md:w-5/6 lg:w-4/5 xl:w-11/12 2xl:max-w-[1650px]">
+        <div className="mx-auto hidden overflow-x-auto md:block">
           <nav>
             <ul className="flex items-center justify-between font-medium md:gap-x-2 lg:gap-x-4 xl:gap-x-8">
               <li className={`mr-auto ${navigationItemCss}`}>

diff --git a/marketing/app/[locale]/layout.tsx b/marketing/app/[locale]/layout.tsx
@@ -31,13 +31,11 @@ export default async function RootLayout({
   return (
     <html lang={locale}>
       <body
-        className={`font-inter flex w-full flex-col py-7 ${bricolageGrotesque.variable} ${inter.className} bg-zinc-100 px-4`}
+        className={`font-inter flex w-full flex-col py-7 ${bricolageGrotesque.variable} ${inter.className} bg-zinc-100 px-4 sm:mx-auto sm:w-4/5 lg:w-3/4 xl:w-5/6 2xl:max-w-[1500px]`}
       >
         <NextIntlClientProvider locale={locale} messages={messages}>
           <Header />
-          <div className="mt-6 sm:mx-auto sm:w-4/5 lg:w-3/4 xl:w-5/6 2xl:max-w-[1500px]">
-            {children}
-          </div>
+          <div className="mt-6">{children}</div>
         </NextIntlClientProvider>
       </body>
     </html>

diff --git a/marketing/app/[locale]/page.tsx b/marketing/app/[locale]/page.tsx
@@ -6,27 +6,30 @@ import Link from 'next-intl/link'
 const Home = function () {
   const t = useTranslations('home')
 
+  const linksCommonCss =
+    'w-full rounded-xl px-7 py-3 font-semibold text-center text-xs sm:text-base md:w-auto cursor-pointer'
+
   return (
-    <main className="flex-grow">
-      <section className="bg-triangles-pattern flex h-full flex-col items-center gap-y-5 rounded-3xl bg-cover px-2 sm:px-5 2xl:px-8">
+    <main className="h-fit-rest-screen-mobile md:h-fit-rest-screen-desktop md:pb-11">
+      <section className="bg-triangles-pattern flex h-full flex-col items-center gap-y-5 rounded-3xl bg-cover px-4 pb-10 pt-12 sm:px-5 md:pt-24 2xl:px-8">
         <h1
-          className="font-right-grotesk mt-14 flex text-left text-2xl font-black uppercase text-[#F3EDE4] sm:text-4xl md:text-center xl:text-6xl 2xl:text-8xl"
+          className="font-right-grotesk flex text-left text-5xl font-black uppercase leading-[64px] text-[#F3EDE4] md:text-center 2xl:text-8xl"
           dangerouslySetInnerHTML={{ __html: t.raw('page-title') }}
         />
         <p
-          className="text-left text-sm font-normal text-white md:text-center 2xl:text-xl"
+          className="text-left text-base font-normal leading-7 text-white md:text-center 2xl:text-xl"
           dangerouslySetInnerHTML={{ __html: t.raw('subtitle') }}
         ></p>
-        <div className="mt-12 flex w-full flex-col gap-x-4 gap-y-4 md:flex-row md:justify-center">
+        <div className="mt-auto flex flex-col gap-x-4 gap-y-4 md:mt-14 md:flex-row md:justify-center">
           <Link
-            className='md:w-auto" w-full rounded-xl bg-blue-500 px-7 py-[13px] text-center text-xs font-semibold text-white sm:text-base'
+            className={`${linksCommonCss} bg-blue-500 text-white`}
             href="/network"
           >
             {t('get-started')}
           </Link>
-          <button className="w-full rounded-xl bg-white px-7 py-[13px] text-xs font-semibold text-teal-900 sm:text-base md:w-auto">
+          <a className={`${linksCommonCss} bg-white text-teal-900`}>
             {t('tunnel-and-swap')}
-          </button>
+          </a>
         </div>
       </section>
     </main>

diff --git a/marketing/tailwind.config.ts b/marketing/tailwind.config.ts
@@ -17,6 +17,12 @@ const config: Config = {
         'bricolage-grotesque': '--font-bricolage-grotesque',
         'inter': '--font-inter',
       },
+      height: {
+        // 67px from header, 24px from container margin's top, and 28px twice from body y-padding
+        'fit-rest-screen-desktop': 'calc(100vh - 67px - 24px - 28px - 28px)',
+        // same as above, but header is now 32px
+        'fit-rest-screen-mobile': 'calc(100vh - 32px - 24px - 28px - 28px)',
+      },
     },
   },
 }