diff --git a/src/frontend/index.html b/src/frontend/index.html index 6f42e26c..a6af3527 100644 --- a/src/frontend/index.html +++ b/src/frontend/index.html @@ -3,6 +3,10 @@ + diff --git a/src/frontend/src/assets/css/index.css b/src/frontend/src/assets/css/index.css index 93280f0b..45c2f10e 100644 --- a/src/frontend/src/assets/css/index.css +++ b/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; diff --git a/src/frontend/src/assets/images/LandingPage/CaseStudyImage.png b/src/frontend/src/assets/images/LandingPage/CaseStudyImage.png new file mode 100644 index 00000000..7baba6ba Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/CaseStudyImage.png differ diff --git a/src/frontend/src/assets/images/LandingPage/DTM-Logo.svg b/src/frontend/src/assets/images/LandingPage/DTM-Logo.svg new file mode 100644 index 00000000..73981ff3 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/DTM-Logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/DTM-logo-red.svg b/src/frontend/src/assets/images/LandingPage/DTM-logo-red.svg new file mode 100644 index 00000000..ab2f1d9d --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/DTM-logo-red.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/DTMLogo.svg b/src/frontend/src/assets/images/LandingPage/DTMLogo.svg new file mode 100644 index 00000000..d8333156 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/DTMLogo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/DroneBackgroundImage.png b/src/frontend/src/assets/images/LandingPage/DroneBackgroundImage.png new file mode 100644 index 00000000..4b3f9ecf Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/DroneBackgroundImage.png differ diff --git a/src/frontend/src/assets/images/LandingPage/DroneImage.png b/src/frontend/src/assets/images/LandingPage/DroneImage.png new file mode 100644 index 00000000..eecf022d Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/DroneImage.png differ diff --git a/src/frontend/src/assets/images/LandingPage/DroneTM-bg.png b/src/frontend/src/assets/images/LandingPage/DroneTM-bg.png new file mode 100644 index 00000000..e910b805 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/DroneTM-bg.png differ diff --git a/src/frontend/src/assets/images/LandingPage/FooterBackground.png b/src/frontend/src/assets/images/LandingPage/FooterBackground.png new file mode 100644 index 00000000..3615acb1 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/FooterBackground.png differ diff --git a/src/frontend/src/assets/images/LandingPage/ForestImage.png b/src/frontend/src/assets/images/LandingPage/ForestImage.png new file mode 100644 index 00000000..c642d580 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/ForestImage.png differ diff --git a/src/frontend/src/assets/images/LandingPage/HOT-logo.png b/src/frontend/src/assets/images/LandingPage/HOT-logo.png new file mode 100644 index 00000000..cb425b51 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/HOT-logo.png differ diff --git a/src/frontend/src/assets/images/LandingPage/MajorImpactImage.png b/src/frontend/src/assets/images/LandingPage/MajorImpactImage.png new file mode 100644 index 00000000..dd9d81b3 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/MajorImpactImage.png differ diff --git a/src/frontend/src/assets/images/LandingPage/Naxa-logo.png b/src/frontend/src/assets/images/LandingPage/Naxa-logo.png new file mode 100644 index 00000000..409a5f29 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/Naxa-logo.png differ diff --git a/src/frontend/src/assets/images/LandingPage/RockerIcon.svg b/src/frontend/src/assets/images/LandingPage/RockerIcon.svg new file mode 100644 index 00000000..b83a39fd --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/RockerIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/frontend/src/assets/images/LandingPage/TargetIcon.svg b/src/frontend/src/assets/images/LandingPage/TargetIcon.svg new file mode 100644 index 00000000..e3cbf328 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/TargetIcon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/frontend/src/assets/images/LandingPage/WorldbankLogo.png b/src/frontend/src/assets/images/LandingPage/WorldbankLogo.png new file mode 100644 index 00000000..240bc1c5 Binary files /dev/null and b/src/frontend/src/assets/images/LandingPage/WorldbankLogo.png differ diff --git a/src/frontend/src/assets/images/LandingPage/arrow_south.svg b/src/frontend/src/assets/images/LandingPage/arrow_south.svg new file mode 100644 index 00000000..b0563dea --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/arrow_south.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/frontend/src/assets/images/LandingPage/avatar-images.svg b/src/frontend/src/assets/images/LandingPage/avatar-images.svg new file mode 100644 index 00000000..e1ccdf29 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/avatar-images.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/drone-operator.svg b/src/frontend/src/assets/images/LandingPage/drone-operator.svg new file mode 100644 index 00000000..5ffc7074 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/drone-operator.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/dtm-logo-red.svg b/src/frontend/src/assets/images/LandingPage/dtm-logo-red.svg new file mode 100644 index 00000000..7d89e239 --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/dtm-logo-red.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/frontend/src/assets/images/LandingPage/project-creator.svg b/src/frontend/src/assets/images/LandingPage/project-creator.svg new file mode 100644 index 00000000..7c0ff19e --- /dev/null +++ b/src/frontend/src/assets/images/LandingPage/project-creator.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/frontend/src/components/LandingPage/AboutTM/index.tsx b/src/frontend/src/components/LandingPage/AboutTM/index.tsx new file mode 100644 index 00000000..62449601 --- /dev/null +++ b/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 ( +
+
+ + +

+ About Drone Tasking Manager (Drone TM) +

+

+ 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. +

+ + + + + + + {aboutData.map(data => ( + + +

+ {data.title} +

+

+ {data.description} +

+ + ))} + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/CaseStudies/index.tsx b/src/frontend/src/components/LandingPage/CaseStudies/index.tsx new file mode 100644 index 00000000..bd559b75 --- /dev/null +++ b/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 ( +
+
+ + + Case Studies + + + + + + + + {caseStudiesData.slice(0, itemsToShow).map(data => ( + +
+

+ {data.title} +

+

+ {data.description} +

+
+
+ +
+ + ))} + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/ClientsAndPartners/index.tsx b/src/frontend/src/components/LandingPage/ClientsAndPartners/index.tsx new file mode 100644 index 00000000..8e05d2a1 --- /dev/null +++ b/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 ( +
+
+
+ + Client & Partners + + + world bank logo + +
+
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/Features/index.tsx b/src/frontend/src/components/LandingPage/Features/index.tsx new file mode 100644 index 00000000..077827b6 --- /dev/null +++ b/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 ( +
+
+
+
+

+ Features of Drone Tasking Manager +

+
+ + {featuresData.map(data => ( + + + {data.id} + +
+

+ {data.title} +

+
+

+ {data.description} +

+ + ))} + +
+
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/Footer/index.tsx b/src/frontend/src/components/LandingPage/Footer/index.tsx new file mode 100644 index 00000000..eb5a488e --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/frontend/src/components/LandingPage/Home/index.tsx b/src/frontend/src/components/LandingPage/Home/index.tsx new file mode 100644 index 00000000..bcd40eee --- /dev/null +++ b/src/frontend/src/components/LandingPage/Home/index.tsx @@ -0,0 +1,99 @@ +import { useTypedDispatch } from '@Store/hooks'; +import { FlexColumn } from '@Components/common/Layouts'; +import Image from '@Components/RadixComponents/Image'; +import { Button } from '@Components/RadixComponents/Button'; +import { motion } from 'framer-motion'; +import droneTaskingManagerLogo from '@Assets/images/LandingPage/DTM-logo-red.svg'; +import droneBackgroundImage from '@Assets/images/LandingPage/DroneTM-bg.png'; +import arrowSouth from '@Assets/images/LandingPage/arrow_south.svg'; +import { setCommonState } from '@Store/actions/common'; + +export default function Home() { + const dispatch = useTypedDispatch(); + + const bounceTransition: { + y: { + repeat: number; + repeatType: 'reverse' | 'loop' | 'mirror'; + duration: number; + ease: string; + }; + } = { + y: { + repeat: Infinity, + repeatType: 'mirror', + duration: 0.8, + ease: 'easeOut', + }, + }; + + const container = { + visible: { + transition: { + staggerChildren: 0.025, + }, + }, + }; + + return ( +
+
+
+ + +
+ + +

+ Drone Tasking +

+

+ Manager (Drone TM) +

+

+ Together, WeMap - Open.Accurate. Accessible +

+ + {/*
+ + +
*/} + + + + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/MajorImpacts/index.tsx b/src/frontend/src/components/LandingPage/MajorImpacts/index.tsx new file mode 100644 index 00000000..78f4bf0a --- /dev/null +++ b/src/frontend/src/components/LandingPage/MajorImpacts/index.tsx @@ -0,0 +1,57 @@ +import { Grid } from '@Components/common/Layouts'; +import Image from '@Components/RadixComponents/Image'; +import { motion } from 'framer-motion'; +import Accordion from '@Components/common/Accordion'; +import majorImpactsImage from '@Assets/images/LandingPage/MajorImpactImage.png'; +import { accordionData } from '@Constants/landingPage'; +import { + containerAnimationVariant, + fadeUpVariant, +} from '@Constants/animations'; + +export default function MajorImpacts() { + return ( +
+
+ + {/* */} + + {/* */} + +

+ Anticipated Major Impacts +

+
+ {accordionData.map((data: Record) => ( + + + + ))} +
+ + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/Navbar/index.tsx b/src/frontend/src/components/LandingPage/Navbar/index.tsx new file mode 100644 index 00000000..b1595577 --- /dev/null +++ b/src/frontend/src/components/LandingPage/Navbar/index.tsx @@ -0,0 +1,21 @@ +import { FlexRow } from '@Components/common/Layouts'; + +export default function Navbar() { + return ( +
+ + +

About

+

FAQs

+

Documentations

+ + +
+ ); +} diff --git a/src/frontend/src/components/LandingPage/OpenSource/index.tsx b/src/frontend/src/components/LandingPage/OpenSource/index.tsx new file mode 100644 index 00000000..eb854134 --- /dev/null +++ b/src/frontend/src/components/LandingPage/OpenSource/index.tsx @@ -0,0 +1,38 @@ +import { FlexColumn } from '@Components/common/Layouts'; +import Image from '@Components/RadixComponents/Image'; +import { motion } from 'framer-motion'; +import forestImage from '@Assets/images/LandingPage/ForestImage.png'; + +export default function OpenSource() { + return ( +
+
+ +
+

+ Open Source +

+

+ Drone Tasking Manager +

+
+

+ An open-source drone tasking platform to coordinate aerial survey + activities for target project areas among multiple pilots, + incorporating tools and processes to ensure coordinated flight plans + for imagery acquisition, and a seamless pipeline for processing and + dissemination. +

+ + + + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/OurRationale/index.tsx b/src/frontend/src/components/LandingPage/OurRationale/index.tsx new file mode 100644 index 00000000..f9a1e8f5 --- /dev/null +++ b/src/frontend/src/components/LandingPage/OurRationale/index.tsx @@ -0,0 +1,52 @@ +import { FlexColumn } from '@Components/common/Layouts'; +import { motion } from 'framer-motion'; +import { ourRationaleData } from '@Constants/landingPage'; +import { + containerAnimationVariant, + fadeUpVariant, +} from '@Constants/animations'; + +export default function OurRationale() { + return ( +
+
+
+
+

+ Our Rationale +

+
+ + {ourRationaleData.map(data => ( + + + + {data.id} + + +
+

+ {data.title} +

+
+

+ {data.description} +

+ + ))} + +
+
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx b/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx new file mode 100644 index 00000000..c7b37a07 --- /dev/null +++ b/src/frontend/src/components/LandingPage/SignInOverlay/index.tsx @@ -0,0 +1,74 @@ +import { useTypedDispatch } from '@Store/hooks'; +import { useNavigate } from 'react-router-dom'; +import { FlexColumn, FlexRow } from '@Components/common/Layouts'; +import { Button } from '@Components/RadixComponents/Button'; +import Image from '@Components/RadixComponents/Image'; +import droneTMLogo from '@Assets/images/LandingPage/dtm-logo-red.svg'; +import projectCreator from '@Assets/images/LandingPage/project-creator.svg'; +import droneOperator from '@Assets/images/LandingPage/drone-operator.svg'; +import Icon from '@Components/common/Icon'; +import { setCommonState } from '@Store/actions/common'; +import { motion } from 'framer-motion'; +import { slideVariants } from '@Constants/animations'; + +export default function SignInOverlay() { + const dispatch = useTypedDispatch(); + const navigate = useNavigate(); + + return ( + + + + { + dispatch(setCommonState({ openSignInMenu: false })); + }} + /> + + + +
Project Creator
+ + + + +
Drone Operator
+ + + + + + ); +} diff --git a/src/frontend/src/components/LandingPage/UserAndRoles/index.tsx b/src/frontend/src/components/LandingPage/UserAndRoles/index.tsx new file mode 100644 index 00000000..a79b5cb4 --- /dev/null +++ b/src/frontend/src/components/LandingPage/UserAndRoles/index.tsx @@ -0,0 +1,87 @@ +import { useState, useEffect } from 'react'; +import { FlexRow } from '@Components/common/Layouts'; +// import Icon from '@Components/common/Icon'; +import { motion } from 'framer-motion'; +import { userAndRolesData } from '@Constants/landingPage'; +import { + containerAnimationVariant, + fadeUpVariant, +} from '@Constants/animations'; + +export default function UserAndRoles() { + const [itemsToShow, setItemsToShow] = useState(1); + + useEffect(() => { + function handleResize() { + if (window.innerWidth < 768) { + setItemsToShow(1); + } else if (window.innerWidth < 1024) { + setItemsToShow(2); + } else { + setItemsToShow(3); + } + } + + window.addEventListener('resize', handleResize); + handleResize(); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( +
+
+ + Drone TM: Users & Roles + + + {/* */} + + {userAndRolesData.slice(0, itemsToShow).map(singleItem => ( + +

+ {singleItem.title} +

+
    + {singleItem.listItems.map(item => ( +
  • {item.text}
    • + ))} +
+ + ))} + + {/* */} + +
+
+ ); +} diff --git a/src/frontend/src/components/LandingPage/index.tsx b/src/frontend/src/components/LandingPage/index.tsx new file mode 100644 index 00000000..0ef48aeb --- /dev/null +++ b/src/frontend/src/components/LandingPage/index.tsx @@ -0,0 +1,27 @@ +import Navbar from './Navbar'; +import Home from './Home'; +import AboutTM from './AboutTM'; +import OurRationale from './OurRationale'; +import OpenSource from './OpenSource'; +import Features from './Features'; +import UserAndRoles from './UserAndRoles'; +import MajorImpacts from './MajorImpacts'; +import CaseStudies from './CaseStudies'; +import ClientAndPartners from './ClientsAndPartners'; +import Footer from './Footer'; +import SignInOverlay from './SignInOverlay'; + +export { + Navbar, + Home, + AboutTM, + OurRationale, + OpenSource, + Features, + UserAndRoles, + MajorImpacts, + CaseStudies, + ClientAndPartners, + Footer, + SignInOverlay, +}; diff --git a/src/frontend/src/components/common/Accordion/index.tsx b/src/frontend/src/components/common/Accordion/index.tsx new file mode 100644 index 00000000..0ef57229 --- /dev/null +++ b/src/frontend/src/components/common/Accordion/index.tsx @@ -0,0 +1,38 @@ +import { useState } from 'react'; +import { FlexRow } from '../Layouts'; +import Icon from '../Icon'; + +interface IAccordionProps { + open: boolean; + title: string; + description: string; +} + +export default function Accordion({ + open = false, + title, + description, +}: IAccordionProps) { + const [isOpen, setIsOpen] = useState(open); + return ( +
+ +

+ {title} +

+ + + {isOpen && ( +

+ {description} +

+ )} +
+ ); +} diff --git a/src/frontend/src/constants/animations.ts b/src/frontend/src/constants/animations.ts new file mode 100644 index 00000000..31f47b03 --- /dev/null +++ b/src/frontend/src/constants/animations.ts @@ -0,0 +1,25 @@ +export const containerAnimationVariant = { + hidden: { opacity: 0, scale: 1 }, + visible: { + opacity: 1, + scale: 1, + transition: { + delayChildren: 0.3, + staggerChildren: 0.2, + }, + }, +}; + +export const fadeUpVariant = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + }, +}; + +export const slideVariants = { + hidden: { opacity: 0, y: -1000 }, + visible: { opacity: 1, y: 0 }, + exit: { opacity: 1, y: -1000 }, +}; diff --git a/src/frontend/src/constants/landingPage.tsx b/src/frontend/src/constants/landingPage.tsx new file mode 100644 index 00000000..5b68296d --- /dev/null +++ b/src/frontend/src/constants/landingPage.tsx @@ -0,0 +1,201 @@ +/* eslint-disable import/prefer-default-export */ +import rocketIcon from '@Assets/images/LandingPage/RockerIcon.svg'; +import targetIcon from '@Assets/images/LandingPage/TargetIcon.svg'; + +export const accordionData = [ + { + id: 1, + title: 'Enhanced Crisis Response', + description: + 'Significant savings in mapping and surveying costs for underprivileged areas.', + isOpen: true, + }, + { + id: 2, + title: 'Community Empowerment', + description: + "Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.", + isOpen: false, + }, + { + id: 3, + title: 'Cost Reduction', + description: + "Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.", + isOpen: false, + }, + { + id: 4, + title: 'Data Accessibility', + description: + "Yes, you can try us for free for 30 days. If you want, we'll provide you with a free, personalized 30-minute onboarding call to get you up and running as soon as possible.", + isOpen: false, + }, +]; + +export const userAndRolesData = [ + { + id: 1, + title: 'Project Managers', + listItems: [ + { + id: 1, + text: 'Create areas for drone mapping', + }, + { + id: 2, + text: 'Plan a flight for the desired imagery characteristics such as flying height, overlaps, angles, Ground Sampling Distance (GSD, essentially resolution), etc.', + }, + { + id: 3, + text: 'Publish Tasks for Drone Operators', + }, + { + id: 4, + text: 'View the progress and updates', + }, + { + id: 5, + text: 'Review the final output', + }, + ], + }, + { + id: 2, + title: 'Drone Operators', + listItems: [ + { + id: 1, + text: 'Register to participate in imagery acquisition', + }, + { + id: 2, + text: 'Select areas that they are interested in flying from the overall project area', + }, + { + id: 3, + text: 'Download flight plans appropriate to their hardware and capacity', + }, + { + id: 4, + text: 'Operate the drone by pushing a “Fly mission” button, causing the drone to cover the assigned area automatically', + }, + { + id: 5, + text: 'Upload the resulting images to a processing server', + }, + ], + }, + { + id: 3, + title: 'Data Users', + listItems: [ + { + id: 1, + text: 'Task areas for drone mapping', + }, + { + id: 2, + text: 'Define desired imagery characteristics such as Ground Sampling Distance (GSD, essentially resolution), overlap, angles, etc.', + }, + ], + }, +]; + +export const ourRationaleData = [ + { + id: 1, + title: 'Limited Access to High Resolution Aerial Datasets', + description: + 'In low-income and disaster-prone areas, access to near real-time satellite datasets is severely limited. High-resolution satellite imagery, when available, is often expensive and out-of-date. Additionally, full-scale aircraft mapping is not a viable option due to its high costs and operational complexity.', + }, + { + id: 2, + title: 'Limited Engagement Of Communitites', + description: + 'Traditional mapping solutions involve professional consultants with expensive equipment who with communities only briefly, which can lead to delays and lack of locally relevant data.', + }, + { + id: 3, + title: 'Commercial Proprietary Software to Consumer', + description: + 'Many existing drone operation tools are proprietary and not designed for large-scale collaborative efforts, which limits their usefulness for community-driven projects', + }, + { + id: 4, + title: 'Regular Compliance in Conflict Areas', + description: + 'The use of drones, especially in sensitive or conflict-prone areas, raises significant safety and regulatory concerns.', + }, +]; + +export const featuresData = [ + { + id: 1, + title: 'User Management', + description: + 'Simplifies the onboarding process, enhances security with role-based access, and facilitates efficient management of participant activities.', + }, + { + id: 2, + title: 'Survey Project Creation', + description: + 'Streamlines project setup, allows for custom project specifications, and ensures all participants clear guidelines and objectives.', + }, + { + id: 3, + title: 'Data/Flight Plan Upload', + description: + 'Ensures consistency and accuracy in flight plans, maximizes area coverage, and minimizes data gaps.', + }, + { + id: 4, + title: 'Photogrammetric Processing', + description: + 'Provides a seamless workflow from data capture to processing, quickly turning raw images into actionable insights.', + }, + { + id: 5, + title: 'Notifications/Status Management', + description: + ' Keeps all users informed and engaged, ensures timely responses to project needs, and enhances collaborative efforts.', + }, + { + id: 6, + title: 'Data Visualization', + description: + 'Aids in better understanding and interpretation of the data, supports decision-making processes, and enhances presentation of findings.', + }, +]; + +export const aboutData = [ + { + id: 1, + icon: rocketIcon, + title: 'Our Motivation', + description: + '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.', + }, + { + id: 2, + icon: targetIcon, + title: 'Our Vision', + description: + ' A user-friendly, inclusive application suite enabling anyone with access to a drone, even an inexpensive consumer or DIY drone, to contribute easily and effectively to a global free and open aerial imagery repository.', + }, +]; + +export const caseStudiesData = [ + { + id: 1, + title: 'Piloting drone tasking manager in the carribean', + description: + ' Simplifies the onboarding process, enhances security with role-based access, and facilitates efficient management of participant activities.', + }, + { + id: 2, + title: 'Piloting drone tasking manager in the carribean', + description: + ' Simplifies the onboarding process, enhances security with role-based access, and facilitates efficient management of participant activities.', + }, +]; diff --git a/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx b/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx index 72738505..f8da99c3 100644 --- a/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx +++ b/src/frontend/src/modules/user-auth-module/src/components/Authentication/Login/index.tsx @@ -11,7 +11,7 @@ import { Button } from '@Components/RadixComponents/Button'; import Icon from '@Components/common/Icon'; import { Flex, FlexRow } from '@Components/common/Layouts'; import Person from '@Assets/images/person.svg'; -import { useTypedDispatch } from '@Store/hooks'; +import { useTypedDispatch, useTypedSelector } from '@Store/hooks'; import { signInGoogle, signInUser } from '@Services/common'; import { setUserState } from '@UserModule/store/actions/user'; import googleIcon from '@Assets/images/google-icon.svg'; @@ -32,6 +32,7 @@ export default function Login() { const handleShow = () => { return setShowPassword(prev => !prev); }; + const signInAs = useTypedSelector(state => state.common.signInAs); const { mutate, isLoading } = useMutation({ mutationFn: signInUser, @@ -72,7 +73,7 @@ export default function Login() { " > -

Sign In

+

Sign In - {signInAs}

{/* google login button */}
state.common.openSignInMenu); + return ( +
+ + {openSignInMenu && } + + + + + + + + + +
+ ); +} diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js index 5b4dda89..1e861662 100644 --- a/src/frontend/tailwind.config.js +++ b/src/frontend/tailwind.config.js @@ -10,14 +10,26 @@ module.exports = { theme: { container: { center: true, - padding: '2rem', + padding: { + DEFAULT: '1.25rem', + sm: '1.25rem', + md: '2.125rem', + lg: '4.125rem', + xl: '8rem', + '2xl': '8rem', + }, screens: { - '2xl': '1400px', + sm: '640px', + md: '768px', + lg: '1024px', + xl: '1280px', + '2xl': '1440px', }, }, extend: { fontFamily: { primary: ['Barlow Condensed', 'sans-serif'], + secondary: ['Manrope', 'sans-serif'], }, height: { 'screen-nav': 'calc(100vh - 57px)', @@ -43,6 +55,12 @@ module.exports = { 800: '#484848', 900: '#212121', }, + landing: { + blue: '#1B66AF', + white: '#FBF8F3', + red: '#D73F3F', + grey: '#464646', + }, }, fontSize: {