landing page attached to the dashboard

prince-63 · Sep 16, 2024 · 741f64d · 741f64d
1 parent c2152a8
commit 741f64d
Show file tree

Hide file tree

Showing 22 changed files with 632 additions and 393 deletions.
diff --git a/dashboard/postcss.config.js b/dashboard/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
-};
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/dashboard/src/assets/images/Illustration.png b/dashboard/src/assets/images/Illustration.png
diff --git a/dashboard/src/assets/images/Illustration3.png b/dashboard/src/assets/images/Illustration3.png
diff --git a/dashboard/src/assets/images/app-install.png b/dashboard/src/assets/images/app-install.png
diff --git a/dashboard/src/assets/images/attendance.png b/dashboard/src/assets/images/attendance.png
diff --git a/...board/src/assets/images/Illustration2.png → dashboard/src/assets/images/security.png b/...board/src/assets/images/Illustration2.png → dashboard/src/assets/images/security.png
diff --git a/dashboard/src/components/data-display/card-display.tsx b/dashboard/src/components/data-display/card-display.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface CardDisplayProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  iconColor: string;
+}
+
+const CardDisplay: React.FC<CardDisplayProps> = ({
+  icon,
+  title,
+  description,
+  iconColor,
+}) => {
+  return (
+    <div className="w-[400px] bg-white text-gray-800 p-8 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 dark:bg-gray-800 dark:text-gray-200 h-[300px] flex flex-col justify-between">
+      <div className={`text-4xl mb-4 ${iconColor}`}>{icon}</div>
+      <h3 className="text-2xl font-semibold mb-4">{title}</h3>
+      <p className="flex-grow">{description}</p>
+    </div>
+  );
+};
+
+export default CardDisplay;
diff --git a/dashboard/src/components/data-display/section-header.tsx b/dashboard/src/components/data-display/section-header.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface SectionHeaderProps {
+  title: string;
+  description: string;
+}
+
+const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  description,
+}) => {
+  return (
+    <div className="text-center mb-12">
+      <h2 className="text-3xl sm:text-4xl font-bold text-center mb-5 sm:mb-5 dark:text-white">
+        {title}
+      </h2>
+      <p className="text-lg max-w-3xl mx-auto dark:text-white">{description}</p>
+    </div>
+  );
+};
+
+export default SectionHeader;
diff --git a/dashboard/src/components/general/button.tsx b/dashboard/src/components/general/button.tsx
@@ -17,7 +17,7 @@ const Button: React.FC<ButtonProps> = ({
     <button
       type={type}
       onClick={onClick}
-      className={`p-2 rounded-sm transition duration-200 ease-in-out ${className}`}
+      className={`p-2 rounded-md transition duration-200 ease-in-out ${className}`}
     >
       {children}
     </button>

diff --git a/dashboard/src/components/layout/footer.tsx b/dashboard/src/components/layout/footer.tsx
@@ -1,137 +1,179 @@
 import {
   FaGooglePlay,
-  FaAppStoreIos,
   FaFacebook,
   FaDiscord,
   FaTwitter,
+  FaLinkedin,
+  FaInstagram,
 } from 'react-icons/fa';
 import Logo from '../../assets/fab-icons/mstile-70x70.png';
+import Typography from '../general/typography';
+import Link from '../navigation/link';
 
 const Footer = () => {
   return (
-    <footer className="bg-white dark:bg-black">
+    <footer className="bg-white dark:bg-gray-100 text-gray-800 dark:text-gray-200 border-t-2 shadow-lg">
       <div className="container mx-auto p-4 py-6 lg:py-8">
         <div className="md:flex md:justify-between">
           <div className="mb-6 md:mb-0">
-            <a href="/" className="flex gap-4 items-center">
-              <img
-                src={Logo}
-                alt="GeoTrackr"
-                className="w-10 h-10"
-              />
-              <span className="self-center text-2xl font-semibold whitespace-nowrap text-white">
-                GeoTrackr
-              </span>
-            </a>
-
-            <div className="mt-4">
+            <Link href="/" className="flex gap-1 items-center">
+              <img src={Logo} alt="GeoTrackr" className="w-10 h-10" />
+              <Typography
+                variant="h4"
+                className="text-grey-800 dark:text-white"
+              >
+                Geotrackr
+              </Typography>
+            </Link>
+            <div className="mt-6">
               <div className="flex gap-4">
-                <a
+                <Link
                   href="#"
-                  className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-md hover:bg-green-700"
+                  className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-black rounded-md transition duration-300 dark:text-black dark:bg-white"
+                  externalLink
                 >
                   <FaGooglePlay className="mr-2 text-2xl" />
-                  Download for Android
-                </a>
-                <a
-                  href="#"
-                  className="flex items-center justify-center px-4 py-2 text-sm font-medium text-green-600 bg-green-100 rounded-md hover:bg-green-200"
-                >
-                  <FaAppStoreIos className="mr-2 text-2xl" />
-                  Download for iOS
-                </a>
+                  Download Our Android App
+                </Link>
               </div>
             </div>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
             <div>
-              <h2 className="mb-6 text-sm font-semibold text-black dark:text-white">
+              <Typography
+                variant="body2"
+                className="text-grey-800 dark:text-white font-semibold mb-5"
+              >
                 Resources
-              </h2>
-              <ul className="text-green-600 dark:text-green-400 font-medium">
+              </Typography>
+              <ul className="text-gray-600 dark:text-gray-400 font-medium">
                 <li className="mb-4">
-                  <a href="/docs" className="hover:underline">
+                  <Link href="/docs" className="hover:underline">
                     Docs
-                  </a>
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/blog" className="hover:underline">
+                    Blog
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/support" className="hover:underline">
+                    Support
+                  </Link>
+                </li>
+                <li>
+                  <Link href="/faq" className="hover:underline">
+                    FAQ
+                  </Link>
                 </li>
               </ul>
             </div>
             <div>
-              <h2 className="mb-6 text-sm font-semibold text-black dark:text-white">
-                Follow us
-              </h2>
-              <ul className="text-green-600 dark:text-green-400 font-medium">
+              <Typography
+                variant="body2"
+                className="text-grey-800 dark:text-white font-semibold mb-5"
+              >
+                Company
+              </Typography>
+              <ul className="text-gray-600 dark:text-gray-400 font-medium">
                 <li className="mb-4">
-                  <a
-                    href="https://github.com/prince-63/id-card"
-                    className="hover:underline"
-                  >
-                    Github
-                  </a>
+                  <Link href="/about" className="hover:underline">
+                    About Us
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/careers" className="hover:underline">
+                    Careers
+                  </Link>
+                </li>
+                <li className="mb-4">
+                  <Link href="/contact" className="hover:underline">
+                    Contact Us
+                  </Link>
                 </li>
                 <li>
-                  <a
-                    href="https://twitter.com/prince_63"
-                    className="hover:underline"
-                  >
-                    Twitter
-                  </a>
+                  <Link href="/press" className="hover:underline">
+                    Press
+                  </Link>
                 </li>
               </ul>
             </div>
             <div>
-              <h2 className="mb-6 text-sm font-semibold text-black dark:text-white">
+              <Typography
+                variant="body2"
+                className="text-grey-800 dark:text-white font-semibold mb-5"
+              >
                 Legal
-              </h2>
-              <ul className="text-green-600 dark:text-green-400 font-medium">
+              </Typography>
+              <ul className="text-gray-600 dark:text-gray-400 font-medium">
                 <li className="mb-4">
-                  <a href="#" className="hover:underline">
+                  <Link href="/privacy" className="hover:underline">
                     Privacy Policy
-                  </a>
+                  </Link>
                 </li>
                 <li>
-                  <a href="#" className="hover:underline">
+                  <Link href="/terms" className="hover:underline">
                     Terms & Conditions
-                  </a>
+                  </Link>
                 </li>
               </ul>
             </div>
           </div>
         </div>
-        <hr className="my-6 border-black sm:mx-auto dark:border-white lg:my-8" />
+        <hr className="my-6 border-gray-300 dark:border-gray-700 sm:mx-auto lg:my-8" />
         <div className="sm:flex sm:items-center sm:justify-between">
-          <span className="text-sm text-black dark:text-white sm:text-center">
+          <span className="text-sm sm:text-center text-grey-800 dark:text-white">
             © 2024{' '}
-            <a
-              href="https://quantum-qr-website.vercel.app/"
+            <Link
+              href="https://geotrackr.tech"
               className="hover:underline"
             >
               GeoTrackr
-            </a>
+            </Link>
             . All Rights Reserved.
           </span>
-          <div className="flex mt-4 sm:justify-center sm:mt-0">
-            <a
+          <div className="flex mt-4 sm:justify-center sm:mt-0 space-x-6">
+            <Link
               href="#"
-              className="text-green-600 hover:text-green-400 dark:text-green-400 dark:hover:text-green-600"
+              className="text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600 transition duration-300"
+              externalLink
             >
-              <FaFacebook className="w-4 h-4" />
+              <FaFacebook className="w-5 h-5" />
               <span className="sr-only">Facebook page</span>
-            </a>
-            <a
+            </Link>
+            <Link
               href="#"
-              className="text-green-600 hover:text-green-400 dark:text-green-400 dark:hover:text-green-600 ms-5"
+              className="text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600 transition duration-300"
+              externalLink
             >
-              <FaDiscord className="w-4 h-4" />
+              <FaDiscord className="w-5 h-5" />
               <span className="sr-only">Discord community</span>
-            </a>
-            <a
+            </Link>
+            <Link
               href="#"
-              className="text-green-600 hover:text-green-400 dark:text-green-400 dark:hover:text-green-600 ms-5"
+              className="text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600 transition duration-300"
+              externalLink
             >
-              <FaTwitter className="w-4 h-4" />
+              <FaTwitter className="w-5 h-5" />
               <span className="sr-only">Twitter page</span>
-            </a>
+            </Link>
+            <Link
+              href="#"
+              className="text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600 transition duration-300"
+              externalLink
+            >
+              <FaLinkedin className="w-5 h-5" />
+              <span className="sr-only">LinkedIn page</span>
+            </Link>
+            <Link
+              href="#"
+              className="text-gray-600 hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600 transition duration-300"
+              externalLink
+            >
+              <FaInstagram className="w-5 h-5" />
+              <span className="sr-only">Instagram page</span>
+            </Link>
           </div>
         </div>
       </div>

diff --git a/dashboard/src/components/layout/header.tsx b/dashboard/src/components/layout/header.tsx
@@ -34,7 +34,7 @@ const Header = () => {
   return (
     <header
       className={mergeClasses(
-        'sticky top-0 z-30 w-full border-b border-transparent bg-gray max-md:border-gray-100',
+        'sticky top-0 z-30 w-full border-b border-transparent bg-gray-100  max-md:border-gray-100',
         scrolled ? 'bg-gray/20 backdrop-blur-xl md:border-gray-100' : ''
       )}
     >