feat: add wip for homepage

LiterateInk · Jul 12, 2024 · 8e0aaa0 · 8e0aaa0
1 parent a7b363b
commit 8e0aaa0
Showing 1 changed file with 32 additions and 9 deletions.
diff --git a/src/templates/MainHomepage.astro b/src/templates/MainHomepage.astro
@@ -3,7 +3,7 @@ import HTML from '../layouts/HTML.astro';
 import LanguageSelector from '../components/LanguageSelector.astro';
 import { getLocalizedPath, useTranslations } from '../i18n/utils';
 import type { ui } from '../i18n/ui';
-
+import LiterateLogo from "~icons/literate/logo";
 interface Props {
   lang: keyof typeof ui;
 }
@@ -12,36 +12,59 @@ const { lang } = Astro.props;
 const t = useTranslations(lang);
 ---
 <HTML title={t("home.tagline") + " - literate.ink"} lang={lang}>
+  <header class="h-[64px] flex justify-between items-center px-[32px]">
+    <div class="flex gap-[8px] items-center text-[#FFFFF5]/86">
+      <LiterateLogo class="text-[24px]" />
+      <p class="text-[16px] font-semibold">LiterateInk</p>
+    </div>
+  </header>
+
   <main class="container mx-auto p-[32px]">
     <!-- <LanguageSelector /> -->
 
-    <section class="flex flex-col ">
-      <div class="flex flex-col gap-[24px]">
+    <section class="w-full max-w-[1152px] mx-auto flex lg:flex-row flex-col-reverse pb-[64px] lg:pt-[64px]">
+      <!-- .main -->
+      <div class="w-full lg:max-w-[576px] flex flex-col gap-[24px] text-center lg:text-left">
         <div>
           <div>
-            <span class="text-[56px] leading-[64px] font-semibold bg-gradient-to-tr from-[#C1C1C1] to-[#787878] text-transparent bg-clip-text">
+            <span class="text-[48px] leading-[56px] lg:text-[56px] lg:leading-[64px] font-semibold bg-gradient-to-tr from-[#C1C1C1] to-[#787878] text-transparent bg-clip-text">
               docs.literate.ink
             </span>
 
-            <h1 class="text-[56px] leading-[64px] font-semibold text-[#F5FFFB] max-w-[600px]">
+            <h1 class="text-[48px] leading-[56px] lg:text-[56px] lg:leading-[64px] font-semibold text-[#F5FFFB]">
               {t("home.tagline")}
             </h1>
           </div>
 
-          <p class="text-[24px] leading-[36px] text-[#EBEBF5]/60 max-w-[700px]">
+          <p class="text-[20px] leading-[32px] lg:text-[24px] lg:leading-[36px] text-[#EBEBF5]/60">
             {t("home.description")}
           </p>
         </div>
 
-        <div class="flex">
-          <a href="https://github.com/LiterateInk/docs.literate.ink" target="_blank" class="px-[24px] py-[8px] bg-[#2E3035] border border-[#525259]/68 text-[#FFFFF5]/86 rounded-[20px]">
+        <div class="flex justify-center lg:justify-start">
+          <a
+            target="_blank"
+            href="https://github.com/LiterateInk/docs.literate.ink"
+            class="px-[24px] py-[8px] bg-[#2E3035] border border-[#525259]/68 text-[#FFFFF5]/86 rounded-[20px]"
+          >
             {t("buttons.viewGitHub")}
           </a>
         </div>
       </div>
+
+      <!-- .image -->
+      <div class="flex-grow-1">
+        <!-- .image-container -->
+        <div class="flex items-center justify-center lg:w-full lg:h-full h-[256px] relative mx-auto lg:transform-translate-x-[-32px] lg:transform-translate-y-[-32px]">
+          <!-- .image-bg -->
+          <div class="w-[256px] lg:w-[320px] h-[256px] lg:h-[320px] absolute top-[50%] left-[50%] rounded-[50%] bg-gradient-to-br from-[#F8F8F8] to-[#3C3C3C] blur-[68px] transform-translate-x-[-50%] transform-translate-y-[-50%]" />
+          <!-- .image-src -->
+          <LiterateLogo class="text-white w-[196px] lg:w-[256px] h-[196px] lg:h-[256px] absolute top-[50%] left-[50%] transform-translate-x-[-50%] transform-translate-y-[-50%]" />
+        </div>
+      </div>
     </section>
 
-    <section>
+    <section class="relative w-full max-w-[1152px] mx-auto bg-[#2E3035] text-white h-[200px] rounded-md">
       <a href={getLocalizedPath("/pawnote", lang)}>
         Pawnote
       </a>