images updated

app/about/about.module.css

@@ -7,10 +7,12 @@
 
 /* Hero Section */
 .hero {
-    background: var(--background-secondary);
-    padding: 8rem 0;
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/images/about/aboutpage-banner.webp');
+    background-size: cover;
+    background-position: center;
+    padding: 8rem 0 8rem;
     position: relative;
-    border-bottom: 1px solid var(--border-color);
+    color: white;
 }
 
 .heroContent {
@@ -25,17 +27,17 @@
     margin-bottom: 1rem;
     background: var(--gradient-primary);
     -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    /* -webkit-text-fill-color: transparent; */
     background-clip: text;
 }
 
 .breadcrumb {
-    color: var(--text-secondary);
+    color: rgba(255, 255, 255, 0.8);
     font-size: 0.95rem;
 }
 
 .breadcrumb a {
-    color: var(--text-secondary);
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     transition: color 0.2s;
 }

app/about/page.tsx

@@ -33,7 +33,7 @@ export default function AboutPage() {
                             <div className={styles.storyFrame}></div>
                             <div className={styles.storyImageWrapper}>
                                 <Image
-                                    src="/images/about/team-meeting.png"
+                                    src="/images/about/our-story.webp"
                                     alt="Our Team Story"
                                     width={600}
                                     height={700}
@@ -162,21 +162,21 @@ export default function AboutPage() {
                             {/* Mockup Container */}
                             <div className={styles.mockupWrapper}>
                                 <Image
-                                    src="/images/about/app-dashboard.png"
+                                    src="/images/about/comprehensive.webp"
                                     alt="Feature Dashboard"
                                     width={600}
                                     height={400}
                                     className={styles.mockupImg}
                                 />
                                 {/* Floating Cards simulating the ref image */}
-                                <div className={`${styles.floatCard} ${styles.floatCard1}`}>
+                                {/* <div className={`${styles.floatCard} ${styles.floatCard1}`}>
                                     <span>Create Task</span>
                                     <small>17 August, 2023</small>
                                 </div>
                                 <div className={`${styles.floatCard} ${styles.floatCard2}`}>
                                     <span>Total Working Hours</span>
                                     <strong>44:32:00</strong>
-                                </div>
+                                </div> */}
                             </div>
                         </div>
                     </div>
@@ -205,7 +205,7 @@ export default function AboutPage() {
                         <div className={styles.readyImageWrapper}>
                             <div className={styles.phoneFrame}>
                                 <Image
-                                    src="/device-mockup.png"
+                                    src="/images/about/ready-img.webp"
                                     alt="SocialBuddy App"
                                     width={300}
                                     height={600}
@@ -213,11 +213,11 @@ export default function AboutPage() {
                                     objectFit="cover"
                                 />
                                 {/* Floating Overlay Card inside section */}
-                                <div className={styles.phoneOverlayCard}>
+                                {/* <div className={styles.phoneOverlayCard}>
                                     <span>Task List</span>
                                     <div className={styles.overlayItem}>✅ Social Audit</div>
                                     <div className={styles.overlayItem}>✅ Content Plan</div>
-                                </div>
+                                </div> */}
                             </div>
                         </div>
                     </div>

app/careers/careers.module.css

@@ -7,7 +7,7 @@
 
 /* Hero Section */
 .hero {
-    background: url('/hero-inner-bg.png') no-repeat center center;
+    background: url('/images/careers/careers-banner.webp') no-repeat center center;
     background-size: cover;
     padding: 8rem 0;
     /* Taller padding */
@@ -147,7 +147,7 @@
 
 /* 2. Stats Section (BG Image + Overlay) */
 .statsSection {
-    background: url('/hero-slide-1.png') no-repeat center center;
+    background: url('/images/careers/bg.webp') no-repeat center center;
     background-size: cover;
     background-attachment: fixed;
     /* Parallax effect */

app/careers/page.tsx

@@ -51,7 +51,7 @@ export default function CareersPage() {
                         <div className={styles.offerImageGrid}>
                             <div className={`${styles.gridImgWrapper} ${styles.img1}`}>
                                 <Image
-                                    src="/about-image.png"
+                                    src="/images/careers/left.webp"
                                     alt="Team Collaboration"
                                     width={400}
                                     height={500}
@@ -60,7 +60,7 @@ export default function CareersPage() {
                             </div>
                             <div className={`${styles.gridImgWrapper} ${styles.img2}`}>
                                 <Image
-                                    src="/images/about/workspace.png"
+                                    src="/images/careers/top.webp"
                                     alt="Our Workspace"
                                     width={300}
                                     height={200}
@@ -69,7 +69,7 @@ export default function CareersPage() {
                             </div>
                             <div className={`${styles.gridImgWrapper} ${styles.img3}`}>
                                 <Image
-                                    src="/images/about/team-meeting.png"
+                                    src="/images/careers/bottom.webp"
                                     alt="Meeting"
                                     width={300}
                                     height={200}
@@ -116,7 +116,7 @@ export default function CareersPage() {
                         {/* Left: Image */}
                         <div className={styles.hiringImageWrapper}>
                             <Image
-                                src="/about-image-2.png"
+                                src="/images/careers/hiring.webp"
                                 alt="Hiring Process"
                                 width={500}
                                 height={600}

app/contact/contact.module.css

@@ -6,7 +6,7 @@
 .hero {
     padding: 8rem 0;
     text-align: center;
-    background-image: url('/hero-inner-bg.png');
+    background-image: url('/images/contact/contact-banner.webp');
     /* Assuming this exists */
     background-size: cover;
     background-position: center;