about effect

src/components/About.tsx

@@ -2,21 +2,10 @@
 
 import Link from "next/link";
 import { FloatingHouse, RotatingKey, GrowingBuilding } from "./PropertyAnimations";
-import { motion, useScroll, useTransform } from "framer-motion";
-import { useRef } from "react";
+import { motion } from "framer-motion";
+import styles from "@/styles/aboutSection.module.css";
 
 export default function About() {
-    const containerRef = useRef(null);
-    const { scrollYProgress } = useScroll({
-        target: containerRef,
-        offset: ["start end", "end start"]
-    });
-
-    // Parallax effect: Moving the image vertically as the user scrolls
-    // The image height is significantly larger than the container
-    // We move from 0% (top aligned) to a negative percentage to reveal the bottom
-    const y = useTransform(scrollYProgress, [0, 1], ["0%", "-30%"]);
-
     return (
         <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
 
@@ -63,33 +52,12 @@ export default function About() {
                         </Link>
                     </motion.div>
 
-                    {/* Parallax Image Container - Takes 7 columns */}
-                    <div
-                        ref={containerRef}
-                        className="
-                            h-[400px]
-                            lg:h-[600px] 
-                            md:h-[600px] 
-                            w-full 
-                            rounded-2xl 
-                            overflow-hidden 
-                            relative
-                            lg:col-span-7
-                        "
-                    >
-                        <motion.div
-                            style={{ y }}
-                            className="absolute top-0 left-0 w-full h-[140%] will-change-transform"
-                        >
-                            <img
-                                src="/assets/images/home/where.webp"
-                                alt="Where Sky Meets Soil"
-                                className="w-full h-full object-cover"
-                            />
-                        </motion.div>
+                    {/* Parallax Image Container - Takes 7 columns - MODIFIED for Fixed Effect */}
+                    <div className="lg:col-span-7 h-[400px] lg:h-[600px] w-full rounded-2xl overflow-hidden relative">
+                        <div className={styles.parallaxImage} style={{ borderRadius: '1rem', height: '100%', width: '100%' }}></div>
                     </div>
                 </div>
             </div>
-        </section>
+        </section >
     );
 }

src/styles/aboutSection.module.css

@@ -0,0 +1,143 @@
+.aboutSection {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
+    padding: 6rem 0;
+    background-color: #fff;
+}
+
+@media (min-width: 1024px) {
+    .aboutSection {
+        flex-direction: row;
+        padding: 0;
+        min-height: 80vh;
+        /* Adjust as needed */
+    }
+}
+
+/* Left Side - Content */
+.leftContent {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 3rem 2rem;
+    z-index: 10;
+    background-color: #fff;
+    /* Ensure bg is solid */
+}
+
+@media (min-width: 1024px) {
+    .leftContent {
+        padding: 4rem 5rem;
+        max-width: 50%;
+    }
+}
+
+.storyContent {
+    max-width: 600px;
+}
+
+.storyLabel {
+    display: block;
+    margin-bottom: 1.5rem;
+}
+
+.smallHeading3 {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    /* Left aligned for About */
+    gap: 10px;
+    font-size: 0.9rem;
+    letter-spacing: 0.1em;
+    color: #333;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+
+.storyTitle {
+    font-size: 2.5rem;
+    line-height: 1.2;
+    color: #1a1a1a;
+    font-weight: 700;
+    /* Bold/Serif depending on font availability */
+    margin-bottom: 2rem;
+    font-family: serif;
+    /* Fallback to serif */
+}
+
+@media (min-width: 768px) {
+    .storyTitle {
+        font-size: 3rem;
+    }
+}
+
+.storydesc {
+    display: inline-block;
+    padding: 12px 28px;
+    border: 1px solid #d3cab3;
+    color: #1a1a1a;
+    text-decoration: none;
+    font-size: 1rem;
+    letter-spacing: 0.05em;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    margin-top: 1.5rem;
+}
+
+.storydesc:hover {
+    background-color: #d3cab3;
+    color: #fff;
+}
+
+.description {
+    font-size: 1.1rem;
+    color: #555;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+}
+
+/* Right Side - Image */
+.rightImageContainer {
+    flex: 1;
+    position: relative;
+    min-height: 400px;
+    width: 100%;
+}
+
+@media (min-width: 1024px) {
+    .rightImageContainer {
+        min-height: auto;
+        /* Let it fill the flex container */
+        height: auto;
+    }
+}
+
+.parallaxImage {
+    width: 100%;
+    height: 100%;
+    /* Use the requested image */
+    background-image: url('/assets/images/home/where.webp');
+    background-attachment: fixed;
+    background-position: center right;
+    /* Align right for the text-left layout */
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    /* On larger screens, position center of image at 75% of viewport width (center of right half) */
+    @media (min-width: 1024px) {
+        background-size: 38vw auto;
+        background-position: 73% center;
+    }
+}
+
+/* Mobile fallback for fixed attachment */
+@media (max-width: 1024px) {
+    .parallaxImage {
+        background-attachment: scroll;
+        min-height: 400px;
+        background-position: center;
+    }
+}