'use client'; import { useState, useEffect } from 'react'; import styles from './SocialConnect.module.css'; // SVG Icons (Reusing existing ones) const Icons = { TikTok: ( ), WhatsApp: ( ), Discord: ( ), YouTube: ( ), Instagram: ( ), Facebook: ( ), Pinterest: ( ), Reddit: ( ), Dribbble: ( ) }; 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 (
Our Services

Always we offer the best services for success!

New analytic tools can help manufacturers in labor-intensive sectors boost productivity and earnings by double-digit on It is a secure and simple ondemand. the total percentages.

{socialPlatforms.map((platform, index) => { const slot = getSlot(index); return (
setActiveIndex(index)} >
{platform.icon}
); })}
{activePlatform.icon}

{activePlatform.label}

{activePlatform.desc}
Prysm Quarterly has been defining...

{/*
+
More Services ↗
*/}
); }