feat: add components for the landing page

src/frontend/src/assets/css/index.css

@@ -12,6 +12,10 @@ body {
   font-family: 'Barlow Condensed', sans-serif;
 }
 
+.landing-page p {
+  font-family: 'Manrope', sans-serif !important;
+}
+
 @keyframes slideInFromLeft {
   from {
     opacity: 0;

src/frontend/src/components/LandingPage/AboutTM/index.tsx

@@ -0,0 +1,67 @@
+import { Grid } from '@Components/common/Layouts';
+import Image from '@Components/RadixComponents/Image';
+import { motion } from 'framer-motion';
+import droneImage from '@Assets/images/LandingPage/DroneImage.png';
+import { aboutData } from '@Constants/landingPage';
+import {
+  containerAnimationVariant,
+  fadeUpVariant,
+} from '@Constants/animations';
+
+export default function AboutTM() {
+  return (
+    <section className="about-section naxatw-overflow-hidden 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 sm:naxatw-grid-cols-2 md:naxatw-gap-20 md:naxatw-pb-40 md:naxatw-pt-52">
+          <motion.div
+            initial={{ translateX: -200, opacity: 0 }}
+            whileInView={{ translateX: 0, opacity: 1 }}
+            transition={{ duration: 0.7 }}
+            viewport={{ once: true }}
+            className="naxatw-col-span-1 naxatw-text-start"
+          >
+            <p className="naxatw-text-[2rem] naxatw-leading-[2.66rem] naxatw-text-landing-red md:naxatw-text-[3.75rem] md:naxatw-leading-[77px]">
+              About Drone Tasking Manager (Drone TM)
+            </p>
+            <p className="naxatw-mt-5 naxatw-text-base naxatw-leading-[24px] naxatw-text-landing-grey">
+              Drone TM is an integrated digital public good solution that aims
+              to harness the power of the crowd to help generate high-resolution
+              aerial maps of any location. Its innovative platform allows drone
+              pilots in developing countries to access job opportunities and
+              contribute to creating high-resolution datasets for disaster
+              response and community resilience.
+            </p>
+          </motion.div>
+          <motion.div
+            initial={{ translateX: 200, opacity: 0 }}
+            whileInView={{ translateX: 0, opacity: 1 }}
+            transition={{ duration: 0.7 }}
+            viewport={{ once: true }}
+            className="naxatw-col-span-1 naxatw-hidden naxatw-justify-self-center md:naxatw-block md:naxatw-justify-self-end"
+          >
+            <Image src={droneImage} />
+          </motion.div>
+        </Grid>
+        <motion.div
+          variants={containerAnimationVariant}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="naxatw-grid naxatw-grid-cols-1 naxatw-gap-10 naxatw-rounded-[30px] naxatw-bg-[#F7EEE0] naxatw-px-10 naxatw-py-10 md:naxatw-grid-cols-2 md:naxatw-gap-40 md:naxatw-py-32 lg:naxatw-px-28"
+        >
+          {aboutData.map(data => (
+            <motion.div key={data.id} variants={fadeUpVariant}>
+              <Image src={data.icon} />
+              <p className="naxatw-mb-6 naxatw-mt-4 naxatw-text-[1.5rem] naxatw-text-landing-red md:naxatw-text-[3.125rem]">
+                {data.title}
+              </p>
+              <p className="naxatw-text-[1rem] naxatw-leading-[1.625rem] naxatw-text-landing-grey md:naxatw-text-xl md:naxatw-leading-9">
+                {data.description}
+              </p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

src/frontend/src/components/LandingPage/CaseStudies/index.tsx

@@ -0,0 +1,88 @@
+import { FlexRow } from '@Components/common/Layouts';
+import Icon from '@Components/common/Icon';
+import Image from '@Components/RadixComponents/Image';
+import { motion } from 'framer-motion';
+import {
+  containerAnimationVariant,
+  fadeUpVariant,
+} from '@Constants/animations';
+import { caseStudiesData } from '@Constants/landingPage';
+import caseStudyImage from '@Assets/images/LandingPage/CaseStudyImage.png';
+import { useEffect, useState } from 'react';
+
+export default function CaseStudies() {
+  const [itemsToShow, setItemsToShow] = useState(1);
+
+  useEffect(() => {
+    function handleResize() {
+      if (window.innerWidth < 768) {
+        setItemsToShow(1);
+      } else {
+        setItemsToShow(2);
+      }
+    }
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+  return (
+    <section className="case-studies naxatw-bg-[#F9F3EA]">
+      <div className="naxatw-container naxatw-max-w-full naxatw-py-6 md:naxatw-py-24">
+        <FlexRow className="naxatw-items-center naxatw-justify-between">
+          <motion.p
+            variants={fadeUpVariant}
+            initial="hidden"
+            whileInView="visible"
+            className="naxatw-text-[2rem] naxatw-leading-[60px] naxatw-text-landing-red md:naxatw-text-[3.75rem]"
+          >
+            Case Studies
+          </motion.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>
+        <motion.div
+          variants={containerAnimationVariant}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="naxatw-mt-12 naxatw-grid naxatw-grid-cols-1 naxatw-gap-5 md:naxatw-grid-cols-2"
+        >
+          {caseStudiesData.slice(0, itemsToShow).map(data => (
+            <motion.div
+              key={data.id}
+              variants={fadeUpVariant}
+              className="naxatw-col-span-1 naxatw-grid naxatw-min-h-[300px] naxatw-grid-cols-1 naxatw-gap-8 naxatw-rounded-xl naxatw-bg-white naxatw-px-8 naxatw-py-10 naxatw-duration-100 hover:naxatw-shadow-lg md:naxatw-grid-cols-2"
+            >
+              <div className="naxatw-col-span-1">
+                <p className="naxatw-text-[24px] naxatw-font-medium naxatw-leading-[30px]">
+                  {data.title}
+                </p>
+                <p className="naxatw-mt-4 naxatw-text-[16px] naxatw-font-medium naxatw-leading-[24px]">
+                  {data.description}
+                </p>
+              </div>
+              <div className="naxatw-col-span-1 naxatw-justify-self-center">
+                <Image src={caseStudyImage} className="naxatw-rounded-lg" />
+              </div>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

src/frontend/src/components/LandingPage/ClientsAndPartners/index.tsx

@@ -0,0 +1,34 @@
+import Image from '@Components/RadixComponents/Image';
+import { motion } from 'framer-motion';
+import worldBankLogo from '@Assets/images/LandingPage/WorldbankLogo.png';
+import { fadeUpVariant } from '@Constants/animations';
+
+export default function ClientAndPartners() {
+  return (
+    <section className="client-and-partners naxatw-overflow-hidden naxatw-bg-landing-white">
+      <div className="naxatw-container !naxatw-max-w-full">
+        <div className="naxatw-flex naxatw-flex-col naxatw-items-center naxatw-gap-14 naxatw-py-20">
+          <motion.p
+            variants={fadeUpVariant}
+            initial="hidden"
+            whileInView="visible"
+            transition={{ duration: 0.7 }}
+            viewport={{ once: true }}
+            className="naxatw-text-[35px] naxatw-leading-[5rem] naxatw-text-landing-red"
+          >
+            Client & Partners
+          </motion.p>
+          <motion.div
+            variants={fadeUpVariant}
+            initial="hidden"
+            whileInView="visible"
+            transition={{ duration: 0.7 }}
+            viewport={{ once: true }}
+          >
+            <Image src={worldBankLogo} alt="world bank logo" />
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/frontend/src/components/LandingPage/Features/index.tsx

@@ -0,0 +1,65 @@
+import { FlexColumn } from '@Components/common/Layouts';
+import { motion } from 'framer-motion';
+import { featuresData } from '@Constants/landingPage';
+
+export default function Features() {
+  const container = {
+    hidden: { opacity: 1, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        delayChildren: 0.3,
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const item = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+    },
+  };
+  return (
+    <section className="features naxatw-bg-landing-white naxatw-p-10 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-[3.125rem] naxatw-text-landing-red">
+              Features of Drone Tasking Manager
+            </p>
+          </div>
+          <motion.div
+            variants={container}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            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"
+          >
+            {featuresData.map(data => (
+              <motion.div
+                key={data.id}
+                variants={item}
+                className="naxatw-col-span-1 naxatw-flex naxatw-flex-col naxatw-gap-4"
+              >
+                <FlexColumn className="naxatw-mt-6 naxatw-h-8 naxatw-w-8 naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border naxatw-border-landing-red naxatw-text-landing-red md:naxatw-mt-0">
+                  <span className="naxatw-text-base">{data.id}</span>
+                </FlexColumn>
+                <div>
+                  <p className="naxatw-text-[30px] naxatw-leading-[40px] naxatw-text-landing-grey">
+                    {data.title}
+                  </p>
+                </div>
+                <p className="naxatw-text-base naxatw-leading-6 naxatw-text-landing-grey">
+                  {data.description}
+                </p>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/frontend/src/components/LandingPage/Footer/index.tsx

@@ -0,0 +1,66 @@
+import { Flex, FlexRow } from '@Components/common/Layouts';
+import Icon from '@Components/common/Icon';
+import Image from '@Components/RadixComponents/Image';
+import naxaLogo from '@Assets/images/LandingPage/Naxa-logo.png';
+import hotLogo from '@Assets/images/LandingPage/HOT-logo.png';
+import { Button } from '@Components/RadixComponents/Button';
+import { motion } from 'framer-motion';
+import { fadeUpVariant } from '@Constants/animations';
+
+export default function Footer() {
+  return (
+    <footer className="naxatw-h-fit naxatw-pb-6 naxatw-text-landing-white">
+      <div className="!naxatw-max-w-full">
+        <div className="naxatw-bg-landing-red naxatw-px-5 naxatw-py-24 md:naxatw-px-9 lg:naxatw-px-32">
+          <motion.div
+            variants={fadeUpVariant}
+            initial="hidden"
+            whileInView="visible"
+            transition={{ duration: 0.7 }}
+            className="naxatw-text-center"
+          >
+            <p className="naxatw-text-[2rem] naxatw-leading-[2.66rem] md:naxatw-text-[4.375rem] md:naxatw-leading-[5rem]">
+              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>
+          </motion.div>
+          <Flex className="naxatw-mt-[72px] naxatw-items-center naxatw-justify-center">
+            <Button className="!naxatw-rounded-[3.125rem] !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>
+        <motion.div
+          variants={fadeUpVariant}
+          initial="hidden"
+          whileInView="visible"
+          className="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-px-5 naxatw-py-8 naxatw-text-landing-grey md:naxatw-flex-row  md:naxatw-px-9 lg:naxatw-px-32"
+        >
+          <div className="naxatw-text-center md:naxatw-text-start">
+            <span className="naxatw-font-medium">Developed & Designed by</span>
+            <FlexRow className="naxatw-mt-3 naxatw-items-center" gap={10}>
+              <Image src={hotLogo} />
+              <Image src={naxaLogo} />
+            </FlexRow>
+          </div>
+          <div className="naxatw-flex naxatw-w-1/3 naxatw-flex-col naxatw-justify-between naxatw-gap-4 naxatw-text-center naxatw-font-medium 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>
+        </motion.div>
+        <p className="naxatw-mt-2 naxatw-text-center naxatw-text-base naxatw-text-landing-grey">
+          © Drone Arial Tasking Manager. All Rights Reserved 2024
+        </p>
+      </div>
+    </footer>
+  );
+}