Talent Trail 🌟

Talent Trail is a modern job board application built with Next.js, Tailwind CSS, and ShadCN UI. It connects job seekers and employers seamlessly, offering advanced features like job filtering, user authentication, and more.

Let Talent Trail lead the way to your next career adventure!

🚀 Features

Built with latest Next.js (Next 15).
Uses the latest Tailwind CSS.
More than 34 Next.js pages.
More than 134 JavaScript files.
Dark and Light Modes support.
4 unique home pages.
Free updates and responsive layout.
Animation with Framer Motion.js.
Image optimization with Next.js Image.
Well-structured, SEO-ready, and modern design.
ShadCN UI elements for easy customization.
Icon libraries: react-icons and lucide-react.
24-hour support.

🛠️ Tech Stack

Frontend Framework: Next.js 15 (React).
Design: Tailwind CSS.
UI Components: ShadCN UI.
Animations: Framer Motion.
Icons: lucide-react, react-icons.

🔧 Installation

Clone the repository:

git clone https://github.com/your-repo/talent-trail.git

Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```

UI Elements: ShadCN UI 🎨

Talent Trail leverages the power of ShadCN UI, a library built with Radix UI primitives and Tailwind CSS. With its modular and accessible components, you can easily customize and build scalable applications.

How to Install:

npm install shadcn-ui

And After that you can install any component you want from ShadCN UI

npx shadcn@latest add card

Example: Card

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Example Card</CardTitle>
      </CardHeader>
      <CardContent>
        This is a customizable card using ShadCN.
      </CardContent>
    </Card>
  );
}

Here we go.

Example Card

This is a customizable card using ShadCN UI.

🔘 Buttons

You can easily create your button with Tailwind CSS classes.

<div className="flex flex-wrap gap-4">
  <button className="px-4 py-2 bg-blue-500 text-white rounded-md">
    Primary
  </button>
  <button className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md">
    Secondary
  </button>
  <button className="px-4 py-2 bg-red-500 text-white rounded-md">
    Danger
  </button>
  <button
    className="px-4 py-2 bg-gray-200 text-gray-500 rounded-md cursor-not-allowed"
    disabled
  >
    Disabled
  </button>
  <button className="px-4 py-2 bg-green-500 text-white rounded-md">
    Success
  </button>
</div>

You can use shadcn ready button as well

<Button className="m-2" variant="default">default</Button>
<Button variant="destructive">destructive</Button>
<Button variant="outline">outline</Button>
<Button variant="secondary">secondary</Button>
<Button variant="ghost">ghost</Button>
<Button variant="link">link</Button>

📝 Inputs

You can easily create and customize your input with Tailwind CSS classes.

<input type="text" className="border border-gray-300 p-2 rounded-md" placeholder="Enter your name" />

You can use shadcn ready input as well

<Input placeholder="Enter your name" />

🎨 Icons

I use two libraries for icons: react-icons and lucide-react. You can easily import and use icons from either library.

Example Usage

import { FaHome } from "react-icons/fa";

<FaHome />

import { LucideHome } from "lucide-react";

<LucideHome />

React Icons:

Lucide Icons:

📝 Changelog

Version 1.0.0: Initial release.

📫 Contact

For any support or feedback, reach out at:

mohamedelgedwy245@gmail.com