images updated

app/about/about.module.css

@@ -32,23 +32,28 @@
 }
 
 .breadcrumb {
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
     font-size: 0.95rem;
 }
 
 .breadcrumb a {
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
     text-decoration: none;
-    transition: color 0.2s;
+    transition: opacity 0.2s;
+    font-weight: 400;
 }
 
 .breadcrumb a:hover {
-    color: var(--primary);
+    opacity: 0.8;
 }
 
 .breadcrumb span {
-    color: var(--primary);
-    font-weight: 600;
+    color: #fff;
+    font-weight: 400;
+}
+
+.breadcrumb .breadcrumbActive {
+    font-weight: 700;
 }
 
 /* 1. Story Section (Image 3 Style) */

app/about/page.tsx

@@ -18,7 +18,7 @@ export default function AboutPage() {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>About Us</h1>
                         <div className={styles.breadcrumb}>
-                            <a href="/">Home</a> / <span>About</span>
+                            <a href="/">Home</a> / <span className={styles.breadcrumbActive}>About</span>
                         </div>
                     </div>
                 </div>
@@ -77,7 +77,7 @@ export default function AboutPage() {
                         {/* Card 1: Purple */}
                         <div className={`${styles.card} ${styles.cardPurple}`}>
                             <div className={styles.cardIconWrapper}>
-                                <Users size={32} />
+                                <Image src="/images/about/marketers.png" alt="Built by Marketers" width={32} height={32} />
                             </div>
                             <h3>Built by Marketers</h3>
                             <p>We understand the daily grind. Every feature is designed to solve real workflow challenges and save you hours every week.</p>
@@ -86,7 +86,7 @@ export default function AboutPage() {
                         {/* Card 2: Orange */}
                         <div className={`${styles.card} ${styles.cardOrange}`}>
                             <div className={styles.cardIconWrapper}>
-                                <Award size={32} />
+                                <Image src="/images/about/success.png" alt="Data-Driven Success" width={32} height={32} />
                             </div>
                             <h3>Data-Driven Success</h3>
                             <p>Move beyond guesswork. Our advanced analytics give you the hard numbers you need to prove ROI and refine your strategy.</p>
@@ -95,7 +95,7 @@ export default function AboutPage() {
                         {/* Card 3: Pink */}
                         <div className={`${styles.card} ${styles.cardPink}`}>
                             <div className={styles.cardIconWrapper}>
-                                <Zap size={32} />
+                                <Image src="/images/about/power.png" alt="Enterprise Power" width={32} height={32} />
                             </div>
                             <h3>Enterprise Power</h3>
                             <p>Access the same robust tools used by top global agencies, priced perfectly for growing businesses and ambitious creators.</p>
@@ -104,7 +104,7 @@ export default function AboutPage() {
                         {/* Card 4: Green */}
                         <div className={`${styles.card} ${styles.cardGreen}`}>
                             <div className={styles.cardIconWrapper}>
-                                <ShieldCheck size={32} />
+                                <Image src="/images/about/secure.png" alt="Secure & Reliable" width={32} height={32} />
                             </div>
                             <h3>Secure & Reliable</h3>
                             <p>Your brand's safety is non-negotiable. We prioritize expert-level security and 99.9% uptime reliability.</p>

app/careers/careers.module.css

@@ -58,7 +58,7 @@
 }
 
 .breadcrumb {
-    color: rgba(255, 255, 255, 0.8);
+    color: #fff;
     font-size: 0.9rem;
     margin-top: 1.5rem;
     display: flex;
@@ -68,19 +68,23 @@
 }
 
 .breadcrumb a {
-    color: white;
+    color: #fff;
     text-decoration: none;
-    font-weight: 500;
+    transition: opacity 0.2s;
+    font-weight: 400;
+}
+
+.breadcrumb a:hover {
+    opacity: 0.8;
 }
 
 .breadcrumb span {
-    opacity: 0.6;
+    color: #fff;
+    font-weight: 400;
 }
 
-.breadcrumb .active {
-    color: var(--primary);
-    /* Pink or Blue highlighting current page? or just Theme Color */
-    color: #ec4899;
+.breadcrumb .breadcrumbActive {
+    font-weight: 700;
 }
 
 /* 1. What We Offer (Left Content, Right 3 Images) */

app/careers/page.tsx

@@ -21,7 +21,7 @@ export default function CareersPage() {
                         <h1 className={styles.heroTitle}>Careers</h1>
 
                         <div className={styles.breadcrumb}>
-                            <Link href="/">Home</Link> <span>/</span> <span className={styles.active}>Careers</span>
+                            <Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Careers</span>
                         </div>
                     </div>
                 </div>
@@ -124,34 +124,34 @@ export default function CareersPage() {
                             />
                         </div>
 
-                        {/* Right: Process List */}
+                        {/* Right: Solutions List */}
                         <div className={styles.processList}>
                             <div>
-                                <span className={styles.subTitle}>Hiring Process</span>
+                                <span className={styles.subTitle}>Our Solutions Centre</span>
                                 <h2 style={{ fontSize: '2.5rem', fontWeight: 800, marginBottom: '2rem' }}>
-                                    Join in 3 Simple Steps
+                                    Comprehensive Platform Solutions
                                 </h2>
                             </div>
 
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>01</div>
                                 <div className={styles.processContent}>
-                                    <h4>Share Your Expertise</h4>
-                                    <p>Submit your application highlighting your experience in social strategy, content execution, or client support.</p>
+                                    <h4>Intelligent Posting Automation</h4>
+                                    <p>Schedule content using engagement-driven timing recommendations that help posts reach audiences when attention levels are highest.</p>
                                 </div>
                             </div>
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>02</div>
                                 <div className={styles.processContent}>
-                                    <h4>Alignment Call</h4>
-                                    <p>We'll discuss how your skills align with our core values of data-led performance and efficient execution.</p>
+                                    <h4>Interactive Planning View</h4>
+                                    <p>Map out campaigns visually with a flexible content planner that helps teams align messaging weeks or months ahead.</p>
                                 </div>
                             </div>
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>03</div>
                                 <div className={styles.processContent}>
-                                    <h4>Join the Mission</h4>
-                                    <p>Receive an offer and start helping global brands turn social activity into business wins.</p>
+                                    <h4>Performance Insights & Exports</h4>
+                                    <p>Access clear performance summaries with customizable reports that help evaluate results and communicate value to stakeholders.</p>
                                 </div>
                             </div>
                         </div>

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

@@ -54,7 +54,7 @@
 
 .breadcrumbs {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -62,18 +62,23 @@
 }
 
 .breadcrumbs a {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: opacity 0.3s ease;
+    font-weight: 400;
 }
 
 .breadcrumbs a:hover {
-    color: #fff;
+    opacity: 0.8;
 }
 
 .breadcrumbs span {
     color: #fff;
-    font-weight: 600;
+    font-weight: 400;
+}
+
+.breadcrumbs .breadcrumbActive {
+    font-weight: 700;
 }
 
 /* --- Section 1: About (Icons) --- */
@@ -133,6 +138,12 @@
     transform: translate(-50%, -50%) translate(-24px, 24px);
 }
 
+@media (max-width: 500px) {
+    .aboutImageFrame {
+        display: none !important; 
+    }
+}
+
 .aboutContent {
     padding-left: 1rem;
 }
@@ -330,7 +341,7 @@
     display: grid;
     grid-template-columns: 1fr;
     gap: 3rem;
-    align-items: center;
+    align-items: stretch;
     max-width: 1000px;
     margin: 0 auto;
 }
@@ -344,11 +355,13 @@
 /* Left Side: Large Image */
 .sliderLeftImage {
     transition: opacity 0.3s ease-in-out;
+    height: 100%;
 }
 
 .sliderImageWrapper {
     width: 100%;
-    aspect-ratio: 1;
+    height: 100%;
+    /* aspect-ratio removed for stretch */
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
@@ -364,6 +377,7 @@
 /* Right Side: Content Box */
 .sliderRightContent {
     width: 100%;
+    height: 100%;
 }
 
 .testimonialCard {
@@ -375,6 +389,10 @@
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     position: relative;
     overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 /* Subtle background accent for the card if needed, currently gradient is enough */

app/channels/[slug]/page.tsx

@@ -75,7 +75,7 @@ export default async function ChannelPage(props: PageProps) {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>{channel.title}</h1>
                         <div className={styles.breadcrumbs}>
-                            <Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> {channel.title}
+                            <Link href="/">Home</Link> <span>/</span> <span>Channels</span> <span>/</span> <span className={styles.breadcrumbActive}>{channel.title}</span>
                         </div>
                     </div>
                 </div>
@@ -152,7 +152,10 @@ export default async function ChannelPage(props: PageProps) {
                             <span className={styles.sectionSubtitle}>Testimonials</span>
                             <h2 className={styles.sectionTitle}>Loved by {channel.title} Creators</h2>
                         </div>
-                        <ChannelTestimonialSlider testimonials={channel.testimonials} />
+                        <ChannelTestimonialSlider
+                            testimonials={channel.testimonials}
+                            staticImage={channel.testimonialStaticImage}
+                        />
                         <div style={{ textAlign: 'center', marginTop: '3rem' }}>
                             <a href="#" className="btn btn-primary">
                                 Review us on Google
@@ -170,13 +173,13 @@ export default async function ChannelPage(props: PageProps) {
             {/* 6. CTA (Full Width Floating) */}
             <section className={styles.ctaFullWidth}>
                 <SafeImage
-                    src="/images/shape-left.png"
+                    src="/images/channels/instagram/left.webp"
                     alt=""
                     className={`${styles.floatElem} ${styles.floatLeft}`}
                     fallbackSrc="https://placehold.co/150x150/png?text=Shape"
                 />
                 <SafeImage
-                    src="/images/shape-right.png"
+                    src="/images/channels/instagram/right.webp"
                     alt=""
                     className={`${styles.floatElem} ${styles.floatRight}`}
                     fallbackSrc="https://placehold.co/150x150/png?text=Shape"

app/contact/contact.module.css

@@ -40,7 +40,7 @@
 
 .breadcrumb {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -48,18 +48,23 @@
 }
 
 .breadcrumb a {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: opacity 0.3s ease;
+    font-weight: 400;
 }
 
 .breadcrumb a:hover {
-    color: #fff;
+    opacity: 0.8;
 }
 
 .breadcrumb span {
     color: #fff;
-    font-weight: 600;
+    font-weight: 400;
+}
+
+.breadcrumb .breadcrumbActive {
+    font-weight: 700;
 }
 
 /* Contact Info Cards (Top Section) */

app/contact/page.tsx

@@ -144,7 +144,7 @@ export default function ContactPage() {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>Contact Us</h1>
                         <div className={styles.breadcrumb}>
-                            <a href="/">Home</a> / <span>Contact</span>
+                            <a href="/">Home</a> / <span className={styles.breadcrumbActive}>Contact</span>
                         </div>
                     </div>
                 </div>

app/features/features.module.css

@@ -81,6 +81,12 @@
     }
 }
 
+@media (max-width: 500px) {
+    .whyGrid {
+        gap: 0;
+    }
+}
+
 .tagline {
     color: var(--secondary);
     font-weight: 600;

app/features/page.tsx

@@ -12,37 +12,37 @@ export default function FeaturesPage() {
     const detailedFeatures = [
         {
             category: 'Core Features',
-            icon: '⚡',
+            // icon: '⚡',
             features: [
                 {
                     title: 'Workflow Automation',
                     description: 'Streamline your social interactions with intelligent automation rules that work 24/7.',
-                    icon: '🤖',
+                    icon: '/images/features/automation.webp',
                 },
                 {
                     title: 'Secure Account Login',
                     description: 'Connect and manage multiple social profiles securely with our encrypted login system.',
-                    icon: '🔐',
+                    icon: '/images/features/secure.webp',
                 },
                 {
                     title: 'Comment Management',
                     description: 'Organize and oversee all user interactions from a single, unified dashboard.',
-                    icon: '📝',
+                    icon: '/images/features/comment.webp',
                 },
                 {
                     title: 'Quick Engagement',
                     description: 'Boost your community presence by liking user comments instantly from the dashboard.',
-                    icon: '❤️',
+                    icon: '/images/features/quick.webp',
                 },
                 {
                     title: 'Smart Replies',
                     description: 'Respond efficiently to your audience using saved templates and quick-reply tools.',
-                    icon: '↩️',
+                    icon: '/images/features/smart.webp',
                 },
                 {
                     title: 'Spam Control',
                     description: 'Keep your comment sections clean by easily deleting unwanted or inappropriate content.',
-                    icon: '🗑️',
+                    icon: '/images/features/spam.webp',
                 },
             ],
         },
@@ -140,13 +140,15 @@ export default function FeaturesPage() {
                     {detailedFeatures.map((category, idx) => (
                         <div key={idx} className={styles.categorySection}>
                             <div className={styles.categoryHeader}>
-                                <span className={styles.categoryIcon}>{category.icon}</span>
+                                <span className={styles.categoryIcon}></span>
                                 <h2 className={styles.categoryTitle}>{category.category}</h2>
                             </div>
                             <div className={styles.featuresGrid}>
                                 {category.features.map((feature, index) => (
                                     <div key={index} className={styles.featureCard}>
-                                        <div className={styles.featureIcon}>{feature.icon}</div>
+                                        <div className={styles.featureIcon}>
+                                            <Image src={feature.icon} alt={feature.title} width={40} height={40} />
+                                        </div>
                                         <h3 className={styles.featureTitle}>{feature.title}</h3>
                                         <p className={styles.featureDescription}>{feature.description}</p>
                                     </div>

app/globals.css

@@ -260,7 +260,7 @@ section:nth-child(even) {
   background-color: #ffffff;
   /* Slate 100 - Distinct contrast */
   border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
+  /* border-bottom: 1px solid var(--border-color); */
 }
 
 /* Ensure spacing consistency */

app/pricing/page.tsx

@@ -47,7 +47,7 @@ export default function PricingPage() {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>Pricing</h1>
                         <div className={styles.breadcrumb}>
-                            <a href="/">Home</a> / <span>Pricing</span>
+                            <a href="/">Home</a> / <span className={styles.breadcrumbActive}>Pricing</span>
                         </div>
                     </div>
                 </div>

app/pricing/pricing.module.css

@@ -38,7 +38,7 @@
 
 .breadcrumb {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,18 +46,23 @@
 }
 
 .breadcrumb a {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: opacity 0.3s ease;
+    font-weight: 400;
 }
 
 .breadcrumb a:hover {
-    color: #fff;
+    opacity: 0.8;
 }
 
 .breadcrumb span {
     color: #fff;
-    font-weight: 600;
+    font-weight: 400;
+}
+
+.breadcrumb .breadcrumbActive {
+    font-weight: 700;
 }
 
 /* FAQ Section */

app/resources/[slug]/page.tsx

@@ -49,7 +49,7 @@ export default async function ResourceDetailPage(props: PageProps) {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>{resource.title}</h1>
                         <div className={styles.breadcrumbs}>
-                            <Link href="/">Home</Link> <span>/</span> <Link href="/resources">Resources</Link> <span>/</span> {resource.title}
+                            <Link href="/">Home</Link> <span>/</span> <Link href="/resources">Resources</Link> <span>/</span> <span className={styles.breadcrumbActive}>{resource.title}</span>
                         </div>
                     </div>
                 </div>
@@ -62,7 +62,6 @@ export default async function ResourceDetailPage(props: PageProps) {
                         src={resource.bigImage}
                         alt={resource.title}
                         className={styles.image}
-                        style={{ width: '100%', height: 'auto', display: 'block' }}
                         fallbackSrc={`https://placehold.co/1200x600/png?text=${encodeURIComponent(resource.title)}`}
                     />
                 </div>

app/resources/page.tsx

@@ -17,7 +17,7 @@ export default function ResourcesPage() {
                     <div className={styles.heroContent}>
                         <h1 className={styles.heroTitle}>Resources</h1>
                         <div className={styles.breadcrumbs}>
-                            <Link href="/">Home</Link> <span>/</span> Resources
+                            <Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Resources</span>
                         </div>
                     </div>
                 </div>

app/resources/resources.module.css

@@ -52,7 +52,7 @@
 
 .breadcrumbs {
     font-size: 1rem;
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -63,18 +63,24 @@
 }
 
 .breadcrumbs a {
-    color: rgba(255, 255, 255, 0.9);
+    color: #fff;
     text-decoration: none;
-    transition: color 0.3s ease;
+    transition: opacity 0.3s ease;
+    font-weight: 400;
 }
 
 .breadcrumbs a:hover {
-    color: #fff;
+    opacity: 0.8;
 }
 
 .breadcrumbs span {
     color: #fff;
-    font-weight: 600;
+    padding: 0 0.25rem;
+    font-weight: 400;
+}
+
+.breadcrumbs .breadcrumbActive {
+    font-weight: 700;
 }
 
 
@@ -199,6 +205,7 @@
 /* Detail Page Styles */
 .detailPage {
     background: white;
+    padding-top: 5rem;
 }
 
 /* Moved Title to Hero, so this header is deprecated/removed in new design,
@@ -214,7 +221,7 @@
 .detailImageWrapper {
     max-width: 1000px;
     height: 400px;
-    margin: 4rem auto;
+    margin: 4rem auto 1rem;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
@@ -224,7 +231,7 @@
     .detailImageWrapper {
         height: auto;
         aspect-ratio: 16/9;
-        margin: 2rem auto;
+        margin: 4rem auto 0.5rem;
         border-radius: 12px;
     }
 }
@@ -238,7 +245,7 @@
 .detailContent {
     max-width: 800px;
     margin: 0 auto;
-    padding: 0 1.5rem 4rem;
+    /* padding: 0 1.5rem 1rem; */
     /* Adjusted padding */
     line-height: 1.8;
     color: var(--text-primary);

components/ChannelTestimonialSlider.tsx

@@ -13,7 +13,7 @@ interface Testimonial {
     image: string;
 }
 
-export default function ChannelTestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) {
+export default function ChannelTestimonialSlider({ testimonials, staticImage }: { testimonials: Testimonial[], staticImage?: string }) {
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isAnimating, setIsAnimating] = useState(false);
 
@@ -34,14 +34,24 @@ export default function ChannelTestimonialSlider({ testimonials }: { testimonial
 
     const current = testimonials[currentIndex];
 
+    // Determine what image to show on the left
+    // If staticImage is provided, use it always.
+    // If not, use the current testimonial's image.
+    const leftImageSrc = staticImage || current.image;
+
+    // Only animate the left image if it is changing (i.e., no staticImage)
+    const leftImageClass = staticImage
+        ? styles.sliderLeftImage
+        : `${styles.sliderLeftImage} ${isAnimating ? styles.fadeOut : styles.fadeIn}`;
+
     return (
         <div className={styles.channelTestimonialContainer}>
             {/* Left Side: Large Image */}
-            <div className={`${styles.sliderLeftImage} ${isAnimating ? styles.fadeOut : styles.fadeIn}`}>
+            <div className={leftImageClass}>
                 <div className={styles.sliderImageWrapper}>
                     <SafeImage
-                        src={current.image}
-                        alt={current.author}
+                        src={leftImageSrc}
+                        alt={staticImage ? "Testimonial" : current.author}
                         className={styles.sliderMainImage}
                         fallbackSrc={`https://placehold.co/600x600/png?text=${encodeURIComponent(current.author)}`}
                     />
@@ -75,6 +85,7 @@ export default function ChannelTestimonialSlider({ testimonials }: { testimonial
                     <div className={`${styles.testAuthorRow} ${isAnimating ? styles.fadeOutText : styles.fadeInText}`}>
                         <div className={styles.testAuthorAvatarWrapper}>
                             <SafeImage
+                                key={currentIndex}
                                 src={current.image}
                                 alt={current.author}
                                 className={styles.testSmallAvatar}

components/Hero.tsx

@@ -103,15 +103,15 @@ export default function Hero() {
                             </button>
                         </div>
 
-                        <div className={styles.trustedBy}>
+                        {/* <div className={styles.trustedBy}>
                             <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 */}
-                                <div className={styles.trustIcon} style={{ color: '#E4405F' }}>📷</div> {/* Insta */}
-                                <div className={styles.trustIcon} style={{ color: '#00A4EF' }}>⊞</div> {/* Microsoft */}
+                                <div className={styles.trustIcon} style={{ color: '#EA4335' }}>G</div> 
+                                <div className={styles.trustIcon} style={{ color: '#0057ff' }}>Be</div> 
+                                <div className={styles.trustIcon} style={{ color: '#E4405F' }}>📷</div> 
+                                <div className={styles.trustIcon} style={{ color: '#00A4EF' }}>⊞</div> 
                             </div>
-                        </div>
+                        </div> */}
                     </div>
 
                     {/* Right Content - Image & Floating Cards */}

components/Pricing.tsx

@@ -106,7 +106,7 @@ export default function Pricing() {
                                         <span className={styles.currency}>$</span>
                                         {isAnnual ? Math.floor(plan.price.annual) : plan.price.monthly}
                                     </div>
-                                    <div className={styles.period}>per month</div>
+                                    <div className={styles.period}>per {isAnnual ? 'year' : 'month'}</div>
                                 </div>
 
                                 <a href="https://app.socialbuddy.co/signup" className={styles.signupBtn}>

data/channels.ts

@@ -43,6 +43,7 @@ export interface Channel {
     about: ChannelAbout;
     benefits: ChannelBenefit[];
     testimonials: ChannelTestimonial[];
+    testimonialStaticImage?: string;
     faqs: ChannelFAQ[];
     details: ChannelDetail[];
 }
@@ -104,7 +105,7 @@ export const channels: Channel[] = [
                 { text: 'Hashtag Strategy', icon: 'Repeat' },
                 { text: 'Shoppable Integrations', icon: 'Trophy' }
             ],
-            mainImage: '/images/channels/channel.webp',
+            mainImage: '/images/channels/instagram/channel.webp',
             subImage: '/images/channels/instagram-about-sub.jpg'
         },
         benefits: [
@@ -114,12 +115,13 @@ export const channels: Channel[] = [
             { title: 'Engagement Analytics', description: 'Understand what resonates with deep dives into audience demographics, reach, and interaction rates.', icon: 'BarChart' }
         ],
         testimonials: [
-            { quote: "The visual grid planner is a lifesaver. I can finally see exactly how my feed will look next week before I commit to posting.", author: "Chloe Vance", role: "Creative Director", rating: 5, image: "/images/channels/testimonial-1.webp" },
-            { quote: "Auto-publishing Reels without the 'push notification' dance? Yes, please. This feature alone is worth the subscription.", author: "Tyler O'Neil", role: "Content Creator", rating: 5, image: "/images/channels/testimonial-2.webp" },
-            { quote: "We’ve seen a 40% increase in engagement since we started using the hashtag recommendations. It really works.", author: "Priya Patel", role: "Social Strategist", rating: 5, image: "/images/channels/testimonial-3.webp" },
-            { quote: "My clients love the approval workflow. They can comment on the grid preview directly, which speeds up our sign-off process immensely.", author: "Jordan Lee", role: "Agency Founder", rating: 5, image: "/images/channels/testimonial-4.webp" },
-            { quote: "Seamless integration with our Shopify store. Tagging products in scheduled posts has streamlined our sales funnel.", author: "Morgan St. James", role: "E-commerce Manager", rating: 4, image: "/images/channels/testimonial-5.webp" }
+            { quote: "The visual grid planner is a lifesaver. I can finally see exactly how my feed will look next week before I commit to posting.", author: "Chloe Vance", role: "Creative Director", rating: 5, image: "/images/channels/instagram/testimonial-1.webp" },
+            { quote: "Auto-publishing Reels without the 'push notification' dance? Yes, please. This feature alone is worth the subscription.", author: "Tyler O'Neil", role: "Content Creator", rating: 5, image: "/images/channels/instagram/testimonial-2.webp" },
+            { quote: "We’ve seen a 40% increase in engagement since we started using the hashtag recommendations. It really works.", author: "Priya Patel", role: "Social Strategist", rating: 5, image: "/images/channels/instagram/testimonial-3.webp" },
+            { quote: "My clients love the approval workflow. They can comment on the grid preview directly, which speeds up our sign-off process immensely.", author: "Jordan Lee", role: "Agency Founder", rating: 5, image: "/images/channels/instagram/testimonial-4.webp" },
+            { quote: "Seamless integration with our Shopify store. Tagging products in scheduled posts has streamlined our sales funnel.", author: "Morgan St. James", role: "E-commerce Manager", rating: 4, image: "/images/channels/instagram/testimonial-5.webp" }
         ],
+        testimonialStaticImage: '/images/channels/instagram/instagram.webp',
         faqs: [
             { question: "Do you support Collaboration posts?", answer: "Currently, we support scheduling standard posts, carousels, and Reels. Collab posts must be done natively." },
             { question: "Can I schedule the First Comment?", answer: "Yes, you can draft hashtags in your first comment to keep your caption clean." },