105 lines
4.8 KiB
TypeScript
105 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { Users, Layout, ShieldCheck, ArrowRight } from 'lucide-react';
|
|
import styles from './AboutSection.module.css';
|
|
|
|
const AboutSection = () => {
|
|
return (
|
|
<section className={styles.section} id="about">
|
|
<div className={styles.container}>
|
|
<div className={styles.contentWrapper}>
|
|
{/* Left Side - Image Composition */}
|
|
<div className={`${styles.imageGrid} animate-slide-right`}>
|
|
{/* Main Large Image (Top Right) */}
|
|
<div className={styles.mainImageWrapper}>
|
|
<Image
|
|
src="/about-image.png"
|
|
alt="Business Professional"
|
|
width={500}
|
|
height={600}
|
|
className={styles.image}
|
|
/>
|
|
</div>
|
|
{/* Secondary Small Image (Bottom Left) */}
|
|
<div className={styles.secondaryImageWrapper}>
|
|
<Image
|
|
src="/about-image-2.png"
|
|
alt="Team working"
|
|
width={400}
|
|
height={400}
|
|
className={styles.image}
|
|
/>
|
|
</div>
|
|
{/* Badge removed as requested */}
|
|
</div>
|
|
|
|
{/* Right Side - Content */}
|
|
<div className={`${styles.textContent} animate-slide-left`}>
|
|
{/* Subtitle */}
|
|
<div className={styles.subTitle}>
|
|
About Company
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h2 className={styles.title}>
|
|
We Are The Best <span className="gradient-text">Social Media</span> Marketing Agency
|
|
</h2>
|
|
|
|
{/* Description */}
|
|
<p className={styles.description}>
|
|
Elevate your brand with our data-driven social media strategies. We combine creativity with analytics to deliver campaigns that resonate with your audience and drive measurable results.
|
|
</p>
|
|
|
|
{/* Features List */}
|
|
<ul className={styles.featuresList}>
|
|
<li className={styles.featureItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<Users size={28} />
|
|
</div>
|
|
<div className={styles.featureContent}>
|
|
<h4>Trusted Partner</h4>
|
|
<p>Over a decade of experience helping brands grow their online presence with verified strategies.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li className={styles.featureItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<Layout size={28} />
|
|
</div>
|
|
<div className={styles.featureContent}>
|
|
<h4>Fastpace Platform</h4>
|
|
<p>Rapid deployment of campaigns across all major social platforms to catch trends instantly.</p>
|
|
</div>
|
|
</li>
|
|
|
|
<li className={styles.featureItem}>
|
|
<div className={styles.iconWrapper}>
|
|
<ShieldCheck size={28} />
|
|
</div>
|
|
<div className={styles.featureContent}>
|
|
<h4>Tested Reliability</h4>
|
|
<p>Consistent results and transparent reporting you can count on, backed by data.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* CTA Button */}
|
|
<div className={styles.buttonWrapper}>
|
|
<Link href="/about" className="btn btn-primary btn-large">
|
|
Discover More <ArrowRight size={20} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Counters Section Removed as requested */}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutSection;
|