MetatroncubeSoftwareSolutions/sky-and-soil
3
0
Fork 0
forked from alaguraj/sky-and-soil
Code Pull Requests Activity

about section parllex effect updated

Browse Source
This commit is contained in:
akash 2025-12-10 14:20:01 +05:30
parent 92e2b8e210
commit 5bb4efd6b8
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/About.tsx
View File

@ -15,7 +15,7 @@ export default function About() {
// Parallax effect: Moving the image vertically as the user scrolls // Parallax effect: Moving the image vertically as the user scrolls
// The image height is significantly larger than the container // The image height is significantly larger than the container
// We move from 0% (top aligned) to a negative percentage to reveal the bottom // We move from 0% (top aligned) to a negative percentage to reveal the bottom
const y = useTransform(scrollYProgress, [0, 1], ["0%", "-50%"]); const y = useTransform(scrollYProgress, [0, 1], ["0%", "-30%"]);
return ( return (
<section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden"> <section id="about" className="py-24 bg-white dark:bg-black relative overflow-hidden">
@ -32,10 +32,10 @@ export default function About() {
</div> </div>
<div className="max-w-7xl mx-auto px-6 relative z-10"> <div className="max-w-7xl mx-auto px-6 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
{/* Text Content */} {/* Text Content - Takes 5 columns */}
<motion.div <motion.div
className="space-y-8 z-10" className="space-y-8 z-10 lg:col-span-5"
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }} viewport={{ once: true, margin: "-100px" }}
@ -48,9 +48,7 @@ export default function About() {
<div className="space-y-6 text-lg text-gray-600 dark:text-gray-400 leading-relaxed"> <div className="space-y-6 text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
<p> <p>
At Sky and Soil, we curate exceptional living spaces that harmonize with nat At Sky and Soil, we curate exceptional living spaces that harmonize with nature. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.
ure. As authorized sales partners for Godrej Properties, we bring you the finest homes in Bangalore's most sought-after locations.
</p> </p>
<p> <p>
Our mission is to connect you with homes that offer not just a roof over your head, but a lifestyle grounded in luxury and elevated by nature. From North Bengaluru to Sarjapur, discover a life of abundance. Our mission is to connect you with homes that offer not just a roof over your head, but a lifestyle grounded in luxury and elevated by nature. From North Bengaluru to Sarjapur, discover a life of abundance.
@ -65,21 +63,23 @@ export default function About() {
</Link> </Link>
</motion.div> </motion.div>
{/* Parallax Image Container */} {/* Parallax Image Container - Takes 7 columns */}
<div <div
ref={containerRef} ref={containerRef}
className=" className="
h-[400px] h-[400px]
lg:h-[600px]
md:h-[600px]
w-full w-full
mx-auto
rounded-2xl rounded-2xl
overflow-hidden overflow-hidden
relative relative
lg:col-span-7
" "
> >
<motion.div <motion.div
style={{ y }} style={{ y }}
className="absolute top-[-10%] left-0 w-full h-[160%] will-change-transform" className="absolute top-0 left-0 w-full h-[140%] will-change-transform"
> >
<img <img
src="/assets/images/home/where.webp" src="/assets/images/home/where.webp"