feat(typography): Standardize font sizes across application

NoshonNetworks · Dec 29, 2024 · 9a0e066 · 9a0e066
1 parent 7a7b5bb
commit 9a0e066
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 87 deletions.
diff --git a/landing_page/src/app/components/Benefits.tsx b/landing_page/src/app/components/Benefits.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import P from "./P/P";
 import Image from "next/image";
+
 const Benefits = () => {
   const benefits = [
     {
@@ -40,14 +41,15 @@ const Benefits = () => {
       color: "white",
     },
   ];
+
   return (
     <div className="mb-10" id="experience">
       <div className="flex flex-col justify-center items-center gap-1">
-        <P classname="capitalize text-center  mt-10" size="h4">
+        <P classname="capitalize text-center mt-10 text-2xl font-semibold">
           Experience The Unique Benefits of Landver
         </P>
-        <P classname="w-[100%] md:w-[40%] text-center p-5">
-          LandVer offers secure, NFT-backed land ownership that’s easy to
+        <P classname="w-[100%] md:w-[40%] text-center p-5 text-base">
+          LandVer offers secure, NFT-backed land ownership that's easy to
           register, verify, and transfer on the blockchain. Trust in
           transparent, immutable records for seamless land management.
         </P>
@@ -70,8 +72,8 @@ const Benefits = () => {
                   height={30}
                   width={30}
                 />
-                <P size="h6">{benefit.header}</P>
-                <P classname="text-center leading-relaxed">
+                <P classname="text-lg font-medium">{benefit.header}</P>
+                <P classname="text-center leading-relaxed text-sm">
                   {benefit.description}
                 </P>
               </div>
@@ -83,4 +85,4 @@ const Benefits = () => {
   );
 };
 
-export default Benefits;
+export default Benefits;
diff --git a/landing_page/src/app/components/Button/Button.tsx b/landing_page/src/app/components/Button/Button.tsx
@@ -25,28 +25,28 @@ const Button: React.FC<ButtonProps> = ({
       case "gray":
         return "bg-[#828282]";
       default:
-        return "bg-[#6364d5]";
+        return "bg-[#6364d5]"; 
     }
   };
-
+  
   const getSizeStyles = () => {
     switch (size) {
       case "small":
-        return "px-4 py-1";
+        return "px-4 py-1 text-sm";
       case "medium":
-        return "px-6 py-2";
+        return "px-6 py-2 text-base";
       case "large":
-        return "px-8 py-3";
+        return "px-8 py-3 text-lg";
       case "full":
-        return "px-12 py-[0.65rem]"; // Full-width button
+        return "px-12 py-[0.65rem] text-base"; 
       default:
-        return "px-6 py-2";
+        return "px-6 py-2 text-base";
     }
   };
-
+  
   return (
     <button
-      className={`${getVariantStyles()} ${getSizeStyles()} ${classname} text-white rounded text-xs py-3 ${
+      className={`${getVariantStyles()} ${getSizeStyles()} ${classname} text-white font-bold rounded-md text-center ${
         disabled ? 'opacity-50 cursor-not-allowed' : ''
       }`}
       onClick={onClick}
@@ -57,4 +57,4 @@ const Button: React.FC<ButtonProps> = ({
   );
 };
 
-export default Button;
+export default Button;
diff --git a/landing_page/src/app/components/Footer.tsx b/landing_page/src/app/components/Footer.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { FaTelegram, FaGithub, FaTwitter } from "react-icons/fa";
 import Link from "next/link";
-const Footer = () => {
+
+const Footer: React.FC = () => {
   const links = [
     { name: "Home", href: "#" },
     { name: "Experience", href: "#experience" },
@@ -28,13 +29,13 @@ const Footer = () => {
       <div className="max-w-6xl mx-auto">
         <nav className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8 mb-6">
           {links.map((link) => (
-            <a
+            <Link
               key={link.name}
               href={link.href}
-              className="text-[#6e62e5] hover:text-gray-900 transition-colors"
+              className="text-[#6e62e5] hover:text-gray-900 transition-colors text-sm"
             >
               {link.name}
-            </a>
+            </Link>
           ))}
         </nav>
 
@@ -44,8 +45,7 @@ const Footer = () => {
               key={social.label}
               href={social.href}
               scroll={false}
-
-              className="hover:text-gray-900 transition-colors"
+              className="hover:text-gray-900 transition-colors text-sm"
               aria-label={social.label}
               target="_blank"
             >
@@ -63,4 +63,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default Footer;
diff --git a/landing_page/src/app/components/Hero.tsx b/landing_page/src/app/components/Hero.tsx
@@ -1,19 +1,34 @@
 import React from "react";
 import P from './P/P'
 import Link from "next/link";
+
 const Hero = () => {
   return (
     <div className="grid place-items-center gap-6 p-6">
       <div className="grid justify-center items-center place-items-center gap-4">
-        <P size="h4" classname="font-bold text-[#282828]">Own Land With Confidence</P>
-        <P size="h4" classname="font-bold text-[#282828]">Track, Verify, Transfer</P>
+        <P size="h4" classname="font-bold text-[#282828] text-2xl">
+          Own Land With Confidence
+        </P>
+        <P size="h4" classname="font-bold text-[#282828] text-2xl">
+          Track, Verify, Transfer
+        </P>
       </div>
       <div className="flex gap-4">
-        <Link href='/signin' className="px-12 py-[0.65rem] text-white rounded text-xs bg-[#6364d5]">Sign In</Link>
-        <Link href='/signup' className="bg-[#828282] px-12 py-[0.65rem] text-white rounded text-xs" >Sign Up</Link>
+        <Link 
+          href='/signin' 
+          className="px-12 py-[0.65rem] text-white rounded text-sm bg-[#6364d5]"
+        >
+          Sign In
+        </Link>
+        <Link 
+          href='/signup' 
+          className="bg-[#828282] px-12 py-[0.65rem] text-white rounded text-sm"
+        >
+          Sign Up
+        </Link>
       </div>
     </div>
   );
 };
 
-export default Hero;
+export default Hero;
diff --git a/landing_page/src/app/components/NavBar.tsx b/landing_page/src/app/components/NavBar.tsx
@@ -16,28 +16,45 @@ const NavBar = () => {
       <div className="flex justify-between items-center p-4 md:p-8">
         <div className="flex items-center gap-2">
           <Image src="/images/logo.svg" alt="logo" height={100} width={100} />
-          <nav className="md:flex items-center gap-6 text-sm hidden">
-            <Link href="https://demo.landver.net/" className="hover:text-gray-600 transition-colors text-xs" target="_blank">
+          <nav className="md:flex items-center gap-6 hidden">
+            <Link
+              href="https://demo.landver.net/"
+              className="hover:text-gray-600 transition-colors text-sm"
+              target="_blank"
+            >
               Register Land
             </Link>
-            <Link href="https://demo.landver.net/" className="hover:text-gray-600 transition-colors text-xs"target="_blank">
+            <Link
+              href="https://demo.landver.net/"
+              className="hover:text-gray-600 transition-colors text-sm"
+              target="_blank"
+            >
               Inspect Land
             </Link>
-            <Link href="https://demo.landver.net" className="hover:text-gray-600 transition-colors text-xs" target="_blank">
+            <Link
+              href="https://demo.landver.net"
+              className="hover:text-gray-600 transition-colors text-sm"
+              target="_blank"
+            >
               Buy Land
             </Link>
           </nav>
         </div>
 
         <div className="hidden md:flex items-center gap-8">
-          <div className="flex items-center gap-4 text-sm">
+          <div className="flex items-center gap-4">
             <Link
               href="/signin"
-              className="text-[#6364d5] hover:text-[#4e4fb8] transition-colors text-xs"
+              className="text-[#6364d5] hover:text-[#4e4fb8] transition-colors text-sm"
             >
               Login
             </Link>
-            <Link className="text-white rounded text-xs py-3 px-6 bg-[#6364d5]" href='/signup'>Sign Up</Link>
+            <Link 
+              className="text-white rounded text-sm py-3 px-6 bg-[#6364d5]" 
+              href='/signup'
+            >
+              Sign Up
+            </Link>
           </div>
         </div>
 
@@ -57,37 +74,42 @@ const NavBar = () => {
             <Link
               href="https://demo.landver.net"
               target="_blank"
-              className="p-2 hover:bg-gray-50 rounded-lg transition-colors"
+              className="p-2 hover:bg-gray-50 rounded-lg transition-colors text-sm"
               onClick={() => setIsMenuOpen(false)}
             >
               Register Land
             </Link>
             <Link
               href="https://demo.landver.net"
               target="_blank"
-              className="p-2 hover:bg-gray-50 rounded-lg transition-colors"
+              className="p-2 hover:bg-gray-50 rounded-lg transition-colors text-sm"
               onClick={() => setIsMenuOpen(false)}
             >
               Inspect Land
             </Link>
             <Link
               href="https://demo.landver.net"
               target="_blank"
-              className="p-2 hover:bg-gray-50 rounded-lg transition-colors"
+              className="p-2 hover:bg-gray-50 rounded-lg transition-colors text-sm"
               onClick={() => setIsMenuOpen(false)}
             >
               Buy Land
             </Link>
             <div className="flex flex-col gap-2 pt-2 border-t">
               <Link
                 href="/signin"
-                className="p-2 text-[#6364d5] hover:bg-gray-50 rounded-lg transition-colors"
+                className="p-2 text-[#6364d5] hover:bg-gray-50 rounded-lg transition-colors text-sm"
                 onClick={() => setIsMenuOpen(false)}
               >
                 Login
               </Link>
               <div className="px-2">
-                <Link className="text-white rounded text-xs py-3 px-6 bg-[#6364d5]" href='/signup'>Sign Up</Link>
+                <Link 
+                  className="text-white rounded text-sm py-3 px-6 bg-[#6364d5]" 
+                  href='/signup'
+                >
+                  Sign Up
+                </Link>
               </div>
             </div>
           </nav>
@@ -97,4 +119,4 @@ const NavBar = () => {
   );
 };
 
-export default NavBar;
+export default NavBar;
diff --git a/landing_page/src/app/components/NewsLetterCTA.tsx b/landing_page/src/app/components/NewsLetterCTA.tsx
@@ -4,18 +4,21 @@ import P from "./P/P";
 
 const NewsLetterCTA = () => {
   return (
-    <section className="flex justify-center items-center gap-3 relative py-6 px-4 sm:px-8 bg-[#eae8fb] " id="contact" >
+    <section 
+      className="flex justify-center items-center gap-3 relative py-6 px-4 sm:px-8 bg-[#eae8fb]" 
+      id="contact"
+    >
       <div className="w-full max-w-[500px] relative flex justify-center items-center gap-3">
-        <P classname="text-[#6e62e5] text-center text-[16px] font-bold mb-3">
+        <P classname="text-[#6e62e5] text-center text-base text-[30px] font-bold ">
           Newsletter
         </P>
 
         <div className="flex items-center justify-between bg-white border-2 rounded-full p-2 w-full">
           <input
             type="text"
-            name=""
-            id=""
-            className="bg-white border-none p-4 rounded-full w-full focus:outline-none text-sm sm:text-base"
+            name="email"
+            id="email"
+            className="bg-white border-none p-4 rounded-full w-full focus:outline-none text-sm"
             placeholder="Enter your email"
           />
           <button className="bg-[#6e62e5] rounded-full p-3 ml-2 flex items-center justify-center">
@@ -32,4 +35,4 @@ const NewsLetterCTA = () => {
   );
 };
 
-export default NewsLetterCTA;
+export default NewsLetterCTA;
diff --git a/landing_page/src/app/components/RegisterCTA.tsx b/landing_page/src/app/components/RegisterCTA.tsx
@@ -2,9 +2,9 @@
 import React, { useState } from "react";
 import Image from "next/image";
 import P from "./P/P";
-// import Button from "./Button/Button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
+
 const RegisterCTA = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
 
@@ -39,16 +39,16 @@ const RegisterCTA = () => {
       <div className="bg-[#e9f3f1] rounded-lg border p-4 md:p-6 w-full max-w-6xl">
         <div className="flex flex-col md:flex-row gap-8">
           <div className="flex flex-col md:w-1/3">
-            <P size="h6" classname="capitalize font-bold mb-3">
+            <P size="h6" classname="capitalize font-semibold mb-3 text-xl">
               Register Your land with Ease
             </P>
-            <P classname="leading-[1.7] mb-6">
+            <P classname="leading-[1.7] mb-6 text-base">
               LandVer simplifies land registration. Enter essential details
               -like location, area and use - and submit securely on our
               blockchain based platform
             </P>
             <Link
-              className="w-fit md:w-fit bg-[#6364d5] text-white px-6 py-2 rounded text-xs"
+              className="w-fit md:w-fit bg-[#6364d5] text-white px-6 py-2 rounded text-sm"
               href="https://demo.landver.net"
               target="_blank"
             >
@@ -67,7 +67,7 @@ const RegisterCTA = () => {
                     className="object-cover rounded-lg"
                   />
                 </div>
-                <P classname="mt-2 text-center">{image.description}</P>
+                <P classname="mt-2 text-center text-sm">{image.description}</P>
               </div>
             ))}
           </div>
@@ -80,7 +80,7 @@ const RegisterCTA = () => {
                 fill
                 className="object-cover rounded-lg"
               />
-              <P classname="absolute bottom-4 left-0 right-0 text-center bg-black/50 text-white py-2">
+              <P classname="absolute bottom-4 left-0 right-0 text-center bg-black/50 text-white py-2 text-sm">
                 {imagesArray[currentSlide].description}
               </P>
             </div>
@@ -123,4 +123,4 @@ const RegisterCTA = () => {
   );
 };
 
-export default RegisterCTA;
+export default RegisterCTA;