53 |
54 | Find out more at devsoc.app/get-involved 55 |
-
46 | {/* Default Theme Colors (1-4) */}
47 |
65 |
71 |
© UNSW Software Development Society 2025
14 |
18 |
31 | );
32 | };
33 |
34 | export default FeedbackSection;
35 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/Footer.tsx:
--------------------------------------------------------------------------------
1 | import DevSocLogo from '../../assets/devsoc_white.svg';
2 |
3 | const Footer = () => {
4 | return (
5 |
19 |
30 | Interested in Notangles?
20 |21 | If you're a CSE student with a keen interest in Notangles and looking to get involved, keep an eye out for our 22 | recruitment announcements on DevSoc's socials. Otherwise, you can also contribute by suggesting cool new 23 | features, reporting any bugs, or even making a pull request on the Notangles repo. 24 |
25 |
26 |
29 |
6 |
24 | );
25 | };
26 |
27 | export default Footer;
28 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/HeroSection/HeroSection.tsx:
--------------------------------------------------------------------------------
1 | import { NavigateNext } from '@mui/icons-material';
2 |
3 | import notangles from '../../../assets/notangles_1.png';
4 | import { FlipWords } from '../flip-words';
5 |
6 | const handleStartClick = () => {
7 | localStorage.setItem('visited', 'true');
8 | window.location.href = '/';
9 | };
10 |
11 | const HeroSection = () => {
12 | const words = ['plan', 'create', 'organise', 'optimise', 'design'];
13 |
14 | return (
15 |
7 |
23 |
8 | 
9 |
11 | © 2025 — UNSW Software Development Society
10 |
12 |
22 |
13 | DevSoc is the UNSW Software Development Society. We do not represent the School, Faculty, or University.
14 | This website seeks to be a centralised platform for students looking for employment opportunities, but its
15 | information has not been officially endorsed by the University, Faculty, School, or the Computer Science and
16 | Engineering Society. You should confirm with the employer that any information received through this website
17 | is correct.
18 |
19 | Notangles was made with by CSE students for CSE students.
20 |
16 |
51 | );
52 | };
53 |
54 | export default HeroSection;
55 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/KeyFeaturesSection/FeaturesSection.tsx:
--------------------------------------------------------------------------------
1 | import blobImage from '../../../assets/blobImage.svg';
2 | import calendarIcon from '../../../assets/calendarIcon.png';
3 | import dragIcon from '../../../assets/dragIcon.png';
4 | import peopleIcon from '../../../assets/peopleIcon.png';
5 |
6 | interface FeatureBlockProps {
7 | bgCol: string;
8 | textCol: string;
9 | lineCol: string;
10 | title: string;
11 | desc: string;
12 | icon: string;
13 | }
14 |
15 | const FeatureBlock: React.FC
17 |
50 |
18 |
25 |
49 |
26 |
42 |
27 | Intuitively
28 |
29 | the perfect UNSW timetable.
30 |
32 | Drag and drop your university classes
and events to prepare for a term.
33 |
43 | 
47 |
48 |
17 |
24 | );
25 |
26 | const FeaturesSection = () => {
27 | const features = [
28 | {
29 | bgCol: 'bg-[#B0C0DE]',
30 | textCol: 'text-[#5373B8]',
31 | lineCol: 'bg-[#5373B8]',
32 | title: "Drag N' Drop",
33 | desc: 'Drag and drop functionality to make planning an intuitive and easy process',
34 | icon: dragIcon,
35 | },
36 | {
37 | bgCol: 'bg-[#70C49C]',
38 | textCol: 'text-[#53B887]',
39 | lineCol: 'bg-[#3F916A]',
40 | title: 'Add Friends',
41 | desc: 'Easily coordinate your schedules with friends to plan and attend classes together',
42 | icon: peopleIcon,
43 | },
44 | {
45 | bgCol: 'bg-[#A96F92]',
46 | textCol: 'text-[#B75391]',
47 | lineCol: 'bg-[#964274]',
48 | title: 'Plan Ahead',
49 | desc: 'Plan in advance to secure your preferred classes and avoid conflicts',
50 | icon: calendarIcon,
51 | },
52 | ];
53 | return (
54 |
18 | 
19 |
20 | {title}
21 | 22 |{desc}
23 |
55 | {/* Background blob image */}
56 | 
57 |
58 | {/* Feature Content */}
59 |
68 | );
69 | };
70 |
71 | export default FeaturesSection;
72 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/LandingPage.tsx:
--------------------------------------------------------------------------------
1 | import notangles from '../../assets/notangles_1.png';
2 | import FeedbackSection from './FeedbackSection';
3 | import Footer from './Footer';
4 | import HeroSection from './HeroSection/HeroSection';
5 | import FeaturesSection from './KeyFeaturesSection/FeaturesSection';
6 | import ScrollingFeaturesSection from './ScrollingFeaturesSection';
7 | import SponsorsSection from './SponsorsSection';
8 |
9 | const LandingPage = () => {
10 | return (
11 |
60 |
67 | Introducing our Features
61 |
62 | {features.map((feature, index) => (
63 |
66 |
12 |
13 |
18 |
34 | );
35 | };
36 |
37 | export default LandingPage;
38 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/ScrollingFeaturesSection.tsx:
--------------------------------------------------------------------------------
1 | import AutoTimetable from '../../assets/AutoTimetable.gif';
2 | import PlanAhead from '../../assets/PlanAhead.gif';
3 | import SelectCourse from '../../assets/SelectCourses.gif';
4 |
5 | interface FeatureItemProps {
6 | number: string;
7 | title: string;
8 | description: string;
9 | gif: string;
10 | }
11 |
12 | const FeatureItem: React.FC
14 |
15 |
17 | Notangles
16 |
19 |
21 |
22 |
27 |
23 |
26 |
29 |
33 |
14 |
31 | );
32 |
33 | const ScrollingFeaturesSection = () => {
34 | const features = [
35 | {
36 | number: '01',
37 | title: 'Course Selector',
38 | description:
39 | 'Search and select your desired course and get a general overview of each class, their times and locations, all before the registrations start!',
40 | gif: SelectCourse,
41 | },
42 | {
43 | number: '02',
44 | title: 'Plan Ahead',
45 | description:
46 | 'Add any course classes or custom events to your calendar, effectively scheduling all your uni commitments!',
47 | gif: PlanAhead,
48 | },
49 | {
50 | number: '03',
51 | title: 'Auto Timetabling',
52 | description: 'Struggling to make your ideal timetable? Put in your preferences and we’ll generate one for you!',
53 | gif: AutoTimetable,
54 | },
55 | ];
56 |
57 | return (
58 |
15 |
25 |
16 |
18 | {number}
17 |
19 |
21 | {title}
20 |
22 |
24 | {description}
23 |
26 |
30 |
27 | 
28 |
29 |
59 |
65 | );
66 | };
67 |
68 | export default ScrollingFeaturesSection;
69 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/SponsorsSection.tsx:
--------------------------------------------------------------------------------
1 | import arista from '../../assets/sponsors/arista_black.png';
2 | import janeStreet from '../../assets/sponsors/jane_street_black.svg';
3 | import safetyCulture from '../../assets/sponsors/safetyculture_black.png';
4 | import theTradeDesk from '../../assets/sponsors/thetradedesk_black.png';
5 |
6 | const SponsorsSection = () => {
7 | return (
8 |
60 | {features.map((feature, index) => (
61 |
64 |
9 |
27 | );
28 | };
29 |
30 | export default SponsorsSection;
31 |
--------------------------------------------------------------------------------
/client/src/components/landingPage/flip-words.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { AnimatePresence,motion } from 'framer-motion';
3 | import { useCallback, useEffect, useState } from 'react';
4 |
5 | import { cn } from '../../lib/utils';
6 |
7 | export const FlipWords = ({
8 | words,
9 | duration = 3000,
10 | className,
11 | }: {
12 | words: string[];
13 | duration?: number;
14 | className?: string;
15 | }) => {
16 | const [currentWord, setCurrentWord] = useState(words[0]);
17 | const [isAnimating, setIsAnimating] = useStateBrought to you by
10 |
11 |
26 | -
12 |
-
13 |
14 |
15 | -
16 |
17 |
18 | -
19 |
20 |
21 | -
22 |
23 |
24 |
38 |
41 | );
42 | };
43 |
44 | interface ColorThemeOptionsProps {
45 | currentTheme: string;
46 | setCurrentTheme: (theme: string) => void;
47 | }
48 |
49 | export const ColorThemeOptions: React.FC{theme}
39 |
11 | {children}
12 | {tooltip && (
13 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/client/src/components/sidebar/groupsSidebar/EditImagePopover.tsx:
--------------------------------------------------------------------------------
1 | import { Edit as EditIcon } from '@mui/icons-material';
2 | import { IconButton, Popover, TextField } from '@mui/material';
3 | import { styled } from '@mui/system';
4 | import React from 'react';
5 |
6 | import { Group } from '../../../interfaces/Group';
7 |
8 | const EditIconCircle = styled('div')`
9 | background-color: ${({ theme }) => theme.palette.background.paper};
10 | border: 1px solid gray;
11 | border-radius: 999px;
12 | width: 35px;
13 | height: 35px;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | position: relative;
18 | top: -35px;
19 | cursor: pointer;
20 | &:hover {
21 | border: ${({ theme }) => (theme.palette.mode === 'light' ? '1px solid black' : '1px solid white;')};
22 | }
23 | `;
24 |
25 | const StyledPopoverContent = styled('div')`
26 | width: 400px;
27 | `;
28 |
29 | interface EditImagePopOverProps {
30 | group: Group;
31 | setGroup: (group: Group) => void;
32 | }
33 |
34 | const EditImagePopOver: React.FC
19 |
30 | )}
31 |
20 |
25 |
26 | {tooltip}
27 |
28 |
29 |
40 | setAnchorEl(e.currentTarget)}>
41 |
43 |
44 | setAnchorEl(null)}
48 | anchorOrigin={{
49 | vertical: 'bottom',
50 | horizontal: 'left',
51 | }}
52 | transformOrigin={{
53 | vertical: 'top',
54 | horizontal: 'center',
55 | }}
56 | >
57 |
58 | setGroup({ ...group, imageURL: e.target.value })}
64 | />
65 |
66 |
67 |
68 |
34 | {value === index && {children} }
35 |
36 | );
37 | };
38 |
39 | const a11yProps = (index: number) => {
40 | return {
41 | id: `simple-tab-${index}`,
42 | 'aria-controls': `simple-tabpanel-${index}`,
43 | };
44 | };
45 |
46 | const FriendsTablist: React.FC<{ user: User; fetchUserInfo: (userID: string) => void }> = ({ user, fetchUserInfo }) => {
47 | const [value, setValue] = React.useState(0);
48 |
49 | const handleChange = (event: React.SyntheticEvent, newValue: number) => {
50 | setValue(newValue);
51 | };
52 |
53 | return (
54 |
52 | {getFullName()}
53 | {getEmail()}
54 |
55 | You currently have no friends.
}
65 | 68 | {currLocation ? ( 69 | <> 70 |