这是indexloc提供的服务，不要输入任何密码
Skip to content

feat: Added image section & improved dropdown functionality #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 15, 2025
Merged

feat: Added image section & improved dropdown functionality #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
79 changes: 41 additions & 38 deletions src/app/landing/MainLanding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,58 @@
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 (
<div className="relative min-h-screen bg-[#5d4ab1] text-white">
<LandingNav />
<HeroSection />

{/* Set up your profile section */}
<div className="relative bg-white px-10 py-16 text-black">

<div className="bg-white px-10 py-16 text-black">
<h1 className="text-4xl font-bold">
Set up your <span className="text-[#2D4CC8]">Profile</span>
</h1>
<p className="mt-2 text-lg text-gray-600">
Set up your profile to showcase your skills. Connect with opportunities and grow your network.
</p>

<div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg">
<div className="flex items-center gap-3">
<UploadIcon />
<h3 className="text-xl font-bold">Upload your Resume</h3>
</div>
<p className="mt-2 text-sm">
Upload your resume to highlight your experience and skills. Make it easier for employers to discover and connect with you.
</p>
</div>
{/* Header Section */}
<div className="space-y-5">
<h1 className="text-5xl font-bold ml-20">
Set up your <span className="text-[#2D4CC8]">Profile</span>
</h1>
<p className="mt-2 text-lg text-gray-500 max-w-xl ml-20">
Set up your profile to showcase your skills. Connect with opportunities and grow your network.
</p>
</div>

<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg">
<div className="flex items-center gap-3">
<img src="/icons/ai-job.svg" alt="AI Icon" className="w-8 h-8" />
<h3 className="text-xl font-bold">AI Job Picker</h3>
</div>
<p className="mt-2 text-sm">
Get personalized job recommendations based on your skills and interests. Let AI match you with the best opportunities effortlessly.
</p>
</div>
{/* Cards Section */}
<div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-3 justify-center ml-20 mr-20">
{/* Showcase your Resume Card */}
<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg w-[375px] h-[213px] flex flex-col items-start">
<UploadIcon />
<h3 className="text-2xl font-bold mt-3">Showcase your Resume</h3>
<p className="mt-2 text-gray-300 text-sm">
Upload or build your resume to highlight your experience and skills. Make it easier for employers to discover and connect with you.
</p>
</div>

{/* AI Job Matches Card */}
<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg w-[375px] h-[213px] flex flex-col items-start">
<JobMatcher />
<h3 className="text-2xl font-bold mt-3">AI Job Matches</h3>
<p className="mt-2 text-gray-300 text-sm">
Get personalized job recommendations based on your skills and resume. Let AI match you with the best opportunities effortlessly.
</p>
</div>

<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg">
<div className="flex items-center gap-3">
<img src="/icons/skills.svg" alt="Skills Icon" className="w-8 h-8" />
<h3 className="text-xl font-bold">Show off your skills</h3>
</div>
<p className="mt-2 text-sm">
Showcase your skills and expertise to stand out. Let employers see what you bring to the table.
</p>
</div>
</div>
</div>
{/* Show off your skills Card */}
<div className="bg-[#1C2B5E] text-white p-6 rounded-lg shadow-lg w-[375px] h-[213px] flex flex-col items-start">
<Skills />
<h3 className="text-2xl font-bold mt-3">Show off your skills</h3>
<p className="mt-2 text-gray-300 text-sm">
Showcase your skills and expertise to stand out. Let employers see what you bring to the table.
</p>
</div>
</div>
</div>
</div>
);
}
98 changes: 98 additions & 0 deletions src/app/landing/components/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<boolean>(false);
const dropdownRef = useRef<HTMLDivElement>(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 (
<div ref={dropdownRef} className={`relative ${width}`}>
{/* Clickable*/}
<div
className="relative w-full px-4 pt-8 pb-5 rounded-md text-black bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 mt-1 border border-gray-300 cursor-pointer"
onClick={() => setShowDropdown((prev) => !prev)}
>
<label className="text-sm absolute top-2 left-4 text-[#0F1476]">
{label}
</label>

{/* Input Field */}
<input
type="text"
placeholder={placeholder}
value={selected}
onChange={(e) => setSelected(e.target.value)}
className="w-full bg-transparent text-black border-none outline-none"
/>

{/* Dropdown Arrow */}
<div className="absolute top-1/2 right-4 transform -translate-y-1/2 pointer-cursor">
<ChevronDown className="w-5 h-5 text-gray-400" />
</div>
</div>

{/* Dropdown List */}
{showDropdown && (
<ul
className={`absolute top-full left-0 w-full text-black text-lg bg-white border border-gray-300 rounded-md mt-1 shadow-lg overflow-y-auto z-50 ${dropdownHeight}`}
>
{filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<li
key={option}
onMouseDown={() => handleSelect(option)}
className="px-4 py-2 cursor-pointer hover:bg-gray-200"
>
{option}
</li>
))
) : (
<li className="px-4 py-2 text-gray-400">No results found</li>
)}
</ul>
)}
</div>
);
}
Loading