From b11ac845c31cb7360bc0381238cc63d313b33769 Mon Sep 17 00:00:00 2001
From: selvi <selvi@metatroncube.in>
Date: Mon, 12 Jan 2026 18:07:17 +0530
Subject: [PATCH] corrections updated

---
 app/about/about.module.css                  |  5 +-
 app/about/page.tsx                          | 20 ++++---
 app/careers/careers.module.css              | 26 +++++----
 app/careers/page.tsx                        | 63 ++++++++++++---------
 app/channels/[slug]/channel-page.module.css |  3 +-
 app/channels/[slug]/page.tsx                |  2 +-
 app/channels/channels.module.css            |  3 +-
 app/contact/contact.module.css              | 36 +++++++++++-
 app/features/[slug]/feature-page.module.css |  5 +-
 app/features/features.module.css            |  2 +-
 app/pricing/pricing.module.css              |  2 +-
 app/resources/resources.module.css          |  6 +-
 components/Footer.module.css                | 15 ++++-
 components/SocialConnect.tsx                | 18 +++---
 components/Testimonials.module.css          |  4 ++
 components/Testimonials.tsx                 | 47 ++++++++++++++-
 16 files changed, 186 insertions(+), 71 deletions(-)

diff --git a/app/about/about.module.css b/app/about/about.module.css
index 7f4ad8a..79be2d6 100644
--- a/app/about/about.module.css
+++ b/app/about/about.module.css
@@ -2,12 +2,13 @@
 
 .aboutPage {
     background: var(--background);
+    padding-top: 5rem;
 }
 
 /* Hero Section */
 .hero {
     background: var(--background-secondary);
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     position: relative;
     border-bottom: 1px solid var(--border-color);
 }
