style: Add our Spacing and Typography to project

dezh-tech · Apr 1, 2024 · aa44dbc · aa44dbc
1 parent 9e362e8
commit aa44dbc
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ This repository contains the source code for the main website of Dezh Technology
 
 If anyone wants to add their logo to our partners section, they should follow these steps:
 
-1. Add the logo with `230px 80px` size and `#FFFFFF` color to the `public/companies` directory with an `.svg` extension. The SVG name should be the company or team name. For example, `google.svg`.
+1. Add the logo with `#FFFFFF` color to the `public/companies` directory with an `.svg` extension. The SVG name should be the company or team name. For example, `google.svg`.
 
 2. Change the `data/companies.json` file and add their information. The JSON structure should be as follows:
 

diff --git a/src/components/Home/Companies.tsx b/src/components/Home/Companies.tsx
@@ -5,19 +5,9 @@ const Companies = () => {
   return (
     <section
       id="our-Partners"
-      className="bg-secondary noisy-bg text-white space-y-[56px] xl:py-[175px] lg:py-24 py-16 px-6 xl:px-[130px]"
+      className="flex flex-col-reverse md:flex-row gap-[58px] items-center bg-secondary noisy-bg text-white xl:py-sp10 lg:py-sp11 py-sp9 px-sp7 xl:px-[150px]"
     >
-      <div className="flex justify-end">
-        <div className="space-y-2 max-w-[542px] " style={{ direction: "rtl" }}>
-          <PointerIcon />
-          <h3 className="text-[56px] leading-[53px]">Our Partners</h3>
-          <p className="text-lg">
-            We are working with industry leading Companies over the crypto world
-            together to boost the process of our mission in decentralized web
-          </p>
-        </div>
-      </div>
-      <div className="flex flex-wrap  gap-16 justify-center">
+      <div className="flex flex-wrap  gap-16 justify-evenly flex-1">
         {companiesData.map((company) => (
           <a
             draggable={false}
@@ -26,10 +16,26 @@ const Companies = () => {
             key={company.name}
           >
             <span className="sr-only">{company.name}</span>
-            <img draggable={false} src={company.logo} alt={company.name} />
+            <img
+              width={230}
+              height={80}
+              draggable={false}
+              src={company.logo}
+              alt={company.name}
+            />
           </a>
         ))}
       </div>
+      <div className="flex justify-end flex-1">
+        <div className="space-y-2 max-w-[542px] " style={{ direction: "rtl" }}>
+          <PointerIcon />
+          <h3 className="heading-2">Our Partners</h3>
+          <p className="text-lg -tracking-tighter">
+            We are working with industry leading Companies over the crypto world
+            together to boost the process of our mission in decentralized web
+          </p>
+        </div>
+      </div>
     </section>
   );
 };

diff --git a/src/components/Home/HeroSection.tsx b/src/components/Home/HeroSection.tsx
@@ -2,21 +2,21 @@ import { PointerIcon } from "assets/icons";
 
 export default function HeroSection() {
   return (
-    <section className="flex flex-col lg:flex-row lg:items-end border-b container">
-      <div className="flex-[1.7]  lg:pb-16 pb-8 mt-12 lg:mt-0 space-y-2  lg:px-10">
+    <section className="flex flex-col lg:flex-row lg:items-end border-b container xl:min-h[856px]  lg:min-h-[616px]">
+      <div className="lg:border-r xl:border-r-0 flex-[1.7] lg:pt-[128px]  lg:pb-sp11 pb-sp8 mt-12 lg:mt-0 space-y-2  lg:px-10 h-full">
         <PointerIcon />
         <div className="space-y-6 lg:py-6">
-          <h1 className="lg:text-[86px] text-[46px] leading-[47px] md:text-[56px] md:leading-[55px]  lg:leading-[91px]">
+          <h1 className="lg:heading-1  md:heading-2 heading-3 ">
             Building the future of decentralized generation of WEB
           </h1>
-          <h6 className="text-lg pb-2">
+          <h6 className="text-lg -tracking-tighter pb-2">
             We are working for a more decentralized web and internet in future
             for everyone.
           </h6>
         </div>
       </div>
-      <div className="lg:pl-7 lg:border-l border-t lg:border-t-0 pb-16 flex-1 pt-8 lg:pt-[168px] space-y-12 flex flex-col items-center">
-        <h6 className="text-lg">
+      <div className="lg:pl-7  border-t lg:pt-[168px]  xl:border-l lg:border-t-0 pb-sp11 flex-1 pt-sp8  space-y-12 flex flex-col items-center">
+        <h6 className="text-lg -tracking-tighter">
           At Dezh Technologies, we are building tools, apps, services and infras
           that make decentralized web happens.
         </h6>

diff --git a/src/components/Home/JoinCommunity.tsx b/src/components/Home/JoinCommunity.tsx
@@ -8,10 +8,10 @@ export default function JoinCommunity() {
         <div className="flex flex-col lg:flex-row items-center gap-6 flex-1">
           <DiscordIcon />
           <div className="max-w-[750px] space-y-2">
-            <h3 className=" text-[2rem] font-extrabold leading-[53px]">
+            <h3 className=" title-1 font-extrabold ">
               Join our friendly community
             </h3>
-            <p className="text-lg leading-[25px]">
+            <p className="text-lg -tracking-tighter ">
               The latest news about our product, testing and discussion of
               updates. A quick and convenient exchange of information with
               colleagues.

diff --git a/src/index.css b/src/index.css
@@ -39,7 +39,6 @@ html.lenis body {
     --primary: #FF4800;
     --secondary: #1D1D1D;
     --background: #E2DDD6;
-    word-spacing: -2px;
     font-family: "Neue Machina", system-ui,
       sans-serif;
     color-scheme: light dark;
@@ -52,24 +51,86 @@ html.lenis body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    scroll-behavior: smooth;
 
+
+    /* spacing */
+
+    --sp0: 0;
+    --sp1: 0.25rem;
+    --sp2: 0.5rem;
+    --sp3: 10px;
+    --sp4: 12px;
+    --sp5: 16px;
+    --sp6: 20px;
+    --sp7: 24px;
+    --sp8: 2rem;
+    --s9: 40px;
+    --s10: 48px;
+    --s11: 64px;
+    --s12: 80px;
+    --sp13: 96px;
+    --sp14: 128px;
+    --sp15: 160px;
+    --sp16: 192px;
+    --sp17: 224px;
+    --sp18: 256px;
+
+  }
+
+
+  a {
+    @apply no-underline;
+  }
+}
+
+/* Typography */
+
+@layer base {
+  .heading-1 {
+    @apply text-[5.375rem] leading-[91px] -tracking-[2px]
+    /*  font-size: 86px */
+  }
+
+  .heading-2 {
+    @apply text-[3.5rem] leading-[53px] -tracking-wider
+    /*  font-size: 56px */
+  }
+
+  .heading-3 {
+    @apply text-[2.875rem] leading-[47px] -tracking-wider
+    /*  font-size: 46px */
+  }
+
+  .title-1 {
+    @apply text-[2rem] leading-[40px] -tracking-wider
+    /*  font-size: 32px */
+  }
+
+  .title-2 {
+    @apply text-[1.75rem] leading-[33px] -tracking-wider
+    /*  font-size: 28px */
+  }
+
+  .title-3 {
+    @apply text-[1.375rem] leading-[27px] -tracking-wider
+    /*  font-size: 22px */
+  }
+
+  .title-4 {
+    @apply text-[1.25rem] leading-[24px] -tracking-wider
+    /*  font-size: 20px */
   }
 
   h1 {
-    @apply text-2xl;
+    @apply heading-1;
   }
 
   h2 {
-    @apply text-xl;
+    @apply heading-2;
   }
 
   h3 {
-    @apply text-lg;
-  }
-
-  a {
-    @apply no-underline;
+    @apply heading-3;
   }
 }
 

diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -10,7 +10,7 @@ export function Footer() {
           <a draggable={false} href="/">
             <Logo className="text-secondary" />
           </a>
-          <h5 className="text-[22px] leading-[53px]">
+          <h5 className="title-3">
             Building the future of decentralized generation of WEB
           </h5>
         </div>

diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
@@ -20,14 +20,14 @@ export function Header() {
             <li key={key}>
               <button
                 onClick={() => handleClickScroll(link.link)}
-                className="text-xl"
+                className="title-4 transition-all duration-300  border-b border-transparent hover:border-secondary"
               >
                 {link.name}
               </button>
             </li>
           ))}
         </ul>
-        <Link className="text-xl" variant="primary" href="mailto:[email protected]">
+        <Link className="title-4" variant="primary" href="mailto:[email protected]">
           Contact us
         </Link>
       </nav>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,26 @@ export default {
   },
   theme: {
     extend: {
+        spacing: {
+          "sp1": "var(--sp1)",
+          "sp2": "var(--sp2)",
+          "sp3": "var(--sp3)",
+          "sp4": "var(--sp4)",
+          "sp5": "var(--sp5)",
+          "sp6": "var(--sp6)",
+          "sp7": "var(--sp7)",
+          "sp8": "var(--sp8)",
+          "sp9": "var(--s9)",
+          "sp10": "var(--s10)",
+          "sp11": "var(--s11)",
+          "sp12": "var(--s12)",
+          "sp13": "var(--sp13)",
+          "sp14": "var(--sp14)",
+          "sp15": "var(--sp15)",
+          "sp16": "var(--sp16)",
+          "sp17": "var(--sp17)",
+          "sp18": "var(--sp18)",
+        },
       colors: {
         primary: "var(--primary)",
         secondary: "var(--secondary)",
@@ -49,7 +69,7 @@ export default {
           },
           "@screen lg": {
             // minWidth: '1024px',
-            padding: "0 2rem",
+            padding: "0 1.5rem",
           },
           "@screen xl": {
             // minWidth: '1366px',