Merge pull request #1 from naxa-developers/feat/landing-page

Feat/landing page
hotosm · May 30, 2024 · 162cd03 · 162cd03
2 parents 88b5bb7 + 7913b19
commit 162cd03
Show file tree

Hide file tree

Showing 36 changed files with 901 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <!-- Man Rope Font  -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400&display=swap">
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
     <meta
       name="viewport"
@@ -16,7 +18,7 @@
     href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Symbols+Outlined"
     rel="stylesheet"
   />
-    <title>React Starterkit V3</title>
+    <title>DTM - Drone Tasking Manager</title>
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "date-fns": "^2.30.0",
     "dom-to-code": "^1.5.4",
     "dotenv": "^16.0.3",
+    "framer-motion": "^11.2.9",
     "geojson": "^0.5.0",
     "html2canvas": "^1.4.1",
     "lucide-react": "^0.260.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -36,6 +36,7 @@ export default function App() {
     '/sign-up',
     '/forgot-password',
     '/public-page',
+    '/',
   ];
 
   const hideSideBar = routesWithoutSidebar.some(url => pathname.includes(url));

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
@@ -14,5 +14,5 @@
 
 html,
 body {
-  font-family: 'Product Sans', sans-serif;
-}
+  font-family: 'Manrope', sans-serif;
+}
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .naxatw-text {
-  @apply naxatw-font-primary naxatw-tracking-normal;
+  @apply naxatw-font-manrope naxatw-tracking-normal;
 }
 
 @layer base {

diff --git a/src/assets/images/CaseStudyImage.png b/src/assets/images/CaseStudyImage.png
diff --git a/src/assets/images/DTM-Logo.svg b/src/assets/images/DTM-Logo.svg
diff --git a/src/assets/images/DTMLogo.svg b/src/assets/images/DTMLogo.svg
diff --git a/src/assets/images/DroneBackgroundImage.png b/src/assets/images/DroneBackgroundImage.png
diff --git a/src/assets/images/DroneImage.png b/src/assets/images/DroneImage.png
diff --git a/src/assets/images/FooterBackground.png b/src/assets/images/FooterBackground.png
diff --git a/src/assets/images/ForestImage.png b/src/assets/images/ForestImage.png
diff --git a/src/assets/images/HOT-logo.png b/src/assets/images/HOT-logo.png
diff --git a/src/assets/images/MajorImpactImage.png b/src/assets/images/MajorImpactImage.png
diff --git a/src/assets/images/Naxa-logo.png b/src/assets/images/Naxa-logo.png
diff --git a/src/assets/images/RockerIcon.svg b/src/assets/images/RockerIcon.svg
diff --git a/src/assets/images/TargetIcon.svg b/src/assets/images/TargetIcon.svg
diff --git a/src/assets/images/WorldbankLogo.png b/src/assets/images/WorldbankLogo.png
diff --git a/src/components/Dashboard/AboutTM/index.tsx b/src/components/Dashboard/AboutTM/index.tsx
@@ -0,0 +1,57 @@
+import { Grid } from '@Components/common/Layouts';
+import Image from '@Components/RadixComponents/Image';
+import droneImage from '@Assets/images/DroneImage.png';
+import rocketIcon from '@Assets/images/RockerIcon.svg';
+import targetIcon from '@Assets/images/TargetIcon.svg';
+
+export default function AboutTM() {
+  return (
+    <section className="about-section naxatw-bg-landing-white">
+      <div className="naxatw-container !naxatw-max-w-full">
+        <Grid className="naxatw-grid-cols-1 naxatw-items-center naxatw-gap-10 naxatw-py-10 naxatw-text-landing-blue md:naxatw-gap-20 md:naxatw-pb-40 md:naxatw-pt-52 lg:naxatw-grid-cols-2">
+          <div className="naxatw-col-span-1 naxatw-text-center lg:naxatw-text-start">
+            <p className="naxatw-text-[3.5rem] naxatw-leading-[70px] md:naxatw-text-[3.75rem] md:naxatw-leading-[77px]">
+              About Drone Tasking Manger
+            </p>
+            <p className="naxatw-text-[3.75rem] naxatw-leading-[77px]">(TM)</p>
+            <p className="naxatw-mt-5 naxatw-text-base naxatw-leading-[24px]">
+              Drone TM is an integrated open source digital public good solution
+              that aims to harness the power of the crowd to help generate
+              high-resolution aerial maps to improve resilience of the disaster
+              prone communities across the world.
+            </p>
+          </div>
+          <div className="naxatw-col-span-1 naxatw-justify-self-center md:naxatw-justify-self-end">
+            <Image src={droneImage} />
+          </div>
+        </Grid>
+        <Grid className="naxatw-gap-10 naxatw-rounded-[30px] naxatw-bg-[#F7EEE0] naxatw-px-10 naxatw-py-10 naxatw-text-landing-blue md:naxatw-gap-40 md:naxatw-py-32 lg:naxatw-px-28">
+          <div>
+            <Image src={rocketIcon} />
+            <p className="naxatw-mb-6 naxatw-mt-4 naxatw-text-[50px]">
+              Our Motivation
+            </p>
+            <p className="naxatw-text-justify naxatw-text-xl naxatw-leading-9">
+              Drones belonging to and operated by communities are more effective
+              because they are in place and can respond immediately,
+              responsibly, and take into account the needs of the community as
+              they see them.
+            </p>
+          </div>
+          <div>
+            <Image src={targetIcon} />
+            <p className="naxatw-mb-6 naxatw-mt-4 naxatw-text-[50px]">
+              Our Vision
+            </p>
+            <p className="naxatw-text-justify naxatw-text-xl naxatw-leading-9">
+              Drones belonging to and operated by communities are more effective
+              because they are in place and can respond immediately,
+              responsibly, and take into account the needs of the community as
+              they see them.
+            </p>
+          </div>
+        </Grid>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Dashboard/CaseStudies/index.tsx b/src/components/Dashboard/CaseStudies/index.tsx
@@ -0,0 +1,72 @@
+import { FlexRow, Grid } from '@Components/common/Layouts';
+import Icon from '@Components/common/Icon';
+import Image from '@Components/RadixComponents/Image';
+import caseStudyImage from '@Assets/images/CaseStudyImage.png';
+
+export default function CaseStudies() {
+  return (
+    <section className="case-studies naxatw-bg-[#F9F3EA]">
+      <div className="naxatw-container naxatw-max-w-full naxatw-py-6 naxatw-text-landing-blue md:naxatw-py-24">
+        <FlexRow className="naxatw-items-center naxatw-justify-between">
+          <p className="naxatw-text-[3.25rem] naxatw-leading-[60px] md:naxatw-text-[3.75rem]">
+            Case Studies
+          </p>
+          <FlexRow gap={3}>
+            <button
+              type="button"
+              className="naxatw-flex naxatw-h-12 naxatw-w-12 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border naxatw-border-landing-blue naxatw-bg-white hover:naxatw-animate-loader"
+              onClick={() => {}}
+            >
+              <Icon name="west" />
+            </button>
+            <button
+              type="button"
+              className="naxatw-flex naxatw-h-12 naxatw-w-12 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border naxatw-border-landing-blue naxatw-bg-white hover:naxatw-animate-loader"
+              onClick={() => {}}
+            >
+              <Icon name="east" />
+            </button>
+          </FlexRow>
+        </FlexRow>
+        <Grid cols={2} gap={5} className="naxatw-mt-12">
+          <Grid
+            gap={8}
+            className="naxatw-col-span-1 naxatw-min-h-[300px] naxatw-rounded-xl naxatw-bg-white naxatw-px-8 naxatw-py-10 naxatw-duration-100 hover:naxatw-shadow-lg"
+          >
+            <div className="naxatw-col-span-1">
+              <p className="naxatw-text-[24px] naxatw-font-medium naxatw-leading-[30px]">
+                Piloting drone tasking manager in the carribean
+              </p>
+              <p className="naxatw-mt-4 naxatw-text-[16px] naxatw-font-medium naxatw-leading-[24px]">
+                Simplifies the onboarding process, enhances security with
+                role-based access, and facilitates efficient management of
+                participant activities.
+              </p>
+            </div>
+            <div className="naxatw-col-span-1 naxatw-justify-self-center">
+              <Image src={caseStudyImage} className="naxatw-rounded-lg" />
+            </div>
+          </Grid>
+          <Grid
+            gap={8}
+            className="naxatw-col-span-1 naxatw-min-h-[300px] naxatw-rounded-xl naxatw-bg-white naxatw-px-8 naxatw-py-10 naxatw-duration-100 hover:naxatw-shadow-lg"
+          >
+            <div className="naxatw-col-span-1">
+              <p className="naxatw-text-[24px] naxatw-font-medium naxatw-leading-[30px]">
+                Piloting drone tasking manager in the carribean
+              </p>
+              <p className="naxatw-mt-4 naxatw-text-[16px] naxatw-font-medium naxatw-leading-[24px]">
+                Simplifies the onboarding process, enhances security with
+                role-based access, and facilitates efficient management of
+                participant activities.
+              </p>
+            </div>
+            <div className="naxatw-col-span-1 naxatw-justify-self-center">
+              <Image src={caseStudyImage} className="naxatw-rounded-lg" />
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Dashboard/ClientsAndPartners/index.tsx b/src/components/Dashboard/ClientsAndPartners/index.tsx
@@ -0,0 +1,18 @@
+import { FlexColumn } from '@Components/common/Layouts';
+import Image from '@Components/RadixComponents/Image';
+import worldBankLogo from '@Assets/images/WorldbankLogo.png';
+
+export default function ClientAndPartners() {
+  return (
+    <section className="client-and-partners naxatw-bg-landing-white ">
+      <div className="naxatw-container !naxatw-max-w-full">
+        <FlexColumn gap={15} className="naxatw-items-center naxatw-py-20">
+          <p className="naxatw-text-[35px] naxatw-leading-[80px] naxatw-text-[#4C8FAD]">
+            Client & Partners
+          </p>
+          <Image src={worldBankLogo} alt="world bank logo" />
+        </FlexColumn>
+      </div>
+    </section>
+  );
+}