From 48f62110e15a643125215a6f84952c441d9653ae Mon Sep 17 00:00:00 2001 From: rosuqt Date: Sat, 15 Mar 2025 14:50:59 +0800 Subject: [PATCH] feat: Added image section & improved dropdown functionality - Added image section - Implemented dropdown list with typeable input - Dynamic job placeholder based on selected course - Completed 'Set Up Your Profile' section --- package-lock.json | 10 + package.json | 1 + src/app/landing/MainLanding.tsx | 79 ++++---- src/app/landing/components/Dropdown.tsx | 98 ++++++++++ src/app/landing/components/HeroSection.tsx | 182 +++++++++++++----- .../landing/components/icons/JobMatcher.tsx | 23 +++ src/app/landing/components/icons/Skills.tsx | 16 ++ .../landing/components/icons/UploadIcon.tsx | 6 +- 8 files changed, 328 insertions(+), 87 deletions(-) create mode 100644 src/app/landing/components/Dropdown.tsx create mode 100644 src/app/landing/components/icons/JobMatcher.tsx create mode 100644 src/app/landing/components/icons/Skills.tsx diff --git a/package-lock.json b/package-lock.json index 59eef74..57f151a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "e2e-platform", "version": "0.1.0", "dependencies": { + "lucide-react": "^0.479.0", "next": "15.2.2", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -3947,6 +3948,15 @@ "dev": true, "license": "ISC" }, + "node_modules/lucide-react": { + "version": "0.479.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.479.0.tgz", + "integrity": "sha512-aBhNnveRhorBOK7uA4gDjgaf+YlHMdMhQ/3cupk6exM10hWlEU+2QtWYOfhXhjAsmdb6LeKR+NZnow4UxRRiTQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", diff --git a/package.json b/package.json index 8a8a184..63d5721 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "lucide-react": "^0.479.0", "next": "15.2.2", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/src/app/landing/MainLanding.tsx b/src/app/landing/MainLanding.tsx index dd33aed..d20c348 100644 --- a/src/app/landing/MainLanding.tsx +++ b/src/app/landing/MainLanding.tsx @@ -1,6 +1,8 @@ import LandingNav from "./components/LandingNav"; import HeroSection from "./components/HeroSection"; import UploadIcon from "./components/icons/UploadIcon"; +import JobMatcher from "./components/icons/JobMatcher"; +import Skills from "./components/icons/Skills"; export default function MainLanding() { return ( @@ -8,48 +10,49 @@ export default function MainLanding() { - {/* Set up your profile section */} +
-
-

- Set up your Profile -

-

- Set up your profile to showcase your skills. Connect with opportunities and grow your network. -

-
-
-
- -

Upload your Resume

-
-

- Upload your resume to highlight your experience and skills. Make it easier for employers to discover and connect with you. -

-
+ {/* Header Section */} +
+

+ Set up your Profile +

+

+ Set up your profile to showcase your skills. Connect with opportunities and grow your network. +

+
-
-
- AI Icon -

AI Job Picker

-
-

- Get personalized job recommendations based on your skills and interests. Let AI match you with the best opportunities effortlessly. -

-
+ {/* Cards Section */} +
+ {/* Showcase your Resume Card */} +
+ +

Showcase your Resume

+

+ Upload or build your resume to highlight your experience and skills. Make it easier for employers to discover and connect with you. +

+
+ + {/* AI Job Matches Card */} +
+ +

AI Job Matches

+

+ Get personalized job recommendations based on your skills and resume. Let AI match you with the best opportunities effortlessly. +

+
-
-
- Skills Icon -

Show off your skills

-
-

- Showcase your skills and expertise to stand out. Let employers see what you bring to the table. -

-
-
-
+ {/* Show off your skills Card */} +
+ +

Show off your skills

+

+ Showcase your skills and expertise to stand out. Let employers see what you bring to the table. +

+
+
+
); } diff --git a/src/app/landing/components/Dropdown.tsx b/src/app/landing/components/Dropdown.tsx new file mode 100644 index 0000000..4f22fdc --- /dev/null +++ b/src/app/landing/components/Dropdown.tsx @@ -0,0 +1,98 @@ +"use client"; + +import { useState, useEffect, useRef } from "react"; +import { ChevronDown } from "lucide-react"; + +interface DropdownProps { + label: string; + options: string[]; + selected: string; + setSelected: (value: string) => void; + dropdownHeight?: string; + width?: string; + placeholder?: string; +} + +export default function Dropdown({ + label, + options, + selected, + setSelected, + dropdownHeight = "max-h-40", + width = "w-[200px]", + placeholder = "Type here...", +}: DropdownProps) { + const [showDropdown, setShowDropdown] = useState(false); + const dropdownRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setShowDropdown(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const filteredOptions = options.filter((option) => + option.toLowerCase().includes(selected.toLowerCase()) + ); + + const handleSelect = (option: string) => { + setSelected(option); + setShowDropdown(false); + }; + + return ( +
+ {/* Clickable*/} +
setShowDropdown((prev) => !prev)} + > + + + {/* Input Field */} + setSelected(e.target.value)} + className="w-full bg-transparent text-black border-none outline-none" + /> + + {/* Dropdown Arrow */} +
+ +
+
+ + {/* Dropdown List */} + {showDropdown && ( +
    + {filteredOptions.length > 0 ? ( + filteredOptions.map((option) => ( +
  • handleSelect(option)} + className="px-4 py-2 cursor-pointer hover:bg-gray-200" + > + {option} +
    • + )) + ) : ( +
  • No results found
    • + )} +
+ )} +
+ ); +} diff --git a/src/app/landing/components/HeroSection.tsx b/src/app/landing/components/HeroSection.tsx index af00aaf..91bd3e3 100644 --- a/src/app/landing/components/HeroSection.tsx +++ b/src/app/landing/components/HeroSection.tsx @@ -1,51 +1,141 @@ +"use client"; + +import { useState } from "react"; +import Dropdown from "../components/Dropdown"; + export default function HomePage() { - return ( -
-
-
-

- The ultimate platform for interns to{" "} - connect, grow, and get hired -

-

- Build your professional network, showcase your skills, and discover exciting internship opportunities—all in one place. Start your career journey today! -

-
-
- - -
-
- - -
- -
-
-
-
+ const [selectedCourse, setSelectedCourse] = useState(""); + const [selectedJob, setSelectedJob] = useState(""); + + const courseOptions: string[] = ["BSIT", "BSBA", "BSTM", "BSHM"]; + const jobOptions: { [key: string]: string[] } = { + BSIT: [ + "Web Developer", "Software Engineer", "System Analyst", "UI/UX Designer", + "Cybersecurity Analyst", "Data Scientist", "Cloud Engineer", "Database Administrator", + "Mobile App Developer", "Game Developer", "IT Support Specialist", "DevOps Engineer", + "AI/ML Engineer", "Full-Stack Developer", "Embedded Systems Engineer", "Network Administrator", + "Blockchain Developer", "Business Intelligence Analyst", "IT Project Manager", "Penetration Tester", + "E-commerce Developer", "VR/AR Developer", "Software QA Engineer", "Technical Writer", + "IT Auditor", "IoT Developer", "ERP Specialist", "Robotics Programmer", + "IT Business Analyst", "Front-End Developer" + ], + + BSBA: [ + "Marketing Manager", "Financial Analyst", "HR Specialist", "Business Consultant", + "Entrepreneur", "Sales Manager", "Operations Manager", "Investment Banker", + "Public Relations Manager", "Logistics Manager", "Tax Consultant", "Digital Marketer", + "Brand Strategist", "Customer Success Manager", "E-commerce Manager", "Product Manager", + "Advertising Manager", "Real Estate Agent", "Corporate Trainer", "Retail Manager", + "Social Media Manager", "Event Coordinator", "Procurement Manager", "Market Research Analyst", + "Franchise Manager", "Export Manager", "Financial Planner", "Business Development Manager", + "Risk Analyst", "Trade Specialist" + ], + + BSTM: [ + "Tour Guide", "Travel Agent", "Event Planner", "Airline Customer Service Manager", + "Resort Manager", "Cruise Ship Director", "Hospitality Consultant", "Hotel Sales Manager", + "Travel Blogger", "Tour Operations Manager", "Destination Manager", "Cultural Tourism Coordinator", + "Eco-Tourism Specialist", "Theme Park Manager", "Concierge Manager", "Airport Ground Staff", + "Tourism Researcher", "Flight Attendant", "Casino Host", "Adventure Tourism Coordinator", + "Corporate Travel Planner", "Wedding Destination Planner", "Luxury Travel Specialist", + "Sustainable Tourism Advisor", "MICE (Meetings, Incentives, Conferences, Exhibitions) Manager", + "Airline Sales Executive", "Travel Journalist", "Food Tourism Specialist", + "Event Marketing Coordinator", "Travel Photographer" + ], + + BSHM: [ + "Hotel Manager", "Restaurant Manager", "Chef", "Food and Beverage Director", + "Catering Manager", "Pastry Chef", "Banquet Manager", "Hospitality Trainer", + "Club Manager", "Resort Operations Manager", "Sommelier", "Kitchen Supervisor", + "Guest Relations Manager", "Casino Manager", "Luxury Hospitality Consultant", + "Bartender", "Resort Entertainment Coordinator", "Event Catering Manager", + "Housekeeping Supervisor", "Hospitality Recruitment Specialist", "Hotel Front Desk Manager", + "Airbnb Property Manager", "Cruise Ship Food & Beverage Manager", "Private Chef", + "Culinary Instructor", "Sustainable Hospitality Consultant", "Wedding Catering Planner", + "Hotel Revenue Manager", "Fine Dining Restaurant Owner", "Spa and Wellness Manager" + ] + }; + + return ( +
+
+ + {/* Left Content */} +
+

+ The ultimate platform for interns to{" "} + connect, grow, and get hired +

+

+ Build your professional network, showcase your skills, and discover exciting internship opportunities—all in one place. Start your career journey today! +

+
+ + {/* Course Dropdown */} +
+ +
+ + {/* Job Dropdown */} +
+ +
+ +
- -
- - - +
+ + {/* Right Content */} +
+
+ Hero
- -
- ); - } - \ No newline at end of file + + {/* Wave Divider */} +
+ + + +
+ +
+ + + + ); +} diff --git a/src/app/landing/components/icons/JobMatcher.tsx b/src/app/landing/components/icons/JobMatcher.tsx new file mode 100644 index 0000000..4f29764 --- /dev/null +++ b/src/app/landing/components/icons/JobMatcher.tsx @@ -0,0 +1,23 @@ +const JobMatcher = () => ( + + + + + + + +); + +export default JobMatcher; diff --git a/src/app/landing/components/icons/Skills.tsx b/src/app/landing/components/icons/Skills.tsx new file mode 100644 index 0000000..c3b9897 --- /dev/null +++ b/src/app/landing/components/icons/Skills.tsx @@ -0,0 +1,16 @@ +const Skills = () => ( + + + + + + +); + +export default Skills; diff --git a/src/app/landing/components/icons/UploadIcon.tsx b/src/app/landing/components/icons/UploadIcon.tsx index 85520e1..9b3e781 100644 --- a/src/app/landing/components/icons/UploadIcon.tsx +++ b/src/app/landing/components/icons/UploadIcon.tsx @@ -1,9 +1,9 @@ const UploadIcon = () => ( - - - + + + );