bender/be61fc3a-7495-4753-afc6-16c5c2eb6ae5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 6 commits from version_2 into main 2026-03-06 18:54:33 +00:00
Conversation 0 Commits 6 Files Changed 6 +1366 -366
6 changed files with 1366 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
src/app/ai-job-search/page.tsx Normal file
View File

@@ -0,0 +1,433 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Search, Filter, Zap, CheckCircle, Database, TrendingUp, AlertCircle, Sparkles } from "lucide-react";
import { useState } from "react";
export default function AIJobSearchPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
{ name: "AI Job Search", id: "/ai-job-search" },
];
const [selectedCategory, setSelectedCategory] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
const [salaryRange, setSalaryRange] = useState([50, 150]);
const [experienceLevel, setExperienceLevel] = useState("all");
const footerColumns = [
{
items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Applications", href: "/applications" },
{ label: "Interview Prep", href: "/interview-prep" },
{ label: "Settings", href: "/settings" },
],
},
{
items: [
{ label: "Pricing", href: "/pricing" },
{ label: "Features", href: "#features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Support", href: "/support" },
{ label: "Status", href: "https://status.trakapply.com" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com/trakapply" },
{ label: "LinkedIn", href: "https://linkedin.com/company/trakapply" },
{ label: "Instagram", href: "https://instagram.com/trakapply" },
{ label: "Discord", href: "https://discord.gg/trakapply" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Sign Up Free", href: "/pricing" }}
brandName="TrakApply"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="AI Job Search Engine"
description="Discover your perfect role using AI-powered job search aggregating opportunities from multiple sources. Advanced filtering, smart matching, and real-time results to accelerate your job search journey."
buttons={[
{ text: "Start Searching", href: "#search" },
{ text: "Learn More", href: "#features" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png?_wi=1"
imageAlt="AI Job Search Engine Dashboard"
showDimOverlay={true}
buttonAnimation="slide-up"
ariaLabel="AI Job Search hero section"
/>
</div>
<div id="search" data-section="search" className="py-16 md:py-24 lg:py-32 px-4 md:px-6">
<div className="max-w-6xl mx-auto">
<div className="mb-12 text-center">
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4">Advanced Job Search Filters</h2>
<p className="text-lg text-foreground/70">Find your next opportunity with precision filtering and AI-powered recommendations</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
{/* Search Bar */}
<div className="md:col-span-4">
<label className="block text-sm font-semibold mb-2">Job Title or Keyword</label>
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-primary-cta" />
<input
type="text"
placeholder="Search for jobs..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-accent/20 rounded-lg bg-card focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
</div>
{/* Category Filter */}
<div>
<label className="block text-sm font-semibold mb-2">Category</label>
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(e.target.value)}
className="w-full px-4 py-3 border border-accent/20 rounded-lg bg-card focus:outline-none focus:ring-2 focus:ring-primary-cta"
>
<option value="all">All Categories</option>
<option value="engineering">Engineering</option>
<option value="product">Product</option>
<option value="design">Design</option>
<option value="business">Business</option>
<option value="marketing">Marketing</option>
</select>
</div>
{/* Experience Level */}
<div>
<label className="block text-sm font-semibold mb-2">Experience Level</label>
<select
value={experienceLevel}
onChange={(e) => setExperienceLevel(e.target.value)}
className="w-full px-4 py-3 border border-accent/20 rounded-lg bg-card focus:outline-none focus:ring-2 focus:ring-primary-cta"
>
<option value="all">All Levels</option>
<option value="entry">Entry Level</option>
<option value="mid">Mid Level</option>
<option value="senior">Senior</option>
<option value="lead">Lead/Manager</option>
</select>
</div>
{/* Salary Range */}
<div>
<label className="block text-sm font-semibold mb-2">Salary Range (K)</label>
<div className="flex items-center gap-2">
<input
type="number"
value={salaryRange[0]}
onChange={(e) => setSalaryRange([parseInt(e.target.value), salaryRange[1]])}
className="w-1/2 px-3 py-3 border border-accent/20 rounded-lg bg-card focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
<span className="text-sm">-</span>
<input
type="number"
value={salaryRange[1]}
onChange={(e) => setSalaryRange([salaryRange[0], parseInt(e.target.value)])}
className="w-1/2 px-3 py-3 border border-accent/20 rounded-lg bg-card focus:outline-none focus:ring-2 focus:ring-primary-cta"
/>
</div>
</div>
</div>
{/* Search Results */}
<div className="bg-card rounded-lg border border-accent/20 p-6">
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-semibold">Search Results</h3>
<div className="text-sm text-foreground/70">Showing 1-10 of 2,847 jobs</div>
</div>
<div className="space-y-4">
{[
{
title: "Senior Full Stack Engineer", company: "TechCorp Inc", salary: "$120K - $160K", location: "San Francisco, CA", source: "LinkedIn", tags: ["React", "Node.js", "Python"],
},
{
title: "Product Manager", company: "StartupXYZ", salary: "$100K - $140K", location: "Remote", source: "Indeed", tags: ["Product Strategy", "Analytics", "Leadership"],
},
{
title: "UX/UI Designer", company: "DesignStudio Co", salary: "$80K - $120K", location: "New York, NY", source: "Glassdoor", tags: ["Figma", "Design Systems", "User Research"],
},
].map((job, idx) => (
<div
key={idx}
className="border border-accent/20 rounded-lg p-4 hover:bg-background-accent transition-colors"
>
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
<div className="flex-1">
<h4 className="font-semibold text-lg mb-1">{job.title}</h4>
<p className="text-sm text-foreground/70 mb-2">{job.company}</p>
<p className="text-sm text-foreground/50 mb-3">{job.location}</p>
<div className="flex flex-wrap gap-2">
{job.tags.map((tag, tagIdx) => (
<span
key={tagIdx}
className="inline-block px-3 py-1 bg-primary-cta/10 text-primary-cta text-xs font-medium rounded-full"
>
{tag}
</span>
))}
</div>
</div>
<div className="flex flex-col items-start md:items-end gap-2">
<div className="font-semibold text-lg">{job.salary}</div>
<div className="text-xs bg-accent/20 text-accent px-2 py-1 rounded">{job.source}</div>
<button className="mt-2 px-4 py-2 bg-primary-cta text-white rounded-lg hover:opacity-90 transition-opacity">
Apply Now
</button>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Powered by AI Job Aggregation"
description="Access jobs from multiple sources with intelligent filtering and real-time updates"
tag="Platform Stats"
metrics={[
{
id: "1", value: "500K+", title: "Jobs Aggregated", description: "Real-time job data from multiple sources", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=1", imageAlt: "Jobs aggregated metric"},
{
id: "2", value: "15+", title: "Data Sources", description: "LinkedIn, Indeed, Glassdoor, and more", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-numerical-metric-card-showing-18-repre-1772817320431-dfcf100f.png?_wi=1", imageAlt: "Data sources metric"},
{
id: "3", value: "73%", title: "Match Accuracy", description: "AI-powered job matching with your profile", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=2", imageAlt: "Match accuracy metric"},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="AI job search metrics section"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTen
title="Intelligent Job Discovery Features"
description="Advanced tools to find and apply for your dream job faster than ever before"
tag="Core Capabilities"
features={[
{
id: "1", title: "Multi-Source Aggregation", description:
"Search across LinkedIn, Indeed, Glassdoor, GitHub Jobs, and more in one place. No need to check multiple job boards. All opportunities consolidated with real-time updates and no duplicates.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=1"},
items: [
{ icon: Database, text: "15+ job sources" },
{ icon: Zap, text: "Real-time updates" },
{ icon: CheckCircle, text: "No duplicates" },
],
reverse: false,
},
{
id: "2", title: "Advanced Search Filters", description:
"Filter by salary, experience level, job type, location, company size, and more. Save your search preferences and get notified when matching jobs appear. AI-powered suggestions based on your profile.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/follow-up-reminders-interface-showing-a--1772817321747-69e9d0e9.png?_wi=1"},
items: [
{ icon: Filter, text: "20+ filter options" },
{ icon: AlertCircle, text: "Smart alerts" },
{ icon: TrendingUp, text: "Trending roles" },
],
reverse: true,
},
{
id: "3", title: "AI Job Matching", description:
"Our AI analyzes your skills, experience, and preferences to match you with the best opportunities. Get a match score for each job showing how well you align with the role requirements.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/resume-and-document-storage-interface-sh-1772817320999-9b3b6068.png?_wi=1"},
items: [
{ icon: Sparkles, text: "AI powered" },
{ icon: CheckCircle, text: "Match scores" },
{ icon: TrendingUp, text: "Skill analysis" },
],
reverse: false,
},
{
id: "4", title: "One-Click Application", description:
"Apply to jobs directly from TrakApply with pre-filled information. Attach your resume, cover letter, and apply in seconds. Track all applications automatically in your TrakApply dashboard.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/interview-tracking-interface-showing-int-1772817321015-8840b1d2.png"},
items: [
{ icon: Zap, text: "One-click apply" },
{ icon: CheckCircle, text: "Auto-tracking" },
{ icon: Database, text: "All in one place" },
],
reverse: true,
},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="AI job search features section"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardTwo
title="AI Search Plans"
description="Unlock the full power of AI-driven job discovery and applications."
tag="Pricing"
plans={[
{
id: "free", badge: "Free Plan", badgeIcon: Zap,
price: "$0", subtitle: "Perfect for beginners", buttons: [
{ text: "Start Free", href: "/dashboard" },
{ text: "Learn More", href: "#features" },
],
features: [
"Access to basic job search", "5 saved searches", "Standard filters only", "Manual application tracking", "Community support"],
},
{
id: "pro", badge: "Pro Plan", badgeIcon: Sparkles,
price: "$15/mo", subtitle: "Recommended for active seekers", buttons: [
{ text: "Start 7-Day Trial", onClick: undefined },
{ text: "Cancel Anytime", onClick: undefined },
],
features: [
"Unlimited job searches", "Unlimited saved searches", "AI job matching (73% accuracy)", "Advanced filters (20+)", "One-click applications", "Smart job alerts", "Priority support", "Resume optimization tips"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="AI job search pricing section"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Students Love AI Job Search"
description="See how students are finding their dream jobs faster with our AI-powered engine"
tag="Success Stories"
testimonials={[
{
id: "1", title: "Found my ideal role in days", quote:
"Instead of scrolling through hundreds of generic job boards, the AI matched me with roles that actually fit my skills. I got 3 interviews within a week!", name: "Emma Rodriguez", role: "Software Engineer", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=1", imageAlt: "Emma Rodriguez"},
{
id: "2", title: "Saved me hours every week", quote:
"No more switching between 5 different job boards. Everything is in one place with smart filters. I can now spend more time preparing for interviews instead of searching.", name: "James Kim", role: "Product Manager", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=1", imageAlt: "James Kim"},
{
id: "3", title: "AI matching is incredible", quote:
"The match score feature is a game-changer. I only apply to jobs where I'm 80%+ matched. My application success rate went up by 40%!", name: "Sophia Chen", role: "Data Scientist", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-latina-wo-1772817320866-ff29c3e8.png?_wi=1", imageAlt: "Sophia Chen"},
{
id: "4", title: "Best job search investment ever", quote:
"I tried every job board out there. TrakApply's AI job search combined with the application tracking is the ultimate combo. Landed my FAANG offer in 8 weeks!", name: "Michael Torres", role: "Senior Developer", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-black-man-1772817320173-b3d4b6a2.png", imageAlt: "Michael Torres"},
{
id: "5", title: "Alerts saved me from missing out", quote:
"I set up alerts for specific roles and companies. Got notified within minutes of jobs being posted. Already landed 2 interviews this way!", name: "Lily Park", role: "UX Designer", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=2", imageAlt: "Lily Park"},
{
id: "6", title: "Worth every penny", quote:
"Started with the free plan, upgraded to Pro. The Pro features paid for themselves in the first month with interviews I landed. Amazing value!", name: "David Singh", role: "Marketing Manager", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=2", imageAlt: "David Singh"},
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="AI job search testimonials section"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="AI Job Search FAQs"
description="Common questions about our AI-powered job discovery and multi-API aggregation"
tag="Help Center"
faqs={[
{
id: "1", title: "How does the AI job matching work?", content:
"Our AI analyzes your profile, skills, experience level, and job preferences. It then compares this against job descriptions to generate a match score (0-100%). This helps you focus on roles where you're most likely to succeed. The more you use TrakApply, the smarter the matching becomes!"},
{
id: "2", title: "Which job boards do you aggregate from?", content:
"We pull from LinkedIn, Indeed, Glassdoor, GitHub Jobs, Stack Overflow Jobs, Wellfound, Levels.fyi, and 8+ more sources. New sources are added regularly. All jobs are consolidated and deduplicated in one dashboard so you never see the same job twice."},
{
id: "3", title: "How often are jobs updated?", content:
"Jobs are updated in real-time from our data sources. New jobs appear within minutes of being posted on their original boards. We automatically remove expired listings so you're always looking at fresh opportunities."},
{
id: "4", title: "Can I set up job alerts?", content:
"Yes! Pro users can set up unlimited smart alerts for specific job titles, companies, locations, or salary ranges. You'll get notified instantly when matching jobs are posted. Free users get 5 saved searches with weekly email digests."},
{
id: "5", title: "How does one-click application work?", content:
"Click 'Apply' on any job in TrakApply. Your profile information (name, email, phone) auto-fills. Select which resume and cover letter to attach. Submit. The application is tracked automatically in your TrakApply dashboard. Many companies also sync with LinkedIn for even faster applications."},
{
id: "6", title: "Is my data safe with multiple APIs?", content:
"Absolutely. We use industry-standard encryption for all data. We only connect to public job board APIs and don't store passwords or sensitive credentials. Your resume and personal data never leave our secure servers. See our Privacy Policy for full details."},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=2"
imageAlt="AI Job Search FAQ section"
textboxLayout="default"
useInvertedBackground={false}
mediaAnimation="slide-up"
faqsAnimation="slide-up"
mediaPosition="left"
ariaLabel="AI job search FAQ section"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis columns={footerColumns} logoText="TrakApply" />
</div>
</ThemeProvider>
);
}

323
src/app/applications/page.tsx
View File

@@ -1,15 +1,63 @@
"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import Link from "next/link";
import { CheckCircle, Filter, Zap, Bell, Calendar, AlertCircle, FileText, Tag, Link as LinkIcon, Users, Workflow } from "lucide-react";
export default function ApplicationsPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
];
const footerColumns = [
{
items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Applications", href: "/applications" },
{ label: "Interview Prep", href: "/interview-prep" },
{ label: "Settings", href: "/settings" },
],
},
{
items: [
{ label: "Pricing", href: "/pricing" },
{ label: "Features", href: "#features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Support", href: "/support" },
{ label: "Status", href: "https://status.trakapply.com" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com/trakapply" },
{ label: "LinkedIn", href: "https://linkedin.com/company/trakapply" },
{ label: "Instagram", href: "https://instagram.com/trakapply" },
{ label: "Discord", href: "https://discord.gg/trakapply" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
@@ -25,179 +73,130 @@ export default function ApplicationsPage() {
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
]}
navItems={navItems}
button={{ text: "Sign Up Free", href: "/pricing" }}
brandName="TrakApply"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="TrakApply"
description="Manage all your job applications from one intuitive dashboard. Track applications, schedule follow-ups, and monitor your entire interview pipeline."
<HeroLogoBillboardSplit
logoText="Applications"
description="Manage your entire job application pipeline with an intuitive Kanban board. Track applications through every stage - from initial submission to offers received. Get real-time insights into your job search progress with advanced filtering and analytics."
background={{ variant: "radial-gradient" }}
buttons={[
{ text: "View Dashboard", href: "/dashboard" },
{ text: "Back to Home", href: "/" },
{ text: "Get Started", href: "/dashboard" },
{ text: "View Demo", href: "#" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png?_wi=3"
imageAlt="TrakApply Job Application Dashboard"
showDimOverlay={true}
layoutOrder="default"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png?_wi=1"
imageAlt="Application Management Dashboard"
frameStyle="browser"
buttonAnimation="slide-up"
ariaLabel="Applications page hero section"
mediaAnimation="slide-up"
ariaLabel="Application management hero section"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Track Your Complete Job Search Pipeline"
description="Real-time insights into your application progress and interview pipeline"
tag="Dashboard Metrics"
metrics={[
{
id: "1",
value: "247",
title: "Total Applications",
description: "All applications tracked in system",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=3",
imageAlt: "Total applications metric",
},
{
id: "2",
value: "18",
title: "Active Interviews",
description: "Scheduled rounds across companies",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-numerical-metric-card-showing-18-repre-1772817320431-dfcf100f.png?_wi=2",
imageAlt: "Active interviews metric",
},
{
id: "3",
value: "52",
title: "Follow-Ups Due",
description: "Scheduled reminders for this week",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=4",
imageAlt: "Follow-ups metric",
},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Applications metrics section"
/>
</div>
<div id="features" data-section="features" className="py-16 md:py-24 lg:py-32 px-4 md:px-6">
<div className="max-w-6xl mx-auto">
<div className="space-y-16 md:space-y-24">
<div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
<div>
<h2 className="text-3xl md:text-4xl font-extrabold mb-4">Kanban Board</h2>
<p className="text-base md:text-lg text-foreground/70 mb-6">
Visualize your entire application pipeline with our enhanced Kanban board. Drag and drop applications between columns to update their status in real-time. Color-coded cards help you quickly identify priority applications and follow-up deadlines.
</p>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Drag-and-drop status updates</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Customizable pipeline columns</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Color-coded priority levels</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Quick-view application details</span>
</li>
</ul>
</div>
<div className="rounded-lg overflow-hidden bg-card p-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=1" alt="Kanban board view" className="w-full h-auto rounded-lg" />
</div>
</div>
<div id="features" data-section="features">
<FeatureCardTen
title="Application Management Features"
description="Master your job search with comprehensive tracking and organization tools"
tag="Core Features"
features={[
{
id: "1",
title: "Smart Application Tracker",
description: "Track all your job applications in one place. Add company name, job title, application date, source, and current status. Get a complete overview of your entire pipeline with filtering and sorting capabilities.",
media: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=4",
imageAlt: "Application tracking interface",
},
items: [
{ icon: CheckCircle, text: "Inline status editing" },
{ icon: Filter, text: "Filter by status or date" },
{ icon: Zap, text: "Quick data entry" },
],
reverse: false,
},
{
id: "2",
title: "Follow-Up Reminders",
description: "Never miss a follow-up opportunity. Set reminders for each application and get notified about overdue and upcoming follow-ups. Stay organized and proactive in your job search.",
media: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/follow-up-reminders-interface-showing-a--1772817321747-69e9d0e9.png?_wi=3",
imageAlt: "Follow-up reminders interface",
},
items: [
{ icon: Bell, text: "Smart notifications" },
{ icon: Calendar, text: "Follow-up scheduling" },
{ icon: AlertCircle, text: "Overdue alerts" },
],
reverse: true,
},
{
id: "3",
title: "Resume & Document Storage",
description: "Upload and manage multiple resume versions. Label them by type (Tech Resume, Marketing Resume) and attach the right version to each application. Keep all your documents organized in one secure place.",
media: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/resume-and-document-storage-interface-sh-1772817320999-9b3b6068.png?_wi=3",
imageAlt: "Resume storage interface",
},
items: [
{ icon: FileText, text: "Version control" },
{ icon: Tag, text: "Custom labeling" },
{ icon: LinkIcon, text: "Easy attachment" },
],
reverse: false,
},
]}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Applications features section"
/>
<div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center md:flex-row-reverse">
<div className="rounded-lg overflow-hidden bg-card p-4 order-first md:order-last">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/follow-up-reminders-interface-showing-a--1772817321747-69e9d0e9.png?_wi=1" alt="AI Cover Letter Generator" className="w-full h-auto rounded-lg" />
</div>
<div className="order-last md:order-first">
<h2 className="text-3xl md:text-4xl font-extrabold mb-4">AI Cover Letter Generator</h2>
<p className="text-base md:text-lg text-foreground/70 mb-6">
Generate personalized cover letters powered by AI. TrakApply analyzes job descriptions and your profile to create compelling, customized cover letters in seconds. Save time while making stronger applications.
</p>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>AI-powered personalization</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>One-click generation</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Edit and customize</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Cover letter history</span>
</li>
</ul>
</div>
</div>
<div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
<div>
<h2 className="text-3xl md:text-4xl font-extrabold mb-4">Interview Prep Features</h2>
<p className="text-base md:text-lg text-foreground/70 mb-6">
Prepare for your interviews with built-in interview prep tools. Practice common questions, get AI feedback, and build confidence before your big day. Track interview progress and learnings from each round.
</p>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Mock interview practice</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>AI feedback on answers</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Company-specific prep</span>
</li>
<li className="flex items-start gap-3">
<span className="text-primary-cta font-bold mt-1">✓</span>
<span>Interview notes and insights</span>
</li>
</ul>
</div>
<div className="rounded-lg overflow-hidden bg-card p-4">
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/interview-tracking-interface-showing-int-1772817321015-8840b1d2.png" alt="Interview prep" className="w-full h-auto rounded-lg" />
</div>
</div>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="TrakApply"
columns={[
{
items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Applications", href: "/applications" },
{ label: "Interview Prep", href: "/interview-prep" },
{ label: "Settings", href: "/settings" },
],
},
{
items: [
{ label: "Pricing", href: "/pricing" },
{ label: "Features", href: "#features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Support", href: "/support" },
{ label: "Status", href: "https://status.trakapply.com" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com/trakapply" },
{ label: "LinkedIn", href: "https://linkedin.com/company/trakapply" },
{ label: "Instagram", href: "https://instagram.com/trakapply" },
{ label: "Discord", href: "https://discord.gg/trakapply" },
],
},
]}
ariaLabel="Site footer"
/>
<FooterLogoEmphasis columns={footerColumns} logoText="TrakApply" />
</div>
</ThemeProvider>
);
}
}

29
src/app/layout.tsx
View File

@@ -7,42 +7,27 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant",
subsets: ["latin"],
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
variable: "--font-inter", subsets: ["latin"],
});
const archivo = Archivo({
variable: "--font-archivo",
subsets: ["latin"],
variable: "--font-archivo", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "TrakApply - Job Application Tracker for Students",
description: "Track job applications, manage follow-ups, and land your next opportunity. Free job application tracker for students and recent graduates.",
keywords: "job application tracker, job search, application management, resume tracker, interview tracker",
openGraph: {
title: "TrakApply - Job Application Tracker",
description: "Stop managing job applications in spreadsheets. Track, organize, and succeed with TrakApply.",
siteName: "TrakApply",
type: "website",
images: [
title: "TrakApply - Job Application Tracker for Students", description: "Track job applications, manage follow-ups, and land your next opportunity. Free job application tracker for students and recent graduates.", keywords: "job application tracker, job search, application management, resume tracker, interview tracker", openGraph: {
title: "TrakApply - Job Application Tracker", description: "Stop managing job applications in spreadsheets. Track, organize, and succeed with TrakApply.", siteName: "TrakApply", type: "website", images: [
{
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png",
alt: "TrakApply Dashboard",
},
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png", alt: "TrakApply Dashboard"},
],
},
twitter: {
card: "summary_large_image",
title: "TrakApply - Job Application Tracker",
description: "Track and manage your job search in one place.",
images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png"],
card: "summary_large_image", title: "TrakApply - Job Application Tracker", description: "Track and manage your job search in one place.", images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png"],
},
};

295
src/app/page.tsx
View File

@@ -18,6 +18,7 @@ export default function HomePage() {
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Follow-ups", id: "follow-ups" },
{ name: "Contact", id: "contact" },
];
@@ -88,7 +89,7 @@ export default function HomePage() {
<div id="hero" data-section="hero">
<HeroLogo
logoText="TrakApply"
description="Stop managing job applications in spreadsheets. TrakApply is the all-in-one platform for students and recent graduates to track applications, manage follow-ups, and land their next opportunity."
description="Stop managing job applications in spreadsheets. TrakApply is the all-in-one platform for students and recent graduates to track applications, manage follow-ups with smart scheduling and reminders, and land their next opportunity."
buttons={[
{ text: "Start Free", href: "/pricing" },
{ text: "Watch Demo", href: "#features" },
@@ -104,33 +105,15 @@ export default function HomePage() {
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Why Students Choose TrakApply"
description="See how TrakApply helps students manage their entire job search in one place"
description="See how TrakApply helps students manage their entire job search in one place with intelligent follow-up scheduling"
tag="Dashboard Snapshot"
metrics={[
{
id: "1",
value: "10K+",
title: "Applications Tracked",
description: "Total applications managed by our users",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=1",
imageAlt: "Applications tracked metric",
},
id: "1", value: "10K+", title: "Applications Tracked", description: "Total applications managed by our users", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=1", imageAlt: "Applications tracked metric"},
{
id: "2",
value: "18",
title: "Interviews Scheduled",
description: "Active interview pipeline example",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-numerical-metric-card-showing-18-repre-1772817320431-dfcf100f.png?_wi=1",
imageAlt: "Interviews scheduled metric",
},
id: "2", value: "18", title: "Interviews Scheduled", description: "Active interview pipeline example", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-numerical-metric-card-showing-18-repre-1772817320431-dfcf100f.png?_wi=1", imageAlt: "Interviews scheduled metric"},
{
id: "3",
value: "42%",
title: "Higher Success Rate",
description: "Students using TrakApply report higher offer rates",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=2",
imageAlt: "Success rate metric",
},
id: "3", value: "42%", title: "Higher Success Rate", description: "Students using TrakApply report higher offer rates", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-large-numerical-metric-card-displaying-1772817319904-acb9c17f.png?_wi=2", imageAlt: "Success rate metric"},
]}
textboxLayout="default"
animationType="slide-up"
@@ -142,18 +125,14 @@ export default function HomePage() {
<div id="features" data-section="features">
<FeatureCardTen
title="Everything You Need to Land Your Dream Job"
description="From application tracking to interview prep, TrakApply simplifies your entire job search journey"
description="From application tracking to interview prep with advanced follow-up scheduling, TrakApply simplifies your entire job search journey"
tag="Core Features"
features={[
{
id: "1",
title: "Smart Application Tracker",
description:
"Track all your job applications in one place. Add company name, job title, application date, source, and current status. Get a complete overview of your entire pipeline with filtering and sorting capabilities.",
media: {
id: "1", title: "Smart Application Tracker", description:
"Track all your job applications in one place. Add company name, job title, application date, source, and current status. Get a complete overview of your entire pipeline with filtering and sorting capabilities.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=1",
},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=1"},
items: [
{ icon: CheckCircle, text: "Inline status editing" },
{ icon: Filter, text: "Filter by status or date" },
@@ -162,30 +141,22 @@ export default function HomePage() {
reverse: false,
},
{
id: "2",
title: "Follow-Up Reminders",
description:
"Never miss a follow-up opportunity. Set reminders for each application and get notified about overdue and upcoming follow-ups. Stay organized and proactive in your job search.",
media: {
id: "2", title: "Intelligent Follow-Up System", description:
"Never miss a follow-up opportunity with our advanced scheduling and reminder system. Set automated follow-up reminders, schedule tasks for optimal timing, and get smart notifications about overdue and upcoming follow-ups to keep you proactive.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/follow-up-reminders-interface-showing-a--1772817321747-69e9d0e9.png?_wi=1",
},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/follow-up-reminders-interface-showing-a--1772817321747-69e9d0e9.png?_wi=1"},
items: [
{ icon: Bell, text: "Smart notifications" },
{ icon: Calendar, text: "Follow-up scheduling" },
{ icon: Calendar, text: "Advanced scheduling" },
{ icon: AlertCircle, text: "Overdue alerts" },
],
reverse: true,
},
{
id: "3",
title: "Resume & Document Storage",
description:
"Upload and manage multiple resume versions. Label them by type (Tech Resume, Marketing Resume) and attach the right version to each application. Keep all your documents organized in one secure place.",
media: {
id: "3", title: "Resume & Document Storage", description:
"Upload and manage multiple resume versions. Label them by type (Tech Resume, Marketing Resume) and attach the right version to each application. Keep all your documents organized in one secure place.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/resume-and-document-storage-interface-sh-1772817320999-9b3b6068.png?_wi=1",
},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/resume-and-document-storage-interface-sh-1772817320999-9b3b6068.png?_wi=1"},
items: [
{ icon: FileText, text: "Version control" },
{ icon: Tag, text: "Custom labeling" },
@@ -194,14 +165,10 @@ export default function HomePage() {
reverse: false,
},
{
id: "4",
title: "Interview Round Tracker",
description:
"Log interview rounds as you progress through companies. Track round number, date, interviewer name, and add detailed notes. Keep everything together for easy reference and preparation.",
media: {
id: "4", title: "Interview Round Tracker", description:
"Log interview rounds as you progress through companies. Track round number, date, interviewer name, and add detailed notes. Keep everything together for easy reference and preparation.", media: {
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/interview-tracking-interface-showing-int-1772817321015-8840b1d2.png",
},
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/interview-tracking-interface-showing-int-1772817321015-8840b1d2.png"},
items: [
{ icon: Users, text: "Interviewer tracking" },
{ icon: FileText, text: "Detailed notes" },
@@ -224,43 +191,22 @@ export default function HomePage() {
tag="Pricing Plans"
plans={[
{
id: "free",
badge: "Free Plan",
badgeIcon: Zap,
price: "$0",
subtitle: "Perfect to get started",
buttons: [
id: "free", badge: "Free Plan", badgeIcon: Zap,
price: "$0", subtitle: "Perfect to get started", buttons: [
{ text: "Get Started Free", href: "/dashboard" },
{ text: "Learn More", href: "#features" },
],
features: [
"Track up to 10 applications",
"Basic status pipeline",
"1 resume upload",
"Email support",
"Mobile app access",
],
"Track up to 10 applications", "Basic status pipeline", "1 resume upload", "Basic follow-up reminders", "Email support", "Mobile app access"],
},
{
id: "pro",
badge: "Pro Plan",
badgeIcon: Sparkles,
price: "$8/mo",
subtitle: "Best for active job seekers",
buttons: [
id: "pro", badge: "Pro Plan", badgeIcon: Sparkles,
price: "$8/mo", subtitle: "Best for active job seekers", buttons: [
{ text: "Start Pro Trial", onClick: undefined },
{ text: "Cancel Anytime", onClick: undefined },
],
features: [
"Unlimited applications",
"Advanced Kanban board",
"Unlimited resume versions",
"Follow-up reminders",
"Interview round tracking",
"LinkedIn import (coming soon)",
"Priority support",
"Advanced analytics",
],
"Unlimited applications", "Advanced Kanban board", "Unlimited resume versions", "Advanced follow-up scheduling", "Smart reminder system", "Interview round tracking", "LinkedIn import (coming soon)", "Priority support", "Advanced analytics"],
},
]}
animationType="slide-up"
@@ -277,71 +223,29 @@ export default function HomePage() {
tag="Success Stories"
testimonials={[
{
id: "1",
title: "Organized my entire job search in one place",
quote:
"I was juggling spreadsheets across three different devices. TrakApply consolidated everything. I could see my pipeline clearly, and that helped me stay motivated through 150+ applications. Landed an offer at my top choice company!",
name: "Sarah Chen",
role: "Recent CS Graduate",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=1",
imageAlt: "Sarah Chen",
},
id: "1", title: "Organized my entire job search in one place", quote:
"I was juggling spreadsheets across three different devices. TrakApply consolidated everything. I could see my pipeline clearly, and that helped me stay motivated through 150+ applications. Landed an offer at my top choice company!", name: "Sarah Chen", role: "Recent CS Graduate", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=1", imageAlt: "Sarah Chen"},
{
id: "2",
title: "Never missed a follow-up again",
quote:
"The follow-up reminders were a game-changer. I used to forget to check in on applications, which probably cost me opportunities. With TrakApply, I'm always on top of my pipeline and more professional in my outreach.",
name: "Marcus Johnson",
role: "Junior Software Engineer",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=1",
imageAlt: "Marcus Johnson",
},
id: "2", title: "Never missed a follow-up again", quote:
"The follow-up reminders were a game-changer. I used to forget to check in on applications, which probably cost me opportunities. With TrakApply's smart scheduling and notifications, I'm always on top of my pipeline and more professional in my outreach.", name: "Marcus Johnson", role: "Junior Software Engineer", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=1", imageAlt: "Marcus Johnson"},
{
id: "3",
title: "Perfect for managing multiple resume versions",
quote:
"I have different resumes for tech roles, product roles, and contract work. TrakApply made it so easy to tag and attach the right one to each application. No more accidental wrong resumes!",
name: "Priya Patel",
role: "Business Analyst",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-latina-wo-1772817320866-ff29c3e8.png?_wi=1",
imageAlt: "Priya Patel",
},
id: "3", title: "Perfect for managing multiple resume versions", quote:
"I have different resumes for tech roles, product roles, and contract work. TrakApply made it so easy to tag and attach the right one to each application. No more accidental wrong resumes!", name: "Priya Patel", role: "Business Analyst", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-latina-wo-1772817320866-ff29c3e8.png?_wi=1", imageAlt: "Priya Patel"},
{
id: "4",
title: "Tracked interviews and landed my offer",
quote:
"Having all my interview notes in one place helped me prepare better for final rounds. I could see patterns in what companies were asking and practiced accordingly. TrakApply helped me land a role at a FAANG company.",
name: "Alex Rivera",
role: "Product Manager",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-black-man-1772817320173-b3d4b6a2.png",
imageAlt: "Alex Rivera",
},
id: "4", title: "Tracked interviews and landed my offer", quote:
"Having all my interview notes in one place helped me prepare better for final rounds. I could see patterns in what companies were asking and practiced accordingly. TrakApply helped me land a role at a FAANG company.", name: "Alex Rivera", role: "Product Manager", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-black-man-1772817320173-b3d4b6a2.png", imageAlt: "Alex Rivera"},
{
id: "5",
title: "Reduced anxiety about my job search",
quote:
"When you're applying to 100+ jobs, it's easy to feel lost. TrakApply gave me visibility and control. Seeing my applications organized by status made the entire process feel manageable and less overwhelming.",
name: "Jessica Wong",
role: "Data Analyst",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=2",
imageAlt: "Jessica Wong",
},
id: "5", title: "Reduced anxiety about my job search", quote:
"When you're applying to 100+ jobs, it's easy to feel lost. TrakApply gave me visibility and control. Seeing my applications organized by status made the entire process feel manageable and less overwhelming.", name: "Jessica Wong", role: "Data Analyst", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-asian-wom-1772817320040-5d682b17.png?_wi=2", imageAlt: "Jessica Wong"},
{
id: "6",
title: "The support team really cares",
quote:
"I had questions about using TrakApply for my job search, and the support team responded within hours with helpful tips. It's clear they built this tool for students like us. Highly recommend!",
name: "Davin Kapoor",
role: "UX Designer",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=2",
imageAlt: "Davin Kapoor",
},
id: "6", title: "The support team really cares", quote:
"I had questions about using TrakApply for my job search, and the support team responded within hours with helpful tips. It's clear they built this tool for students like us. Highly recommend!", name: "Davin Kapoor", role: "UX Designer", imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/portrait-photograph-of-a-young-south-asi-1772817320275-4a65f547.png?_wi=2", imageAlt: "Davin Kapoor"},
]}
textboxLayout="default"
useInvertedBackground={false}
@@ -356,41 +260,23 @@ export default function HomePage() {
tag="Help Center"
faqs={[
{
id: "1",
title: "Can I import applications from LinkedIn?",
content:
"LinkedIn import is coming soon! We're currently building this feature to save you time. In the meantime, you can manually add applications or use our bulk import feature with a spreadsheet. Join our waitlist to be notified when LinkedIn import launches.",
},
id: "1", title: "How do follow-up reminders work?", content:
"TrakApply's intelligent follow-up system lets you schedule reminders for each application. You can set custom follow-up dates, receive smart notifications about overdue follow-ups, and track your outreach history. The system helps you stay proactive without overwhelming you with unnecessary alerts."},
{
id: "2",
title: "Is there a limit on the Free plan?",
content:
"Yes, the Free plan lets you track up to 10 applications, upload 1 resume, and access basic features. If you need unlimited applications and advanced features like interview tracking and follow-up reminders, upgrade to our Pro plan at $8/month. You can cancel anytime.",
},
id: "2", title: "Can I automate follow-up scheduling?", content:
"Yes! Pro plan users can set up automated follow-up schedules. Define follow-up intervals (e.g., follow up after 2 weeks if no response), and TrakApply will intelligently schedule reminders based on your application date. You can customize these rules for different companies or job types."},
{
id: "3",
title: "How do I migrate from my spreadsheet?",
content:
"We make it easy! You can export your spreadsheet as a CSV and use our bulk import tool to add all your applications at once. Each import takes just a few minutes. All your data will be organized into our pipeline view automatically.",
},
id: "3", title: "Can I import applications from LinkedIn?", content:
"LinkedIn import is coming soon! We're currently building this feature to save you time. In the meantime, you can manually add applications or use our bulk import feature with a spreadsheet. Join our waitlist to be notified when LinkedIn import launches."},
{
id: "4",
title: "Can I share my pipeline with friends?",
content:
"Currently, TrakApply is built for individual tracking. However, we're exploring team features for study groups and accountability partners. Sign up for our roadmap updates to see what's coming next.",
},
id: "4", title: "Is there a limit on the Free plan?", content:
"Yes, the Free plan lets you track up to 10 applications, upload 1 resume, and access basic follow-up reminders. If you need unlimited applications and advanced features like automated scheduling and interview tracking, upgrade to our Pro plan at $8/month. You can cancel anytime."},
{
id: "5",
title: "Is my data secure?",
content:
"Absolutely. We use industry-standard encryption for all data in transit and at rest. Your application data is private and only visible to you. We comply with GDPR and other privacy regulations. See our full Privacy Policy for details.",
},
id: "5", title: "How do I migrate from my spreadsheet?", content:
"We make it easy! You can export your spreadsheet as a CSV and use our bulk import tool to add all your applications at once. Each import takes just a few minutes. All your data will be organized into our pipeline view automatically, and your follow-up schedule will be ready to go."},
{
id: "6",
title: "What if I'm applying to more than 200 companies?",
content:
"TrakApply is built to handle large-scale job searches with 200+ applications. The Pro plan supports unlimited applications with full filtering, sorting, and analytics. Our platform scales with your job search effort.",
},
id: "6", title: "Is my data secure?", content:
"Absolutely. We use industry-standard encryption for all data in transit and at rest. Your application data and follow-up history are private and only visible to you. We comply with GDPR and other privacy regulations. See our full Privacy Policy for details."},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/close-up-view-of-a-job-application-track-1772817323264-cf3f792d.png?_wi=2"
imageAlt="TrakApply FAQ section"
@@ -403,6 +289,57 @@ export default function HomePage() {
/>
</div>
<div id="follow-ups" data-section="follow-ups">
<div className="mx-auto px-4 md:px-6 py-16 md:py-24 lg:py-32">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12">
<div className="md:col-span-4 flex flex-col items-center md:items-start">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-[#0e3a29] to-[#35c18b] flex items-center justify-center mb-4">
<Calendar className="w-6 h-6 text-[#fffefe]" />
</div>
<h3 className="text-xl md:text-2xl font-extrabold text-[#080908] mb-2">
Advanced Follow-Up Management
</h3>
<p className="text-base text-[#080908]/70 mb-6">
Our intelligent follow-up system ensures you never miss an opportunity. Schedule reminders, automate your follow-up workflow, and track all your outreach in one place.
</p>
<Link
href="/follow-up-guide"
className="inline-flex items-center justify-center px-6 py-3 rounded-lg bg-gradient-to-r from-[#0e3a29] to-[#35c18b] text-[#fffefe] font-semibold hover:shadow-lg transition-shadow"
>
Learn More
</Link>
</div>
<div className="md:col-span-8 space-y-4">
{[
{
title: "What follow-up scheduling options are available?", content:
"You can schedule one-time reminders on specific dates, set recurring follow-ups at custom intervals, or use our smart scheduling to automatically suggest optimal follow-up times based on company response patterns. Pro users get access to all scheduling options."},
{
title: "How do I know when to follow up?", content:
"TrakApply recommends follow-up timing based on your application date and company typical response times. You can manually set follow-up dates or let our intelligent system suggest them. Overdue reminders ensure you never forget to reach out."},
{
title: "Can I track follow-up history for each application?", content:
"Yes! Every follow-up reminder, email, or message you log is tracked in the application history. You can see your complete outreach timeline, previous messages, and company responses all in one place for easy reference."},
].map((faq, idx) => (
<details
key={idx}
className="group border border-[#0e3a29]/20 rounded-lg p-4 cursor-pointer hover:bg-[#f6f7f4] transition-colors"
>
<summary className="flex items-center justify-between font-semibold text-[#080908]">
{faq.title}
<span className="transform group-open:rotate-180 transition-transform">
▼
</span>
</summary>
<p className="mt-4 text-[#080908]/70 text-sm">{faq.content}</p>
</details>
))}
</div>
</div>
</div>
</div>
<div id="contact" data-section="contact">
<div className="mx-auto px-4 md:px-6 py-16 md:py-24 lg:py-32">
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12">
@@ -427,20 +364,14 @@ export default function HomePage() {
<div className="md:col-span-8 space-y-4">
{[
{
title: "What's your typical response time?",
content:
"Free plan users can expect responses within 24-48 hours. Pro plan users get priority support with response times typically within 2-4 hours during business hours.",
},
title: "What's your typical response time?", content:
"Free plan users can expect responses within 24-48 hours. Pro plan users get priority support with response times typically within 2-4 hours during business hours."},
{
title: "Do you offer onboarding assistance?",
content:
"Yes! We offer guided onboarding tours, video tutorials, and email templates to help you get started. Pro plan users also get access to our weekly office hours for personalized advice.",
},
title: "Do you offer onboarding assistance?", content:
"Yes! We offer guided onboarding tours, video tutorials, and email templates to help you get started. Pro plan users also get access to our weekly office hours for personalized advice on follow-up strategies."},
{
title: "Can I request new features?",
content:
"Absolutely! We love hearing from students about features they'd find useful. Visit our Feature Request page to suggest new features and vote on community requests.",
},
title: "Can I request new features?", content:
"Absolutely! We love hearing from students about features they'd find useful. Visit our Feature Request page to suggest new features and vote on community requests."},
].map((faq, idx) => (
<details
key={idx}

270
src/app/signin/page.tsx Normal file
View File

@@ -0,0 +1,270 @@
"use client";
import Link from "next/link";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Mail, Github, Linkedin, Eye, EyeOff } from "lucide-react";
export default function SignInPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
{ name: "Sign In", id: "/signin" },
{ name: "Sign Up", id: "/signup" },
];
const footerColumns = [
{
items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Applications", href: "/applications" },
{ label: "Interview Prep", href: "/interview-prep" },
{ label: "Settings", href: "/settings" },
],
},
{
items: [
{ label: "Pricing", href: "/pricing" },
{ label: "Features", href: "#features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Support", href: "/support" },
{ label: "Status", href: "https://status.trakapply.com" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com/trakapply" },
{ label: "LinkedIn", href: "https://linkedin.com/company/trakapply" },
{ label: "Instagram", href: "https://instagram.com/trakapply" },
{ label: "Discord", href: "https://discord.gg/trakapply" },
],
},
];
const [showPassword, setShowPassword] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
const [loading, setLoading] = useState(false);
const validateEmail = (value: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(value);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newErrors: { email?: string; password?: string } = {};
if (!email.trim()) {
newErrors.email = "Email is required";
} else if (!validateEmail(email)) {
newErrors.email = "Please enter a valid email";
}
if (!password.trim()) {
newErrors.password = "Password is required";
} else if (password.length < 6) {
newErrors.password = "Password must be at least 6 characters";
}
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
setLoading(true);
setTimeout(() => {
setLoading(false);
console.log("Sign in submitted", { email, password });
}, 1500);
}
};
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Sign Up Free", href: "/signup" }}
brandName="TrakApply"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Welcome Back"
description="Sign in to your TrakApply account to access your job application dashboard and continue your journey to landing your dream job."
buttons={[
{ text: "Start Free", href: "/signup" },
{ text: "Back to Home", href: "/" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png?_wi=1"
imageAlt="TrakApply Sign In"
showDimOverlay={true}
buttonAnimation="slide-up"
ariaLabel="TrakApply sign in hero section"
/>
</div>
<div className="w-full py-16 md:py-24 lg:py-32">
<div className="mx-auto px-4 md:px-6 max-w-md">
<div className="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
<h2 className="text-2xl md:text-3xl font-extrabold text-center mb-2 text-gray-900">
Sign In
</h2>
<p className="text-center text-gray-600 mb-8">
Access your TrakApply dashboard
</p>
{/* OAuth Options */}
<div className="space-y-3 mb-6">
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Mail className="w-5 h-5" />
Continue with Google
</button>
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Github className="w-5 h-5" />
Continue with GitHub
</button>
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Linkedin className="w-5 h-5" />
Continue with LinkedIn
</button>
</div>
{/* Divider */}
<div className="relative mb-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or continue with email</span>
</div>
</div>
{/* Email/Password Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
if (errors.email) setErrors({ ...errors, email: undefined });
}}
placeholder="you@example.com"
className={`w-full px-4 py-3 rounded-lg border ${
errors.email ? "border-red-500" : "border-gray-300"
} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
/>
{errors.email && (
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
)}
</div>
<div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2">
Password
</label>
<div className="relative">
<input
type={showPassword ? "text" : "password"}
id="password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
if (errors.password) setErrors({ ...errors, password: undefined });
}}
placeholder="Enter your password"
className={`w-full px-4 py-3 pr-12 rounded-lg border ${
errors.password ? "border-red-500" : "border-gray-300"
} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-3 text-gray-400 hover:text-gray-600"
>
{showPassword ? (
<EyeOff className="w-5 h-5" />
) : (
<Eye className="w-5 h-5" />
)}
</button>
</div>
{errors.password && (
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
)}
</div>
<div className="flex items-center justify-between">
<label className="flex items-center gap-2">
<input type="checkbox" className="rounded border-gray-300" />
<span className="text-sm text-gray-600">Remember me</span>
</label>
<Link href="#" className="text-sm text-blue-600 hover:text-blue-700 font-medium">
Forgot password?
</Link>
</div>
<button
type="submit"
disabled={loading}
className="w-full py-3 px-4 rounded-lg bg-gradient-to-r from-[#0e3a29] to-[#35c18b] text-white font-semibold hover:shadow-lg transition-shadow disabled:opacity-70"
>
{loading ? "Signing in..." : "Sign In"}
</button>
</form>
{/* Sign Up Link */}
<p className="text-center text-gray-600 mt-6">
Don't have an account?{" "}
<Link href="/signup" className="text-blue-600 hover:text-blue-700 font-semibold">
Create one
</Link>
</p>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis columns={footerColumns} logoText="TrakApply" />
</div>
</ThemeProvider>
);
}

382
src/app/signup/page.tsx Normal file
View File

@@ -0,0 +1,382 @@
"use client";
import Link from "next/link";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Mail, Github, Linkedin, Eye, EyeOff, Check } from "lucide-react";
export default function SignUpPage() {
const navItems = [
{ name: "Dashboard", id: "dashboard" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" },
{ name: "Sign In", id: "/signin" },
{ name: "Sign Up", id: "/signup" },
];
const footerColumns = [
{
items: [
{ label: "Dashboard", href: "/dashboard" },
{ label: "Applications", href: "/applications" },
{ label: "Interview Prep", href: "/interview-prep" },
{ label: "Settings", href: "/settings" },
],
},
{
items: [
{ label: "Pricing", href: "/pricing" },
{ label: "Features", href: "#features" },
{ label: "FAQ", href: "#faq" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "About Us", href: "/about" },
{ label: "Contact", href: "/contact" },
{ label: "Support", href: "/support" },
{ label: "Status", href: "https://status.trakapply.com" },
],
},
{
items: [
{ label: "Privacy Policy", href: "/privacy" },
{ label: "Terms of Service", href: "/terms" },
{ label: "Cookie Policy", href: "/cookies" },
{ label: "Accessibility", href: "/accessibility" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com/trakapply" },
{ label: "LinkedIn", href: "https://linkedin.com/company/trakapply" },
{ label: "Instagram", href: "https://instagram.com/trakapply" },
{ label: "Discord", href: "https://discord.gg/trakapply" },
],
},
];
const [showPassword, setShowPassword] = useState(false);
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [acceptTerms, setAcceptTerms] = useState(false);
const [errors, setErrors] = useState<{
name?: string;
email?: string;
password?: string;
terms?: string;
}>({});
const [loading, setLoading] = useState(false);
const validateEmail = (value: string) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(value);
};
const validatePassword = (value: string) => {
return (
value.length >= 8 &&
/[A-Z]/.test(value) &&
/[a-z]/.test(value) &&
/[0-9]/.test(value)
);
};
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
const newErrors: {
name?: string;
email?: string;
password?: string;
terms?: string;
} = {};
if (!name.trim()) {
newErrors.name = "Name is required";
} else if (name.trim().length < 2) {
newErrors.name = "Name must be at least 2 characters";
}
if (!email.trim()) {
newErrors.email = "Email is required";
} else if (!validateEmail(email)) {
newErrors.email = "Please enter a valid email";
}
if (!password.trim()) {
newErrors.password = "Password is required";
} else if (!validatePassword(password)) {
newErrors.password =
"Password must be 8+ characters with uppercase, lowercase, and numbers";
}
if (!acceptTerms) {
newErrors.terms = "You must accept the terms and conditions";
}
setErrors(newErrors);
if (Object.keys(newErrors).length === 0) {
setLoading(true);
setTimeout(() => {
setLoading(false);
console.log("Sign up submitted", { name, email, password, acceptTerms });
}, 1500);
}
};
const passwordStrength = {
length: password.length >= 8,
uppercase: /[A-Z]/.test(password),
lowercase: /[a-z]/.test(password),
numbers: /[0-9]/.test(password),
};
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={navItems}
button={{ text: "Sign In", href: "/signin" }}
brandName="TrakApply"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Join TrakApply"
description="Start your free account today and take control of your job search. Track applications, manage follow-ups, and land your dream job with TrakApply."
buttons={[
{ text: "Get Started", href: "/signup" },
{ text: "Back to Home", href: "/" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aa4DjH4nqtvm1RVk8EeBf92VBo/a-modern-job-application-tracking-dashbo-1772817322817-dd6e3967.png?_wi=1"
imageAlt="TrakApply Sign Up"
showDimOverlay={true}
buttonAnimation="slide-up"
ariaLabel="TrakApply sign up hero section"
/>
</div>
<div className="w-full py-16 md:py-24 lg:py-32">
<div className="mx-auto px-4 md:px-6 max-w-md">
<div className="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
<h2 className="text-2xl md:text-3xl font-extrabold text-center mb-2 text-gray-900">
Create Account
</h2>
<p className="text-center text-gray-600 mb-8">
Join thousands of students tracking their job search
</p>
{/* OAuth Options */}
<div className="space-y-3 mb-6">
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Mail className="w-5 h-5" />
Sign up with Google
</button>
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Github className="w-5 h-5" />
Sign up with GitHub
</button>
<button className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors font-medium text-gray-700">
<Linkedin className="w-5 h-5" />
Sign up with LinkedIn
</button>
</div>
{/* Divider */}
<div className="relative mb-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-300"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-white text-gray-500">Or sign up with email</span>
</div>
</div>
{/* Email/Password Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-semibold text-gray-700 mb-2">
Full Name
</label>
<input
type="text"
id="name"
value={name}
onChange={(e) => {
setName(e.target.value);
if (errors.name) setErrors({ ...errors, name: undefined });
}}
placeholder="John Doe"
className={`w-full px-4 py-3 rounded-lg border ${
errors.name ? "border-red-500" : "border-gray-300"
} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
/>
{errors.name && (
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
)}
</div>
<div>
<label htmlFor="email" className="block text-sm font-semibold text-gray-700 mb-2">
Email Address
</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
if (errors.email) setErrors({ ...errors, email: undefined });
}}
placeholder="you@example.com"
className={`w-full px-4 py-3 rounded-lg border ${
errors.email ? "border-red-500" : "border-gray-300"
} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
/>
{errors.email && (
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
)}
</div>
<div>
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2">
Password
</label>
<div className="relative">
<input
type={showPassword ? "text" : "password"}
id="password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
if (errors.password) setErrors({ ...errors, password: undefined });
}}
placeholder="Create a strong password"
className={`w-full px-4 py-3 pr-12 rounded-lg border ${
errors.password ? "border-red-500" : "border-gray-300"
} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-3 text-gray-400 hover:text-gray-600"
>
{showPassword ? (
<EyeOff className="w-5 h-5" />
) : (
<Eye className="w-5 h-5" />
)}
</button>
</div>
{errors.password && (
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
)}
{/* Password Strength Indicator */}
{password && (
<div className="mt-3 space-y-2">
<p className="text-xs font-semibold text-gray-600">Password strength:</p>
<div className="space-y-1">
{[
{ label: "8+ characters", check: passwordStrength.length },
{ label: "Uppercase letter", check: passwordStrength.uppercase },
{ label: "Lowercase letter", check: passwordStrength.lowercase },
{ label: "Number", check: passwordStrength.numbers },
].map((item, idx) => (
<div key={idx} className="flex items-center gap-2">
<div
className={`w-4 h-4 rounded flex items-center justify-center ${
item.check ? "bg-green-100" : "bg-gray-100"
}`}
>
{item.check && (
<Check className="w-3 h-3 text-green-600" />
)}
</div>
<span
className={`text-xs ${
item.check ? "text-green-600" : "text-gray-500"
}`}
>
{item.label}
</span>
</div>
))}
</div>
</div>
)}
</div>
<div>
<label className="flex items-start gap-2">
<input
type="checkbox"
checked={acceptTerms}
onChange={(e) => {
setAcceptTerms(e.target.checked);
if (errors.terms) setErrors({ ...errors, terms: undefined });
}}
className="mt-1 rounded border-gray-300"
/>
<span className="text-sm text-gray-600">
I agree to the{" "}
<Link href="/terms" className="text-blue-600 hover:text-blue-700 font-medium">
Terms of Service
</Link>{" "}
and{" "}
<Link href="/privacy" className="text-blue-600 hover:text-blue-700 font-medium">
Privacy Policy
</Link>
</span>
</label>
{errors.terms && (
<p className="text-red-500 text-sm mt-1">{errors.terms}</p>
)}
</div>
<button
type="submit"
disabled={loading}
className="w-full py-3 px-4 rounded-lg bg-gradient-to-r from-[#0e3a29] to-[#35c18b] text-white font-semibold hover:shadow-lg transition-shadow disabled:opacity-70"
>
{loading ? "Creating account..." : "Create Account"}
</button>
</form>
{/* Sign In Link */}
<p className="text-center text-gray-600 mt-6">
Already have an account?{" "}
<Link href="/signin" className="text-blue-600 hover:text-blue-700 font-semibold">
Sign in
</Link>
</p>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis columns={footerColumns} logoText="TrakApply" />
</div>
</ThemeProvider>
);
}