home page contents and channels new structure updated

app/about/about.module.css

@@ -515,7 +515,7 @@
     top: 20%;
     right: -40px;
     background: white;
-    color: #0f172a;
+    color: #0072b1;
     padding: 1rem 1.5rem;
     border-radius: 16px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

app/channels/[slug]/channel-page.module.css

@@ -96,31 +96,37 @@
 
 .aboutImages {
     position: relative;
-    min-height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    padding: 2rem;
 }
 
 .aboutMainImgWrapper {
-    position: absolute;
+    position: relative;
-    top: 0;
+    z-index: 2;
-    left: 0;
+    width: 100%;
-    width: 80%;
+    max-width: 500px;
-    height: 85%;
+    aspect-ratio: 1;
-    z-index: 1;
+    border-radius: 24px;
-    border-radius: 12px;
     overflow: hidden;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
-.aboutSubImgWrapper {
+.aboutImageFrame {
     position: absolute;
-    bottom: 0;
+    top: 50%;
-    right: 0;
+    left: 50%;
-    width: 55%;
+    z-index: 1;
-    height: 50%;
+    width: 100%;
-    z-index: 2;
+    max-width: 500px;
-    border: 8px solid #fff;
+    height: auto;
-    border-radius: 12px;
+    /* Let it match aspect ratio via padding-bottom usually, but here using aspect-ratio property */
-    overflow: hidden;
+    aspect-ratio: 1;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    border: 2px solid var(--primary);
+    border-radius: 24px;
+    transform: translate(-50%, -50%) translate(-24px, 24px);
 }
 
 .aboutContent {
@@ -184,191 +190,291 @@
 
 /* --- Section 2: Benefits --- */
 .benefitsSection {
-    padding: 4rem 0;
+    padding: 6rem 0;
     background: var(--background-secondary);
 }
 
-.benefitsContainer {
+.benefitsHeader {
-    display: grid;
+    text-align: center;
-    grid-template-columns: 1fr;
+    max-width: 700px;
-    gap: 4rem;
+    margin: 0 auto 4rem;
-    align-items: center;
 }
 
-@media (min-width: 992px) {
+.sectionDescriptionCentered {
-    .benefitsContainer {
+    color: var(--text-secondary);
-        grid-template-columns: 1fr 1.5fr;
+    font-size: 1.125rem;
-    }
+    line-height: 1.7;
 }
 
-.benefitsContent {}
-
 .benefitsGrid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 1.5rem;
+    gap: 3rem 1.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
     .benefitsGrid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
+/* Card Styles */
 .benefitCard {
-    background: #fff;
+    position: relative;
-    padding: 2rem;
+    padding-left: 40px;
-    border-radius: 16px;
+    /* Space for the circle */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
-    transition: all 0.3s ease;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
 }
 
 .benefitCard:hover {
-    background: var(--primary);
     transform: translateY(-5px);
 }
 
-.benefitCard:hover * {
+/* Card Theme Colors */
-    color: #fff !important;
+.benefitCard:nth-child(1) {
+    --card-theme: var(--primary);
 }
 
-.benefitIcon {
+.benefitCard:nth-child(2) {
-    font-size: 2.5rem;
+    --card-theme: var(--secondary);
-    margin-bottom: 1rem;
+}
-    color: var(--primary);
+
-    transition: color 0.3s ease;
+.benefitCard:nth-child(3) {
+    --card-theme: var(--dark-blue);
+}
+
+.benefitCard:nth-child(4) {
+    --card-theme: var(--accent);
+}
+
+.benefitNumber {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 80px;
+    height: 80px;
+    background-color: var(--card-theme);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 1.75rem;
+    font-weight: 800;
+    z-index: 10;
+    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
+    border: 4px solid var(--background-secondary);
+    /* Matches bg to look like cutout */
+}
+
+.benefitCardContent {
+    background: #fff;
+    padding: 2rem 2rem 2rem 3.5rem;
+    /* Extra padding left for circle */
+    border-radius: 16px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+    position: relative;
+    z-index: 1;
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+}
+
+/* Decorative Accent on Right */
+.benefitCardContent::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 15%;
+    bottom: 15%;
+    width: 6px;
+    background: var(--card-theme);
+    border-radius: 4px 0 0 4px;
+    opacity: 0.7;
 }
 
 .benefitCardTitle {
     font-size: 1.25rem;
     font-weight: 700;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
     color: var(--text-primary);
-    transition: color 0.3s ease;
 }
 
 .benefitCardDesc {
-    font-size: 0.9rem;
+    font-size: 0.95rem;
     color: var(--text-secondary);
-    transition: color 0.3s ease;
+    line-height: 1.5;
 }
 
-/* --- Section 3: Testimonial (Update: Left Images Grid, Right Slider) --- */
+/* --- Section 3: Testimonials (New Split Layout) --- */
 .testimonialSection {
-    padding: 4rem 0;
+    padding: 6rem 0;
     background: #fff;
     overflow: hidden;
 }
 
-.testimonialGrid {
+.testimonialCenteredHeader {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto 4rem;
+}
+
+.channelTestimonialContainer {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 4rem;
+    gap: 3rem;
     align-items: center;
+    max-width: 1000px;
+    margin: 0 auto;
 }
 
 @media (min-width: 992px) {
-    .testimonialGrid {
+    .channelTestimonialContainer {
         grid-template-columns: 0.8fr 1.2fr;
-        /* Images < Slider */
     }
 }
 
-/* Left side: 2 Image Grid */
+/* Left Side: Large Image */
-.testimonialImages {
+.sliderLeftImage {
-    display: grid;
+    transition: opacity 0.3s ease-in-out;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
 }
 
-.testImgWrapper {
+.sliderImageWrapper {
-    border-radius: 12px;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 24px;
     overflow: hidden;
-    height: 300px;
+    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
-    background: #f0f0f0;
 }
 
-.testImgWrapper:nth-child(2) {
+.sliderMainImage {
-    margin-top: 3rem;
+    width: 100%;
-    /* Stagger effect */
+    height: 100%;
+    object-fit: cover;
+    display: block;
 }
 
-/* Right side: Slider Styles (Used by Client Component) */
+/* Right Side: Content Box */
-.testimonialSliderContainer {
+.sliderRightContent {
+    width: 100%;
+}
+
+.testimonialCard {
+    background: var(--gradient-primary);
+    /* Pink/Blue Gradient as "Our theme color" */
+    border-radius: 24px;
+    padding: 3rem;
+    color: #fff;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     position: relative;
-    padding: 2rem;
+    overflow: hidden;
 }
 
-.testSliderContent {
+/* Subtle background accent for the card if needed, currently gradient is enough */
-    min-height: 300px;
+
+.testCardHeader {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
-    justify-content: center;
+    align-items: flex-start;
-    animation: fadeIn 0.5s ease-in-out;
+    margin-bottom: 2rem;
+}
+
+.quoteIcon {
+    opacity: 0.6;
 }
 
 .testStars {
     display: flex;
     gap: 4px;
-    margin-bottom: 1.5rem;
 }
 
-.testQuoteFade {
+.testQuoteText {
-    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+    font-size: clamp(1.1rem, 2vw, 1.25rem);
+    line-height: 1.6;
     font-weight: 500;
-    line-height: 1.4;
+    margin-bottom: 2.5rem;
-    color: var(--text-primary);
+    opacity: 0.95;
-    margin-bottom: 2rem;
     font-style: italic;
+    min-height: 100px;
+    /* Prevent height jump */
 }
 
-.testAuthorBlock {
+.testAuthorRow {
     display: flex;
     align-items: center;
     gap: 1rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.testAuthorAvatar {
+.testAuthorAvatarWrapper {
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    flex-shrink: 0;
+}
+
+.testSmallAvatar {
+    width: 100%;
+    height: 100%;
     object-fit: cover;
 }
 
-.testAuthorInfo h4 {
+.testAuthorInfoWhite h4 {
     margin: 0;
     font-size: 1.1rem;
     font-weight: 700;
+    color: #fff;
 }
 
-.testAuthorInfo span {
+.testAuthorInfoWhite span {
     font-size: 0.9rem;
-    color: var(--text-secondary);
+    color: rgba(255, 255, 255, 0.8);
+    display: block;
 }
 
-.sliderDots {
+/* Slider Controls */
+.sliderDotsWhite {
     display: flex;
     gap: 0.5rem;
-    margin-top: 2rem;
+    margin-top: 1.5rem;
 }
 
-.dot {
+.dotWhite {
-    width: 10px;
+    width: 24px;
-    height: 10px;
+    height: 6px;
-    border-radius: 50%;
+    border-radius: 4px;
-    background: #E2E8F0;
+    background: rgba(255, 255, 255, 0.3);
     border: none;
     cursor: pointer;
-    transition: background 0.3s;
+    transition: all 0.3s ease;
 }
 
-.activeDot {
+.activeDotWhite {
-    background: var(--primary);
+    background: #fff;
+    width: 36px;
+}
+
+/* Animations */
+.fadeIn {
+    opacity: 1;
+}
+
+.fadeOut {
+    opacity: 0.6;
+}
+
+.fadeInText {
+    animation: fadeIn 0.4s ease-out forwards;
+}
+
+.fadeOutText {
+    opacity: 0;
 }
 
 

app/channels/[slug]/page.tsx

@@ -3,7 +3,8 @@ import { notFound } from 'next/navigation';
 import styles from './channel-page.module.css';
 import SafeImage from '@/components/SafeImage';
 import Link from 'next/link';
-import TestimonialSlider from '@/components/TestimonialSlider';
+import ChannelTestimonialSlider from '@/components/ChannelTestimonialSlider';
+import ChannelFAQ from '@/components/ChannelFAQ';
 import {
     Calendar, Eye, BarChart, Trophy, Inbox, ShieldCheck,
     Palette, Layout, Smartphone, Zap, PenTool, Repeat,
@@ -86,6 +87,7 @@ export default async function ChannelPage(props: PageProps) {
                     <div className={styles.container}>
                         <div className={styles.aboutGrid}>
                             <div className={styles.aboutImages}>
+                                <div className={styles.aboutImageFrame}></div>
                                 <div className={styles.aboutMainImgWrapper}>
                                     <SafeImage
                                         src={channel.about.mainImage}
@@ -94,14 +96,6 @@ export default async function ChannelPage(props: PageProps) {
                                         fallbackSrc={`https://placehold.co/600x800/png?text=${encodeURIComponent(channel.title)}+Main`}
                                     />
                                 </div>
-                                <div className={styles.aboutSubImgWrapper}>
-                                    <SafeImage
-                                        src={channel.about.subImage}
-                                        alt={`${channel.title} Sub Feature`}
-                                        className={styles.img}
-                                        fallbackSrc={`https://placehold.co/400x400/png?text=${encodeURIComponent(channel.title)}+Sub`}
-                                    />
-                                </div>
                             </div>
                             <div className={styles.aboutContent}>
                                 <span className={styles.sectionSubtitle}>{channel.about.subTitle}</span>
@@ -127,27 +121,25 @@ export default async function ChannelPage(props: PageProps) {
             {/* 3. Benefits / Why Choose */}
             <section className={styles.benefitsSection}>
                 <div className={styles.container}>
-                    <div className={styles.benefitsContainer}>
+                    <div className={styles.benefitsHeader}>
-                        <div className={styles.benefitsContent}>
+                        <span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
-                            <span className={styles.sectionSubtitle}>Why SocialBuddy for {channel.title}</span>
+                        <h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
-                            <h2 className={styles.sectionTitle}>Tools Built for Growth</h2>
+                        <p className={styles.sectionDescriptionCentered}>
-                            <p className={styles.aboutDescription}>
+                            We've built specific tools to help you succeed on {channel.title}.
-                                We've built specific tools to help you succeed on {channel.title}.
+                            Stop guessing and start growing with data-driven insights.
-                                Stop guessing and start growing with data-driven insights.
+                        </p>
-                            </p>
+                    </div>
-                            <a href="#" className="btn btn-primary">See All Features</a>
+
-                        </div>
+                    <div className={styles.benefitsGrid}>
-                        <div className={styles.benefitsGrid}>
+                        {channel.benefits.slice(0, 4).map((benefit, index) => (
-                            {channel.benefits.slice(0, 4).map((benefit, index) => (
+                            <div key={index} className={styles.benefitCard}>
-                                <div key={index} className={styles.benefitCard}>
+                                <div className={styles.benefitNumber}>0{index + 1}</div>
-                                    <div className={styles.benefitIcon}>
+                                <div className={styles.benefitCardContent}>
-                                        {getIcon(benefit.icon)}
-                                    </div>
                                     <h3 className={styles.benefitCardTitle}>{benefit.title}</h3>
                                     <p className={styles.benefitCardDesc}>{benefit.description}</p>
                                 </div>
-                            ))}
+                            </div>
-                        </div>
+                        ))}
                     </div>
                 </div>
             </section>
@@ -156,68 +148,18 @@ export default async function ChannelPage(props: PageProps) {
             {channel.testimonials && channel.testimonials.length > 0 && (
                 <section className={styles.testimonialSection}>
                     <div className={styles.container}>
-                        <div className={styles.testimonialGrid}>
+                        <div className={styles.testimonialCenteredHeader}>
-                            <div className={styles.testimonialImages}>
+                            <span className={styles.sectionSubtitle}>Testimonials</span>
-                                <div className={styles.testImgWrapper}>
+                            <h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
-                                    <SafeImage
-                                        src={channel.heroImage}
-                                        alt="Happy Customer"
-                                        className={styles.img}
-                                        fallbackSrc="https://placehold.co/400x400/png?text=Customer+1"
-                                    />
-                                </div>
-                                <div className={styles.testImgWrapper}>
-                                    <SafeImage
-                                        src={channel.about.mainImage}
-                                        alt="Community"
-                                        className={styles.img}
-                                        fallbackSrc="https://placehold.co/400x400/png?text=Customer+2"
-                                    />
-                                </div>
-                            </div>
-                            <div className={styles.testimonialSliderWrapper}>
-                                <span className={styles.sectionSubtitle}>Testimonials</span>
-                                <h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
-                                <TestimonialSlider testimonials={channel.testimonials} />
-                            </div>
                         </div>
+                        <ChannelTestimonialSlider testimonials={channel.testimonials} />
                     </div>
                 </section>
             )}
 
             {/* 5. FAQ */}
             {channel.faqs && channel.faqs.length > 0 && (
-                <section className={styles.faqSection}>
+                <ChannelFAQ faqs={channel.faqs} channelTitle={channel.title} />
-                    <div className={styles.container}>
-                        <div className={styles.faqGrid}>
-                            <div className={styles.faqContent}>
-                                <span className={styles.sectionSubtitle}>FAQ</span>
-                                <h2 className={styles.sectionTitle}>Frequently Asked Questions about {channel.title}</h2>
-                                <div className={styles.accordion}>
-                                    {channel.faqs.map((faq, index) => (
-                                        <details key={index} className={styles.accordionItem}>
-                                            <summary className={styles.accordionTrigger}>
-                                                {faq.question}
-                                                <span className={styles.accordionIcon}>+</span>
-                                            </summary>
-                                            <div className={styles.accordionContentOpen}>
-                                                <p style={{ paddingBottom: '1.5rem', color: 'var(--text-secondary)' }}>{faq.answer}</p>
-                                            </div>
-                                        </details>
-                                    ))}
-                                </div>
-                            </div>
-                            <div className={styles.faqImageWrapper}>
-                                <SafeImage
-                                    src="/images/faq-illustration.png"
-                                    alt="FAQ Illustration"
-                                    className={styles.img}
-                                    fallbackSrc="https://placehold.co/600x600/png?text=FAQ+Support"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </section>
             )}
 
             {/* 6. CTA (Full Width Floating) */}

app/contact/contact.module.css

@@ -3,9 +3,10 @@
 }
 
 .hero {
-    padding: 8rem 0 8rem;
+    padding: 8rem 0 4rem;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
+    /* Assuming this exists */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
@@ -60,22 +61,34 @@
     font-weight: 600;
 }
 
+/* Contact Info Cards (Top Section) */
 .contactGrid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(3, 1fr);
+    /* Force 3 columns */
     gap: 2rem;
-    margin-bottom: 4rem;
+    /* margin-bottom: 4rem; */
+}
+
+@media (max-width: 768px) {
+    .contactGrid {
+        grid-template-columns: 1fr;
+    }
 }
 
 .contactCard {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 20px;
-    padding: 2rem;
+    padding: 2.5rem 2rem;
     text-align: center;
     transition: all 0.3s ease;
     text-decoration: none;
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
 .contactCard:hover {
@@ -85,8 +98,11 @@
 }
 
 .cardIcon {
-    font-size: 3rem;
+    color: var(--primary);
     margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .cardTitle {
@@ -98,167 +114,219 @@
 
 .cardValue {
     font-size: 1rem;
-    color: var(--primary);
+    color: var(--text-secondary);
-    font-weight: 600;
+    font-weight: 500;
 }
 
+/* Form Section (Get In Touch) */
 .formSection {
     background: var(--bg-primary);
+    padding: 4rem 0;
 }
 
 .formContainer {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 1fr;
     gap: 4rem;
-    max-width: 1200px;
+    align-items: start;
-    margin: 0 auto;
 }
 
-@media (min-width: 1024px) {
+@media (max-width: 992px) {
     .formContainer {
-        grid-template-columns: 1fr 1.5fr;
+        grid-template-columns: 1fr;
+        gap: 3rem;
     }
 }
 
-.formInfo {
+/* Left Side: Get In Touch Info */
+.getInTouchInfo {
     display: flex;
     flex-direction: column;
-    gap: 2rem;
 }
 
-.formTitle {
+.sectionTitle {
-    font-size: clamp(2rem, 4vw, 2.5rem);
+    font-size: 2.5rem;
     font-weight: 800;
+    color: var(--text-primary);
+    /* Dark text */
     margin-bottom: 1rem;
-    line-height: 1.2;
 }
 
-.formDescription {
+.sectionDesc {
-    font-size: 1.125rem;
     color: var(--text-secondary);
-    line-height: 1.7;
+    margin-bottom: 2.5rem;
+    line-height: 1.6;
 }
 
-.benefits {
+.infoGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+@media (max-width: 480px) {
+    .infoGrid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.infoItem {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
 }
 
-.benefit {
+.iconBox {
-    display: flex;
+    background: var(--text-primary);
-    align-items: center;
+    /* Dark background for icon box */
-    gap: 0.75rem;
+    width: 40px;
-    font-size: 1rem;
+    height: 40px;
-    color: var(--text-primary);
+    border-radius: 8px;
-}
-
-.checkIcon {
-    width: 24px;
-    height: 24px;
-    background: linear-gradient(135deg, var(--primary), var(--secondary));
-    color: white;
-    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-weight: 700;
+    color: var(--yellow);
-    flex-shrink: 0;
+    /* Yellow/Gold icon color */
-}
-
-.socialLinks {
-    padding-top: 2rem;
-    border-top: 1px solid var(--border-color);
-}
-
-.socialTitle {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--text-primary);
-}
-
-.socialIcons {
-    display: flex;
-    gap: 1rem;
-}
-
-.socialIcon {
-    width: 50px;
-    height: 50px;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    text-decoration: none;
-    transition: all 0.3s ease;
-}
-
-.socialIcon:hover {
-    transform: translateY(-3px);
-    border-color: var(--primary);
-    box-shadow: 0 10px 20px rgba(236, 72, 153, 0.2);
-}
-
-.form {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 24px;
-    padding: 2.5rem;
-}
-
-.formGroup {
-    margin-bottom: 1.5rem;
-}
-
-.label {
-    display: block;
-    font-size: 0.9375rem;
-    font-weight: 600;
-    color: var(--text-primary);
     margin-bottom: 0.5rem;
 }
 
+.infoLabel {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.infoValue {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+.socialRow {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin-top: auto;
+}
+
+.socialLabel {
+    font-weight: 700;
+    color: var(--text-primary);
+    font-size: 1.1rem;
+}
+
+.socialIconsRow {
+    display: flex;
+    gap: 1rem;
+}
+
+.socialIconsRow a {
+    color: var(--text-primary);
+    transition: color 0.3s;
+}
+
+.socialIconsRow a:hover {
+    color: var(--primary);
+}
+
+/* Right Side: Form Wrapper */
+.formWrapper {
+    background: #eef6f6;
+    /* Light greenish-blue background as in image */
+    padding: 3rem;
+    border-radius: 20px;
+}
+
+.contactForm {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.formRow {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+@media (max-width: 480px) {
+    .formRow {
+        grid-template-columns: 1fr;
+    }
+}
+
+.formGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.label {
+    font-weight: 700;
+    color: var(--text-primary);
+    font-size: 0.95rem;
+}
+
 .input,
-.select,
 .textarea {
     width: 100%;
-    padding: 0.875rem 1rem;
+    padding: 0.75rem 1rem;
-    font-size: 1rem;
+    border-radius: 8px;
-    border: 1px solid var(--border-color);
+    border: 1px solid transparent;
-    border-radius: 12px;
+    background: #ffffff;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    transition: all 0.3s ease;
     font-family: inherit;
+    font-size: 1rem;
+    color: var(--text-secondary);
+    transition: all 0.3s;
 }
 
 .input:focus,
-.select:focus,
 .textarea:focus {
     outline: none;
     border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
+    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
+}
+
+.input::placeholder,
+.textarea::placeholder {
+    color: #cbd5e1;
 }
 
 .textarea {
     resize: vertical;
-    min-height: 150px;
 }
 
-.arrow {
+.submitBtn {
-    margin-left: 0.5rem;
+    background: var(--text-primary);
-    transition: transform 0.3s ease;
+    /* Dark blue button */
-    display: inline-block;
+    color: white;
+    padding: 1rem 2rem;
+    border: none;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    cursor: pointer;
+    align-self: flex-start;
+    transition: background 0.3s;
+    margin-top: 1rem;
 }
 
-button:hover .arrow {
+.submitBtn:hover {
-    transform: translateX(5px);
+    background: #1e293b;
 }
 
+/* Map Section */
+.mapSection {
+    /* margin-top: 4rem; */
+    height: 400px;
+    width: 100%;
+    background: #f1f5f9;
+}
+
+/* Quick Links - kept from original if needed, but maybe not */
 .quickLinks {
     padding: 4rem 0;
     background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), rgba(59, 130, 246, 0.03));
@@ -305,10 +373,4 @@ button:hover .arrow {
     font-size: 1.125rem;
     font-weight: 600;
     color: var(--text-primary);
-}
-
-@media (min-width: 768px) {
-    .form {
-        padding: 3rem;
-    }
 }

app/contact/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import type { Metadata } from 'next';
+import { Phone, Mail, MapPin, Instagram, Facebook, Twitter, Youtube } from 'lucide-react';
 import styles from './contact.module.css';
 
 export default function ContactPage() {
@@ -11,6 +12,7 @@ export default function ContactPage() {
         company: '',
         subject: '',
         message: '',
+        phone: '',
     });
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
@@ -27,30 +29,24 @@ export default function ContactPage() {
         alert('Thank you for your message! We\'ll get back to you soon.');
     };
 
-    const contactInfo = [
+    const contactInfoCards = [
         {
-            icon: '📧',
+            icon: <MapPin size={32} />,
+            title: 'Address',
+            value: 'London Eye, London',
+            link: '#',
+        },
+        {
+            icon: <Mail size={32} />,
             title: 'Email',
-            value: 'support@socialbuddy.com',
+            value: 'mail@nursee.com',
-            link: 'mailto:support@socialbuddy.com',
+            link: 'mailto:mail@nursee.com',
         },
         {
-            icon: '💬',
+            icon: <Phone size={32} />,
-            title: 'Live Chat',
-            value: 'Available 24/7',
-            link: '#',
-        },
-        {
-            icon: '📞',
             title: 'Phone',
-            value: '+1 (555) 123-4567',
+            value: '(+081) 5678 1234',
-            link: 'tel:+15551234567',
+            link: 'tel:+08156781234',
-        },
-        {
-            icon: '📍',
-            title: 'Office',
-            value: 'San Francisco, CA',
-            link: '#',
         },
     ];
 
@@ -72,7 +68,7 @@ export default function ContactPage() {
             <section className="section">
                 <div className="container">
                     <div className={styles.contactGrid}>
-                        {contactInfo.map((info, index) => (
+                        {contactInfoCards.map((info, index) => (
                             <a key={index} href={info.link} className={styles.contactCard}>
                                 <div className={styles.cardIcon}>{info.icon}</div>
                                 <h3 className={styles.cardTitle}>{info.title}</h3>
@@ -87,134 +83,137 @@ export default function ContactPage() {
             <section className={`section ${styles.formSection}`}>
                 <div className="container">
                     <div className={styles.formContainer}>
-                        <div className={styles.formInfo}>
+                        {/* Left Side: Get In Touch Info */}
-                            <h2 className={styles.formTitle}>Send Us a Message</h2>
+                        <div className={styles.getInTouchInfo}>
-                            <p className={styles.formDescription}>
+                            <h2 className={styles.sectionTitle}>Get In Touch</h2>
-                                Fill out the form and our team will get back to you within 24 hours.
+                            <p className={styles.sectionDesc}>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
                             </p>
 
-                            <div className={styles.benefits}>
+                            <div className={styles.infoGrid}>
-                                <div className={styles.benefit}>
+                                <div className={styles.infoItem}>
-                                    <span className={styles.checkIcon}>✓</span>
+                                    <div className={styles.iconBox}><Phone size={20} /></div>
-                                    <span>Quick response time</span>
+                                    <div>
+                                        <h4 className={styles.infoLabel}>Phone</h4>
+                                        <p className={styles.infoValue}>(+081) 5678 1234</p>
+                                    </div>
                                 </div>
-                                <div className={styles.benefit}>
+                                <div className={styles.infoItem}>
-                                    <span className={styles.checkIcon}>✓</span>
+                                    <div className={styles.iconBox}><Mail size={20} /></div>
-                                    <span>Expert support team</span>
+                                    <div>
+                                        <h4 className={styles.infoLabel}>Email</h4>
+                                        <p className={styles.infoValue}>mail@nursee.com</p>
+                                    </div>
                                 </div>
-                                <div className={styles.benefit}>
+                                <div className={styles.infoItem}>
-                                    <span className={styles.checkIcon}>✓</span>
+                                    <div className={styles.iconBox}><MapPin size={20} /></div>
-                                    <span>Personalized solutions</span>
+                                    <div>
+                                        <h4 className={styles.infoLabel}>Address</h4>
+                                        <p className={styles.infoValue}>London Eye, London</p>
+                                    </div>
+                                </div>
+                                <div className={styles.infoItem}>
+                                    <div className={styles.iconBox}><Instagram size={20} /></div>
+                                    <div>
+                                        <h4 className={styles.infoLabel}>Instagram</h4>
+                                        <p className={styles.infoValue}>nursee.com</p>
+                                    </div>
                                 </div>
                             </div>
 
-                            <div className={styles.socialLinks}>
+                            <div className={styles.socialRow}>
-                                <h3 className={styles.socialTitle}>Follow Us</h3>
+                                <span className={styles.socialLabel}>Social Media</span>
-                                <div className={styles.socialIcons}>
+                                <div className={styles.socialIconsRow}>
-                                    <a href="#" className={styles.socialIcon}>🐦</a>
+                                    <a href="#"><Facebook size={20} /></a>
-                                    <a href="#" className={styles.socialIcon}>📘</a>
+                                    <a href="#"><Twitter size={20} /></a>
-                                    <a href="#" className={styles.socialIcon}>📷</a>
+                                    <a href="#"><Youtube size={20} /></a>
-                                    <a href="#" className={styles.socialIcon}>💼</a>
                                 </div>
                             </div>
                         </div>
 
-                        <form className={styles.form} onSubmit={handleSubmit}>
+                        {/* Right Side: Form */}
-                            <div className={styles.formGroup}>
+                        <div className={styles.formWrapper}>
-                                <label htmlFor="name" className={styles.label}>
+                            <form className={styles.contactForm} onSubmit={handleSubmit}>
-                                    Full Name *
+                                <div className={styles.formRow}>
-                                </label>
+                                    <div className={styles.formGroup}>
-                                <input
+                                        <label htmlFor="email" className={styles.label}>Email</label>
-                                    type="text"
+                                        <input
-                                    id="name"
+                                            type="email"
-                                    name="name"
+                                            id="email"
-                                    value={formData.name}
+                                            name="email"
-                                    onChange={handleChange}
+                                            placeholder="Email"
-                                    className={styles.input}
+                                            value={formData.email}
-                                    placeholder="John Doe"
+                                            onChange={handleChange}
-                                    required
+                                            className={styles.input}
-                                />
+                                            required
-                            </div>
+                                        />
+                                    </div>
+                                    <div className={styles.formGroup}>
+                                        <label htmlFor="name" className={styles.label}>Name</label>
+                                        <input
+                                            type="text"
+                                            id="name"
+                                            name="name"
+                                            placeholder="Name"
+                                            value={formData.name}
+                                            onChange={handleChange}
+                                            className={styles.input}
+                                            required
+                                        />
+                                    </div>
+                                </div>
 
-                            <div className={styles.formGroup}>
+                                <div className={styles.formGroup}>
-                                <label htmlFor="email" className={styles.label}>
+                                    <label htmlFor="phone" className={styles.label}>Phone</label>
-                                    Email Address *
+                                    <input
-                                </label>
+                                        type="tel"
-                                <input
+                                        id="phone"
-                                    type="email"
+                                        name="phone" // Note: Added phone to state if not present, need to handle
-                                    id="email"
+                                        placeholder="Phone"
-                                    name="email"
+                                        className={styles.input}
-                                    value={formData.email}
+                                    />
-                                    onChange={handleChange}
+                                </div>
-                                    className={styles.input}
-                                    placeholder="john@example.com"
-                                    required
-                                />
-                            </div>
 
-                            <div className={styles.formGroup}>
+                                <div className={styles.formGroup}>
-                                <label htmlFor="company" className={styles.label}>
+                                    <label htmlFor="message" className={styles.label}>Message</label>
-                                    Company
+                                    <textarea
-                                </label>
+                                        id="message"
-                                <input
+                                        name="message"
-                                    type="text"
+                                        placeholder="Message"
-                                    id="company"
+                                        value={formData.message}
-                                    name="company"
+                                        onChange={handleChange}
-                                    value={formData.company}
+                                        className={styles.textarea}
-                                    onChange={handleChange}
+                                        rows={5}
-                                    className={styles.input}
+                                        required
-                                    placeholder="Your Company"
+                                    />
-                                />
+                                </div>
-                            </div>
 
-                            <div className={styles.formGroup}>
+                                <button type="submit" className={styles.submitBtn}>
-                                <label htmlFor="subject" className={styles.label}>
+                                    SUBMIT BUTTON
-                                    Subject *
+                                </button>
-                                </label>
+                            </form>
-                                <select
+                        </div>
-                                    id="subject"
-                                    name="subject"
-                                    value={formData.subject}
-                                    onChange={handleChange}
-                                    className={styles.select}
-                                    required
-                                >
-                                    <option value="">Select a subject</option>
-                                    <option value="general">General Inquiry</option>
-                                    <option value="support">Technical Support</option>
-                                    <option value="sales">Sales Question</option>
-                                    <option value="partnership">Partnership</option>
-                                    <option value="feedback">Feedback</option>
-                                </select>
-                            </div>
-
-                            <div className={styles.formGroup}>
-                                <label htmlFor="message" className={styles.label}>
-                                    Message *
-                                </label>
-                                <textarea
-                                    id="message"
-                                    name="message"
-                                    value={formData.message}
-                                    onChange={handleChange}
-                                    className={styles.textarea}
-                                    placeholder="Tell us how we can help you..."
-                                    rows={6}
-                                    required
-                                />
-                            </div>
-
-                            <button type="submit" className="btn btn-primary btn-large">
-                                Send Message
-                                <span className={styles.arrow}>→</span>
-                            </button>
-                        </form>
                     </div>
                 </div>
             </section>
 
+            {/* Map Section */}
+            <section className={styles.mapSection}>
+                <div className="container" style={{ maxWidth: '100%', padding: 0 }}>
+                    <iframe
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.546465492652!2d-0.1216834237199462!3d51.503189710986916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604b900d26973%3A0x4291f3172409ea92!2slastminute.com%20London%20Eye!5e0!3m2!1sen!2suk!4v1709999999999!5m2!1sen!2suk"
+                        width="100%"
+                        height="400"
+                        style={{ border: 0 }}
+                        allowFullScreen
+                        loading="lazy"
+                        referrerPolicy="no-referrer-when-downgrade"
+                    ></iframe>
+                </div>
+            </section>
+
             {/* FAQ Quick Links */}
-            <section className={styles.quickLinks}>
+            {/* <section className={styles.quickLinks}>
                 <div className="container">
                     <h2 className={styles.quickLinksTitle}>Looking for something specific?</h2>
                     <div className={styles.linksGrid}>
@@ -236,7 +235,7 @@ export default function ContactPage() {
                         </a>
                     </div>
                 </div>
-            </section>
+            </section> */}
         </div>
     );
 }

app/globals.css

@@ -27,11 +27,11 @@
   --background-secondary: #f8fafc;
   --bg-primary: #ffffff;
   --card-bg: #ffffff;
-  --foreground: #0f172a;
+  --foreground: #0072b1;
   --foreground-secondary: #475569;
 
   /* Text Colors */
-  --text-primary: #0f172a;
+  --text-primary: #0072b1;
   --text-secondary: #475569;
 
   /* Borders */

components/AboutSection.tsx

@@ -40,17 +40,17 @@ const AboutSection = () => {
                     <div className={`${styles.textContent} animate-slide-left`}>
                         {/* Subtitle */}
                         <div className={styles.subTitle}>
-                            About Company
+                            ABOUT SOCIAL BUDDY
                         </div>
 
                         {/* Title */}
                         <h2 className={styles.title}>
-                            We Are The Best <span className="gradient-text">Social Media</span> Marketing Agency
+                            A Smarter Way to Grow Your <span className="gradient-text">Social Presence</span>
                         </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.
+                            Social Buddy is a performance-focused social media marketing team helping businesses manage, optimize, and grow their presence across digital platforms. We work with brands that want clarity, consistency, and measurable progress from their social efforts.
                         </p>
 
                         {/* Features List */}
@@ -60,8 +60,8 @@ const AboutSection = () => {
                                     <Users size={28} />
                                 </div>
                                 <div className={styles.featureContent}>
-                                    <h4>Trusted Partner</h4>
+                                    <h4>Strategic Partnership</h4>
-                                    <p>Over a decade of experience helping brands grow their online presence with verified strategies.</p>
+                                    <p>We collaborate closely with brands to understand their audience, objectives, and challenges—then translate those insights into practical social execution plans.</p>
                                 </div>
                             </li>
 
@@ -70,8 +70,8 @@ const AboutSection = () => {
                                     <Layout size={28} />
                                 </div>
                                 <div className={styles.featureContent}>
-                                    <h4>Fastpace Platform</h4>
+                                    <h4>Efficient Campaign Execution</h4>
-                                    <p>Rapid deployment of campaigns across all major social platforms to catch trends instantly.</p>
+                                    <p>Our workflows enable quick rollout of content and campaigns across major social networks while maintaining alignment with brand goals.</p>
                                 </div>
                             </li>
 
@@ -80,8 +80,8 @@ const AboutSection = () => {
                                     <ShieldCheck size={28} />
                                 </div>
                                 <div className={styles.featureContent}>
-                                    <h4>Tested Reliability</h4>
+                                    <h4>Data-Led Performance Tracking</h4>
-                                    <p>Consistent results and transparent reporting you can count on, backed by data.</p>
+                                    <p>Every activity is supported by clear metrics and transparent reporting, allowing brands to evaluate outcomes and refine decisions with confidence.</p>
                                 </div>
                             </li>
                         </ul>
@@ -89,7 +89,7 @@ const AboutSection = () => {
                         {/* CTA Button */}
                         <div className={styles.buttonWrapper}>
                             <Link href="/about" className="btn btn-primary btn-large">
-                                Discover More <ArrowRight size={20} />
+                                Explore Our Approach <ArrowRight size={20} />
                             </Link>
                         </div>
                     </div>

components/CTA.module.css

@@ -2,7 +2,7 @@
     position: relative;
     padding: 4rem 2rem;
     overflow: hidden;
-    background: #0f172a;
+    background: #0072b1;
     /* Dark fallback */
     display: flex;
     justify-content: center;

components/CTA.tsx

@@ -46,10 +46,10 @@ export default function CTA() {
 
             <div className={styles.contentContainer}>
                 <h2 className={styles.title}>
-                    Your social media <br /> workspace
+                    One Place to Manage Your  <br /> Social Presence
                 </h2>
                 <p className={styles.subtitle}>
-                    Share consistently without the chaos
+                   Publish clearly. Stay organized. Scale.
                 </p>
 
                 <Link href="https://app.socialbuddy.co/signup" className={styles.standaloneBtn}>

components/ChannelFAQ.module.css

@@ -0,0 +1,136 @@
+.section {
+    padding: 4rem 0;
+    background: #fff;
+    overflow: hidden;
+}
+
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 4rem;
+    align-items: flex-start;
+}
+
+@media (min-width: 992px) {
+    .grid {
+        grid-template-columns: 1fr 1.5fr;
+    }
+}
+
+/* Left Content */
+.headerContent {
+    position: sticky;
+    top: 2rem;
+}
+
+.pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(236, 72, 153, 0.1);
+    /* Light Primary Pink */
+    color: var(--primary);
+    border-radius: 50px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+}
+
+.title {
+    font-size: clamp(2.5rem, 5vw, 3.5rem);
+    line-height: 1.1;
+    font-weight: 800;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    font-family: var(--font-display);
+}
+
+.highlight {
+    color: var(--primary);
+    position: relative;
+    display: block;
+}
+
+.description {
+    font-size: 1.125rem;
+    line-height: 1.7;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+}
+
+/* Right Content: Accordion */
+.accordionList {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.card {
+    background: #fff;
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.cardOpen {
+    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
+    border-color: var(--primary);
+}
+
+.trigger {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem 2rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+}
+
+.question {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    padding-right: 1.5rem;
+}
+
+.iconWrapper {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--background-secondary);
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.cardOpen .iconWrapper {
+    background: var(--primary);
+    color: #fff;
+    transform: rotate(180deg);
+}
+
+.content {
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+}
+
+.contentInner {
+    padding: 0 2rem 2rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}

components/ChannelFAQ.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import styles from "./ChannelFAQ.module.css";
+import { MessageCircle, ChevronDown } from "lucide-react";
+
+interface FAQItem {
+    question: string;
+    answer: string;
+}
+
+interface ChannelFAQProps {
+    faqs: FAQItem[];
+    channelTitle: string;
+}
+
+export default function ChannelFAQ({ faqs, channelTitle }: ChannelFAQProps) {
+    const [openIndex, setOpenIndex] = useState<number | null>(0); // First item open by default
+
+    const toggleFAQ = (index: number) => {
+        setOpenIndex(openIndex === index ? null : index);
+    };
+
+    return (
+        <section className={styles.section}>
+            <div className={styles.container}>
+                <div className={styles.grid}>
+                    {/* Left Side: Static Content */}
+                    <div className={styles.headerContent}>
+                        <div className={styles.pill}>
+                            <MessageCircle size={16} />
+                            <span>Frequently Asked Questions</span>
+                        </div>
+                        <h2 className={styles.title}>
+                            Frequently asked <span className={styles.highlight}>questions</span>
+                        </h2>
+                        <p className={styles.description}>
+                            Got questions about how SocialBuddy works with {channelTitle}?
+                            We've got answers. If you need more help, our support team is just a click away.
+                        </p>
+                    </div>
+
+                    {/* Right Side: Accordion List */}
+                    <div className={styles.accordionList}>
+                        {faqs.map((faq, index) => (
+                            <FAQItemCard
+                                key={index}
+                                item={faq}
+                                isOpen={openIndex === index}
+                                onClick={() => toggleFAQ(index)}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+// Sub-component for individual item to handle height animation cleanly
+function FAQItemCard({ item, isOpen, onClick }: { item: FAQItem, isOpen: boolean, onClick: () => void }) {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [height, setHeight] = useState(0);
+
+    useEffect(() => {
+        if (isOpen && contentRef.current) {
+            setHeight(contentRef.current.scrollHeight);
+        } else {
+            setHeight(0);
+        }
+    }, [isOpen]);
+
+    return (
+        <div className={`${styles.card} ${isOpen ? styles.cardOpen : ''}`}>
+            <button className={styles.trigger} onClick={onClick} aria-expanded={isOpen}>
+                <span className={styles.question}>{item.question}</span>
+                <div className={styles.iconWrapper}>
+                    <ChevronDown size={18} />
+                </div>
+            </button>
+            <div
+                className={styles.content}
+                style={{ height: `${height}px` }}
+            >
+                <div ref={contentRef} className={styles.contentInner}>
+                    {item.answer}
+                </div>
+            </div>
+        </div>
+    );
+}

components/ChannelTestimonialSlider.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import styles from "@/app/channels/[slug]/channel-page.module.css";
+import SafeImage from "./SafeImage";
+import { Star, Quote } from "lucide-react";
+
+interface Testimonial {
+    quote: string;
+    author: string;
+    role: string;
+    rating: number;
+    image: string;
+}
+
+export default function ChannelTestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            handleNext();
+        }, 5000); // 5 seconds per slide
+        return () => clearInterval(interval);
+    }, [testimonials.length]);
+
+    const handleNext = () => {
+        setIsAnimating(true);
+        setTimeout(() => {
+            setCurrentIndex((prev) => (prev + 1) % testimonials.length);
+            setIsAnimating(false);
+        }, 300);
+    };
+
+    const current = testimonials[currentIndex];
+
+    return (
+        <div className={styles.channelTestimonialContainer}>
+            {/* Left Side: Large Image */}
+            <div className={`${styles.sliderLeftImage} ${isAnimating ? styles.fadeOut : styles.fadeIn}`}>
+                <div className={styles.sliderImageWrapper}>
+                    <SafeImage
+                        src={current.image}
+                        alt={current.author}
+                        className={styles.sliderMainImage}
+                        fallbackSrc={`https://placehold.co/600x600/png?text=${encodeURIComponent(current.author)}`}
+                    />
+                    {/* "Trusted Clients" Pill could go here, but user said "bottom img that no need"? 
+                         I'll add a simple name tag overlay if needed, but sticking to clean image first.
+                     */}
+                </div>
+            </div>
+
+            {/* Right Side: Content Box */}
+            <div className={styles.sliderRightContent}>
+                <div className={styles.testimonialCard}>
+                    <div className={styles.testCardHeader}>
+                        <Quote size={40} className={styles.quoteIcon} />
+                        <div className={styles.testStars}>
+                            {[...Array(5)].map((_, i) => (
+                                <Star
+                                    key={i}
+                                    fill={i < current.rating ? "#fff" : "none"}
+                                    stroke={i < current.rating ? "#fff" : "rgba(255,255,255,0.4)"}
+                                    size={20}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    <blockquote className={`${styles.testQuoteText} ${isAnimating ? styles.fadeOutText : styles.fadeInText}`}>
+                        "{current.quote}"
+                    </blockquote>
+
+                    <div className={`${styles.testAuthorRow} ${isAnimating ? styles.fadeOutText : styles.fadeInText}`}>
+                        <div className={styles.testAuthorAvatarWrapper}>
+                            <SafeImage
+                                src={current.image}
+                                alt={current.author}
+                                className={styles.testSmallAvatar}
+                                fallbackSrc={`https://placehold.co/100x100/png?text=${current.author.charAt(0)}`}
+                            />
+                        </div>
+                        <div className={styles.testAuthorInfoWhite}>
+                            <h4>{current.author}</h4>
+                            <span>{current.role}</span>
+                        </div>
+                    </div>
+
+                    <div className={styles.sliderDotsWhite}>
+                        {testimonials.map((_, idx) => (
+                            <button
+                                key={idx}
+                                className={`${styles.dotWhite} ${idx === currentIndex ? styles.activeDotWhite : ""}`}
+                                onClick={() => setCurrentIndex(idx)}
+                                aria-label={`Go to slide ${idx + 1}`}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

components/CoreServices.tsx

@@ -7,10 +7,10 @@ export default function CoreServices() {
         <section className={styles.section}>
             <div className="container">
                 <div className={styles.header}>
-                    <div className={styles.subTitle}>Our Services</div>
+                    <div className={styles.subTitle}>OUR SOLUTIONS</div>
-                    <h2 className={styles.title}>All-in-One <span className="gradient-text">Social Management</span></h2>
+                    <h2 className={styles.title}>One Platform to Run <br />Every <span className="gradient-text">Social Activity</span></h2>
                     <p className={styles.subtitle}>
-                        Everything you need to dominate social media, conveniently organized in one powerful platform.
+                        Social Buddy brings planning, publishing, monitoring, and performance tracking together in a single workspace. Instead of juggling multiple tools, teams can manage daily social operations efficiently while staying focused on growth and engagement.
                     </p>
                 </div>
 
@@ -22,8 +22,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>📊</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Unified Dashboard</h3>
+                                <h3>Central Control Panel</h3>
-                                <p>Manage Facebook, Instagram, X, and LinkedIn from one centralized, intuitive interface.</p>
+                                <p>Oversee multiple social profiles from one streamlined interface, making it easier to publish updates, monitor activity, and stay organized across platforms.</p>
                             </div>
                         </div>
 
@@ -32,8 +32,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>⚡</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Smart Scheduling</h3>
+                                <h3>Intelligent Posting Automation</h3>
-                                <p>AI-powered timing suggestions to automatically post when your audience is most active.</p>
+                                <p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
                             </div>
                         </div>
 
@@ -42,8 +42,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>📅</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Visual Calendar</h3>
+                                <h3>Interactive Planning View</h3>
-                                <p>Drag-and-drop content calendar to plan and visualize your strategy months in advance.</p>
+                                <p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
                             </div>
                         </div>
                     </div>
@@ -82,8 +82,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>📈</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Analytics & Reports</h3>
+                                <h3>Performance Insights & Exports</h3>
-                                <p>Deep dive into performance metrics with automated, white-labeled reports for clients.</p>
+                                <p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
                             </div>
                         </div>
 
@@ -92,8 +92,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>👥</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Team Collaboration</h3>
+                                <h3>Team-Based Workflows</h3>
-                                <p>Built-in approval workflows and role-based access for seamless team coordination.</p>
+                                <p>Coordinate seamlessly with internal teams or clients using structured review processes and permission-based access.</p>
                             </div>
                         </div>
 
@@ -102,8 +102,8 @@ export default function CoreServices() {
                                 <span className={styles.icon}>💬</span>
                             </div>
                             <div className={styles.content}>
-                                <h3>Social Inbox</h3>
+                                <h3>Unified Message Center</h3>
-                                <p>Never miss a comment or DM. innovative unified inbox to reply to all interactions.</p>
+                                <p>Handle comments, mentions, and private messages from different platforms in one response hub - so no interaction goes unnoticed.</p>
                             </div>
                         </div>
                     </div>

components/FAQ.tsx

@@ -131,7 +131,7 @@ export default function FAQ() {
                     <div className={styles.leftColumn}>
                         <span className={styles.label}>FAQ</span>
                         <h2 className={styles.heading}>
-                            Everything You <span className="gradient-text">Need to Know</span>
+                            A Platform You Can Rely On <span className="gradient-text">for Growth</span>
                         </h2>
 
                         <div className={styles.featureList}>

components/Hero.module.css

@@ -78,14 +78,14 @@
 }
 
 @media (max-width: 1024px) {
-  .badge {
+    .badge {
-    margin-left: auto;
+        margin-left: auto;
-    margin-right: auto;
+        margin-right: auto;
-    display: flex;
+        display: flex;
-    justify-content: center;
+        justify-content: center;
-    align-items: center;
+        align-items: center;
-    text-align: center;
+        text-align: center;
-  }
+    }
 }
 
 
@@ -102,7 +102,7 @@
 
 .badgeText {
     font-size: 0.9rem;
-    color: #0f172a;
+    color: #0072b1;
     font-weight: 500;
 }
 
@@ -110,7 +110,7 @@
     font-size: clamp(2.5rem, 5vw, 4rem);
     line-height: 1.1;
     font-weight: 800;
-    color: #0f172a;
+    color: #0072b1;
     /* Dark text */
     margin-bottom: 1.5rem;
 }
@@ -299,7 +299,7 @@
 
 .cardText strong {
     font-size: 0.9rem;
-    color: #0f172a;
+    color: #0072b1;
 }
 
 .cardText span {
@@ -335,7 +335,7 @@
 .userCount {
     font-size: 1.1rem;
     font-weight: 700;
-    color: #0f172a;
+    color: #0072b1;
     display: flex;
     flex-direction: column;
     margin-bottom: 0.5rem;
@@ -410,7 +410,7 @@
 
 .msgText p {
     font-size: 0.85rem;
-    color: #0f172a;
+    color: #0072b1;
     font-weight: 500;
     margin: 0;
 }

components/Hero.tsx

@@ -11,29 +11,32 @@ export default function Hero() {
     const slides = [
         {
             id: 1,
-            badge: 'New Feature',
+            badge: 'INSIGHTS',
-            badgeText: 'AI-Powered Scheduling is here',
+            badgeText: 'Smarter decisions powered by data',
-            title: 'Find your social media success.',
+            title: 'Understand what works and amplify your impact.',
-            subtitle: 'Your dream engagement is waiting for you. Manage all your accounts in one place.',
+            subtitle: 'Monitor interactions, audience behavior, and campaign outcomes through a unified insights panel designed to guide better marketing moves.',
-            ctaPrimary: 'Get Started',
+            ctaPrimary: 'View Insights',
+            trustedBy:'Chosen by teams across industries',
             image: '/hero-slide-1.png'
         },
         {
             id: 2,
-            badge: 'Analytics',
+            badge: 'CONTROL',
-            badgeText: 'Deep insights for growth',
+            badgeText: 'One dashboard, total clarity',
-            title: 'Analyze performance & boost reach.',
+            title: 'Take charge of every social channel effortlessly.',
-            subtitle: 'Track every click, like, and share with our advanced analytics dashboard.',
+            subtitle: 'Coordinate publishing, conversations, and performance tracking across platforms without switching tools or losing momentum.',
-            ctaPrimary: 'Explore Analytics',
+            ctaPrimary: 'Access the Dashboard',
+            trustedBy:'Supporting brands, creators, and agencies globally',
             image: '/hero-slide-2.png'
         },
         {
             id: 3,
-            badge: 'Community',
+            badge: 'OPTIMIZATION',
-            badgeText: 'Join 10,000+ Creators',
+            badgeText: 'Designed for consistent growth',
-            title: 'Connect with your audience instantly.',
+            title: 'Turn social activity into measurable business wins.',
-            subtitle: 'Real-time engagement tools to keep your community active and growing.',
+            subtitle: 'Leverage intelligent reports and audience insights to refine your strategy, improve visibility, and scale engagement with confidence.',
-            ctaPrimary: 'Join Community',
+            ctaPrimary: 'Start Your Journey',
+            trustedBy:'Built for fast-moving marketing teams',
             image: '/hero-slide-3.png'
         },
     ];
@@ -101,7 +104,7 @@ export default function Hero() {
                         </div>
 
                         <div className={styles.trustedBy}>
-                            <p>We are Trusted by:</p>
+                            <p>{slide.trustedBy}</p>
                             <div className={styles.trustedIcons}>
                                 <div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div> {/* Google */}
                                 <div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div> {/* Behance */}

components/HowItWorks.tsx

@@ -28,26 +28,26 @@ export default function HowItWorks() {
     const steps = [
         {
             number: '01',
-            title: 'Trends and Technologies',
+            title: 'Discovery Session',
-            description: 'Leverage emerging tools to foster innovation and collaboration.',
+            description: 'We begin by understanding your brand goals, audience behavior, and existing social presence to identify opportunities.',
             icon: <TrendingUp />,
         },
         {
             number: '02',
-            title: 'Data Analysis and Analytics',
+            title: 'Planning & Direction',
-            description: 'Deploy insights to improve decision making and drive traffic.',
+            description: 'Insights gathered are translated into a focused roadmap covering content themes, platforms, timelines, and success metrics.',
             icon: <BarChart3 />,
         },
         {
             number: '03',
-            title: 'Your Target Audience',
+            title: 'Execution Phase',
-            description: 'Understand Your Target Audience and their shopping behavior.',
+            description: 'Content is created, scheduled, and managed with precision, ensuring consistency across channels and alignment with strategy.',
             icon: <Users />,
         },
         {
             number: '04',
-            title: 'Social Media Engagement',
+            title: 'Outcome & Optimization',
-            description: 'Create valuable, shareable content for increased engagement.',
+            description: 'Performance is evaluated using clear metrics, allowing continuous refinement and improvement for stronger long-term results.',
             icon: <Heart />,
         },
     ];
@@ -58,7 +58,7 @@ export default function HowItWorks() {
                 <div className={styles.header}>
                     <span className={styles.subTitle}>Our Work Process</span>
                     <h2 className={styles.title}>
-                        How We <span className="gradient-text">Drive Results</span>
+                        A Clear, Structured <br /> Path to <span className="gradient-text">Social Growth</span>
                     </h2>
                 </div>
 

components/Pricing.module.css

@@ -279,7 +279,7 @@
 }
 
 .signupBtn:hover {
-    background: #0f172a;
+    background: #0072b1;
     /* Keep dark hover or update? Let's keep dark fallback for hover state */
     padding-right: 2.2rem;
     /* Animate slightly */

components/Pricing.tsx

@@ -57,10 +57,10 @@ export default function Pricing() {
                 <div className={styles.header}>
                     <div className={styles.subTitle}>Pricing</div>
                     <h2 className={styles.title}>
-                        Simple, <span className="gradient-text">Transparent Pricing</span>
+                        Clear Plans with <span className="gradient-text"><br />No Hidden Costs</span>
                     </h2>
                     <p className={styles.subtitle}>
-                        Choose the perfect plan for your needs. All plans include a 7-day free trial.
+                        Select a package that fits your goals. Every option comes with a risk-free 7-day trial so you can explore confidently.
                     </p>
 
                     <div className={styles.toggle}>
@@ -110,7 +110,7 @@ export default function Pricing() {
                                 </div>
 
                                 <a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>
-                                    Sign up <span className={styles.btnArrow}>▶</span>
+                                    Get Started <span className={styles.btnArrow}>▶</span>
                                 </a>
                             </div>
                         </div>
@@ -119,7 +119,7 @@ export default function Pricing() {
 
                 <div className={styles.guarantee}>
                     <p>
-                        <strong>Try risk-free. Cancel anytime.</strong>
+                        <strong>Start confidently and stop anytime.</strong>
                     </p>
                 </div>
             </div>

components/SocialConnect.tsx

@@ -101,13 +101,9 @@ export default function SocialConnect() {
             <div className={styles.container}>
                 <div className={styles.header}>
                     <div className={styles.subTitle}>Our Services</div>
-                    <h2 className={styles.title}>
+                    <h2 className={styles.title}><span className="gradient-text">Proven Solutions </span>That Drive <br /> Real Outcomes</h2>
-                        Always we offer the best services for success!
-                    </h2>
                     <p className={styles.description}>
-                        New analytic tools can help manufacturers in labor-intensive sectors boost
+                        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.
-                        productivity and earnings by double-digit on It is a secure and simple
-                        ondemand. the total percentages.
                     </p>
                 </div>
 
@@ -136,9 +132,7 @@ export default function SocialConnect() {
                         </div>
                         <h3 className={styles.cardTitle}>{activePlatform.label}</h3>
                         <p className={styles.cardDesc}>
-                            {activePlatform.desc}
+                            {activePlatform.desc}    
-                            <br />
-                            <span className={styles.brandName}>Prysm Quarterly</span> has been defining...
                         </p>
                         <button
                             className={styles.readMoreBtn}

components/StatsCounter.tsx

@@ -80,7 +80,7 @@ export default function StatsCounter() {
                             <div className={styles.numberWrapper}>
                                 {hasAnimated ? counts.users : 0}k+
                             </div>
-                            <p className={styles.label}>Active Users</p>
+                            <p className={styles.label}>Growing Community</p>
                         </div>
                     </div>
 
@@ -94,7 +94,7 @@ export default function StatsCounter() {
                             <div className={styles.numberWrapper}>
                                 {hasAnimated ? '2' : '0'}M+
                             </div>
-                            <p className={styles.label}>Posts Scheduled</p>
+                            <p className={styles.label}>Content Published</p>
                         </div>
                     </div>
 
@@ -108,7 +108,7 @@ export default function StatsCounter() {
                             <div className={styles.numberWrapper}>
                                 {hasAnimated ? counts.satisfaction : 0}%
                             </div>
-                            <p className={styles.label}>Client Satisfaction</p>
+                            <p className={styles.label}>Customer Approval</p>
                         </div>
                     </div>
                 </div>

components/Testimonials.tsx

@@ -10,47 +10,40 @@ export default function Testimonials() {
 
     const testimonials = [
         {
-            name: 'Sarah Johnson',
+            name: 'Rahul Mehta',
-            role: 'Marketing Director',
+            role: 'Growth Manager',
-            company: 'TechFlow Inc.',
+            reviewTitle:'Highly Impressive Results!',
-            text: 'SocialBuddy has completely transformed how we manage our social media. The scheduling features and analytics are game-changers.',
+            text: 'The performance insights are extremely clear. We can now adjust campaigns quickly and make confident marketing decisions.',
             image: '👩‍💼'
         },
         {
-            name: 'Michael Chen',
+            name: 'Emily Carter',
-            role: 'Content Creator',
+            role: 'Content Strategist',
-            company: 'Digital Nomad',
+            reviewTitle:'Smooth and Reliable Platform!',
-            text: 'As a solo creator managing multiple platforms, SocialBuddy saves me hours every week. The AI content suggestions are incredibly helpful.',
+            text: 'Managing posts feels effortless now. Planning content ahead of time has significantly improved our publishing consistency.',
             image: '👨‍💻'
         },
         {
-            name: 'Emily Rodriguez',
+            name: 'Arjun Nair',
-            role: 'Social Media Manager',
+            role: 'Digital Consultant',
-            company: 'BrandBoost Agency',
+            reviewTitle:'Excellent Tool for Teams!',
-            text: 'Managing 20+ client accounts used to be overwhelming. SocialBuddy\'s team collaboration features have streamlined our process.',
+            text: 'Collaboration is seamless and approvals are faster. It has simplified how we handle multiple client accounts.',
             image: '👩‍🎨'
         },
         {
-            name: 'David Park',
+            name: 'Sophia Williams',
-            role: 'CEO',
+            role: 'Brand Manager',
-            company: 'StartupHub',
+            reviewTitle:'Well Designed and Effective!',
-            text: 'The analytics and reporting features are outstanding. We can now make data-driven decisions about our social media strategy.',
+            text: 'The interface is clean and easy to navigate. Tracking engagement across platforms has never been this simple.',
             image: '👨‍💼'
         },
         {
-            name: 'Lisa Thompson',
+            name: 'Daniel Rodrigues',
-            role: 'Influencer',
+            role: ' Marketing Lead',
-            company: 'Lifestyle & Travel',
+            reviewTitle:'Strong Value for Growth!',
-            text: 'I love how intuitive SocialBuddy is! The content calendar helps me plan my posts weeks in advance.',
+            text: 'The reporting features save us hours every week. Insights are easy to understand and useful for strategy planning.',
             image: '👩‍🦰'
         },
-        {
-            name: 'James Wilson',
-            role: 'E-commerce Manager',
-            company: 'ShopSmart',
-            text: 'SocialBuddy has helped us maintain a consistent brand presence across all platforms. The bulk scheduling feature is amazing.',
-            image: '👨‍🏫'
-        }
     ];
 
     // Clone the first few items to create the infinite illusion
@@ -128,12 +121,10 @@ export default function Testimonials() {
                 <div className={styles.leftCard}>
                     <div className={styles.cardContent}>
                         <h2 className={styles.cardTitle}>
-                            Discover your <br />
+                            Unlock Your Growth Opportunities
-                            entrepreneurial potential
                         </h2>
                         <p className={styles.cardDescription}>
-                            Join countless marketers and influencers who have transformed their social media presence with SocialBuddy.
+                            Connect with a global community of marketers and creators who have elevated their digital presence using Social Buddy. Real progress, real outcomes - getting started takes only a moment.
-                            Success is just a click away.
                         </p>
 
                         <div className={styles.miniStats}>
@@ -141,20 +132,20 @@ export default function Testimonials() {
                                 <span className={styles.statIcon}>👥</span>
                                 <div>
                                     <strong>10,000+</strong>
-                                    <span>Happy Users</span>
+                                    <span>Active Members</span>
                                 </div>
                             </div>
                             <div className={styles.statBadge}>
                                 <span className={styles.statIcon}>⭐</span>
                                 <div>
                                     <strong>4.9/5</strong>
-                                    <span>Ratings</span>
+                                    <span>User Satisfaction</span>
                                 </div>
                             </div>
                         </div>
 
                         <button className={styles.readMoreBtn}>
-                            Read Success Stories
+                            View Customer Stories
                         </button>
                     </div>
                 </div>
@@ -174,11 +165,11 @@ export default function Testimonials() {
                                     <div className={styles.userImage}>{t.image}</div>
                                     <div className={styles.userInfo}>
                                         <h4>{t.name}</h4>
-                                        <span className={styles.userCompany}>{t.company}</span>
+                                        <span className={styles.userCompany}>{t.role}</span>
                                     </div>
                                     <div className={styles.rating}>⭐⭐⭐⭐⭐</div>
                                 </div>
-                                <h5 className={styles.reviewTitle}>Amazing Experience!</h5>
+                                <h5 className={styles.reviewTitle}>{t.reviewTitle}</h5>
                                 <p className={styles.reviewText}>{t.text}</p>
                             </div>
                         ))}