157 lines
13 KiB
TypeScript
157 lines
13 KiB
TypeScript
'use client';
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from 'react';
|
|
import styles from './SocialConnect.module.css';
|
|
|
|
// SVG Icons (Reusing existing ones)
|
|
const Icons = {
|
|
TikTok: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.03 5.84-.08 8.76-.08 2.18-.73 4.3-2.12 5.92-1.61 1.95-4.54 2.69-6.9 1.77-2.36-.92-4.1-3.32-4.04-5.91.03-3.03 2.39-5.75 5.51-6.07 1.1-.11 2.22-.03 3.32.09v4.11c-.53-.16-1.09-.23-1.64-.17-1.14.07-2.19.8-2.62 1.86-.54 1.34.02 2.96 1.29 3.65 1.37.75 3.19.46 4.19-.83.67-.88.66-2 .66-3.08V.02z" />
|
|
</svg>
|
|
),
|
|
WhatsApp: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
|
|
</svg>
|
|
),
|
|
Discord: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1892.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.1023.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1569 2.419zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.419-2.1568 2.419z" />
|
|
</svg>
|
|
),
|
|
YouTube: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
</svg>
|
|
),
|
|
Instagram: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z" />
|
|
</svg>
|
|
),
|
|
Facebook: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
|
</svg>
|
|
),
|
|
Pinterest: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.399.165-1.495-.69-2.433-2.868-2.433-4.624 0-3.761 2.748-7.229 7.951-7.229 4.173 0 7.41 2.967 7.41 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" />
|
|
</svg>
|
|
),
|
|
Reddit: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 1.249-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z" />
|
|
</svg>
|
|
),
|
|
Dribbble: (
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm9.856-13.468C21.996 9.873 22 9.213 22 9.213c-2.736-.626-5.419-.607-7.85-2.002.396-.921 1.139-2.477 1.574-3.52C18.646 5.176 20.662 7.697 21.856 10.532zM14.075 2.502c-.463 1.106-1.206 2.768-1.573 3.659-2.012-.676-4.665-1.127-7.906-.949C6.012 3.12 8.847 1.838 12 1.838c.706 0 1.398.067 2.075.164zM3.461 6.574c3.085-.205 5.8 0 8.019.864C9.577 10.74 8.71 14.545 8.525 15.42a10.086 10.086 0 0 1-5.69-3.793 10.155 10.155 0 0 1 .626-5.053zM2.201 13.91c.219-.011 2.392-.158 5.626-3.856.126.657 1.295 4.887 5.067 7.424-2.217 3.018-5.748 3.901-5.798 3.913A10.15 10.15 0 0 1 2.201 13.91zm12.399 7.915c.036-.008 3.552-.801 5.485-3.828 2.062-1.353 3.327-3.414 3.72-4.148-1.53.684-4.223 1.6-7.373 1.05-.386 2.257-1.159 5.867-1.832 6.926zm1.206-8.528c3.033.455 5.814-.408 7.373-1.077.014.288.021.578.021.87 0 .5-.038.995-.109 1.482-.416.37-1.637 1.439-4.212 1.583a15.77 15.77 0 0 1-3.073-2.858z" />
|
|
</svg>
|
|
)
|
|
};
|
|
|
|
const socialPlatforms = [
|
|
{ name: 'TikTok', icon: Icons.TikTok, color: '#000000', label: 'Video Marketing', desc: 'Create viral video content that engages millions of users daily.' },
|
|
{ name: 'WhatsApp', icon: Icons.WhatsApp, color: '#25D366', label: 'Direct Messaging', desc: 'Connect directly with customers through their preferred chat app.' },
|
|
{ name: 'Discord', icon: Icons.Discord, color: '#5865F2', label: 'Community Building', desc: 'Build and manage thriving communities around your brand.' },
|
|
{ name: 'YouTube', icon: Icons.YouTube, color: '#FF0000', label: 'Content Strategy', desc: 'Leverage long-form video content to build authority and SEO.' },
|
|
{ name: 'Instagram', icon: Icons.Instagram, color: '#E4405F', label: 'Visual Branding', desc: 'Showcase your brand aesthetics clearly and effectively.' },
|
|
{ name: 'Facebook', icon: Icons.Facebook, color: '#1877F2', label: 'Social Advertising', desc: 'Target specific demographics with precision ads.' },
|
|
{ name: 'Pinterest', icon: Icons.Pinterest, color: '#BD081C', label: 'Visual Discovery', desc: 'Drive traffic through inspiring visual content and pins.' },
|
|
{ name: 'Reddit', icon: Icons.Reddit, color: '#FF4500', label: 'Niche Engagement', desc: 'Engage with highly specific interest groups authenticaly.' },
|
|
{ name: 'Dribbble', icon: Icons.Dribbble, color: '#EA4C89', label: 'Design Showcase', desc: 'Demonstrate design expertise to a creative audience.' },
|
|
];
|
|
|
|
export default function SocialConnect() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setActiveIndex((prev) => (prev + 1) % socialPlatforms.length);
|
|
}, 3000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const getSlot = (index: number) => {
|
|
const length = socialPlatforms.length;
|
|
let diff = (index - activeIndex) % length;
|
|
if (diff < 0) diff += length;
|
|
|
|
// Slot Mapping:
|
|
// diff 0 -> Center (3)
|
|
// diff 1 -> Right Mid (4)
|
|
// diff 2 -> Right Entry (5)
|
|
// diff length-1 -> Left Mid (2)
|
|
// diff length-2 -> Left Exit (1)
|
|
|
|
if (diff === 0) return 3;
|
|
if (diff === 1) return 4;
|
|
if (diff === 2) return 5;
|
|
if (diff === length - 1) return 2;
|
|
if (diff === length - 2) return 1;
|
|
return 0; // Hidden
|
|
};
|
|
|
|
const activePlatform = socialPlatforms[activeIndex];
|
|
|
|
return (
|
|
<section className={styles.carouselSection}>
|
|
<div className={styles.container}>
|
|
<div className={styles.header}>
|
|
<div className={styles.subTitle}>Our Services</div>
|
|
<h2 className={styles.title}><span className="gradient-text">Proven Solutions </span>That Drive <br /> Real Outcomes</h2>
|
|
<p className={styles.description}>
|
|
Modern social platforms demand more than visibility - they require consistency, relevance, and measurable progress. Our service framework is built to help brands strengthen engagement, improve efficiency, and scale results using structured execution and data-backed decisions.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.arcContainer}>
|
|
<div className={styles.dashedArc}></div>
|
|
|
|
{socialPlatforms.map((platform, index) => {
|
|
const slot = getSlot(index);
|
|
return (
|
|
<div
|
|
key={platform.name}
|
|
className={`${styles.iconWrapper} ${styles[`slot${slot}`]}`}
|
|
style={{ '--color': platform.color } as React.CSSProperties}
|
|
onClick={() => setActiveIndex(index)}
|
|
>
|
|
<div className={styles.iconCircle}>
|
|
{platform.icon}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<div className={styles.centerCard}>
|
|
<div className={styles.cardIcon} style={{ color: activePlatform.color }}>
|
|
{activePlatform.icon}
|
|
</div>
|
|
<h3 className={styles.cardTitle}>{activePlatform.label}</h3>
|
|
<p className={styles.cardDesc}>
|
|
{activePlatform.desc}
|
|
</p>
|
|
<Link href="/about">
|
|
<button
|
|
className={styles.readMoreBtn}
|
|
style={{ backgroundColor: activePlatform.color }}
|
|
>
|
|
Read More
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* <div className={styles.moreServicesBtn}>
|
|
<div className={styles.plusIcon}>+</div>
|
|
<span>More Services</span>
|
|
<span className={styles.arrowIcon}>↗</span>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|