style: change background, change word space and change font-size of l…

…i… (#22)
dezh-tech · Mar 31, 2024 · 2f31588 · 2f31588
1 parent d4a4c37
commit 2f31588
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 118 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+  <link rel="icon" type="image/svg+xml" href="/fav-icon.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Dezh</title>
 </head>

diff --git a/public/Noisy-Background.svg b/public/Noisy-Background.svg
diff --git a/public/fav-icon.svg b/public/fav-icon.svg
diff --git a/src/assets/icons/Pointer.tsx b/src/assets/icons/Pointer.tsx
diff --git a/src/components/Home/Companies.tsx b/src/components/Home/Companies.tsx
@@ -3,27 +3,29 @@ import companiesData from "../../../data/companies.json";
 
 const Companies = () => {
   return (
-    <div className="bg-secondary text-white space-y-[56px] xl:py-[175px] lg:py-24 py-16 px-6 xl:px-[130px]">
+    <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]"
+    >
       <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
+            together to boost the process of our mission in decentralized web
           </p>
         </div>
       </div>
-      <div className="flex flex-wrap  gap-16 justify-center lg:justify-between">
+      <div className="flex flex-wrap  gap-16 justify-center">
         {companiesData.map((company) => (
-          <a href={company.website} key={company.name}>
+          <a target="_blank" href={company.website} key={company.name}>
             <span className="sr-only">{company.name}</span>
             <img src={company.logo} alt={company.name} />
           </a>
         ))}
       </div>
-    </div>
+    </section>
   );
 };
 

diff --git a/src/components/Home/JoinCommunity.tsx b/src/components/Home/JoinCommunity.tsx
@@ -3,7 +3,7 @@ import Link from "components/ui/Link";
 
 export default function JoinCommunity() {
   return (
-    <div className="lg:py-[94px] py-8 container">
+    <section id="community" className="lg:py-[94px] py-8 container">
       <div className=" flex  flex-col lg:flex-row  text-center lg:text-start gap-[58px]  items-center px-10 py-[82px] border">
         <div className="flex flex-col lg:flex-row items-center gap-6 flex-1">
           <DiscordIcon />
@@ -26,6 +26,6 @@ export default function JoinCommunity() {
           Join Dezh on Discord
         </Link>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/index.css b/src/index.css
@@ -6,19 +6,28 @@
 
 @layer base {
   * {
+    scroll-behavior: smooth;
     @apply border-secondary;
   }
 
+  .noisy-bg {
+    background-image: url("/public/Noisy-Background.svg");
+
+  }
+
   :root {
     --primary: #FF4800;
     --secondary: #1D1D1D;
     --background: #E2DDD6;
-
+    word-spacing: -2px;
     font-family: "Neue Machina", system-ui,
       sans-serif;
     color-scheme: light dark;
     color: var(--secondary);
     background-color: var(--background);
+    background-image: url("/public/Noisy-Background.svg");
+    background-size: cover;
+    background-position: center;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;

diff --git a/src/layout/Footer.tsx b/src/layout/Footer.tsx
@@ -2,6 +2,7 @@ import { Logo, MessageIcon } from "assets/icons";
 import SocialMediaLinks from "components/SocialLinks";
 
 export function Footer() {
+  const year = new Date().getFullYear();
   return (
     <footer className="container py-[56px] border-t space-y-10">
       <section className="flex flex-col lg:flex-row lg:justify-between items-center gap-y-12 ">
@@ -20,9 +21,8 @@ export function Footer() {
           <MessageIcon />
           <a href="mailto:[email protected]">[email protected]</a>
         </div>
-        <span>© 2024 Dezh.tech, All Rights Reserved</span>
+        <span>© {year} Dezh.tech, All Rights Reserved</span>
       </section>
     </footer>
   );
-
 }
diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx
@@ -13,11 +13,13 @@ export function Header() {
         <ul className="list-disc gap-9 md:flex hidden">
           {links.map((link, key) => (
             <li key={key}>
-              <Link href={link.link}>{link.name}</Link>
+              <Link className="text-xl" href={link.link}>
+                {link.name}
+              </Link>
             </li>
           ))}
         </ul>
-        <Link variant="primary" href="#contact">
+        <Link className="text-xl" variant="primary" href="mailto:[email protected]">
           Contact us
         </Link>
       </nav>

diff --git a/src/layout/links.ts b/src/layout/links.ts
@@ -5,15 +5,11 @@ type LinkT = {
 
 export const links: LinkT[] = [
   {
-    name: "Our Project",
-    link: "#our-project",
+    name: "Our Partners",
+    link: "#our-Partners",
   },
   {
-    name: "Services",
-    link: "#services",
-  },
-  {
-    name: "About Us",
-    link: "#about",
+    name: "Community",
+    link: "#community",
   },
 ];