224 lines
12 KiB
TypeScript
224 lines
12 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { ShieldCheck, Users, Zap, Award, CheckCircle2 } from 'lucide-react';
|
|
import styles from './about.module.css';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'About Us - SocialBuddy',
|
|
description: 'Learn about SocialBuddy\'s mission to empower businesses and creators with powerful social media management tools.',
|
|
};
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div className={styles.aboutPage}>
|
|
{/* Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className="container">
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>About Us</h1>
|
|
<div className={styles.breadcrumb}>
|
|
<a href="/">Home</a> / <span>About</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 1. Our Story Section (Reference Image 3) */}
|
|
<section className={styles.storySection}>
|
|
<div className="container">
|
|
<div className={styles.storyGrid}>
|
|
{/* Left Image with Frame */}
|
|
<div className={styles.storyImageContainer}>
|
|
<div className={styles.storyFrame}></div>
|
|
<div className={styles.storyImageWrapper}>
|
|
<Image
|
|
src="/images/about/team-meeting.png"
|
|
alt="Our Team Story"
|
|
width={600}
|
|
height={700}
|
|
className={styles.storyImg}
|
|
objectFit="cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Content */}
|
|
<div className={styles.storyContent}>
|
|
<h2 className={styles.storyTitle}>OUR STORY</h2>
|
|
<h3 className={styles.storyHeading}> redefining the way you manage social media.</h3>
|
|
<p className={styles.storyText}>
|
|
In the heart of the digital age, SocialBuddy began with a simple idea: to bring exceptional social media management tools directly to your fingertips. With a passion for innovation and a commitment to convenience, we embarked on a mission to redefine the way you grow your online presence.
|
|
</p>
|
|
<p className={styles.storyText}>
|
|
From our humble beginnings to becoming a beloved tool for creators worldwide, our journey has been guided by one principle: to deliver results. With a dedication to quality insights and tech innovation, we invite you to join us on this flavorful adventure. Welcome to SocialBuddy, where every click tells a story of passion, growth, and the joy of shared success.
|
|
</p>
|
|
<button className={styles.storyBtn}>
|
|
Learn more about us
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 2. Why Choose Us Section (Reference Image 1) */}
|
|
<section className={styles.whyChooseSection}>
|
|
<div className="container">
|
|
<div className={styles.whyHeader}>
|
|
<h2 className={styles.sectionTitle}>Why choose us?</h2>
|
|
<p className={styles.sectionSubtitle}>
|
|
We provide comprehensive solutions tailored to your unique needs, helping you achieve your goals faster.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.cardsGrid}>
|
|
{/* Card 1: Purple */}
|
|
<div className={`${styles.card} ${styles.cardPurple}`}>
|
|
<div className={styles.cardIconWrapper}>
|
|
<Users size={32} />
|
|
</div>
|
|
<h3>Experienced Professionals</h3>
|
|
<p>Our team consists of industry veterans with years of experience in social media strategies.</p>
|
|
</div>
|
|
|
|
{/* Card 2: Orange (Yellow/Peach in Ref) */}
|
|
<div className={`${styles.card} ${styles.cardOrange}`}>
|
|
<div className={styles.cardIconWrapper}>
|
|
<Award size={32} />
|
|
</div>
|
|
<h3>Satisfaction Guarantee</h3>
|
|
<p>We are committed to your success and offer a satisfaction guarantee on all our services.</p>
|
|
</div>
|
|
|
|
{/* Card 3: Pink (Red/Pink in Ref) */}
|
|
<div className={`${styles.card} ${styles.cardPink}`}>
|
|
<div className={styles.cardIconWrapper}>
|
|
<Zap size={32} />
|
|
</div>
|
|
<h3>Affordable Rates</h3>
|
|
<p>Get premium tools and insights at a fraction of the cost of enterprise solutions.</p>
|
|
</div>
|
|
|
|
{/* Card 4: Green */}
|
|
<div className={`${styles.card} ${styles.cardGreen}`}>
|
|
<div className={styles.cardIconWrapper}>
|
|
<ShieldCheck size={32} />
|
|
</div>
|
|
<h3>Reliable & Trustworthy</h3>
|
|
<p>Security and data privacy are our top priorities. Your account is safe with us.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 3. Features Loop Section (Reference Image 2) */}
|
|
<section className={styles.featureSetSection}>
|
|
<div className="container">
|
|
<div className={styles.featureSetGrid}>
|
|
{/* Left Content */}
|
|
<div className={styles.featureSetContent}>
|
|
<h2 className={styles.featureSetTitle}>
|
|
Comprehensive <span className="gradient-text">Feature Set</span> <br />
|
|
of a Social Manager App
|
|
</h2>
|
|
|
|
<div className={styles.featureList}>
|
|
<div className={styles.featureListItem}>
|
|
<div className={styles.featureListIcon}>
|
|
<CheckCircle2 size={24} />
|
|
</div>
|
|
<div className={styles.featureListText}>
|
|
<h4>Data Sync and Backup</h4>
|
|
<p>Sync tasks and app settings like system color across multiple devices automatically.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.featureListItem}>
|
|
<div className={styles.featureListIcon}>
|
|
<CheckCircle2 size={24} />
|
|
</div>
|
|
<div className={styles.featureListText}>
|
|
<h4>Task Attachments</h4>
|
|
<p>Users can attach files, documents, or links to tasks, providing additional context.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.featureListItem}>
|
|
<div className={styles.featureListIcon}>
|
|
<CheckCircle2 size={24} />
|
|
</div>
|
|
<div className={styles.featureListText}>
|
|
<h4>Real-time Analytics</h4>
|
|
<p>Track performance metrics instantly as they happen, giving you the edge to adapt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Image/Mockup */}
|
|
<div className={styles.featureSetImage}>
|
|
{/* Mockup Container */}
|
|
<div className={styles.mockupWrapper}>
|
|
<Image
|
|
src="/images/about/app-dashboard.png"
|
|
alt="Feature Dashboard"
|
|
width={600}
|
|
height={400}
|
|
className={styles.mockupImg}
|
|
/>
|
|
{/* Floating Cards simulating the ref image */}
|
|
<div className={`${styles.floatCard} ${styles.floatCard1}`}>
|
|
<span>Create Task</span>
|
|
<small>17 August, 2023</small>
|
|
</div>
|
|
<div className={`${styles.floatCard} ${styles.floatCard2}`}>
|
|
<span>Total Working Hours</span>
|
|
<strong>44:32:00</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 4. Ready CTA Section (Reference Image Bottom) */}
|
|
<section className={styles.readySection}>
|
|
<div className="container">
|
|
<div className={styles.readyCard}>
|
|
<div className={styles.readyContent}>
|
|
<h2 className={styles.readyTitle}>
|
|
Ready? Let's Start with <br /> SocialBuddy
|
|
and Get <span className={styles.whiteGradientText}>Awesome Experience</span>
|
|
</h2>
|
|
<p className={styles.readyText}>
|
|
Define unique social tactics for your brand. Users can adjust the goals, visuals and audience details to ensure their content workflows are spot on.
|
|
</p>
|
|
<button className={styles.readyBtn}>
|
|
Learn More
|
|
</button>
|
|
</div>
|
|
<div className={styles.readyImageWrapper}>
|
|
<div className={styles.phoneFrame}>
|
|
<Image
|
|
src="/device-mockup.png"
|
|
alt="SocialBuddy App"
|
|
width={300}
|
|
height={600}
|
|
className={styles.phoneScreen}
|
|
objectFit="cover"
|
|
/>
|
|
{/* Floating Overlay Card inside section */}
|
|
<div className={styles.phoneOverlayCard}>
|
|
<span>Task List</span>
|
|
<div className={styles.overlayItem}>✅ Social Audit</div>
|
|
<div className={styles.overlayItem}>✅ Content Plan</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|