images updated

components/AboutSection.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { Users, Layout, ShieldCheck, ArrowRight } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 import styles from './AboutSection.module.css';
 
 const AboutSection = () => {
@@ -16,7 +16,7 @@ const AboutSection = () => {
                         {/* Main Large Image (Top Right) */}
                         <div className={styles.mainImageWrapper}>
                             <Image
-                                src="/about-image.png"
+                                src="/images/home/about-big-img.webp"
                                 alt="Business Professional"
                                 width={500}
                                 height={600}
@@ -26,7 +26,7 @@ const AboutSection = () => {
                         {/* Secondary Small Image (Bottom Left) */}
                         <div className={styles.secondaryImageWrapper}>
                             <Image
-                                src="/about-image-2.png"
+                                src="/images/home/about-small-img.webp"
                                 alt="Team working"
                                 width={400}
                                 height={400}
@@ -57,7 +57,12 @@ const AboutSection = () => {
                         <ul className={styles.featuresList}>
                             <li className={styles.featureItem}>
                                 <div className={styles.iconWrapper}>
-                                    <Users size={28} />
+                                    <Image
+                                        src="/images/home/strategic.webp"
+                                        alt="Strategic Partnership"
+                                        width={28}
+                                        height={28}
+                                    />
                                 </div>
                                 <div className={styles.featureContent}>
                                     <h4>Strategic Partnership</h4>
@@ -67,7 +72,12 @@ const AboutSection = () => {
 
                             <li className={styles.featureItem}>
                                 <div className={styles.iconWrapper}>
-                                    <Layout size={28} />
+                                    <Image
+                                        src="/images/home/efficient.webp"
+                                        alt="Efficient Campaign Execution"
+                                        width={28}
+                                        height={28}
+                                    />
                                 </div>
                                 <div className={styles.featureContent}>
                                     <h4>Efficient Campaign Execution</h4>
@@ -77,7 +87,12 @@ const AboutSection = () => {
 
                             <li className={styles.featureItem}>
                                 <div className={styles.iconWrapper}>
-                                    <ShieldCheck size={28} />
+                                    <Image
+                                        src="/images/home/data.webp"
+                                        alt="Data-Led Performance Tracking"
+                                        width={28}
+                                        height={28}
+                                    />
                                 </div>
                                 <div className={styles.featureContent}>
                                     <h4>Data-Led Performance Tracking</h4>

components/CTA.module.css

@@ -16,7 +16,7 @@
 .gridBackground {
     position: absolute;
     inset: 0;
-    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('/hero-bg-v2.png');
+    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('/images/home/one-place.webp');
     background-size: cover;
     background-position: center;
     z-index: 0;

components/CoreServices.module.css

@@ -116,185 +116,33 @@
     margin: 0;
 }
 
-/* Central Visual Styles */
+/* Central Image Styles */
 .columnCenter {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 400px;
     position: relative;
+    z-index: 1;
 }
 
 .centralVisual {
     position: relative;
-    width: 300px;
-    height: 400px;
+    width: 100%;
+    max-width: 203px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.circleBg {
-    position: absolute;
-    width: 350px;
-    height: 350px;
-    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
-    border-radius: 50%;
-    z-index: 0;
-    animation: pulse 4s ease-in-out infinite;
+.centerImage {
+    width: 203px;
+    height: 256px;
+    object-fit: contain;
+    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
+    animation: float 6s ease-in-out infinite;
 }
 
-@keyframes pulse {
-
-    0%,
-    100% {
-        transform: scale(1);
-        opacity: 0.5;
-    }
-
-    50% {
-        transform: scale(1.1);
-        opacity: 0.8;
-    }
-}
-
-.glassCard {
-    width: 240px;
-    height: 340px;
-    background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-    transform: rotateY(-10deg) rotateX(10deg);
-    transition: transform 0.5s ease;
-}
-
-.centralVisual:hover .glassCard {
-    transform: rotateY(0) rotateX(0) translateY(-10px);
-}
-
-.cardHeader {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding-bottom: 10px;
-    margin-bottom: 20px;
-}
-
-.dots {
-    display: flex;
-    gap: 6px;
-}
-
-.dots span {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.2);
-}
-
-.dots span:nth-child(1) {
-    background: #ff5f56;
-}
-
-.dots span:nth-child(2) {
-    background: #ffbd2e;
-}
-
-.dots span:nth-child(3) {
-    background: #27c93f;
-}
-
-.cardBody {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-}
-
-.graphArea {
-    display: flex;
-    align-items: flex-end;
-    gap: 10px;
-    height: 100px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding-bottom: 5px;
-}
-
-.bar {
-    width: 20%;
-    background: linear-gradient(to top, var(--primary), var(--secondary));
-    border-radius: 4px 4px 0 0;
-    animation: growBar 2s ease-out infinite alternate;
-}
-
-.bar:nth-child(1) {
-    height: 40%;
-    animation-delay: 0s;
-}
-
-.bar:nth-child(2) {
-    height: 70%;
-    animation-delay: 0.2s;
-}
-
-.bar:nth-child(3) {
-    height: 50%;
-    animation-delay: 0.4s;
-}
-
-.bar:nth-child(4) {
-    height: 90%;
-    animation-delay: 0.6s;
-}
-
-@keyframes growBar {
-    from {
-        transform: scaleY(0.9);
-    }
-
-    to {
-        transform: scaleY(1.1);
-    }
-}
-
-.pieChart {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    background: conic-gradient(var(--primary) 0% 70%, rgba(255, 255, 255, 0.1) 70% 100%);
-    margin: 0 auto;
-    position: relative;
-}
-
-.pieChart::after {
-    content: '';
-    position: absolute;
-    inset: 20px;
-    background: var(--card-bg);
-    /* Match visual background if possible, or transparent */
-    border-radius: 50%;
-    backdrop-filter: blur(5px);
-}
-
-.floatingBadge {
-    position: absolute;
-    top: -20px;
-    right: -20px;
-    background: white;
-    color: black;
-    padding: 8px 16px;
-    border-radius: 20px;
-    font-weight: bold;
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-    animation: floatBadge 3s ease-in-out infinite;
-}
-
-@keyframes floatBadge {
+@keyframes float {
 
     0%,
     100% {
@@ -302,7 +150,7 @@
     }
 
     50% {
-        transform: translateY(-5px);
+        transform: translateY(-20px);
     }
 }
 

components/CoreServices.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import styles from './CoreServices.module.css';
 
 export default function CoreServices() {
@@ -19,7 +20,12 @@ export default function CoreServices() {
                     <div className={styles.columnLeft}>
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>📊</span>
+                                <Image
+                                    src="/images/home/control-panel.webp"
+                                    alt="Central Control Panel"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Central Control Panel</h3>
@@ -29,7 +35,12 @@ export default function CoreServices() {
 
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>⚡</span>
+                                <Image
+                                    src="/images/home/automation.webp"
+                                    alt="Intelligent Posting Automation"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Intelligent Posting Automation</h3>
@@ -39,7 +50,12 @@ export default function CoreServices() {
 
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>📅</span>
+                                <Image
+                                    src="/images/home/planning.webp"
+                                    alt="Interactive Planning View"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Interactive Planning View</h3>
@@ -51,27 +67,13 @@ export default function CoreServices() {
                     {/* Center Column - Image */}
                     <div className={styles.columnCenter}>
                         <div className={styles.centralVisual}>
-                            {/* CSS-based Abstract Dashboard/Manager Illustration */}
-                            <div className={styles.circleBg}></div>
-                            <div className={styles.glassCard}>
-                                <div className={styles.cardHeader}>
-                                    <div className={styles.dots}>
-                                        <span></span><span></span><span></span>
-                                    </div>
-                                </div>
-                                <div className={styles.cardBody}>
-                                    <div className={styles.graphArea}>
-                                        <div className={styles.bar}></div>
-                                        <div className={styles.bar}></div>
-                                        <div className={styles.bar}></div>
-                                        <div className={styles.bar}></div>
-                                    </div>
-                                    <div className={styles.pieChart}></div>
-                                </div>
-                                <div className={styles.floatingBadge}>
-                                    <span>🚀</span> +128%
-                                </div>
-                            </div>
+                            <Image
+                                src="/images/home/our-solutions-centre-main.webp"
+                                alt="Our Solutions Centre"
+                                width={203}
+                                height={256}
+                                className={styles.centerImage}
+                            />
                         </div>
                     </div>
 
@@ -79,7 +81,12 @@ export default function CoreServices() {
                     <div className={styles.columnRight}>
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>📈</span>
+                                <Image
+                                    src="/images/home/insights.webp"
+                                    alt="Performance Insights"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Performance Insights & Exports</h3>
@@ -89,7 +96,12 @@ export default function CoreServices() {
 
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>👥</span>
+                                <Image
+                                    src="/images/home/team.webp"
+                                    alt="Team-Based Workflows"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Team-Based Workflows</h3>
@@ -99,7 +111,12 @@ export default function CoreServices() {
 
                         <div className={styles.serviceItem}>
                             <div className={styles.iconWrapper}>
-                                <span className={styles.icon}>💬</span>
+                                <Image
+                                    src="/images/home/message.webp"
+                                    alt="Unified Message Center"
+                                    width={29}
+                                    height={29}
+                                />
                             </div>
                             <div className={styles.content}>
                                 <h3>Unified Message Center</h3>

components/FAQ.module.css

@@ -106,6 +106,10 @@
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15) !important;
 }
 
+.iconImage {
+    object-fit: contain;
+}
+
 .featureContent h4 {
     font-size: 1.125rem;
     font-weight: 700;

components/FAQ.tsx

@@ -1,7 +1,8 @@
 'use client';
 
+import Image from 'next/image';
 import { useState } from 'react';
-import { Calendar, Sparkles, ShieldCheck, ChevronDown } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import styles from './FAQ.module.css';
 
 interface FAQItem {
@@ -13,7 +14,7 @@ interface FAQCategory {
     id: string;
     title: string;
     description: string;
-    icon: React.ReactNode;
+    icon: string;
     colorClass: string;
     faqs: FAQItem[];
 }
@@ -27,7 +28,7 @@ export default function FAQ() {
             id: 'scheduling',
             title: 'Convenient Scheduling',
             description: 'Easily plan and schedule your content across all platforms.',
-            icon: <Calendar size={24} strokeWidth={2.5} />,
+            icon: '/images/home/schedule.webp',
             colorClass: 'orange',
             faqs: [
                 {
@@ -56,7 +57,7 @@ export default function FAQ() {
             id: 'ai',
             title: 'Best AI Content Team',
             description: 'Leverage advanced AI to generate captions and ideas instantly.',
-            icon: <Sparkles size={24} strokeWidth={2.5} />,
+            icon: '/images/home/content-team.webp',
             colorClass: 'red',
             faqs: [
                 {
@@ -85,7 +86,7 @@ export default function FAQ() {
             id: 'growth',
             title: 'Guaranteed Satisfaction',
             description: 'Experience significant growth in engagement and reach.',
-            icon: <ShieldCheck size={24} strokeWidth={2.5} />,
+            icon: '/images/home/satisfaction.webp',
             colorClass: 'blue',
             faqs: [
                 {
@@ -144,7 +145,13 @@ export default function FAQ() {
                                     tabIndex={0}
                                 >
                                     <div className={`${styles.iconWrapper} ${styles[category.colorClass]} ${activeCategoryIndex === index ? styles.activeIcon : ''}`}>
-                                        {category.icon}
+                                        <Image
+                                            src={category.icon}
+                                            alt={category.title}
+                                            width={31}
+                                            height={31}
+                                            className={styles.iconImage}
+                                        />
                                     </div>
                                     <div className={styles.featureContent}>
                                         <h4>{category.title}</h4>

components/Hero.tsx

@@ -17,7 +17,7 @@ export default function Hero() {
             subtitle: 'Monitor interactions, audience behavior, and campaign outcomes through a unified insights panel designed to guide better marketing moves.',
             ctaPrimary: 'View Insights',
             trustedBy:'Chosen by teams across industries',
-            image: '/hero-slide-1.png'
+            image: '/images/home/banner-1.webp'
         },
         {
             id: 2,
@@ -27,7 +27,7 @@ export default function Hero() {
             subtitle: 'Coordinate publishing, conversations, and performance tracking across platforms without switching tools or losing momentum.',
             ctaPrimary: 'Access the Dashboard',
             trustedBy:'Supporting brands, creators, and agencies globally',
-            image: '/hero-slide-2.png'
+            image: '/images/home/banner-2.webp'
         },
         {
             id: 3,
@@ -37,7 +37,7 @@ export default function Hero() {
             subtitle: 'Leverage intelligent reports and audience insights to refine your strategy, improve visibility, and scale engagement with confidence.',
             ctaPrimary: 'Start Your Journey',
             trustedBy:'Built for fast-moving marketing teams',
-            image: '/hero-slide-3.png'
+            image: '/images/home/banner-3.webp'
         },
     ];
 

components/HowItWorks.module.css

@@ -196,7 +196,7 @@
     width: 60px;
     height: 60px;
     border-radius: 50%;
-    background: var(--gradient-hero);
+    background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;

components/HowItWorks.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import Image from 'next/image';
 import { useEffect, useRef } from 'react';
 import styles from './HowItWorks.module.css';
-import { TrendingUp, BarChart3, Users, Heart } from 'lucide-react';
 
 export default function HowItWorks() {
     const sectionRef = useRef<HTMLElement>(null);
@@ -30,25 +30,25 @@ export default function HowItWorks() {
             number: '01',
             title: 'Discovery Session',
             description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
-            icon: <TrendingUp />,
+            icon: '/images/home/discovery.webp',
         },
         {
             number: '02',
             title: 'Planning & Direction',
             description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
-            icon: <BarChart3 />,
+            icon: '/images/home/plan.webp',
         },
         {
             number: '03',
             title: 'Execution Phase',
             description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
-            icon: <Users />,
+            icon: '/images/home/execution.webp',
         },
         {
             number: '04',
             title: 'Outcome & Optimization',
             description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
-            icon: <Heart />,
+            icon: '/images/home/outcome.webp',
         },
     ];
 
@@ -79,7 +79,13 @@ export default function HowItWorks() {
                                     <p className={styles.stepDescription}>{step.description}</p>
                                 </div>
                                 <div className={styles.iconCircle}>
-                                    {step.icon}
+                                    <Image
+                                        src={step.icon}
+                                        alt={step.title}
+                                        width={31}
+                                        height={31}
+                                        className={styles.iconImage}
+                                    />
                                 </div>
                             </div>
 

components/StatsCounter.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useState, useEffect, useRef } from 'react';
 import styles from './StatsCounter.module.css';
 
@@ -74,7 +75,12 @@ export default function StatsCounter() {
                     <div className={styles.statItem}>
                         <div className={styles.iconWrapper}>
                             <div className={styles.iconBg}></div>
-                            <span className={styles.statIcon}>👥</span>
+                            <Image
+                                src="/images/home/growing.webp"
+                                alt="Growing Community"
+                                width={38} 
+                                height={44}
+                            />
                         </div>
                         <div className={styles.textContent}>
                             <div className={styles.numberWrapper}>
@@ -88,7 +94,12 @@ export default function StatsCounter() {
                     <div className={styles.statItem}>
                         <div className={styles.iconWrapper}>
                             <div className={styles.iconBg}></div>
-                            <span className={styles.statIcon}>🚀</span>
+                            <Image
+                                src="/images/home/content.webp"
+                                alt="Content Published"
+                                width={38} 
+                                height={44}
+                            />
                         </div>
                         <div className={styles.textContent}>
                             <div className={styles.numberWrapper}>
@@ -102,7 +113,12 @@ export default function StatsCounter() {
                     <div className={styles.statItem}>
                         <div className={styles.iconWrapper}>
                             <div className={styles.iconBg}></div>
-                            <span className={styles.statIcon}>⭐</span>
+                            <Image
+                                src="/images/home/approval.webp"
+                                alt="Customer Approval"
+                                width={38} 
+                                height={44}
+                            />
                         </div>
                         <div className={styles.textContent}>
                             <div className={styles.numberWrapper}>

components/Testimonials.module.css

@@ -186,22 +186,30 @@
     font-size: 1.5rem;
 }
 
+.userInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
 .userInfo h4 {
-    font-size: 1rem;
+    font-size: 1.1rem;
     font-weight: 700;
     margin: 0;
     color: #2d3748;
 }
 
 .userCompany {
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     color: #718096;
     display: block;
 }
 
 .rating {
-    margin-left: auto;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
+    color: #fbbf24;
+    /* yellow-400 */
+    letter-spacing: 1px;
 }
 
 .reviewTitle {

components/Testimonials.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import { useState, useEffect, useRef } from 'react';
 import styles from './Testimonials.module.css';
 
@@ -14,35 +15,35 @@ export default function Testimonials() {
             role: 'Growth Manager',
             reviewTitle: 'Highly Impressive Results!',
             text: 'The performance insights are extremely clear. We can now adjust campaigns quickly and make confident marketing decisions.',
-            image: '👩‍💼'
+            image: '/images/home/testimonial-1.webp'
         },
         {
             name: 'Emily Carter',
             role: 'Content Strategist',
             reviewTitle: 'Smooth and Reliable Platform!',
             text: 'Managing posts feels effortless now. Planning content ahead of time has significantly improved our publishing consistency.',
-            image: '👨‍💻'
+            image: '/images/home/testimonial-2.webp'
         },
         {
             name: 'Arjun Nair',
             role: 'Digital Consultant',
             reviewTitle: 'Excellent Tool for Teams!',
             text: 'Collaboration is seamless and approvals are faster. It has simplified how we handle multiple client accounts.',
-            image: '👩‍🎨'
+            image: '/images/home/testimonial-3.webp'
         },
         {
             name: 'Sophia Williams',
             role: 'Brand Manager',
             reviewTitle: 'Well Designed and Effective!',
             text: 'The interface is clean and easy to navigate. Tracking engagement across platforms has never been this simple.',
-            image: '👨‍💼'
+            image: '/images/home/testimonial-4.webp'
         },
         {
             name: 'Daniel Rodrigues',
             role: ' Marketing Lead',
             reviewTitle: 'Strong Value for Growth!',
             text: 'The reporting features save us hours every week. Insights are easy to understand and useful for strategy planning.',
-            image: '👩‍🦰'
+            image: '/images/home/testimonial-5.webp'
         },
     ];
 
@@ -130,14 +131,24 @@ export default function Testimonials() {
 
                         <div className={styles.miniStats}>
                             <div className={styles.statBadge}>
-                                <span className={styles.statIcon}>👥</span>
+                                <Image
+                                    src="/images/home/active-members.webp"
+                                    alt="Unified Message Center"
+                                    width={29}
+                                    height={29}
+                                />
                                 <div>
                                     <strong>10,000+</strong>
                                     <span>Active Members</span>
                                 </div>
                             </div>
                             <div className={styles.statBadge}>
-                                <span className={styles.statIcon}>⭐</span>
+                                <Image
+                                    src="/images/home/user-satisfaction.webp"
+                                    alt="Unified Message Center"
+                                    width={29}
+                                    height={29}
+                                />
                                 <div>
                                     <strong>4.9/5</strong>
                                     <span>User Satisfaction</span>
@@ -163,12 +174,19 @@ export default function Testimonials() {
                         {extendedTestimonials.map((t, i) => (
                             <div key={i} className={styles.sliderCard}>
                                 <div className={styles.cardHeader}>
-                                    <div className={styles.userImage}>{t.image}</div>
+                                    <div className={styles.userImage}>
+                                        <Image
+                                            src={t.image}
+                                            alt="User"
+                                            width={42}
+                                            height={48}
+                                        />
+                                    </div>
                                     <div className={styles.userInfo}>
                                         <h4>{t.name}</h4>
                                         <span className={styles.userCompany}>{t.role}</span>
+                                        <div className={styles.rating}>⭐⭐⭐⭐⭐</div>
                                     </div>
-                                    <div className={styles.rating}>⭐⭐⭐⭐⭐</div>
                                 </div>
                                 <h5 className={styles.reviewTitle}>{t.reviewTitle}</h5>
                                 <p className={styles.reviewText}>{t.text}</p>