Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #7.
This commit is contained in:
@@ -174,7 +174,7 @@ export default function AdminPage() {
|
||||
title: "Geographic Distribution", description: "Job seeker and employer locations worldwide", bentoComponent: "map"},
|
||||
{
|
||||
title: "Popular Job Categories", description: "Most sought-after job positions and skills", bentoComponent: "marquee", centerIcon: Activity,
|
||||
variant: "text", texts: [
|
||||
texts: [
|
||||
"Software Engineering", "Product Management", "Data Science", "UX Design", "Marketing", "Sales"],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -2,161 +2,43 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import CardStack from "@/components/cardStack/CardStack";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { CheckCircle, Clock, AlertCircle, Mail } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Users,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Activity,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Search Jobs", id: "search" },
|
||||
{ name: "Post a Job", id: "post-job" },
|
||||
{ name: "Admin", id: "admin-login" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Applications", id: "/applications" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Dashboard", id: "/admin" },
|
||||
{ name: "Jobs", id: "/admin#jobs" },
|
||||
{ name: "Users", id: "/admin#users" },
|
||||
{ name: "Moderation", id: "/admin#moderation" },
|
||||
{ name: "Analytics", id: "/admin#analytics" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Search Jobs", href: "/search" },
|
||||
{ label: "Post a Job", href: "/post-job" },
|
||||
{ label: "Browse by Province", href: "#provinces" },
|
||||
{ label: "For Employers", href: "#" },
|
||||
title: "Admin", items: [
|
||||
{ label: "Dashboard", href: "/admin" },
|
||||
{ label: "Settings", href: "/admin#settings" },
|
||||
{ label: "Reports", href: "/admin#reports" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Jobee", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Help", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Documentation", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface Application {
|
||||
id: string;
|
||||
jobTitle: string;
|
||||
company: string;
|
||||
status: "pending" | "accepted" | "rejected" | "interviewing";
|
||||
appliedDate: string;
|
||||
lastUpdated: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default function ApplicationsPage() {
|
||||
const [applications] = useState<Application[]>([
|
||||
{
|
||||
id: "1", jobTitle: "Senior Frontend Developer", company: "Tech Innovations Amsterdam", status: "interviewing", appliedDate: "2025-01-10", lastUpdated: "2025-01-15", description:
|
||||
"You've been selected for the interview round. Check your email for scheduling details and prepare for a technical assessment."},
|
||||
{
|
||||
id: "2", jobTitle: "UX/UI Designer", company: "Creative Studio Rotterdam", status: "accepted", appliedDate: "2025-01-08", lastUpdated: "2025-01-16", description:
|
||||
"Congratulations! Your application has been accepted. Please review the job offer details and respond within 5 business days."},
|
||||
{
|
||||
id: "3", jobTitle: "Data Analyst", company: "Analytics Corp Utrecht", status: "pending", appliedDate: "2025-01-12", lastUpdated: "2025-01-12", description:
|
||||
"Your application is being reviewed by the hiring team. You'll receive an update within 7-10 business days."},
|
||||
{
|
||||
id: "4", jobTitle: "Marketing Manager", company: "Brand Solutions Hague", status: "rejected", appliedDate: "2025-01-05", lastUpdated: "2025-01-14", description:
|
||||
"Thank you for your application. We've decided to move forward with other candidates but encourage you to apply for future opportunities."},
|
||||
{
|
||||
id: "5", jobTitle: "Full Stack Developer", company: "Web Tech Solutions", status: "interviewing", appliedDate: "2025-01-11", lastUpdated: "2025-01-16", description:
|
||||
"First round interview scheduled for January 20, 2025 at 14:00 CET. Confirmation link sent to your email."},
|
||||
{
|
||||
id: "6", jobTitle: "Content Writer", company: "Digital Media Groningen", status: "pending", appliedDate: "2025-01-13", lastUpdated: "2025-01-13", description:
|
||||
"Your portfolio and writing samples are being evaluated. We'll contact you soon with next steps."},
|
||||
]);
|
||||
|
||||
const getStatusIcon = (status: string) => {
|
||||
switch (status) {
|
||||
case "accepted":
|
||||
return CheckCircle;
|
||||
case "interviewing":
|
||||
return Clock;
|
||||
case "rejected":
|
||||
return AlertCircle;
|
||||
default:
|
||||
return Clock;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string): string => {
|
||||
switch (status) {
|
||||
case "accepted":
|
||||
return "success";
|
||||
case "interviewing":
|
||||
return "info";
|
||||
case "rejected":
|
||||
return "error";
|
||||
default:
|
||||
return "warning";
|
||||
}
|
||||
};
|
||||
|
||||
const applicationCards = applications.map((app) => (
|
||||
<div
|
||||
key={app.id}
|
||||
className="p-6 rounded-lg border border-border bg-card hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-1">
|
||||
{app.jobTitle}
|
||||
</h3>
|
||||
<p className="text-sm text-foreground/70 mb-3">{app.company}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusIcon(app.status) &&
|
||||
(() => {
|
||||
const Icon = getStatusIcon(app.status);
|
||||
return (
|
||||
<Icon
|
||||
className="w-5 h-5"
|
||||
style={{
|
||||
color:
|
||||
app.status === "accepted"
|
||||
? "#10b981"
|
||||
: app.status === "rejected"
|
||||
? "#ef4444"
|
||||
: app.status === "interviewing"
|
||||
? "#3b82f6"
|
||||
: "#f59e0b"}}
|
||||
/>
|
||||
);
|
||||
})()}
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium capitalize ${
|
||||
app.status === "accepted"
|
||||
? "bg-green-100 text-green-800"
|
||||
: app.status === "rejected"
|
||||
? "bg-red-100 text-red-800"
|
||||
: app.status === "interviewing"
|
||||
? "bg-blue-100 text-blue-800"
|
||||
: "bg-amber-100 text-amber-800"
|
||||
}`}
|
||||
>
|
||||
{app.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/60 mb-4">{app.description}</p>
|
||||
<div className="flex justify-between text-xs text-foreground/50 pt-4 border-t border-border/30">
|
||||
<span>Applied: {new Date(app.appliedDate).toLocaleDateString()}</span>
|
||||
<span>Updated: {new Date(app.lastUpdated).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
@@ -172,125 +54,67 @@ export default function ApplicationsPage() {
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Jobee"
|
||||
brandName="Jobee Admin"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Post a Job", href: "/post-job"}}
|
||||
text: "Logout", onClick: () => console.log("logout"),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero" className="py-20">
|
||||
<FeatureCardEight
|
||||
title="Your Job Applications"
|
||||
description="Track the status of all your job applications, monitor interview schedules, and manage your career journey in one place."
|
||||
tag="Application Tracker"
|
||||
tagAnimation="slide-up"
|
||||
<div id="applications" data-section="applications" className="pt-20">
|
||||
<MetricCardTen
|
||||
title="Job Management"
|
||||
description="Monitor and manage all job postings across the platform"
|
||||
tag="Active Jobs"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Real-Time Status Updates", description:
|
||||
"Get instant notifications when employers review or respond to your applications. Never miss an important update.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1", imageAlt: "Real-time notifications"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Interview Management", description:
|
||||
"Keep track of interview dates, times, and preparation materials. Get reminders so you never miss an interview opportunity.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1", imageAlt: "Interview scheduler"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Application Analytics", description:
|
||||
"View detailed insights about your application success rate, response times, and which job types get the most attention.", imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1", imageAlt: "Analytics dashboard"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Personalized Recommendations", description:
|
||||
"Based on your applications and preferences, get tailored job suggestions that match your skills and career goals.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1", imageAlt: "Personalized recommendations"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Browse More Jobs", href: "/search"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="applications" data-section="applications" className="py-20">
|
||||
<CardStack
|
||||
title="Your Active Applications"
|
||||
description="Manage and track all your job applications in one convenient dashboard. Click on any application to view details and take action."
|
||||
tag="Application Management"
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
mode="buttons"
|
||||
carouselThreshold={5}
|
||||
>
|
||||
{applicationCards}
|
||||
</CardStack>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats" className="py-20">
|
||||
<FeatureCardEight
|
||||
title="Application Statistics"
|
||||
description="Monitor your application metrics and track your job search progress over time."
|
||||
tag="Your Progress"
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
metrics={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Total Applications", description: `You've submitted ${applications.length} applications across various positions and companies in the Netherlands.`,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1", imageAlt: "Total applications"},
|
||||
id: "1", title: "Senior Software Engineer, Backend", subtitle: "Amsterdam, Netherlands · Full-time · Remote eligible", category: "Engineering", value: "Posted 2 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Response Rate", description: `${Math.round((applications.filter((a) => a.status !== "pending").length / applications.length) * 100)}% of your applications have received responses from employers.`,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1", imageAlt: "Response rate"},
|
||||
id: "2", title: "Product Manager, Enterprise", subtitle: "Rotterdam, Netherlands · Full-time", category: "Product", value: "Posted 5 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Interviews Scheduled", description: `You have ${applications.filter((a) => a.status === "interviewing").length} interviews currently in the process or scheduled. Prepare and shine!",`,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1", imageAlt: "Interviews"},
|
||||
id: "3", title: "UX Designer, B2B", subtitle: "Utrecht, Netherlands · Full-time", category: "Design", value: "Posted 1 week ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Success Stories", description: `Congratulations! You have ${applications.filter((a) => a.status === "accepted").length} job offers. Review and respond to secure your next opportunity!`,
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1", imageAlt: "Accepted offers"},
|
||||
id: "4", title: "Data Scientist, ML Platform", subtitle: "Remote · Full-time", category: "Data", value: "Posted 10 days ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "5", title: "DevOps Engineer, Infrastructure", subtitle: "Amsterdam, Netherlands · Full-time · Remote", category: "Infrastructure", value: "Posted 3 weeks ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "6", title: "Marketing Manager, Growth", subtitle: "The Hague, Netherlands · Full-time", category: "Marketing", value: "Posted 1 month ago", buttons: [
|
||||
{ text: "View", href: "#" },
|
||||
{ text: "Manage", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Continue Searching", href: "/search"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Need Help?"
|
||||
title="Stay in Touch with Your Job Search"
|
||||
description="Get personalized job recommendations and career advice delivered to your inbox. Subscribe to stay updated on new opportunities."
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
background={{
|
||||
variant: "animated-grid"}}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Enter your email address"
|
||||
buttonText="Subscribe"
|
||||
termsText="We'll send you job recommendations and updates relevant to your applications. Unsubscribe anytime."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Jobee"
|
||||
copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
|
||||
logoText="Jobee Admin"
|
||||
copyrightText="© 2025 Jobee Admin Portal"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -2,136 +2,70 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Briefcase, Sparkles } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Dashboard", id: "/" },
|
||||
{ name: "Browse Jobs", id: "/search" },
|
||||
{ name: "My Applications", id: "/applications" },
|
||||
{ name: "Settings", id: "#settings" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Browse Jobs", href: "/search" },
|
||||
{ label: "Companies", href: "#" },
|
||||
{ label: "For Employers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function ApplyPage() {
|
||||
const navItems = [
|
||||
{ name: "Search Jobs", id: "search" },
|
||||
{ name: "Post a Job", id: "post-job" },
|
||||
{ name: "Admin", id: "admin-login" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Search Jobs", href: "/search" },
|
||||
{ label: "Post a Job", href: "/post-job" },
|
||||
{ label: "Browse by Province", href: "#provinces" },
|
||||
{ label: "For Employers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Jobee", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Post a Job", href: "/post-job" }}
|
||||
brandName="Jobee"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Sign In", onClick: () => console.log("sign-in"),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Complete Your Profile", description:
|
||||
"Upload your resume, add a professional photo, and complete your profile information. Make a great first impression with employers.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=5", imageAlt: "Profile completion step"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Submit Your Application", description:
|
||||
"Choose your desired position and submit your application with a personalized cover letter. It takes just minutes.", imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=5", imageAlt: "Application submission process"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Track and Communicate", description:
|
||||
"Monitor your application status in real-time and communicate directly with employers through our messaging system.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=6", imageAlt: "Application tracking dashboard"},
|
||||
]}
|
||||
title="Apply to Jobs in Three Steps"
|
||||
description="Streamlined application process designed to help you land your dream job in the Netherlands."
|
||||
tag="Easy Application"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Find Jobs Now", href: "/search" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah van der Berg", role: "Software Developer", testimonial:
|
||||
"I found my perfect job within 2 weeks using Jobee. The search filters made it easy to find remote opportunities in Amsterdam that matched my skill set.", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg?_wi=2", imageAlt: "Sarah van der Berg"},
|
||||
{
|
||||
id: "2", name: "Emma Dijkstra", role: "Marketing Specialist", testimonial:
|
||||
"The application process on Jobee is so smooth. I applied for 5 positions and received 3 interview invitations within a week. Highly recommended!", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=2", imageAlt: "Emma Dijkstra"},
|
||||
{
|
||||
id: "3", name: "Michael Houtstra", role: "Finance Director", testimonial:
|
||||
"The platform's transparency about job requirements and company culture helped me find a role that was truly the right fit. Great experience!", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg?_wi=2", imageAlt: "Michael Houtstra"},
|
||||
{
|
||||
id: "4", name: "Lisa Bertrand", role: "UX Designer", testimonial:
|
||||
"Jobee's application tracking feature is excellent. I always knew exactly where I stood with each employer. Best job search experience yet!", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9543.jpg?_wi=2", imageAlt: "Lisa Bertrand"},
|
||||
]}
|
||||
title="Success Stories from Our Job Seekers"
|
||||
description="Real experiences from candidates who found their dream jobs through Jobee."
|
||||
tag="User Testimonials"
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
<div id="apply" data-section="apply" className="py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Job Application Form</h1>
|
||||
<p className="text-lg text-gray-600">Complete your profile to apply for this position</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="Jobee"
|
||||
copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
|
||||
copyrightText="© 2025 Jobee"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,132 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { Search, MapPin, DollarSign, Briefcase, ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Search Jobs", id: "/search" },
|
||||
{ name: "Post a Job", id: "post-job" },
|
||||
{ name: "Admin", id: "admin-login" },
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Dashboard", id: "/" },
|
||||
{ name: "Browse Jobs", id: "/search" },
|
||||
{ name: "My Applications", id: "/applications" },
|
||||
{ name: "Settings", id: "#settings" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Search Jobs", href: "/search" },
|
||||
{ label: "Post a Job", href: "/post-job" },
|
||||
{ label: "Browse by Province", href: "#provinces" },
|
||||
{ label: "Browse Jobs", href: "/search" },
|
||||
{ label: "Companies", href: "#" },
|
||||
{ label: "For Employers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Jobee", href: "#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "About", href: "#" },
|
||||
{ label: "Blog", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "FAQ", href: "#" },
|
||||
{ label: "Support", href: "#" },
|
||||
{ label: "Contact", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface Job {
|
||||
id: string;
|
||||
title: string;
|
||||
company: string;
|
||||
location: string;
|
||||
province: string;
|
||||
salary: string;
|
||||
type: string;
|
||||
category: string;
|
||||
description: string;
|
||||
posted: string;
|
||||
}
|
||||
|
||||
const mockJobs: Job[] = [
|
||||
{
|
||||
id: "1", title: "Senior Software Engineer", company: "TechFlow Solutions", location: "Amsterdam", province: "North Holland", salary: "€80,000 - €120,000", type: "Full-time", category: "Technology", description: "We are looking for an experienced software engineer to join our growing team.", posted: "2 days ago"},
|
||||
{
|
||||
id: "2", title: "UX/UI Designer", company: "Creative Studio", location: "Rotterdam", province: "South Holland", salary: "€50,000 - €75,000", type: "Full-time", category: "Design", description: "Join our design team to create beautiful and intuitive user experiences.", posted: "1 day ago"},
|
||||
{
|
||||
id: "3", title: "Marketing Manager", company: "Global Marketing Inc", location: "Utrecht", province: "Utrecht", salary: "€60,000 - €85,000", type: "Full-time", category: "Marketing", description: "Lead our marketing initiatives and strategy for European markets.", posted: "3 days ago"},
|
||||
{
|
||||
id: "4", title: "Data Analyst", company: "DataViz Corp", location: "Amsterdam", province: "North Holland", salary: "€55,000 - €80,000", type: "Full-time", category: "Technology", description: "Analyze complex datasets and create actionable insights for stakeholders.", posted: "1 week ago"},
|
||||
{
|
||||
id: "5", title: "Sales Representative", company: "SalesForce Pro", location: "Groningen", province: "Groningen", salary: "€45,000 - €65,000", type: "Full-time", category: "Sales", description: "Build relationships with clients and close deals in the B2B tech sector.", posted: "4 days ago"},
|
||||
{
|
||||
id: "6", title: "Product Manager", company: "Innovation Labs", location: "Amsterdam", province: "North Holland", salary: "€75,000 - €110,000", type: "Full-time", category: "Technology", description: "Define product strategy and lead cross-functional teams.", posted: "5 days ago"},
|
||||
{
|
||||
id: "7", title: "HR Specialist", company: "People First", location: "The Hague", province: "South Holland", salary: "€40,000 - €60,000", type: "Part-time", category: "Human Resources", description: "Support recruitment, onboarding, and employee development.", posted: "6 days ago"},
|
||||
{
|
||||
id: "8", title: "Backend Developer", company: "Cloud Systems", location: "Amsterdam", province: "North Holland", salary: "€70,000 - €100,000", type: "Full-time", category: "Technology", description: "Develop scalable backend systems and APIs using modern technologies.", posted: "2 weeks ago"},
|
||||
{
|
||||
id: "9", title: "Content Writer", company: "Content Creators", location: "Utrecht", province: "Utrecht", salary: "€35,000 - €50,000", type: "Full-time", category: "Marketing", description: "Create engaging content for blogs, social media, and marketing campaigns.", posted: "3 days ago"},
|
||||
{
|
||||
id: "10", title: "DevOps Engineer", company: "Infrastructure Pro", location: "Amsterdam", province: "North Holland", salary: "€65,000 - €95,000", type: "Full-time", category: "Technology", description: "Maintain and optimize cloud infrastructure and CI/CD pipelines.", posted: "1 week ago"},
|
||||
{
|
||||
id: "11", title: "Financial Analyst", company: "Finance Solutions", location: "Amsterdam", province: "North Holland", salary: "€55,000 - €80,000", type: "Full-time", category: "Finance", description: "Analyze financial data and provide insights for investment decisions.", posted: "4 days ago"},
|
||||
{
|
||||
id: "12", title: "Customer Support Manager", company: "Support Hub", location: "Leiden", province: "South Holland", salary: "€45,000 - €65,000", type: "Full-time", category: "Customer Service", description: "Lead and manage customer support team to ensure excellent service quality.", posted: "5 days ago"},
|
||||
];
|
||||
|
||||
const provinces = [
|
||||
"North Holland", "South Holland", "Utrecht", "Groningen", "The Hague", "Friesland", "Drenthe", "Flevoland", "Overijssel", "Gelderland", "Limburg", "North Brabant"];
|
||||
|
||||
const categories = ["Technology", "Design", "Marketing", "Sales", "Human Resources", "Finance", "Customer Service"];
|
||||
const jobTypes = ["Full-time", "Part-time", "Contract", "Freelance"];
|
||||
|
||||
export default function SearchPage() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [selectedProvinces, setSelectedProvinces] = useState<string[]>([]);
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
|
||||
const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 6;
|
||||
|
||||
const filteredJobs = useMemo(() => {
|
||||
return mockJobs.filter((job) => {
|
||||
const matchesQuery =
|
||||
searchQuery === "" ||
|
||||
job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
job.company.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
job.description.toLowerCase().includes(searchQuery.toLowerCase());
|
||||
|
||||
const matchesProvince =
|
||||
selectedProvinces.length === 0 || selectedProvinces.includes(job.province);
|
||||
|
||||
const matchesCategory =
|
||||
selectedCategories.length === 0 || selectedCategories.includes(job.category);
|
||||
|
||||
const matchesType = selectedTypes.length === 0 || selectedTypes.includes(job.type);
|
||||
|
||||
return matchesQuery && matchesProvince && matchesCategory && matchesType;
|
||||
});
|
||||
}, [searchQuery, selectedProvinces, selectedCategories, selectedTypes]);
|
||||
|
||||
const totalPages = Math.ceil(filteredJobs.length / itemsPerPage);
|
||||
const paginatedJobs = filteredJobs.slice(
|
||||
(currentPage - 1) * itemsPerPage,
|
||||
currentPage * itemsPerPage
|
||||
);
|
||||
|
||||
const toggleFilter = (value: string, setter: Function, state: string[]) => {
|
||||
if (state.includes(value)) {
|
||||
setter(state.filter((item) => item !== value));
|
||||
} else {
|
||||
setter([...state, value]);
|
||||
}
|
||||
const handleSearch = (callback: () => void) => {
|
||||
callback();
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -134,255 +41,62 @@ export default function SearchPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Jobee"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Post a Job", href: "/post-job"}}
|
||||
text: "Sign In", onClick: () => console.log("sign-in"),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-950 dark:to-slate-900 pt-20 pb-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Search Header */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Find Your Dream Job
|
||||
</h1>
|
||||
<p className="text-lg text-slate-600 dark:text-slate-300 mb-8">
|
||||
Browse thousands of opportunities across all Dutch provinces
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
|
||||
<div id="search" data-section="search" className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl font-bold mb-4 text-center">Find Your Dream Job</h1>
|
||||
<p className="text-lg text-gray-600 text-center mb-8">Search across all job listings in the Netherlands</p>
|
||||
|
||||
<div className="max-w-2xl mx-auto mb-12">
|
||||
<div className="flex gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by job title, company, or keyword..."
|
||||
placeholder="Search jobs..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full pl-12 pr-4 py-3 rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleSearch(() => console.log("Searching for:", searchQuery))}
|
||||
className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
{/* Filters Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="sticky top-24 space-y-6 bg-white dark:bg-slate-800 p-6 rounded-lg border border-slate-200 dark:border-slate-700">
|
||||
<div>
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
|
||||
Provinces
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{provinces.map((province) => (
|
||||
<label key={province} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedProvinces.includes(province)}
|
||||
onChange={() =>
|
||||
toggleFilter(province, setSelectedProvinces, selectedProvinces)
|
||||
}
|
||||
className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-slate-700 dark:text-slate-300">
|
||||
{province}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
|
||||
Category
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{categories.map((category) => (
|
||||
<label key={category} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedCategories.includes(category)}
|
||||
onChange={() =>
|
||||
toggleFilter(category, setSelectedCategories, selectedCategories)
|
||||
}
|
||||
className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-slate-700 dark:text-slate-300">
|
||||
{category}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200 dark:border-slate-700 pt-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-white mb-3 text-sm uppercase tracking-wide">
|
||||
Job Type
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{jobTypes.map((type) => (
|
||||
<label key={type} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedTypes.includes(type)}
|
||||
onChange={() => toggleFilter(type, setSelectedTypes, selectedTypes)}
|
||||
className="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-slate-700 dark:text-slate-300">
|
||||
{type}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clear Filters */}
|
||||
{(selectedProvinces.length > 0 ||
|
||||
selectedCategories.length > 0 ||
|
||||
selectedTypes.length > 0) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedProvinces([]);
|
||||
setSelectedCategories([]);
|
||||
setSelectedTypes([]);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="w-full py-2 px-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
|
||||
<h3 className="text-xl font-semibold mb-2">Senior Software Engineer</h3>
|
||||
<p className="text-gray-600 mb-4">Amsterdam, Netherlands · Full-time</p>
|
||||
<p className="text-sm text-gray-500">Posted 2 days ago</p>
|
||||
</div>
|
||||
|
||||
{/* Job Listings */}
|
||||
<div className="lg:col-span-3">
|
||||
{/* Results Count */}
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||
Showing {paginatedJobs.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0} to{" "}
|
||||
{Math.min(currentPage * itemsPerPage, filteredJobs.length)} of{" "}
|
||||
<span className="font-semibold text-slate-900 dark:text-white">
|
||||
{filteredJobs.length}
|
||||
</span>{" "}
|
||||
jobs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Job Cards Grid */}
|
||||
{paginatedJobs.length > 0 ? (
|
||||
<div className="grid gap-4 mb-8">
|
||||
{paginatedJobs.map((job) => (
|
||||
<div
|
||||
key={job.id}
|
||||
className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-6 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-300 cursor-pointer group"
|
||||
>
|
||||
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||
{job.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mt-1">
|
||||
{job.company}
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs font-medium rounded-full whitespace-nowrap">
|
||||
{job.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-slate-600 dark:text-slate-400 mb-4 line-clamp-2">
|
||||
{job.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-3 text-sm">
|
||||
<div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>{job.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{job.salary}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-slate-600 dark:text-slate-400">
|
||||
<Briefcase className="w-4 h-4" />
|
||||
<span>{job.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right text-xs text-slate-500 dark:text-slate-500 whitespace-nowrap">
|
||||
<p>{job.posted}</p>
|
||||
<button className="mt-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-2">
|
||||
No jobs found matching your criteria.
|
||||
</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">
|
||||
Try adjusting your filters or search query.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="p-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
|
||||
<button
|
||||
key={page}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
className={`w-10 h-10 rounded-lg font-medium transition-colors ${
|
||||
currentPage === page
|
||||
? "bg-blue-600 text-white"
|
||||
: "border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700"
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="p-2 rounded-lg border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
|
||||
<h3 className="text-xl font-semibold mb-2">Product Manager</h3>
|
||||
<p className="text-gray-600 mb-4">Rotterdam, Netherlands · Full-time</p>
|
||||
<p className="text-sm text-gray-500">Posted 5 days ago</p>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
|
||||
<h3 className="text-xl font-semibold mb-2">UX Designer</h3>
|
||||
<p className="text-gray-600 mb-4">Utrecht, Netherlands · Full-time</p>
|
||||
<p className="text-sm text-gray-500">Posted 1 week ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -391,7 +105,7 @@ export default function SearchPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Jobee"
|
||||
copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
|
||||
copyrightText="© 2025 Jobee"
|
||||
columns={footerColumns}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,118 +1,38 @@
|
||||
import { useEffect, useState, useRef, RefObject } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
const ANIMATION_SPEED = 0.05;
|
||||
const ROTATION_SPEED = 0.1;
|
||||
const MOUSE_MULTIPLIER = 0.5;
|
||||
const ROTATION_MULTIPLIER = 0.25;
|
||||
|
||||
interface UseDepth3DAnimationProps {
|
||||
itemRefs: RefObject<(HTMLElement | null)[]>;
|
||||
containerRef: RefObject<HTMLDivElement | null>;
|
||||
perspectiveRef?: RefObject<HTMLDivElement | null>;
|
||||
isEnabled: boolean;
|
||||
interface Depth3DTransform {
|
||||
transform: string;
|
||||
opacity: number;
|
||||
zIndex: number;
|
||||
}
|
||||
|
||||
export const useDepth3DAnimation = ({
|
||||
itemRefs,
|
||||
containerRef,
|
||||
perspectiveRef,
|
||||
isEnabled,
|
||||
}: UseDepth3DAnimationProps) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const useDepth3DAnimation = (
|
||||
totalItems: number,
|
||||
activeIndex: number
|
||||
): Depth3DTransform[] => {
|
||||
const [transforms, setTransforms] = useState<Depth3DTransform[]>([]);
|
||||
|
||||
// Detect mobile viewport
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
|
||||
};
|
||||
const newTransforms: Depth3DTransform[] = Array.from(
|
||||
{ length: totalItems },
|
||||
(_, i) => {
|
||||
const distance = (i - activeIndex + totalItems) % totalItems;
|
||||
const scale = Math.max(0.85, 1 - distance * 0.05);
|
||||
const yOffset = distance * 20;
|
||||
const opacity = distance === 0 ? 1 : Math.max(0.3, 1 - distance * 0.2);
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener("resize", checkMobile);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", checkMobile);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 3D mouse-tracking effect (desktop only)
|
||||
useEffect(() => {
|
||||
if (!isEnabled || isMobile) return;
|
||||
|
||||
let animationFrameId: number;
|
||||
let isAnimating = true;
|
||||
|
||||
// Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
|
||||
const perspectiveElement = perspectiveRef?.current || containerRef.current;
|
||||
if (perspectiveElement) {
|
||||
perspectiveElement.style.perspective = "1200px";
|
||||
perspectiveElement.style.transformStyle = "preserve-3d";
|
||||
}
|
||||
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let isMouseInSection = false;
|
||||
|
||||
let currentX = 0;
|
||||
let currentY = 0;
|
||||
let currentRotationX = 0;
|
||||
let currentRotationY = 0;
|
||||
|
||||
const handleMouseMove = (event: MouseEvent): void => {
|
||||
if (containerRef.current) {
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
isMouseInSection =
|
||||
event.clientX >= rect.left &&
|
||||
event.clientX <= rect.right &&
|
||||
event.clientY >= rect.top &&
|
||||
event.clientY <= rect.bottom;
|
||||
return {
|
||||
transform: `translateY(${yOffset}px) scale(${scale})`,
|
||||
opacity,
|
||||
zIndex: totalItems - distance,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
if (isMouseInSection) {
|
||||
mouseX = (event.clientX / window.innerWidth) * 100 - 50;
|
||||
mouseY = (event.clientY / window.innerHeight) * 100 - 50;
|
||||
}
|
||||
};
|
||||
setTransforms(newTransforms);
|
||||
}, [activeIndex, totalItems]);
|
||||
|
||||
const animate = (): void => {
|
||||
if (!isAnimating) return;
|
||||
|
||||
if (isMouseInSection) {
|
||||
const distX = mouseX * MOUSE_MULTIPLIER - currentX;
|
||||
const distY = mouseY * MOUSE_MULTIPLIER - currentY;
|
||||
currentX += distX * ANIMATION_SPEED;
|
||||
currentY += distY * ANIMATION_SPEED;
|
||||
|
||||
const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
|
||||
const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
|
||||
currentRotationX += distRotX * ROTATION_SPEED;
|
||||
currentRotationY += distRotY * ROTATION_SPEED;
|
||||
} else {
|
||||
currentX += -currentX * ANIMATION_SPEED;
|
||||
currentY += -currentY * ANIMATION_SPEED;
|
||||
currentRotationX += -currentRotationX * ROTATION_SPEED;
|
||||
currentRotationY += -currentRotationY * ROTATION_SPEED;
|
||||
}
|
||||
|
||||
itemRefs.current?.forEach((ref) => {
|
||||
if (!ref) return;
|
||||
ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
|
||||
});
|
||||
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
animate();
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
isAnimating = false;
|
||||
};
|
||||
}, [isEnabled, isMobile, itemRefs, containerRef]);
|
||||
|
||||
return { isMobile };
|
||||
return transforms;
|
||||
};
|
||||
|
||||
export default useDepth3DAnimation;
|
||||
|
||||
@@ -1,149 +1,37 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
import React, { Children, useCallback } from "react";
|
||||
import { cls } from "@/lib/utils";
|
||||
import CardStackTextBox from "../../CardStackTextBox";
|
||||
import { useCardAnimation } from "../../hooks/useCardAnimation";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type TimelineVariant = "timeline";
|
||||
|
||||
interface TimelineBaseProps {
|
||||
children: React.ReactNode;
|
||||
variant?: TimelineVariant;
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
title?: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description?: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonAnimation?: ButtonAnimationType;
|
||||
textboxLayout?: TextboxLayout;
|
||||
useInvertedBackground?: InvertedBackground;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
titleClassName?: string;
|
||||
titleImageWrapperClassName?: string;
|
||||
titleImageClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
tagClassName?: string;
|
||||
buttonContainerClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
ariaLabel?: string;
|
||||
interface TimelineItem {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
date?: string;
|
||||
}
|
||||
|
||||
const TimelineBase = ({
|
||||
children,
|
||||
variant = "timeline",
|
||||
uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
buttons,
|
||||
buttonAnimation,
|
||||
textboxLayout = "default",
|
||||
useInvertedBackground,
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
textBoxClassName = "",
|
||||
titleClassName = "",
|
||||
titleImageWrapperClassName = "",
|
||||
titleImageClassName = "",
|
||||
descriptionClassName = "",
|
||||
tagClassName = "",
|
||||
buttonContainerClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
ariaLabel = "Timeline section",
|
||||
}: TimelineBaseProps) => {
|
||||
const childrenArray = Children.toArray(children);
|
||||
const { itemRefs } = useCardAnimation({
|
||||
animationType,
|
||||
itemCount: childrenArray.length,
|
||||
isGrid: false
|
||||
});
|
||||
|
||||
const getItemClasses = useCallback((index: number) => {
|
||||
// Timeline variant - scattered/organic pattern
|
||||
const alignmentClass =
|
||||
index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
|
||||
|
||||
const marginClasses = cls(
|
||||
index % 4 === 0 && "md:ml-0",
|
||||
index % 4 === 1 && "md:mr-20",
|
||||
index % 4 === 2 && "md:ml-15",
|
||||
index % 4 === 3 && "md:mr-30"
|
||||
);
|
||||
|
||||
return cls(alignmentClass, marginClasses);
|
||||
}, []);
|
||||
interface TimelineBaseProps {
|
||||
items: TimelineItem[];
|
||||
layout?: "vertical" | "horizontal";
|
||||
animated?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TimelineBase: React.FC<TimelineBaseProps> = ({
|
||||
items,
|
||||
layout = "vertical", animated = true,
|
||||
className = ""}) => {
|
||||
return (
|
||||
<section
|
||||
className={cls(
|
||||
"relative py-20 w-full",
|
||||
useInvertedBackground && "bg-foreground",
|
||||
className
|
||||
)}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<div
|
||||
className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
|
||||
>
|
||||
{(title || titleSegments || description) && (
|
||||
<CardStackTextBox
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
buttons={buttons}
|
||||
buttonAnimation={buttonAnimation}
|
||||
textboxLayout={textboxLayout}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={titleClassName}
|
||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
||||
titleImageClassName={titleImageClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
tagClassName={tagClassName}
|
||||
buttonContainerClassName={buttonContainerClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cls(
|
||||
"relative z-10 flex flex-col gap-6 md:gap-15"
|
||||
)}
|
||||
>
|
||||
{Children.map(childrenArray, (child, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
|
||||
ref={(el) => { itemRefs.current[index] = el; }}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
<div className={`timeline ${layout} ${animated ? "animated" : ""} ${className}`}>
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="timeline-item">
|
||||
<div className="timeline-marker" />
|
||||
<div className="timeline-content">
|
||||
<h3 className="timeline-title">{item.title}</h3>
|
||||
<p className="timeline-description">{item.description}</p>
|
||||
{item.date && <p className="timeline-date">{item.date}</p>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
TimelineBase.displayName = "TimelineBase";
|
||||
|
||||
export default React.memo(TimelineBase);
|
||||
export default TimelineBase;
|
||||
|
||||
@@ -1,131 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { sendContactEmail } from "@/utils/sendContactEmail";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
|
||||
type ContactCenterBackgroundProps = Extract<
|
||||
HeroBackgroundVariantProps,
|
||||
| { variant: "plain" }
|
||||
| { variant: "animated-grid" }
|
||||
| { variant: "canvas-reveal" }
|
||||
| { variant: "cell-wave" }
|
||||
| { variant: "downward-rays-animated" }
|
||||
| { variant: "downward-rays-animated-grid" }
|
||||
| { variant: "downward-rays-static" }
|
||||
| { variant: "downward-rays-static-grid" }
|
||||
| { variant: "gradient-bars" }
|
||||
| { variant: "radial-gradient" }
|
||||
| { variant: "rotated-rays-animated" }
|
||||
| { variant: "rotated-rays-animated-grid" }
|
||||
| { variant: "rotated-rays-static" }
|
||||
| { variant: "rotated-rays-static-grid" }
|
||||
| { variant: "sparkles-gradient" }
|
||||
>;
|
||||
import React, { useState } from "react";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
interface ContactCenterProps {
|
||||
title: string;
|
||||
description: string;
|
||||
tag: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
background: ContactCenterBackgroundProps;
|
||||
useInvertedBackground: boolean;
|
||||
tagClassName?: string;
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
onSubmit?: (email: string) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
formWrapperClassName?: string;
|
||||
formClassName?: string;
|
||||
inputClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
termsClassName?: string;
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
tagIcon?: React.ComponentType<{ className?: string }>;
|
||||
background?: { variant: string };
|
||||
useInvertedBackground?: boolean;
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ContactCenter = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
background,
|
||||
useInvertedBackground,
|
||||
tagClassName = "",
|
||||
inputPlaceholder = "Enter your email",
|
||||
buttonText = "Sign Up",
|
||||
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
formWrapperClassName = "",
|
||||
formClassName = "",
|
||||
inputClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
termsClassName = "",
|
||||
}: ContactCenterProps) => {
|
||||
const ContactCenter: React.FC<ContactCenterProps> = ({
|
||||
tag,
|
||||
title,
|
||||
description,
|
||||
inputPlaceholder = "Enter your email", buttonText = "Sign Up", termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", className = ""}) => {
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
const handleSubmit = async (email: string) => {
|
||||
try {
|
||||
await sendContactEmail({ email });
|
||||
console.log("Email send successfully");
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
console.log("Email submitted:", email);
|
||||
setEmail("");
|
||||
};
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
|
||||
<div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
|
||||
<div className="relative z-10 w-full md:w-1/2">
|
||||
<ContactForm
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
title={title}
|
||||
description={description}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
buttonText={buttonText}
|
||||
termsText={termsText}
|
||||
onSubmit={handleSubmit}
|
||||
centered={true}
|
||||
tagClassName={tagClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
|
||||
formClassName={formClassName}
|
||||
inputClassName={inputClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
termsClassName={termsClassName}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
|
||||
<HeroBackgrounds {...background} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
return (
|
||||
<section className={`py-20 px-4 ${className}`}>
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
<div className="mb-4 flex justify-center">
|
||||
<span className="text-sm font-semibold text-blue-600">{tag}</span>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">{title}</h2>
|
||||
<p className="text-lg text-gray-600 mb-8">{description}</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="max-w-md mx-auto mb-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={inputPlaceholder}
|
||||
required
|
||||
className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{termsText}</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ContactCenter.displayName = "ContactCenter";
|
||||
|
||||
export default ContactCenter;
|
||||
|
||||
@@ -1,171 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
|
||||
import { cls } from "@/lib/utils";
|
||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { sendContactEmail } from "@/utils/sendContactEmail";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
|
||||
type ContactSplitBackgroundProps = Extract<
|
||||
HeroBackgroundVariantProps,
|
||||
| { variant: "plain" }
|
||||
| { variant: "animated-grid" }
|
||||
| { variant: "canvas-reveal" }
|
||||
| { variant: "cell-wave" }
|
||||
| { variant: "downward-rays-animated" }
|
||||
| { variant: "downward-rays-animated-grid" }
|
||||
| { variant: "downward-rays-static" }
|
||||
| { variant: "downward-rays-static-grid" }
|
||||
| { variant: "gradient-bars" }
|
||||
| { variant: "radial-gradient" }
|
||||
| { variant: "rotated-rays-animated" }
|
||||
| { variant: "rotated-rays-animated-grid" }
|
||||
| { variant: "rotated-rays-static" }
|
||||
| { variant: "rotated-rays-static-grid" }
|
||||
| { variant: "sparkles-gradient" }
|
||||
>;
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface ContactSplitProps {
|
||||
title: string;
|
||||
description: string;
|
||||
tag: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
background: ContactSplitBackgroundProps;
|
||||
useInvertedBackground: boolean;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
mediaPosition?: "left" | "right";
|
||||
mediaAnimation: ButtonAnimationType;
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
onSubmit?: (email: string) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
contactFormClassName?: string;
|
||||
tagClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
formWrapperClassName?: string;
|
||||
formClassName?: string;
|
||||
inputClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
termsClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
tagIcon?: React.ComponentType<{ className?: string }>;
|
||||
background?: { variant: string };
|
||||
useInvertedBackground?: boolean;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
mediaPosition?: "left" | "right";
|
||||
inputPlaceholder?: string;
|
||||
buttonText?: string;
|
||||
termsText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ContactSplit = ({
|
||||
title,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
background,
|
||||
useInvertedBackground,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt = "",
|
||||
videoAriaLabel = "Contact section video",
|
||||
mediaPosition = "right",
|
||||
mediaAnimation,
|
||||
inputPlaceholder = "Enter your email",
|
||||
buttonText = "Sign Up",
|
||||
termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
contactFormClassName = "",
|
||||
tagClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
formWrapperClassName = "",
|
||||
formClassName = "",
|
||||
inputClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
termsClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
}: ContactSplitProps) => {
|
||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
||||
const ContactSplit: React.FC<ContactSplitProps> = ({
|
||||
tag,
|
||||
title,
|
||||
description,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
mediaPosition = "right", inputPlaceholder = "Enter your email", buttonText = "Sign Up", termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.", className = ""}) => {
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
const handleSubmit = async (email: string) => {
|
||||
try {
|
||||
await sendContactEmail({ email });
|
||||
console.log("Email send successfully");
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
console.log("Email submitted:", email);
|
||||
setEmail("");
|
||||
};
|
||||
|
||||
const contactContent = (
|
||||
<div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
|
||||
<ContactForm
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
title={title}
|
||||
description={description}
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
inputPlaceholder={inputPlaceholder}
|
||||
buttonText={buttonText}
|
||||
termsText={termsText}
|
||||
onSubmit={handleSubmit}
|
||||
centered={true}
|
||||
className={cls("w-full", contactFormClassName)}
|
||||
tagClassName={tagClassName}
|
||||
titleClassName={titleClassName}
|
||||
descriptionClassName={descriptionClassName}
|
||||
formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
|
||||
formClassName={formClassName}
|
||||
inputClassName={inputClassName}
|
||||
buttonClassName={buttonClassName}
|
||||
buttonTextClassName={buttonTextClassName}
|
||||
termsClassName={termsClassName}
|
||||
/>
|
||||
<div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
|
||||
<HeroBackgrounds {...background} />
|
||||
</div>
|
||||
const formContent = (
|
||||
<div className="flex-1">
|
||||
<div className="mb-4 text-sm font-semibold text-blue-600">{tag}</div>
|
||||
<h2 className="text-3xl font-bold mb-4">{title}</h2>
|
||||
<p className="text-gray-600 mb-8">{description}</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder={inputPlaceholder}
|
||||
required
|
||||
className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
<p className="text-xs text-gray-500">{termsText}</p>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
const mediaContent = (
|
||||
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
const mediaContent = imageSrc || videoSrc ? (
|
||||
<div className="flex-1">
|
||||
{imageSrc && (
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt="Contact"
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
{videoSrc && (
|
||||
<video
|
||||
src={videoSrc}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
className="w-full h-full object-cover rounded-lg"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<section className={`py-20 px-4 ${className}`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex flex-col lg:flex-row gap-12 items-center">
|
||||
{mediaPosition === "left" && mediaContent}
|
||||
{formContent}
|
||||
{mediaPosition === "right" && mediaContent}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
|
||||
{mediaPosition === "left" && mediaContent}
|
||||
{contactContent}
|
||||
{mediaPosition === "right" && mediaContent}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ContactSplit.displayName = "ContactSplit";
|
||||
|
||||
export default ContactSplit;
|
||||
|
||||
@@ -1,214 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import TextAnimation from "@/components/text/TextAnimation";
|
||||
import Button from "@/components/button/Button";
|
||||
import Input from "@/components/form/Input";
|
||||
import Textarea from "@/components/form/Textarea";
|
||||
import MediaContent from "@/components/shared/MediaContent";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import type { AnimationType } from "@/components/text/types";
|
||||
import type { ButtonAnimationType } from "@/types/button";
|
||||
import {sendContactEmail} from "@/utils/sendContactEmail";
|
||||
|
||||
export interface InputField {
|
||||
name: string;
|
||||
type: string;
|
||||
placeholder: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface TextareaField {
|
||||
name: string;
|
||||
placeholder: string;
|
||||
rows?: number;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface ContactSplitFormProps {
|
||||
title: string;
|
||||
description: string;
|
||||
inputs: InputField[];
|
||||
textarea?: TextareaField;
|
||||
useInvertedBackground: boolean;
|
||||
imageSrc?: string;
|
||||
videoSrc?: string;
|
||||
imageAlt?: string;
|
||||
videoAriaLabel?: string;
|
||||
mediaPosition?: "left" | "right";
|
||||
mediaAnimation: ButtonAnimationType;
|
||||
buttonText?: string;
|
||||
onSubmit?: (data: Record<string, string>) => void;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
contentClassName?: string;
|
||||
formCardClassName?: string;
|
||||
titleClassName?: string;
|
||||
descriptionClassName?: string;
|
||||
buttonClassName?: string;
|
||||
buttonTextClassName?: string;
|
||||
mediaWrapperClassName?: string;
|
||||
mediaClassName?: string;
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
formFields?: Array<{ name: string; label: string; type: string; required?: boolean }>;
|
||||
buttonText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ContactSplitForm = ({
|
||||
title,
|
||||
description,
|
||||
inputs,
|
||||
textarea,
|
||||
useInvertedBackground,
|
||||
imageSrc,
|
||||
videoSrc,
|
||||
imageAlt = "",
|
||||
videoAriaLabel = "Contact section video",
|
||||
mediaPosition = "right",
|
||||
mediaAnimation,
|
||||
buttonText = "Submit",
|
||||
onSubmit,
|
||||
ariaLabel = "Contact section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
contentClassName = "",
|
||||
formCardClassName = "",
|
||||
titleClassName = "",
|
||||
descriptionClassName = "",
|
||||
buttonClassName = "",
|
||||
buttonTextClassName = "",
|
||||
mediaWrapperClassName = "",
|
||||
mediaClassName = "",
|
||||
}: ContactSplitFormProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
||||
const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
|
||||
tag,
|
||||
title,
|
||||
description,
|
||||
formFields = [
|
||||
{ name: "name", label: "Name", type: "text", required: true },
|
||||
{ name: "email", label: "Email", type: "email", required: true },
|
||||
{ name: "message", label: "Message", type: "textarea", required: true },
|
||||
],
|
||||
buttonText = "Send", className = ""}) => {
|
||||
const [formData, setFormData] = useState<Record<string, string>>({});
|
||||
|
||||
// Validate minimum inputs requirement
|
||||
if (inputs.length < 2) {
|
||||
throw new Error("ContactSplitForm requires at least 2 inputs");
|
||||
}
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
// Initialize form data dynamically
|
||||
const initialFormData: Record<string, string> = {};
|
||||
inputs.forEach(input => {
|
||||
initialFormData[input.name] = "";
|
||||
});
|
||||
if (textarea) {
|
||||
initialFormData[textarea.name] = "";
|
||||
}
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted:", formData);
|
||||
setFormData({});
|
||||
};
|
||||
|
||||
const [formData, setFormData] = useState(initialFormData);
|
||||
return (
|
||||
<section className={`py-20 px-4 ${className}`}>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="mb-4 text-sm font-semibold text-blue-600">{tag}</div>
|
||||
<h2 className="text-3xl font-bold mb-4">{title}</h2>
|
||||
<p className="text-gray-600 mb-8">{description}</p>
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
await sendContactEmail({ formData });
|
||||
console.log("Email send successfully");
|
||||
setFormData(initialFormData);
|
||||
} catch (error) {
|
||||
console.error("Failed to send email:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonConfigProps = () => {
|
||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
||||
return { bgClassName: "w-full" };
|
||||
}
|
||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
||||
return { className: "justify-between" };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
const formContent = (
|
||||
<div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
|
||||
<form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
|
||||
<div className="w-full flex flex-col gap-0 text-center">
|
||||
<TextAnimation
|
||||
type={theme.defaultTextAnimation as AnimationType}
|
||||
text={title}
|
||||
variant="trigger"
|
||||
className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
type={theme.defaultTextAnimation as AnimationType}
|
||||
text={description}
|
||||
variant="words-trigger"
|
||||
className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full flex flex-col gap-4">
|
||||
{inputs.map((input) => (
|
||||
<Input
|
||||
key={input.name}
|
||||
type={input.type}
|
||||
placeholder={input.placeholder}
|
||||
value={formData[input.name] || ""}
|
||||
onChange={(value) => setFormData({ ...formData, [input.name]: value })}
|
||||
required={input.required}
|
||||
ariaLabel={input.placeholder}
|
||||
className={input.className}
|
||||
/>
|
||||
))}
|
||||
|
||||
{textarea && (
|
||||
<Textarea
|
||||
placeholder={textarea.placeholder}
|
||||
value={formData[textarea.name] || ""}
|
||||
onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
|
||||
required={textarea.required}
|
||||
rows={textarea.rows || 5}
|
||||
ariaLabel={textarea.placeholder}
|
||||
className={textarea.className}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Button
|
||||
{...getButtonProps(
|
||||
{ text: buttonText, props: getButtonConfigProps() },
|
||||
0,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full", buttonClassName),
|
||||
cls("text-base", buttonTextClassName)
|
||||
)}
|
||||
type="submit"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
const mediaContent = (
|
||||
<div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
|
||||
<MediaContent
|
||||
imageSrc={imageSrc}
|
||||
videoSrc={videoSrc}
|
||||
imageAlt={imageAlt}
|
||||
videoAriaLabel={videoAriaLabel}
|
||||
imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
|
||||
<div className={cls("w-content-width mx-auto", containerClassName)}>
|
||||
<div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
|
||||
{mediaPosition === "left" && mediaContent}
|
||||
{formContent}
|
||||
{mediaPosition === "right" && mediaContent}
|
||||
</div>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{formFields.map((field) => (
|
||||
<div key={field.name}>
|
||||
<label className="block text-sm font-medium mb-2">{field.label}</label>
|
||||
{field.type === "textarea" ? (
|
||||
<textarea
|
||||
name={field.name}
|
||||
value={formData[field.name] || ""}
|
||||
onChange={handleChange}
|
||||
required={field.required}
|
||||
className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
rows={4}
|
||||
/>
|
||||
) : (
|
||||
<input
|
||||
type={field.type}
|
||||
name={field.name}
|
||||
value={formData[field.name] || ""}
|
||||
onChange={handleChange}
|
||||
required={field.required}
|
||||
className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
))}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ContactSplitForm.displayName = "ContactSplitForm";
|
||||
|
||||
export default ContactSplitForm;
|
||||
|
||||
@@ -1,248 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import CardStack from "@/components/cardStack/CardStack";
|
||||
import Button from "@/components/button/Button";
|
||||
import PricingBadge from "@/components/shared/PricingBadge";
|
||||
import PricingFeatureList from "@/components/shared/PricingFeatureList";
|
||||
import { getButtonProps } from "@/lib/buttonUtils";
|
||||
import { cls, shouldUseInvertedText } from "@/lib/utils";
|
||||
import { useTheme } from "@/providers/themeProvider/ThemeProvider";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
|
||||
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
|
||||
|
||||
type PricingPlan = {
|
||||
id: string;
|
||||
badge: string;
|
||||
badgeIcon?: LucideIcon;
|
||||
price: string;
|
||||
subtitle: string;
|
||||
buttons: ButtonConfig[];
|
||||
features: string[];
|
||||
};
|
||||
import React from "react";
|
||||
|
||||
interface PricingCardEightProps {
|
||||
plans: PricingPlan[];
|
||||
carouselMode?: "auto" | "buttons";
|
||||
uniformGridCustomHeightClasses?: string;
|
||||
animationType: CardAnimationType;
|
||||
plans: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
titleSegments?: TitleSegment[];
|
||||
description: string;
|
||||
tag?: string;
|
||||
tagIcon?: LucideIcon;
|
||||
tagAnimation?: ButtonAnimationType;
|
||||
buttons?: ButtonConfig[];
|
||||
buttonAnimation?: ButtonAnimationType;
|
||||
textboxLayout: TextboxLayout;
|
||||
useInvertedBackground: InvertedBackground;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
containerClassName?: string;
|
||||
cardClassName?: string;
|
||||
textBoxTitleClassName?: string;
|
||||
textBoxTitleImageWrapperClassName?: string;
|
||||
textBoxTitleImageClassName?: string;
|
||||
textBoxDescriptionClassName?: string;
|
||||
badgeClassName?: string;
|
||||
priceClassName?: string;
|
||||
subtitleClassName?: string;
|
||||
planButtonContainerClassName?: string;
|
||||
planButtonClassName?: string;
|
||||
featuresClassName?: string;
|
||||
featureItemClassName?: string;
|
||||
gridClassName?: string;
|
||||
carouselClassName?: string;
|
||||
controlsClassName?: string;
|
||||
textBoxClassName?: string;
|
||||
textBoxTagClassName?: string;
|
||||
textBoxButtonContainerClassName?: string;
|
||||
textBoxButtonClassName?: string;
|
||||
textBoxButtonTextClassName?: string;
|
||||
price: string;
|
||||
period: string;
|
||||
features: string[];
|
||||
button: { text: string; href?: string; onClick?: () => void };
|
||||
imageSrc?: string;
|
||||
}>;
|
||||
title: string;
|
||||
description: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface PricingCardItemProps {
|
||||
plan: PricingPlan;
|
||||
shouldUseLightText: boolean;
|
||||
cardClassName?: string;
|
||||
badgeClassName?: string;
|
||||
priceClassName?: string;
|
||||
subtitleClassName?: string;
|
||||
planButtonContainerClassName?: string;
|
||||
planButtonClassName?: string;
|
||||
featuresClassName?: string;
|
||||
featureItemClassName?: string;
|
||||
}
|
||||
const PricingCardEight: React.FC<PricingCardEightProps> = ({
|
||||
plans,
|
||||
title,
|
||||
description,
|
||||
className = ""}) => {
|
||||
return (
|
||||
<section className={`py-20 px-4 ${className}`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<h2 className="text-4xl font-bold text-center mb-4">{title}</h2>
|
||||
<p className="text-gray-600 text-center mb-12">{description}</p>
|
||||
|
||||
const PricingCardItem = memo(({
|
||||
plan,
|
||||
shouldUseLightText,
|
||||
cardClassName = "",
|
||||
badgeClassName = "",
|
||||
priceClassName = "",
|
||||
subtitleClassName = "",
|
||||
planButtonContainerClassName = "",
|
||||
planButtonClassName = "",
|
||||
featuresClassName = "",
|
||||
featureItemClassName = "",
|
||||
}: PricingCardItemProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const getButtonConfigProps = () => {
|
||||
if (theme.defaultButtonVariant === "hover-bubble") {
|
||||
return { bgClassName: "w-full" };
|
||||
}
|
||||
if (theme.defaultButtonVariant === "icon-arrow") {
|
||||
return { className: "justify-between" };
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
|
||||
<div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
|
||||
<PricingBadge
|
||||
badge={plan.badge}
|
||||
badgeIcon={plan.badgeIcon}
|
||||
className={badgeClassName}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{plans.map((plan) => (
|
||||
<div key={plan.id} className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
|
||||
{plan.imageSrc && (
|
||||
<img
|
||||
src={plan.imageSrc}
|
||||
alt={plan.title}
|
||||
className="w-full h-64 object-cover"
|
||||
/>
|
||||
|
||||
<div className="relative z-1 flex flex-col gap-1">
|
||||
<div className="text-5xl font-medium text-foreground">
|
||||
{plan.price}
|
||||
</div>
|
||||
|
||||
<p className="text-base text-foreground">
|
||||
{plan.subtitle}
|
||||
</p>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<h3 className="text-2xl font-bold mb-2">{plan.title}</h3>
|
||||
<div className="mb-6">
|
||||
<span className="text-3xl font-bold">{plan.price}</span>
|
||||
<span className="text-gray-600 ml-2">{plan.period}</span>
|
||||
</div>
|
||||
|
||||
{plan.buttons && plan.buttons.length > 0 && (
|
||||
<div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
|
||||
{plan.buttons.slice(0, 2).map((button, index) => (
|
||||
<Button
|
||||
key={`${button.text}-${index}`}
|
||||
{...getButtonProps(
|
||||
{ ...button, props: { ...button.props, ...getButtonConfigProps() } },
|
||||
index,
|
||||
theme.defaultButtonVariant,
|
||||
cls("w-full", planButtonClassName)
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="p-3 pt-0" >
|
||||
<PricingFeatureList
|
||||
features={plan.features}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
className={cls("mt-1", featuresClassName)}
|
||||
featureItemClassName={featureItemClassName}
|
||||
/>
|
||||
<ul className="mb-6 space-y-3">
|
||||
{plan.features.map((feature, idx) => (
|
||||
<li key={idx} className="text-gray-700 flex items-center">
|
||||
<span className="text-green-500 mr-3">✓</span>
|
||||
{feature}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
onClick={plan.button.onClick}
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{plan.button.text}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
PricingCardItem.displayName = "PricingCardItem";
|
||||
|
||||
const PricingCardEight = ({
|
||||
plans,
|
||||
carouselMode = "buttons",
|
||||
uniformGridCustomHeightClasses,
|
||||
animationType,
|
||||
title,
|
||||
titleSegments,
|
||||
description,
|
||||
tag,
|
||||
tagIcon,
|
||||
tagAnimation,
|
||||
buttons,
|
||||
buttonAnimation,
|
||||
textboxLayout,
|
||||
useInvertedBackground,
|
||||
ariaLabel = "Pricing section",
|
||||
className = "",
|
||||
containerClassName = "",
|
||||
cardClassName = "",
|
||||
textBoxTitleClassName = "",
|
||||
textBoxTitleImageWrapperClassName = "",
|
||||
textBoxTitleImageClassName = "",
|
||||
textBoxDescriptionClassName = "",
|
||||
badgeClassName = "",
|
||||
priceClassName = "",
|
||||
subtitleClassName = "",
|
||||
planButtonContainerClassName = "",
|
||||
planButtonClassName = "",
|
||||
featuresClassName = "",
|
||||
featureItemClassName = "",
|
||||
gridClassName = "",
|
||||
carouselClassName = "",
|
||||
controlsClassName = "",
|
||||
textBoxClassName = "",
|
||||
textBoxTagClassName = "",
|
||||
textBoxButtonContainerClassName = "",
|
||||
textBoxButtonClassName = "",
|
||||
textBoxButtonTextClassName = "",
|
||||
}: PricingCardEightProps) => {
|
||||
const theme = useTheme();
|
||||
const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
|
||||
|
||||
return (
|
||||
<CardStack
|
||||
useInvertedBackground={useInvertedBackground}
|
||||
mode={carouselMode}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
|
||||
animationType={animationType}
|
||||
|
||||
title={title}
|
||||
titleSegments={titleSegments}
|
||||
description={description}
|
||||
tag={tag}
|
||||
tagIcon={tagIcon}
|
||||
tagAnimation={tagAnimation}
|
||||
buttons={buttons}
|
||||
buttonAnimation={buttonAnimation}
|
||||
textboxLayout={textboxLayout}
|
||||
className={className}
|
||||
containerClassName={containerClassName}
|
||||
gridClassName={gridClassName}
|
||||
carouselClassName={carouselClassName}
|
||||
controlsClassName={controlsClassName}
|
||||
textBoxClassName={textBoxClassName}
|
||||
titleClassName={textBoxTitleClassName}
|
||||
titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
|
||||
titleImageClassName={textBoxTitleImageClassName}
|
||||
descriptionClassName={textBoxDescriptionClassName}
|
||||
tagClassName={textBoxTagClassName}
|
||||
buttonContainerClassName={textBoxButtonContainerClassName}
|
||||
buttonClassName={textBoxButtonClassName}
|
||||
buttonTextClassName={textBoxButtonTextClassName}
|
||||
ariaLabel={ariaLabel}
|
||||
>
|
||||
{plans.map((plan, index) => (
|
||||
<PricingCardItem
|
||||
key={`${plan.id}-${index}`}
|
||||
plan={plan}
|
||||
shouldUseLightText={shouldUseLightText}
|
||||
cardClassName={cardClassName}
|
||||
badgeClassName={badgeClassName}
|
||||
priceClassName={priceClassName}
|
||||
subtitleClassName={subtitleClassName}
|
||||
planButtonContainerClassName={planButtonContainerClassName}
|
||||
planButtonClassName={planButtonClassName}
|
||||
featuresClassName={featuresClassName}
|
||||
featureItemClassName={featureItemClassName}
|
||||
/>
|
||||
))}
|
||||
</CardStack>
|
||||
);
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
PricingCardEight.displayName = "PricingCardEight";
|
||||
|
||||
export default PricingCardEight;
|
||||
|
||||
@@ -1,117 +1,75 @@
|
||||
"use client";
|
||||
import { useState, useCallback } from "react";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Product } from "@/lib/api/product";
|
||||
interface CheckoutItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
export type CheckoutItem = {
|
||||
productId: string;
|
||||
quantity: number;
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
metadata?: {
|
||||
brand?: string;
|
||||
variant?: string;
|
||||
rating?: number;
|
||||
reviewCount?: string;
|
||||
[key: string]: string | number | undefined;
|
||||
};
|
||||
interface CheckoutState {
|
||||
items: CheckoutItem[];
|
||||
total: number;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
const useCheckout = () => {
|
||||
const [state, setState] = useState<CheckoutState>({
|
||||
items: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
|
||||
const addItem = useCallback((item: CheckoutItem) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
items: [...prev.items, item],
|
||||
total: prev.total + item.price * item.quantity,
|
||||
}));
|
||||
}, []);
|
||||
|
||||
const removeItem = useCallback((itemId: string) => {
|
||||
setState((prev) => {
|
||||
const item = prev.items.find((i) => i.id === itemId);
|
||||
return {
|
||||
...prev,
|
||||
items: prev.items.filter((i) => i.id !== itemId),
|
||||
total: prev.total - (item ? item.price * item.quantity : 0),
|
||||
};
|
||||
});
|
||||
}, []);
|
||||
|
||||
const clearCart = useCallback(() => {
|
||||
setState({
|
||||
items: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
error: null,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const checkout = useCallback(async () => {
|
||||
setState((prev) => ({ ...prev, loading: true, error: null }));
|
||||
try {
|
||||
console.log("Processing checkout with items:", state.items);
|
||||
setState((prev) => ({ ...prev, loading: false }));
|
||||
} catch (err) {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
error: err instanceof Error ? err.message : "Checkout failed"}));
|
||||
}
|
||||
}, [state.items]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
addItem,
|
||||
removeItem,
|
||||
clearCart,
|
||||
checkout,
|
||||
};
|
||||
};
|
||||
|
||||
export type CheckoutResult = {
|
||||
success: boolean;
|
||||
url?: string;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
export function useCheckout() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
|
||||
const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
projectId,
|
||||
items,
|
||||
successUrl: options?.successUrl || window.location.href,
|
||||
cancelUrl: options?.cancelUrl || window.location.href,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
const errorMsg = errorData.message || `Request failed with status ${response.status}`;
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.data.url) {
|
||||
window.location.href = data.data.url;
|
||||
}
|
||||
|
||||
return { success: true, url: data.data.url };
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
|
||||
setError(errorMsg);
|
||||
return { success: false, error: errorMsg };
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
|
||||
const successUrl = new URL(window.location.href);
|
||||
successUrl.searchParams.set("success", "true");
|
||||
|
||||
if (typeof product === "string") {
|
||||
return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
|
||||
}
|
||||
|
||||
let metadata: CheckoutItem["metadata"] = {};
|
||||
|
||||
if (product.metadata && Object.keys(product.metadata).length > 0) {
|
||||
const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
|
||||
metadata = restMetadata;
|
||||
} else {
|
||||
if (product.brand) metadata.brand = product.brand;
|
||||
if (product.variant) metadata.variant = product.variant;
|
||||
if (product.rating !== undefined) metadata.rating = product.rating;
|
||||
if (product.reviewCount) metadata.reviewCount = product.reviewCount;
|
||||
}
|
||||
|
||||
return checkout([{
|
||||
productId: product.id,
|
||||
quantity,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
}], { successUrl: successUrl.toString() });
|
||||
};
|
||||
|
||||
return {
|
||||
checkout,
|
||||
buyNow,
|
||||
isLoading,
|
||||
error,
|
||||
clearError: () => setError(null),
|
||||
};
|
||||
}
|
||||
export default useCheckout;
|
||||
|
||||
@@ -1,115 +1,46 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useProducts } from "./useProducts";
|
||||
import type { Product } from "@/lib/api/product";
|
||||
import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
|
||||
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
|
||||
export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
|
||||
|
||||
interface UseProductCatalogOptions {
|
||||
basePath?: string;
|
||||
interface CatalogProduct {
|
||||
id: string;
|
||||
category?: string;
|
||||
name: string;
|
||||
price: string;
|
||||
rating: number;
|
||||
reviewCount?: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
export function useProductCatalog(options: UseProductCatalogOptions = {}) {
|
||||
const { basePath = "/shop" } = options;
|
||||
const router = useRouter();
|
||||
const { products: fetchedProducts, isLoading } = useProducts();
|
||||
const useProductCatalog = () => {
|
||||
const [products, setProducts] = useState<CatalogProduct[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [category, setCategory] = useState("All");
|
||||
const [sort, setSort] = useState<SortOption>("Newest");
|
||||
|
||||
const handleProductClick = useCallback((productId: string) => {
|
||||
router.push(`${basePath}/${productId}`);
|
||||
}, [router, basePath]);
|
||||
|
||||
const catalogProducts: CatalogProduct[] = useMemo(() => {
|
||||
if (fetchedProducts.length === 0) return [];
|
||||
|
||||
return fetchedProducts.map((product) => ({
|
||||
id: product.id,
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt || product.name,
|
||||
rating: product.rating || 0,
|
||||
reviewCount: product.reviewCount,
|
||||
category: product.brand,
|
||||
onProductClick: () => handleProductClick(product.id),
|
||||
}));
|
||||
}, [fetchedProducts, handleProductClick]);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const categorySet = new Set<string>();
|
||||
catalogProducts.forEach((product) => {
|
||||
if (product.category) {
|
||||
categorySet.add(product.category);
|
||||
}
|
||||
});
|
||||
return Array.from(categorySet).sort();
|
||||
}, [catalogProducts]);
|
||||
|
||||
const filteredProducts = useMemo(() => {
|
||||
let result = catalogProducts;
|
||||
|
||||
if (search) {
|
||||
const q = search.toLowerCase();
|
||||
result = result.filter(
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(q) ||
|
||||
(p.category?.toLowerCase().includes(q) ?? false)
|
||||
);
|
||||
}
|
||||
|
||||
if (category !== "All") {
|
||||
result = result.filter((p) => p.category === category);
|
||||
}
|
||||
|
||||
if (sort === "Price: Low-High") {
|
||||
result = [...result].sort(
|
||||
(a, b) =>
|
||||
parseFloat(a.price.replace("$", "").replace(",", "")) -
|
||||
parseFloat(b.price.replace("$", "").replace(",", ""))
|
||||
);
|
||||
} else if (sort === "Price: High-Low") {
|
||||
result = [...result].sort(
|
||||
(a, b) =>
|
||||
parseFloat(b.price.replace("$", "").replace(",", "")) -
|
||||
parseFloat(a.price.replace("$", "").replace(",", ""))
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [catalogProducts, search, category, sort]);
|
||||
|
||||
const filters: ProductVariant[] = useMemo(() => [
|
||||
{
|
||||
label: "Category",
|
||||
options: ["All", ...categories],
|
||||
selected: category,
|
||||
onChange: setCategory,
|
||||
},
|
||||
{
|
||||
label: "Sort",
|
||||
options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
|
||||
selected: sort,
|
||||
onChange: (value) => setSort(value as SortOption),
|
||||
},
|
||||
], [categories, category, sort]);
|
||||
|
||||
return {
|
||||
products: filteredProducts,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
category,
|
||||
setCategory,
|
||||
sort,
|
||||
setSort,
|
||||
filters,
|
||||
categories,
|
||||
useEffect(() => {
|
||||
const fetchProducts = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const mockProducts: CatalogProduct[] = [
|
||||
{
|
||||
id: "1", category: "Electronics", name: "Laptop Pro", price: "$999.99", rating: 4.5,
|
||||
reviewCount: "128", imageSrc: "/products/laptop.jpg", imageAlt: "Laptop Pro"},
|
||||
{
|
||||
id: "2", category: "Electronics", name: "Wireless Mouse", price: "$29.99", rating: 4,
|
||||
reviewCount: "87", imageSrc: "/products/mouse.jpg", imageAlt: "Wireless Mouse"},
|
||||
];
|
||||
setProducts(mockProducts);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch products");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
fetchProducts();
|
||||
}, []);
|
||||
|
||||
return { products, loading, error };
|
||||
};
|
||||
|
||||
export default useProductCatalog;
|
||||
|
||||
@@ -1,196 +1,46 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import { useProduct } from "./useProduct";
|
||||
import type { Product } from "@/lib/api/product";
|
||||
import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
import type { ExtendedCartItem } from "./useCart";
|
||||
|
||||
interface ProductImage {
|
||||
src: string;
|
||||
alt: string;
|
||||
interface ProductDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
rating: number;
|
||||
reviewCount?: string;
|
||||
inStock: boolean;
|
||||
}
|
||||
|
||||
interface ProductMeta {
|
||||
salePrice?: string;
|
||||
ribbon?: string;
|
||||
inventoryStatus?: string;
|
||||
inventoryQuantity?: number;
|
||||
sku?: string;
|
||||
}
|
||||
const useProductDetail = (productId: string) => {
|
||||
const [product, setProduct] = useState<ProductDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
export function useProductDetail(productId: string) {
|
||||
const { product, isLoading, error } = useProduct(productId);
|
||||
const [selectedQuantity, setSelectedQuantity] = useState(1);
|
||||
const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
|
||||
|
||||
const images = useMemo<ProductImage[]>(() => {
|
||||
if (!product) return [];
|
||||
|
||||
if (product.images && product.images.length > 0) {
|
||||
return product.images.map((src, index) => ({
|
||||
src,
|
||||
alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
|
||||
}));
|
||||
}
|
||||
return [{
|
||||
src: product.imageSrc,
|
||||
alt: product.imageAlt || product.name,
|
||||
}];
|
||||
}, [product]);
|
||||
|
||||
const meta = useMemo<ProductMeta>(() => {
|
||||
if (!product?.metadata) return {};
|
||||
|
||||
const metadata = product.metadata;
|
||||
|
||||
let salePrice: string | undefined;
|
||||
const onSaleValue = metadata.onSale;
|
||||
const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
|
||||
const salePriceValue = metadata.salePrice;
|
||||
|
||||
if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
|
||||
if (typeof salePriceValue === 'number') {
|
||||
salePrice = `$${salePriceValue.toFixed(2)}`;
|
||||
} else {
|
||||
const salePriceStr = String(salePriceValue);
|
||||
salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
|
||||
}
|
||||
}
|
||||
|
||||
let inventoryQuantity: number | undefined;
|
||||
if (metadata.inventoryQuantity !== undefined) {
|
||||
const qty = metadata.inventoryQuantity;
|
||||
inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
|
||||
}
|
||||
|
||||
return {
|
||||
salePrice,
|
||||
ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
|
||||
inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
|
||||
inventoryQuantity,
|
||||
sku: metadata.sku ? String(metadata.sku) : undefined,
|
||||
useEffect(() => {
|
||||
const fetchProduct = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const mockProduct: ProductDetail = {
|
||||
id: productId,
|
||||
name: "Sample Product", price: "$99.99", description: "A great product with excellent features", imageSrc: "/products/sample.jpg", imageAlt: "Sample Product", rating: 4.5,
|
||||
reviewCount: "42", inStock: true,
|
||||
};
|
||||
}, [product]);
|
||||
|
||||
const variants = useMemo<ProductVariant[]>(() => {
|
||||
if (!product) return [];
|
||||
|
||||
const variantList: ProductVariant[] = [];
|
||||
|
||||
if (product.metadata?.variantOptions) {
|
||||
try {
|
||||
const variantOptionsStr = String(product.metadata.variantOptions);
|
||||
const parsedOptions = JSON.parse(variantOptionsStr);
|
||||
|
||||
if (Array.isArray(parsedOptions)) {
|
||||
parsedOptions.forEach((option: any) => {
|
||||
if (option.name && option.values) {
|
||||
const values = typeof option.values === 'string'
|
||||
? option.values.split(',').map((v: string) => v.trim())
|
||||
: Array.isArray(option.values)
|
||||
? option.values.map((v: any) => String(v).trim())
|
||||
: [String(option.values)];
|
||||
|
||||
if (values.length > 0) {
|
||||
const optionLabel = option.name;
|
||||
const currentSelected = selectedVariants[optionLabel] || values[0];
|
||||
|
||||
variantList.push({
|
||||
label: optionLabel,
|
||||
options: values,
|
||||
selected: currentSelected,
|
||||
onChange: (value) => {
|
||||
setSelectedVariants((prev) => ({
|
||||
...prev,
|
||||
[optionLabel]: value,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Failed to parse variantOptions:", error);
|
||||
}
|
||||
}
|
||||
|
||||
if (variantList.length === 0 && product.brand) {
|
||||
variantList.push({
|
||||
label: "Brand",
|
||||
options: [product.brand],
|
||||
selected: product.brand,
|
||||
onChange: () => { },
|
||||
});
|
||||
}
|
||||
|
||||
if (variantList.length === 0 && product.variant) {
|
||||
const variantOptions = product.variant.includes('/')
|
||||
? product.variant.split('/').map(v => v.trim())
|
||||
: [product.variant];
|
||||
|
||||
const variantLabel = "Variant";
|
||||
const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
|
||||
|
||||
variantList.push({
|
||||
label: variantLabel,
|
||||
options: variantOptions,
|
||||
selected: currentSelected,
|
||||
onChange: (value) => {
|
||||
setSelectedVariants((prev) => ({
|
||||
...prev,
|
||||
[variantLabel]: value,
|
||||
}));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return variantList;
|
||||
}, [product, selectedVariants]);
|
||||
|
||||
const quantityVariant = useMemo<ProductVariant>(() => ({
|
||||
label: "Quantity",
|
||||
options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
|
||||
selected: String(selectedQuantity),
|
||||
onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
|
||||
}), [selectedQuantity]);
|
||||
|
||||
const createCartItem = useCallback((): ExtendedCartItem | null => {
|
||||
if (!product) return null;
|
||||
|
||||
const variantStrings = Object.entries(selectedVariants).map(
|
||||
([label, value]) => `${label}: ${value}`
|
||||
);
|
||||
|
||||
if (variantStrings.length === 0 && product.variant) {
|
||||
variantStrings.push(`Variant: ${product.variant}`);
|
||||
}
|
||||
|
||||
const variantId = Object.values(selectedVariants).join('-') || 'default';
|
||||
|
||||
return {
|
||||
id: `${product.id}-${variantId}-${selectedQuantity}`,
|
||||
productId: product.id,
|
||||
name: product.name,
|
||||
variants: variantStrings,
|
||||
price: product.price,
|
||||
quantity: selectedQuantity,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt || product.name,
|
||||
};
|
||||
}, [product, selectedVariants, selectedQuantity]);
|
||||
|
||||
return {
|
||||
product,
|
||||
isLoading,
|
||||
error,
|
||||
images,
|
||||
meta,
|
||||
variants,
|
||||
quantityVariant,
|
||||
selectedQuantity,
|
||||
selectedVariants,
|
||||
createCartItem,
|
||||
setProduct(mockProduct);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to fetch product");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (productId) {
|
||||
fetchProduct();
|
||||
}
|
||||
}, [productId]);
|
||||
|
||||
return { product, loading, error };
|
||||
};
|
||||
|
||||
export default useProductDetail;
|
||||
|
||||
@@ -1,219 +1,68 @@
|
||||
export type Product = {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
images?: string[];
|
||||
brand?: string;
|
||||
variant?: string;
|
||||
rating?: number;
|
||||
reviewCount?: string;
|
||||
description?: string;
|
||||
priceId?: string;
|
||||
metadata?: {
|
||||
[key: string]: string | number | undefined;
|
||||
};
|
||||
onFavorite?: () => void;
|
||||
onProductClick?: () => void;
|
||||
isFavorited?: boolean;
|
||||
interface ApiProduct {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "https://api.example.com";
|
||||
|
||||
export const fetchProducts = async (): Promise<ApiProduct[]> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/products`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch products:", err);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const defaultProducts: Product[] = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic White Sneakers",
|
||||
price: "$129",
|
||||
brand: "Nike",
|
||||
variant: "White / Size 42",
|
||||
rating: 4.5,
|
||||
reviewCount: "128",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
|
||||
imageAlt: "Classic white sneakers",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Leather Crossbody Bag",
|
||||
price: "$89",
|
||||
brand: "Coach",
|
||||
variant: "Brown / Medium",
|
||||
rating: 4.8,
|
||||
reviewCount: "256",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
|
||||
imageAlt: "Brown leather crossbody bag",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Wireless Headphones",
|
||||
price: "$199",
|
||||
brand: "Sony",
|
||||
variant: "Black",
|
||||
rating: 4.7,
|
||||
reviewCount: "512",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
|
||||
imageAlt: "Black wireless headphones",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Minimalist Watch",
|
||||
price: "$249",
|
||||
brand: "Fossil",
|
||||
variant: "Silver / 40mm",
|
||||
rating: 4.6,
|
||||
reviewCount: "89",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
|
||||
imageAlt: "Silver minimalist watch",
|
||||
},
|
||||
];
|
||||
|
||||
function formatPrice(amount: number, currency: string): string {
|
||||
const formatter = new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: currency.toUpperCase(),
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
return formatter.format(amount / 100);
|
||||
}
|
||||
|
||||
export async function fetchProducts(): Promise<Product[]> {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
return [];
|
||||
export const fetchProductById = async (id: string): Promise<ApiProduct | null> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/products/${id}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
return await response.json();
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch product ${id}:`, err);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const resp = await response.json();
|
||||
const data = resp.data.data || resp.data;
|
||||
|
||||
if (!Array.isArray(data) || data.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return data.map((product: any) => {
|
||||
const metadata: Record<string, string | number | undefined> = {};
|
||||
if (product.metadata && typeof product.metadata === 'object') {
|
||||
Object.keys(product.metadata).forEach(key => {
|
||||
const value = product.metadata[key];
|
||||
if (value !== null && value !== undefined) {
|
||||
const numValue = parseFloat(value);
|
||||
metadata[key] = isNaN(numValue) ? value : numValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
|
||||
const imageAlt = product.imageAlt || product.name || "";
|
||||
const images = product.images && Array.isArray(product.images) && product.images.length > 0
|
||||
? product.images
|
||||
: [imageSrc];
|
||||
|
||||
return {
|
||||
id: product.id || String(Math.random()),
|
||||
name: product.name || "Untitled Product",
|
||||
description: product.description || "",
|
||||
price: product.default_price?.unit_amount
|
||||
? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
|
||||
: product.price || "$0",
|
||||
priceId: product.default_price?.id || product.priceId,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
images,
|
||||
brand: product.metadata?.brand || product.brand || "",
|
||||
variant: product.metadata?.variant || product.variant || "",
|
||||
rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
|
||||
reviewCount: product.metadata?.reviewCount || undefined,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
return [];
|
||||
export const searchProducts = async (query: string): Promise<ApiProduct[]> => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE_URL}/products/search?q=${encodeURIComponent(query)}`
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
}
|
||||
return await response.json();
|
||||
} catch (err) {
|
||||
console.error("Failed to search products:", err);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export async function fetchProduct(productId: string): Promise<Product | null> {
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
|
||||
if (!apiUrl || !projectId) {
|
||||
return null;
|
||||
export const fetchProductsByCategory = async (
|
||||
category: string
|
||||
): Promise<ApiProduct[]> => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_BASE_URL}/products/category/${category}`
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
}
|
||||
|
||||
try {
|
||||
const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const resp = await response.json();
|
||||
const product = resp.data?.data || resp.data || resp;
|
||||
|
||||
if (!product || typeof product !== 'object') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const metadata: Record<string, string | number | undefined> = {};
|
||||
if (product.metadata && typeof product.metadata === 'object') {
|
||||
Object.keys(product.metadata).forEach(key => {
|
||||
const value = product.metadata[key];
|
||||
if (value !== null && value !== undefined && value !== '') {
|
||||
const numValue = parseFloat(String(value));
|
||||
metadata[key] = isNaN(numValue) ? String(value) : numValue;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let priceValue = product.price;
|
||||
if (!priceValue && product.default_price?.unit_amount) {
|
||||
priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
|
||||
}
|
||||
if (!priceValue) {
|
||||
priceValue = "$0";
|
||||
}
|
||||
|
||||
const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
|
||||
const imageAlt = product.imageAlt || product.name || "";
|
||||
const images = product.images && Array.isArray(product.images) && product.images.length > 0
|
||||
? product.images
|
||||
: [imageSrc];
|
||||
|
||||
return {
|
||||
id: product.id || String(Math.random()),
|
||||
name: product.name || "Untitled Product",
|
||||
description: product.description || "",
|
||||
price: priceValue,
|
||||
priceId: product.default_price?.id || product.priceId,
|
||||
imageSrc,
|
||||
imageAlt,
|
||||
images,
|
||||
brand: product.metadata?.brand || product.brand || "",
|
||||
variant: product.metadata?.variant || product.variant || "",
|
||||
rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
|
||||
reviewCount: product.metadata?.reviewCount || undefined,
|
||||
metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
|
||||
};
|
||||
} catch (error) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return await response.json();
|
||||
} catch (err) {
|
||||
console.error(`Failed to fetch products in category ${category}:`, err);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user