212 lines
11 KiB
TypeScript
212 lines
11 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import {
|
|
Users, Smile, MapPin, Award,
|
|
Zap, Briefcase, Clock, Coffee, Layout, MousePointerClick, Gem
|
|
} from 'lucide-react';
|
|
import styles from './careers.module.css';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Careers - Join SocialBuddy',
|
|
description: 'Join our team and help shape the future of social media management.',
|
|
};
|
|
|
|
export default function CareersPage() {
|
|
return (
|
|
<div className={styles.careersPage}>
|
|
{/* Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>Careers</h1>
|
|
|
|
<div className={styles.breadcrumb}>
|
|
<Link href="/">Home</Link> <span>/</span> <span className={styles.active}>Careers</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 1. What We Offer (Left Content, Right 3 Images) */}
|
|
<section className={styles.offerSection}>
|
|
<div className="container">
|
|
<div className={styles.offerContainer}>
|
|
{/* Left Content */}
|
|
<div className={styles.offerContent}>
|
|
<span className={styles.subTitle}>What We Do</span>
|
|
<h2>We Are Building The Future of Social Media</h2>
|
|
<p>
|
|
At SocialBuddy, we don't just build tools; we build connections. Our platform empowers over 10,000 businesses to reach their potential audiences effectively.
|
|
</p>
|
|
<p>
|
|
We work with cutting-edge technologies like AI and Machine Learning to solve complex scale problems. If you love challenges and innovation, this is the place for you.
|
|
</p>
|
|
<button className="btn btn-primary">See Open Roles</button>
|
|
</div>
|
|
|
|
{/* Right Image Grid (3 Images) */}
|
|
<div className={styles.offerImageGrid}>
|
|
<div className={`${styles.gridImgWrapper} ${styles.img1}`}>
|
|
<Image
|
|
src="/about-image.png"
|
|
alt="Team Collaboration"
|
|
width={400}
|
|
height={500}
|
|
className={styles.gridImg}
|
|
/>
|
|
</div>
|
|
<div className={`${styles.gridImgWrapper} ${styles.img2}`}>
|
|
<Image
|
|
src="/images/about/workspace.png"
|
|
alt="Our Workspace"
|
|
width={300}
|
|
height={200}
|
|
className={styles.gridImg}
|
|
/>
|
|
</div>
|
|
<div className={`${styles.gridImgWrapper} ${styles.img3}`}>
|
|
<Image
|
|
src="/images/about/team-meeting.png"
|
|
alt="Meeting"
|
|
width={300}
|
|
height={200}
|
|
className={styles.gridImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 2. Stats Section (BG + Overlay) */}
|
|
<section className={styles.statsSection}>
|
|
<div className="container">
|
|
<div className={styles.statsGrid}>
|
|
<div className={styles.statItem}>
|
|
<div className={styles.statIconWrapper}><Users size={48} /></div>
|
|
<div className={styles.statNumber}>54</div>
|
|
<div className={styles.statLabel}>Happy Team</div>
|
|
</div>
|
|
<div className={styles.statItem}>
|
|
<div className={styles.statIconWrapper}><Smile size={48} /></div>
|
|
<div className={styles.statNumber}>340</div>
|
|
<div className={styles.statLabel}>Completed Projects</div>
|
|
</div>
|
|
<div className={styles.statItem}>
|
|
<div className={styles.statIconWrapper}><MapPin size={48} /></div>
|
|
<div className={styles.statNumber}>15</div>
|
|
<div className={styles.statLabel}>Countries</div>
|
|
</div>
|
|
<div className={styles.statItem}>
|
|
<div className={styles.statIconWrapper}><Award size={48} /></div>
|
|
<div className={styles.statNumber}>25</div>
|
|
<div className={styles.statLabel}>Awards Won</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 3. Hiring Process (Timeline) */}
|
|
<section className={styles.hiringSection}>
|
|
<div className="container">
|
|
<div className={styles.hiringGrid}>
|
|
{/* Left: Image */}
|
|
<div className={styles.hiringImageWrapper}>
|
|
<Image
|
|
src="/about-image-2.png"
|
|
alt="Hiring Process"
|
|
width={500}
|
|
height={600}
|
|
className={styles.hiringImg}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right: Process List */}
|
|
<div className={styles.processList}>
|
|
<div>
|
|
<span className={styles.subTitle}>Hiring Process</span>
|
|
<h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
|
|
Join in 3 Simple Steps
|
|
</h2>
|
|
</div>
|
|
|
|
<div className={styles.processItem}>
|
|
<div className={styles.processNumber}>01</div>
|
|
<div className={styles.processContent}>
|
|
<h4>Provide details</h4>
|
|
<p>Submit your application with your resume and portfolio. Tell us about your journey.</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.processItem}>
|
|
<div className={styles.processNumber}>02</div>
|
|
<div className={styles.processContent}>
|
|
<h4>Schedule Interview</h4>
|
|
<p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.processItem}>
|
|
<div className={styles.processNumber}>03</div>
|
|
<div className={styles.processContent}>
|
|
<h4>Get Hired</h4>
|
|
<p>Receive an offer and join our amazing team. Welcome aboard!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 4. Ultimate Experience (Dotted Cards) */}
|
|
<section className={styles.benefitsSection}>
|
|
<div className="container">
|
|
<div className={styles.benefitsGrid}>
|
|
{/* Left Content */}
|
|
<div className={styles.benefitsContent}>
|
|
<span className={styles.subTitle}>Why Choose Us?</span>
|
|
<h2>Ultimate Experience for <br /> Your Career</h2>
|
|
<p className={styles.benefitsText}>
|
|
Completely empower your career journey with robust opportunities. We enable front-end and back-end developers to thrive in an environment of innovation.
|
|
</p>
|
|
<button className="btn btn-primary btn-large">Learn More +</button>
|
|
</div>
|
|
|
|
{/* Right Connected Cards */}
|
|
<div className={styles.connectedCards}>
|
|
<div className={styles.connCard}>
|
|
<div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
|
|
<Layout />
|
|
</div>
|
|
<div className={styles.connContent}>
|
|
<h4>Future Technology</h4>
|
|
<p>Work with the latest modern stack.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}>
|
|
<div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}>
|
|
<MousePointerClick />
|
|
</div>
|
|
<div className={styles.connContent}>
|
|
<h4 style={{ color: 'white' }}>Drag & Drop Builder</h4>
|
|
<p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.connCard}>
|
|
<div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
|
|
<Gem />
|
|
</div>
|
|
<div className={styles.connContent}>
|
|
<h4>Most Eco Friendly</h4>
|
|
<p>Sustainable practices at core.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|