Our Sponsors
+
+ );
+};
+
+export default FeedbackSection;
diff --git a/client/src/components/landingPage/Footer.tsx b/client/src/components/landingPage/Footer.tsx
new file mode 100644
index 000000000..c52e5987c
--- /dev/null
+++ b/client/src/components/landingPage/Footer.tsx
@@ -0,0 +1,27 @@
+import DevSocLogo from '../../assets/devsoc_white.svg';
+
+const Footer = () => {
+ return (
+
+
+ Interested in Notangles?
++ If you're a CSE student with a keen interest in Notangles and looking to get involved, keep an eye out for our + recruitment announcements on DevSoc's socials. Otherwise, you can also contribute by suggesting cool new + features, reporting any bugs, or even making a pull request on the Notangles repo. +
+
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/client/src/components/landingPage/HeroSection/HeroSection.tsx b/client/src/components/landingPage/HeroSection/HeroSection.tsx
new file mode 100644
index 000000000..33b53afed
--- /dev/null
+++ b/client/src/components/landingPage/HeroSection/HeroSection.tsx
@@ -0,0 +1,54 @@
+import { NavigateNext } from '@mui/icons-material';
+
+import notangles from '../../../assets/notangles_1.png';
+import { FlipWords } from '../flip-words';
+
+const handleStartClick = () => {
+ localStorage.setItem('visited', 'true');
+ window.location.href = '/';
+};
+
+const HeroSection = () => {
+ const words = ['plan', 'create', 'organise', 'optimise', 'design'];
+
+ return (
+
+
+
+ 
+
+ © 2024 — UNSW Software Development Society
+
+
+
+ DevSoc is the UNSW Software Development Society. We do not represent the School, Faculty, or University.
+ This website seeks to be a centralised platform for students looking for employment opportunities, but its
+ information has not been officially endorsed by the University, Faculty, School, or the Computer Science and
+ Engineering Society. You should confirm with the employer that any information received through this website
+ is correct.
+
+ Notangles was made with by CSE students for CSE students.
+
+
+ );
+};
+
+export default HeroSection;
diff --git a/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx b/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx
new file mode 100644
index 000000000..5063bc5fe
--- /dev/null
+++ b/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx
@@ -0,0 +1,71 @@
+import blobImage from '../../../assets/blobImage.svg';
+import calendarIcon from '../../../assets/calendarIcon.png';
+import dragIcon from '../../../assets/dragIcon.png';
+import peopleIcon from '../../../assets/peopleIcon.png';
+
+interface FeatureBlockProps {
+ bgCol: string;
+ textCol: string;
+ lineCol: string;
+ title: string;
+ desc: string;
+ icon: string;
+}
+
+const FeatureBlock: React.FC
+
+
+
+
+
+
+
+ Intuitively
+
+ the perfect UNSW timetable.
+
+ Drag and drop your university classes
and events to prepare for a term.
+
+ 
+
+
+
+);
+
+const FeaturesSection = () => {
+ const features = [
+ {
+ bgCol: 'bg-[#B0C0DE]',
+ textCol: 'text-[#5373B8]',
+ lineCol: 'bg-[#5373B8]',
+ title: "Drag N' Drop",
+ desc: 'Drag and drop functionality to make planning an intuitive and easy process',
+ icon: dragIcon,
+ },
+ {
+ bgCol: 'bg-[#70C49C]',
+ textCol: 'text-[#53B887]',
+ lineCol: 'bg-[#3F916A]',
+ title: 'Add Friends',
+ desc: 'Easily coordinate your schedules with friends to plan and attend classes together',
+ icon: peopleIcon,
+ },
+ {
+ bgCol: 'bg-[#A96F92]',
+ textCol: 'text-[#B75391]',
+ lineCol: 'bg-[#964274]',
+ title: 'Plan Ahead',
+ desc: 'Plan in advance to secure your preferred classes and avoid conflicts',
+ icon: calendarIcon,
+ },
+ ];
+ return (
+
+ 
+
+ {title}
+ +{desc}
+
+ {/* Background blob image */}
+ 
+
+ {/* Feature Content */}
+
+ );
+};
+
+export default FeaturesSection;
diff --git a/client/src/components/landingPage/LandingPage.tsx b/client/src/components/landingPage/LandingPage.tsx
new file mode 100644
index 000000000..f1f3abaef
--- /dev/null
+++ b/client/src/components/landingPage/LandingPage.tsx
@@ -0,0 +1,37 @@
+import notangles from '../../assets/notangles_1.png';
+import FeedbackSection from './FeedbackSection';
+import Footer from './Footer';
+import HeroSection from './HeroSection/HeroSection';
+import FeaturesSection from './KeyFeaturesSection/FeaturesSection';
+import ScrollingFeaturesSection from './ScrollingFeaturesSection';
+import SponsorsSection from './SponsorsSection';
+
+const LandingPage = () => {
+ return (
+
+
+ Introducing our Features
+
+ {features.map((feature, index) => (
+
+
+
+
+
+ );
+};
+
+export default LandingPage;
diff --git a/client/src/components/landingPage/ScrollingFeaturesSection.tsx b/client/src/components/landingPage/ScrollingFeaturesSection.tsx
new file mode 100644
index 000000000..a5108a1fd
--- /dev/null
+++ b/client/src/components/landingPage/ScrollingFeaturesSection.tsx
@@ -0,0 +1,68 @@
+import AutoTimetable from '../../assets/AutoTimetable.gif';
+import PlanAhead from '../../assets/PlanAhead.gif';
+import SelectCourse from '../../assets/SelectCourses.gif';
+
+interface FeatureItemProps {
+ number: string;
+ title: string;
+ description: string;
+ gif: string;
+}
+
+const FeatureItem: React.FC
+
+
+ Notangles
+
+
+
+
+
+
+
+
+
+
+);
+
+const ScrollingFeaturesSection = () => {
+ const features = [
+ {
+ number: '01',
+ title: 'Course Selector',
+ description:
+ 'Search and select your desired course and get a general overview of each class, their times and locations, all before the registrations start!',
+ gif: SelectCourse,
+ },
+ {
+ number: '02',
+ title: 'Plan Ahead',
+ description:
+ 'Add any course classes or custom events to your calendar, effectively scheduling all your uni commitments!',
+ gif: PlanAhead,
+ },
+ {
+ number: '03',
+ title: 'Auto Timetabling',
+ description: 'Struggling to make your ideal timetable? Put in your preferences and we’ll generate one for you!',
+ gif: AutoTimetable,
+ },
+ ];
+
+ return (
+
+
+
+
+ {number}
+
+
+ {title}
+
+
+ {description}
+
+
+
+ 
+
+
+
+ );
+};
+
+export default ScrollingFeaturesSection;
diff --git a/client/src/components/landingPage/SponsorsSection.tsx b/client/src/components/landingPage/SponsorsSection.tsx
new file mode 100644
index 000000000..0847975ef
--- /dev/null
+++ b/client/src/components/landingPage/SponsorsSection.tsx
@@ -0,0 +1,26 @@
+import janeStreet from '../../assets/sponsors/jane_street_black.svg';
+import macquarie from '../../assets/sponsors/macquarie_logo_black.svg';
+import tiktok from '../../assets/sponsors/tiktok_logo_black.svg';
+
+const SponsorsSection = () => {
+ return (
+
+ {features.map((feature, index) => (
+
+
+
+ );
+};
+
+export default SponsorsSection;
diff --git a/client/src/components/landingPage/flip-words.tsx b/client/src/components/landingPage/flip-words.tsx
new file mode 100644
index 000000000..b35a3d726
--- /dev/null
+++ b/client/src/components/landingPage/flip-words.tsx
@@ -0,0 +1,81 @@
+'use client';
+import { AnimatePresence,motion } from 'framer-motion';
+import { useCallback, useEffect, useState } from 'react';
+
+import { cn } from '../../lib/utils';
+
+export const FlipWords = ({
+ words,
+ duration = 3000,
+ className,
+}: {
+ words: string[];
+ duration?: number;
+ className?: string;
+}) => {
+ const [currentWord, setCurrentWord] = useState(words[0]);
+ const [isAnimating, setIsAnimating] = useStateBrought to you by
+
+
+ -
+
-
+
+
+ -
+
+
+ -
+
+
+