emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Emre
2025-10-11 00:33:25 +03:00
parent f450d61ccf
commit 60fa49c0ef
5 changed files with 90 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/pages/home/components/ScrollLockedSection.tsx
View File

@@ -1,4 +1,4 @@
import { motion, useScroll, useSpring, useTransform, useMotionValueEvent } from 'framer-motion';
import { motion, useScroll, useSpring, useMotionValueEvent } from 'framer-motion';
import { useRef, useState } from 'react';
type ScrollLockedSectionProps = {
@@ -8,6 +8,8 @@ type ScrollLockedSectionProps = {
description: string;
};
const TAB_ITEMS = ['Inbox 24', 'Meetings 8', 'Subscriptions 2', 'Newsletters 6', 'Shopping 8'];
export const ScrollLockedSection = ({
id,
eyebrow,
@@ -20,78 +22,73 @@ export const ScrollLockedSection = ({
offset: ['start start', 'end end'],
});
const smoothProgress = useSpring(scrollYProgress, { stiffness: 120, damping: 30, mass: 0.4 });
const cardFillWidth = useTransform(smoothProgress, [0, 1], ['12%', '100%']);
const cardFillOpacity = useTransform(smoothProgress, [0, 1], [0.25, 0.85]);
const barScale = useTransform(smoothProgress, [0, 1], [0.3, 1]);
const [percent, setPercent] = useState(0);
const [activeIndex, setActiveIndex] = useState(0);
useMotionValueEvent(smoothProgress, 'change', (value) => {
setPercent(Math.round(value * 100));
const percentage = Math.round(value * 100);
setPercent(percentage);
const nextIndex = Math.min(
TAB_ITEMS.length - 1,
Math.round(value * (TAB_ITEMS.length - 1)),
);
setActiveIndex(nextIndex);
});
return (
<section id={id} ref={sectionRef} className="relative h-[200vh] snap-start">
<section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-[rgb(172,173,175)]">
<div className="sticky top-0 flex h-screen flex-col">
<div className="mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 py-24 sm:px-10 lg:px-20">
<div className="space-y-4">
<span className="text-xs font-semibold uppercase tracking-[0.45em] text-ink/50">
<div className="space-y-6">
<span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-ink/45">
{eyebrow}
</span>
<div className="max-w-3xl space-y-4">
<h2 className="text-3xl font-medium leading-tight text-ink sm:text-4xl md:text-5xl">
<div className="max-w-3xl space-y-3">
<p className="text-3xl font-semibold leading-tight text-ink sm:text-[2.25rem] sm:leading-[1.2]">
{title}
</h2>
<p className="text-lg text-ink/75">{description}</p>
</p>
<p className="text-lg leading-relaxed text-ink/70">{description}</p>
</div>
</div>
<div className="mt-16 flex flex-1 flex-col justify-end">
<div className="space-y-8 rounded-3xl border border-ink/10 bg-white/60 p-8 shadow-[0_22px_48px_-32px_rgba(0,0,0,0.28)] backdrop-blur">
<div className="space-y-4">
<div className="flex items-center justify-between">
<p className="text-sm font-semibold uppercase tracking-[0.35em] text-ink/60">
Animation Placeholder
</p>
<motion.span
className="text-xs font-medium uppercase tracking-[0.35em] text-ink/50"
style={{ opacity: smoothProgress }}
>
{percent}%
</motion.span>
</div>
<div className="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
<motion.div
className="h-full origin-left rounded-full bg-ink"
style={{ scaleX: smoothProgress }}
/>
<div className="mt-20 flex flex-1 flex-col justify-start">
<div className="flex w-full flex-1 flex-col overflow-hidden rounded-[36px] border border-ink/10 bg-mist/70 shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] backdrop-blur">
<div className="flex items-center justify-between px-10 pt-10 text-[11px] font-semibold uppercase tracking-[0.35em] text-ink/45">
<span>Animation Placeholder</span>
<motion.span initial={false} animate={{ opacity: percent > 0 ? 1 : 0.3 }}>
{percent}%
</motion.span>
</div>
<div className="flex-1 px-10 pb-12">
<div className="flex h-full items-center justify-center rounded-[28px] border border-dashed border-ink/15 bg-white/50 text-xs font-semibold uppercase tracking-[0.4em] text-ink/25">
Content Canvas
</div>
</div>
<div className="relative h-56 w-full overflow-hidden rounded-2xl border border-ink/10 bg-mist/70">
<div className="absolute inset-0 grid grid-cols-12 gap-2 px-8 py-10">
{Array.from({ length: 12 }).map((_, index) => (
<motion.span
key={index}
className="flex h-full w-full origin-bottom items-end justify-center rounded-full bg-ink/15"
style={{ opacity: cardFillOpacity, scaleY: barScale }}
>
<span className="sr-only">Placeholder animation bar</span>
</motion.span>
<div className="border-t border-ink/10 bg-mist/80 px-8 py-6">
<div className="flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.3em] text-ink/35">
{TAB_ITEMS.map((tab, index) => (
<div key={tab} className="relative flex flex-1 justify-center">
<span className={index === activeIndex ? 'text-ink' : 'text-ink/40'}>{tab}</span>
<motion.span
initial={false}
animate={{ opacity: index === activeIndex ? 1 : 0 }}
transition={{ duration: 0.3, ease: 'easeOut' }}
className="absolute -bottom-3 left-1/2 h-1 w-16 -translate-x-1/2 rounded-full bg-ink"
/>
</div>
))}
</div>
<div className="absolute bottom-8 left-1/2 flex w-11/12 -translate-x-1/2 items-center gap-3">
<div className="h-1 w-full rounded-full bg-ink/10">
<motion.div
className="h-full rounded-full bg-ink"
style={{ width: cardFillWidth, opacity: cardFillOpacity }}
/>
</div>
<motion.span className="text-[10px] font-semibold uppercase tracking-[0.3em] text-ink/50">
{percent}%
</motion.span>
</div>
</div>
</div>
<div className="mt-10 flex justify-center">
<button
type="button"
className="flex items-center gap-2 rounded-full border border-ink/15 bg-white/70 px-6 py-2 text-[11px] font-semibold uppercase tracking-[0.35em] text-ink/50 shadow-[0_16px_32px_-28px_rgba(0,0,0,0.65)] transition-colors duration-300 hover:border-ink/30 hover:text-ink/70"
>
Directory
<span className="text-ink/30">Info</span>
</button>
</div>
</div>
</div>
</div>