feat: slicing for all the sections in dashboard

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

src/components/Dashboard/Features/index.tsx

@@ -0,0 +1,118 @@
+import { FlexColumn } from '@Components/common/Layouts';
+
+export default function Features() {
+  return (
+    <section className="features naxatw-bg-landing-white naxatw-p-10 naxatw-text-landing-blue md:naxatw-px-0 md:naxatw-py-32">
+      <div className="naxatw-container !naxatw-max-w-full">
+        <div className="naxatw-grid naxatw-grid-cols-1 lg:naxatw-grid-cols-4">
+          <div className="naxatw-col-span-1">
+            <p className="naxatw-text-[40px] naxatw-font-medium naxatw-leading-[50px]">
+              Features of Drone Tasking Manager
+            </p>
+          </div>
+          <div className="naxatw-grid naxatw-grid-cols-1 naxatw-gap-10 sm:naxatw-grid-cols-2 lg:naxatw-col-span-3 lg:naxatw-grid-cols-3">
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-mt-6 naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue md:naxatw-mt-0">
+                  <span className="naxatw-text-base naxatw-text-white">1</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    User Management
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Simplifies the onboarding process, enhances security with
+                  role-based access, and facilitates efficient management of
+                  participant activities.
+                </p>
+              </FlexColumn>
+            </div>
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue">
+                  <span className="naxatw-text-base naxatw-text-white">2</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    Survey Projects Creation
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Streamlines project setup, allows for custom project
+                  specifications, and ensures all participants have clear
+                  guidelines and objectives.
+                </p>
+              </FlexColumn>
+            </div>
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue">
+                  <span className="naxatw-text-base naxatw-text-white">3</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    Data/Flight Plan Upload
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Ensures consistency and accuracy in flight plans, maximizes
+                  area coverage, and minimizes data gaps.
+                </p>
+              </FlexColumn>
+            </div>
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue">
+                  <span className="naxatw-text-base naxatw-text-white">4</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    Data/Flight Plan Upload
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Ensures consistency and accuracy in flight plans, maximizes
+                  area coverage, and minimizes data gaps.
+                </p>
+              </FlexColumn>
+            </div>
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue">
+                  <span className="naxatw-text-base naxatw-text-white">5</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    Notifications/Status Management
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Keeps all users informed and engaged, ensures timely responses
+                  to project needs, and enhances collaborative efforts.
+                </p>
+              </FlexColumn>
+            </div>
+            <div className="naxatw-col-span-1">
+              <FlexColumn gap={4}>
+                <FlexColumn className="naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-bg-landing-blue">
+                  <span className="naxatw-text-base naxatw-text-white">6</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px]">
+                    Data Visualization
+                  </p>
+                </div>
+                <p className="naxatw-text-justify naxatw-text-base naxatw-leading-6">
+                  Aids in better understanding and interpretation of the data,
+                  supports decision-making processes, and enhances the
+                  presentation of findings.
+                </p>
+              </FlexColumn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Dashboard/Footer/index.tsx

@@ -0,0 +1,56 @@
+import footerBackgroundImage from '@Assets/images/FooterBackground.png';
+import { Flex, FlexRow } from '@Components/common/Layouts';
+import Icon from '@Components/common/Icon';
+import Image from '@Components/RadixComponents/Image';
+import naxaLogo from '@Assets/images/Naxa-logo.png';
+import hotLogo from '@Assets/images/HOT-logo.png';
+import { Button } from '@Components/RadixComponents/Button';
+
+export default function Footer() {
+  return (
+    <footer
+      style={{
+        backgroundImage: `url(${footerBackgroundImage})`,
+        backgroundSize: 'cover',
+      }}
+      className="naxatw-h-fit naxatw-pb-6 naxatw-pt-24 naxatw-text-landing-white"
+    >
+      <div className="naxatw-container !naxatw-max-w-full">
+        <div className="naxatw-text-center">
+          <p className="naxatw-text-[70px] naxatw-leading-[80px]">Talk to Us</p>
+          <p className="naxatw-mt-10 naxatw-text-xl">
+            Experience heightened speed, improved stability,
+          </p>
+          <p className="naxatw-text-xl">and a complete suite of features.</p>
+        </div>
+        <Flex className="naxatw-mt-[72px] naxatw-items-center naxatw-justify-center">
+          <Button className="!naxatw-rounded-[50px] !naxatw-bg-[#03101c] naxatw-px-9 naxatw-py-8 naxatw-text-body-lg naxatw-tracking-wide">
+            <span className="naxatw-text-base naxatw-font-semibold">
+              Lets Talk
+            </span>
+            <Icon name="east" />
+          </Button>
+        </Flex>
+        <div className="naxatw-mt-24 naxatw-flex naxatw-w-full naxatw-flex-col naxatw-items-center naxatw-justify-between naxatw-gap-8 naxatw-border-b naxatw-border-t naxatw-border-landing-white naxatw-border-opacity-40 naxatw-py-8 md:naxatw-flex-row">
+          <div className="naxatw-text-center md:naxatw-text-start">
+            <span>Developed & Designed by</span>
+            <FlexRow className="naxatw-mt-3 naxatw-items-center" gap={10}>
+              <Image src={naxaLogo} />
+              <Image src={hotLogo} />
+            </FlexRow>
+          </div>
+          <div className="naxatw-flex naxatw-w-1/3 naxatw-flex-col naxatw-justify-between naxatw-gap-4 naxatw-text-center md:naxatw-flex-row">
+            <span className="naxatw-cursor-pointer">Impacts</span>
+            <span className="naxatw-cursor-pointer">Privacy Policy</span>
+            <span className="naxatw-cursor-pointer">Partners</span>
+            <span className="naxatw-cursor-pointer">FAQs</span>
+            <span className="naxatw-cursor-pointer">Cookies</span>
+          </div>
+        </div>
+        <p className="naxatw-mt-4 naxatw-text-center naxatw-text-base">
+          © Drone Arial Tasking Manager. All Rights Reserved 2024
+        </p>
+      </div>
+    </footer>
+  );
+}