@@ -413,7 +414,7 @@
     background: linear-gradient(135deg, #2563eb 0%, #ec4899 100%);
     /* Primary Gradient Blue->Pink */
     border-radius: 40px;
-    padding: 4rem 4rem 0;
+    padding: 3rem 3rem 0;
     /* No bottom padding, content aligns to bottom */
     display: flex;
     flex-direction: column;
diff --git a/app/about/page.tsx b/app/about/page.tsx
index d31d20d..f8697a0 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -53,9 +53,11 @@ export default function AboutPage() {
                             <p className={styles.storyText}>
                                 We set out to build a solution that puts you back in control. SocialBuddy isn't just a tool; it's your command center for digital growth. By combining powerful analytics, intuitive scheduling, and seamless collaboration into one unified platform, we empower brands to stop managing chaos and start driving real results.
                             </p>
-                            <button className={styles.storyBtn}>
-                                Discover Our Mission
-                            </button>
+                            <Link href="/careers">
+                                <button className={styles.storyBtn}>
+                                    Discover Our Mission
+                                </button>
+                            </Link>
                         </div>
                     </div>
                 </div>
@@ -189,12 +191,16 @@ export default function AboutPage() {
                             <h2 className={styles.readyTitle}>
                                 Ready to Transform Your <br /> Social Strategy?
                             </h2>
-                            <p className={styles.readyText}style={{ color: "#ffffff" }}>
+                            <p className={styles.readyText} style={{ color: "#ffffff" }}>
                                 Join thousands of brands using SocialBuddy to streamline their workflow, amplify their voice, and grow their meaningful connections.
                             </p>
-                            <button className={styles.readyBtn}>
-                                Get Started Today
-                            </button>
+                            <a
+                                href="https://app.socialbuddy.co/signup"
+                            >
+                                <button className={styles.readyBtn}>
+                                    Get Started Today
+                                </button>
+                            </a>
                         </div>
                         <div className={styles.readyImageWrapper}>
                             <div className={styles.phoneFrame}>
diff --git a/app/careers/careers.module.css b/app/careers/careers.module.css
index 13668c8..b26e7e9 100644
--- a/app/careers/careers.module.css
+++ b/app/careers/careers.module.css
@@ -2,13 +2,14 @@
 
 .careersPage {
     background: var(--background);
+    padding-top: 5rem;
 }
 
 /* Hero Section */
 .hero {
     background: url('/hero-inner-bg.png') no-repeat center center;
     background-size: cover;
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     /* Taller padding */
     position: relative;
     border-bottom: 1px solid var(--border-color);
@@ -288,16 +289,17 @@
 /* Hiring Process Visibility Fix: 
    Makes text white on dark image and black on white background during scroll 
 */
-@media (max-width: 899px){
-  .processList h2,
-  .processList .subTitle,
-  .processContent h4,
-  .processContent p {
-    color: white !important;
-    mix-blend-mode: difference;
-    z-index: 10;
-    position: relative;
-  }
+@media (max-width: 899px) {
+
+    .processList h2,
+    .processList .subTitle,
+    .processContent h4,
+    .processContent p {
+        color: white !important;
+        /* mix-blend-mode: difference; */
+        /* z-index: 10; */
+        position: relative;
+    }
 }
 
 
@@ -336,7 +338,7 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
-    padding-left: 2rem;
+    /* padding-left: 2rem; */
     /* Indent slightly if needed */
 }
 
diff --git a/app/careers/page.tsx b/app/careers/page.tsx
index 56bc212..802485e 100644
--- a/app/careers/page.tsx
+++ b/app/careers/page.tsx
@@ -8,8 +8,7 @@ import {
 import styles from './careers.module.css';
 
 export const metadata: Metadata = {
-    title: 'Careers - Join SocialBuddy',
-    description: 'Join our team and help shape the future of social media management.',
+    description: 'Join our team of social media experts, content creators, and strategists.',
 };
 
 export default function CareersPage() {
@@ -34,15 +33,18 @@ export default function CareersPage() {
                     <div className={styles.offerContainer}>
                         {/* Left Content */}
                         <div className={styles.offerContent}>
-                            <span className={styles.subTitle}>Our Mission</span>
-                            <h2>Building the Operating System for Social Growth</h2>
+                            <h2>Engineering Intelligent Automation</h2>
                             <p>
-                                At SocialBuddy, we're not just coding another tool. We're engineering the platform that empowers 10,000+ brands to find their voice in a noisy digital world.
+                                At SocialBuddy, we're building the future of social management. From intelligent automation rules that work 24/7 to secure encrypted login systems, we empower teams to manage multiple profiles with total confidence.
                             </p>
                             <p>
-                                We tackle massive scale challenges with AI, machine learning, and intuitive design. If you're obsessed with solving real problems and want your work to have global impact, you belong here.
+                                Join us to build unify dashboards that oversee every interaction. We value "Security," "Speed," and "Smart Engagement." If you want to create tools that help brands boost their community presence instantly, you belong here.
                             </p>
-                            <button className="btn btn-primary">View Open Positions</button>
+                            <Link href="/about">
+                                <button className="btn btn-primary">
+                                    View Open Positions
+                                </button>
+                            </Link>
                         </div>
 
                         {/* Right Image Grid (3 Images) */}
@@ -86,17 +88,17 @@ export default function CareersPage() {
                         <div className={styles.statItem}>
                             <div className={styles.statIconWrapper}><Users size={48} /></div>
                             <div className={styles.statNumber}>54</div>
-                            <div className={styles.statLabel}>Happy Team</div>
+                            <div className={styles.statLabel}>Data-Driven Experts</div>
                         </div>
                         <div className={styles.statItem}>
                             <div className={styles.statIconWrapper}><Smile size={48} /></div>
                             <div className={styles.statNumber}>340</div>
-                            <div className={styles.statLabel}>Completed Projects</div>
+                            <div className={styles.statLabel}>Campaigns Optimized</div>
                         </div>
                         <div className={styles.statItem}>
                             <div className={styles.statIconWrapper}><MapPin size={48} /></div>
                             <div className={styles.statNumber}>15</div>
-                            <div className={styles.statLabel}>Countries</div>
+                            <div className={styles.statLabel}>Industries Served</div>
                         </div>
                         <div className={styles.statItem}>
                             <div className={styles.statIconWrapper}><Award size={48} /></div>
@@ -134,22 +136,22 @@ export default function CareersPage() {
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>01</div>
                                 <div className={styles.processContent}>
-                                    <h4>Provide details</h4>
-                                    <p>Submit your application with your resume and portfolio. Tell us about your journey.</p>
+                                    <h4>Share Your Expertise</h4>
+                                    <p>Submit your application highlighting your experience in social strategy, content execution, or client support.</p>
                                 </div>
                             </div>
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>02</div>
                                 <div className={styles.processContent}>
-                                    <h4>Schedule Interview</h4>
-                                    <p>We'll schedule a call to discuss your skills, experience, and cultural fit.</p>
+                                    <h4>Alignment Call</h4>
+                                    <p>We'll discuss how your skills align with our core values of data-led performance and efficient execution.</p>
                                 </div>
                             </div>
                             <div className={styles.processItem}>
                                 <div className={styles.processNumber}>03</div>
                                 <div className={styles.processContent}>
-                                    <h4>Get Hired</h4>
-                                    <p>Receive an offer and join our amazing team. Welcome aboard!</p>
+                                    <h4>Join the Mission</h4>
+                                    <p>Receive an offer and start helping global brands turn social activity into business wins.</p>
                                 </div>
                             </div>
                         </div>
@@ -164,42 +166,47 @@ export default function CareersPage() {
                         {/* Left Content */}
                         <div className={styles.benefitsContent}>
                             <span className={styles.subTitle}>Why Choose Us?</span>
-                            <h2>Accelerate Your Career <br /> with Purpose</h2>
+                            <h2>Work on Tools That Matter</h2>
                             <p className={styles.benefitsText}>
-                                We believe in autonomy, mastery, and purpose. Whether you're a developer, designer, or strategist, we provide the environment, tools, and mentorship you need to do the best work of your life.
+                                We're not just a service—we're a technology company. Join our team to build Smart Replies, Comment Management systems, and Spam Control filters that keep online communities clean, active, and thriving.
                             </p>
-                            <button className="btn btn-primary btn-large">Explore Culture +</button>
+                            <Link href="/features">
+                                <button className="btn btn-primary btn-large">
+                                    Explore Innovation
+                                </button>
+                            </Link>
                         </div>
 
                         {/* Right Connected Cards */}
                         <div className={styles.connectedCards}>
                             <div className={styles.connCard}>
                                 <div className={styles.connIcon} style={{ color: '#ec4899', background: '#fce7f3' }}>
-                                    <Layout />
+                                    <Zap />
                                 </div>
                                 <div className={styles.connContent}>
-                                    <h4>Future Technology</h4>
-                                    <p>Work with the latest modern stack.</p>
+                                    <h4>Workflow Automation</h4>
+                                    <p>Intelligent rules working 24/7.</p>
                                 </div>
                             </div>
 
                             <div className={styles.connCard} style={{ background: 'linear-gradient(135deg, #2563eb, #8b5cf6)', color: 'white' }}>
                                 <div className={styles.connIcon} style={{ background: 'rgba(255,255,255,0.2)', color: 'white', borderColor: 'transparent' }}>
-                                    <MousePointerClick />
+                                    {/* Using View or Layout as placeholder for Dashboard/Login */}
+                                    <Layout />
                                 </div>
                                 <div className={styles.connContent}>
-                                    <h4 style={{ color: 'white' }}>Drag & Drop Builder</h4>
-                                    <p style={{ color: 'rgba(255,255,255,0.9)' }}>Intuitive tools for every task.</p>
+                                    <h4 style={{ color: 'white' }}>Secure & Unified</h4>
+                                    <p style={{ color: 'rgba(255,255,255,0.9)' }}>Encrypted login & single dashboard.</p>
                                 </div>
                             </div>
 
                             <div className={styles.connCard}>
                                 <div className={styles.connIcon} style={{ color: '#10b981', background: '#d1fae5' }}>
-                                    <Gem />
+                                    <Smile />
                                 </div>
                                 <div className={styles.connContent}>
-                                    <h4>Most Eco Friendly</h4>
-                                    <p>Sustainable practices at core.</p>
+                                    <h4>Smart Engagement</h4>
+                                    <p>Instant likes, replies, and spam control.</p>
                                 </div>
                             </div>
                         </div>
diff --git a/app/channels/[slug]/channel-page.module.css b/app/channels/[slug]/channel-page.module.css
index 21eee16..fc3b1a6 100644
--- a/app/channels/[slug]/channel-page.module.css
+++ b/app/channels/[slug]/channel-page.module.css
@@ -3,6 +3,7 @@
     animation: fadeIn 0.6s ease-out;
     background-color: var(--background);
     color: var(--text-primary);
+    padding-top: 5rem;
 }
 
 .container {
@@ -13,7 +14,7 @@
 
 /* --- Hero Section (Ref: Inner Banner from About) --- */
 .hero {
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
     /* Use same image as About */
diff --git a/app/channels/[slug]/page.tsx b/app/channels/[slug]/page.tsx
index 2114739..d3a9454 100644
--- a/app/channels/[slug]/page.tsx
+++ b/app/channels/[slug]/page.tsx
@@ -111,7 +111,7 @@ export default async function ChannelPage(props: PageProps) {
                                         </div>
                                     ))}
                                 </div>
-                                <a href="#" className="btn btn-primary">Start Free Trial</a>
+                                <a href="https://app.socialbuddy.co/signup" className="btn btn-primary">Start Free Trial</a>
                             </div>
                         </div>
                     </div>
diff --git a/app/channels/channels.module.css b/app/channels/channels.module.css
index bca7406..4fa8fdc 100644
--- a/app/channels/channels.module.css
+++ b/app/channels/channels.module.css
@@ -2,11 +2,12 @@
 
 .channelsPage {
     background: var(--background);
+    padding-top: 5rem;
 }
 
 /* 1. About/Intro Section (Ref Image 1) */
 .introSection {
-    padding: 4rem 0;
+    padding: 8rem 0;
     background: white;
     overflow: hidden;
 }
diff --git a/app/contact/contact.module.css b/app/contact/contact.module.css
index 77dcdbb..cd1d9f4 100644
--- a/app/contact/contact.module.css
+++ b/app/contact/contact.module.css
@@ -1,9 +1,10 @@
 .contactPage {
     min-height: 100vh;
+    padding-top: 5rem;
 }
 
 .hero {
-    padding: 8rem 0 4rem;
+    padding: 8rem 0;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
     /* Assuming this exists */
@@ -80,7 +81,7 @@
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 20px;
-    padding: 2.5rem 2rem;
+    padding: 2.5rem 1rem;
     text-align: center;
     transition: all 0.3s ease;
     text-decoration: none;
@@ -116,6 +117,16 @@
     font-size: 1rem;
     color: var(--text-secondary);
     font-weight: 500;
+    word-break: break-word;
+    /* Ensure long emails wrap */
+    overflow-wrap: anywhere;
+}
+
+@media (max-width: 480px) {
+    .contactCard {
+        padding: 2rem 1rem;
+        /* Reduce padding on mobile */
+    }
 }
 
 /* Form Section (Get In Touch) */
@@ -236,8 +247,25 @@
 .formWrapper {
     background: #eef6f6;
     /* Light greenish-blue background as in image */
-    /* padding: 3rem; */
+    padding: 3rem;
     border-radius: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    /* Prevent child overflow */
+}
+
+@media (max-width: 768px) {
+    .formWrapper {
+        padding: 2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .formWrapper {
+        padding: 1.5rem 1rem;
+        /* Smaller padding on very small screens */
+    }
 }
 
 .contactForm {
@@ -273,6 +301,8 @@
 .input,
 .textarea {
     width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
     padding: 0.75rem 1rem;
     border-radius: 8px;
     border: 1px solid transparent;
diff --git a/app/features/[slug]/feature-page.module.css b/app/features/[slug]/feature-page.module.css
index da3ef04..411d21f 100644
--- a/app/features/[slug]/feature-page.module.css
+++ b/app/features/[slug]/feature-page.module.css
@@ -3,6 +3,7 @@
     animation: fadeIn 0.6s ease-out;
     background-color: var(--background);
     color: var(--text-primary);
+    padding-top: 5rem;
 }
 
 .container {
@@ -13,7 +14,7 @@
 
 /* --- Hero Section (Ref: Inner Banner from About) --- */
 .hero {
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
     /* Use same image as About */
@@ -201,7 +202,7 @@
     }
 }
 
-.benefitsContent {}
+
 
 .benefitsGrid {
     display: grid;
diff --git a/app/features/features.module.css b/app/features/features.module.css
index f4b0dea..a2d1b87 100644
--- a/app/features/features.module.css
+++ b/app/features/features.module.css
@@ -7,7 +7,7 @@
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     text-align: center;
     color: white;
     position: relative;
diff --git a/app/pricing/pricing.module.css b/app/pricing/pricing.module.css
index d8375ad..da17877 100644
--- a/app/pricing/pricing.module.css
+++ b/app/pricing/pricing.module.css
@@ -3,7 +3,7 @@
 }
 
 .hero {
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
     background-size: cover;
diff --git a/app/resources/resources.module.css b/app/resources/resources.module.css
index 6d99722..fa97102 100644
--- a/app/resources/resources.module.css
+++ b/app/resources/resources.module.css
@@ -3,6 +3,7 @@
     animation: fadeIn 0.6s ease-out;
     background-color: #F8FAFC;
     min-height: 100vh;
+    padding-top: 5rem;
 }
 
 .container {
@@ -13,7 +14,7 @@
 
 /* --- Hero Section (Ref: Inner Banner) --- */
 .hero {
-    padding: 8rem 0 8rem;
+    padding: 8rem 0;
     text-align: center;
     background-image: url('/hero-inner-bg.png');
     background-size: cover;
@@ -56,6 +57,9 @@
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
+    flex-wrap: wrap;
+    padding: 0 1rem;
+    line-height: 1.5;
 }
 
 .breadcrumbs a {
diff --git a/components/Footer.module.css b/components/Footer.module.css
index e3ee7bc..f901a90 100644
--- a/components/Footer.module.css
+++ b/components/Footer.module.css
@@ -95,12 +95,25 @@
     gap: 2rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 480px) {
     .linksGrid {
         grid-template-columns: repeat(4, 1fr);
     }
 }
 
+@media (min-width: 1024px) {
+    .linksGrid {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 2rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .linksGrid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 .linkColumn {
     display: flex;
     flex-direction: column;
diff --git a/components/SocialConnect.tsx b/components/SocialConnect.tsx
index 925412c..dd6c05f 100644
--- a/components/SocialConnect.tsx
+++ b/components/SocialConnect.tsx
@@ -1,5 +1,5 @@
 'use client';
-
+import Link from "next/link";
 import { useState, useEffect } from 'react';
 import styles from './SocialConnect.module.css';
 
@@ -132,14 +132,16 @@ export default function SocialConnect() {
                         </div>
                         <h3 className={styles.cardTitle}>{activePlatform.label}</h3>
                         <p className={styles.cardDesc}>
-                            {activePlatform.desc}    
+                            {activePlatform.desc}
                         </p>
-                        <button
-                            className={styles.readMoreBtn}
-                            style={{ backgroundColor: activePlatform.color }}
-                        >
-                            Read More
-                        </button>
+                        <Link href="/about">
+                            <button
+                                className={styles.readMoreBtn}
+                                style={{ backgroundColor: activePlatform.color }}
+                            >
+                                Read More
+                            </button>
+                        </Link>
                     </div>
 
                     {/* <div className={styles.moreServicesBtn}>
diff --git a/components/Testimonials.module.css b/components/Testimonials.module.css
index d15f325..bea11f9 100644
--- a/components/Testimonials.module.css
+++ b/components/Testimonials.module.css
@@ -143,6 +143,8 @@
     /* Extra left padding to compensate overlap */
     /* Mask/gradient to fade out right side? Optional. */
     mask-image: linear-gradient(to right, black 80%, transparent 100%);
+    max-width: 768px;
+    box-sizing: content-box;
 }
 
 .sliderTrack {
@@ -286,6 +288,8 @@
         mask-image: none;
         overflow: hidden;
         /* Restore hidden overflow for slider */
+        max-width: none;
+        margin: 0 auto;
     }
 
     .sliderTrack {
diff --git a/components/Testimonials.tsx b/components/Testimonials.tsx
index 272b3fc..95a814c 100644
--- a/components/Testimonials.tsx
+++ b/components/Testimonials.tsx
@@ -52,6 +52,46 @@ export default function Testimonials() {
     const extendedTestimonials = [...testimonials, ...testimonials.slice(0, 4)];
     const totalOriginal = testimonials.length;
 
+    const [cardWidth, setCardWidth] = useState(352);
+    const [containerMaxWidth, setContainerMaxWidth] = useState<number | string>('100%');
+
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+
+            if (width <= 480) {
+                // Mobile: Card 260, Gap 16. Container Padding 32 (layout)
+                setCardWidth(276); // Stride
+                const available = width - 32;
+                const stride = 276;
+                const gap = 16;
+                const count = Math.max(1, Math.floor((available + gap) / stride));
+                setContainerMaxWidth(count * stride - gap);
+            } else if (width <= 1024) {
+                // Tablet: Card 280, Gap 32. Container Padding 32
+                setCardWidth(312); // Stride
+                const available = width - 32;
+                const stride = 312;
+                const gap = 32;
+                const count = Math.max(1, Math.floor((available + gap) / stride));
+                setContainerMaxWidth(count * stride - gap);
+            } else {
+                // Desktop: Force 2 cards exactly per user request.
+                // Card 320, Gap 32. 
+                // 2 Cards = 320*2 + 32 = 672.
+                // Plus padding-left: 6rem (96px) defined in CSS for desktop layout.
+                setCardWidth(352); // Stride
+                setContainerMaxWidth(768); // 672 + 96
+            }
+        };
+
+        // Initial call
+        handleResize();
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
     useEffect(() => {
         const interval = setInterval(() => {
             handleNext();
@@ -163,11 +203,14 @@ export default function Testimonials() {
                 </div>
 
                 {/* Right Side Slider - Lower Z-Index, moves behind Left Card */}
-                <div className={styles.sliderContainer}>
+                <div
+                    className={styles.sliderContainer}
+                    style={{ width: containerMaxWidth, maxWidth: '100%' }} // Use width to force size, maxWidth for safety
+                >
                     <div
                         className={styles.sliderTrack}
                         style={{
-                            transform: `translateX(calc(-${activeIndex * 352}px))`,
+                            transform: `translateX(calc(-${activeIndex * cardWidth}px))`,
                             transition: isResetting ? 'none' : 'transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1)'
                         }}
                     >