Loyaly/lytsup-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update layout, styling, story sections, footer, and add Header and ScrollProgress components

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-16 17:35:14 +05:30
parent 09bbd9a23d
commit fbf6ee89b9
10 changed files with 807 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/story/ui.tsx
View File

@@ -7,20 +7,23 @@ import { C } from "./palette";
export { C };
const viewport = { once: true, amount: 0.25 } as const;
const viewport = { once: true, amount: 0.2 } as const;
/* Shared smooth easing — a soft, premium ease-out curve reused across reveals. */
const smoothEase = [0.22, 1, 0.36, 1] as const;
/* stagger container variants */
export const stagger: Variants = {
hidden: {},
show: { transition: { staggerChildren: 0.09, delayChildren: 0.05 } },
show: { transition: { staggerChildren: 0.11, delayChildren: 0.06 } },
};
export const riseItem: Variants = {
hidden: { opacity: 0, y: 30, scale: 0.96 },
hidden: { opacity: 0, y: 34, scale: 0.96 },
show: {
opacity: 1,
y: 0,
scale: 1,
transition: { type: "spring", stiffness: 130, damping: 16 },
transition: { duration: 0.7, ease: smoothEase },
},
};
@@ -44,7 +47,7 @@ export function Section({ id, children, variant = "deep", className = "" }: Sect
return (
<section
id={id}
className={`relative flex min-h-screen w-full flex-col justify-center overflow-hidden px-6 py-20 sm:px-10 lg:px-20 ${bg} ${className}`}
className={`relative m-5 flex min-h-[calc(100vh-40px)] flex-col justify-center overflow-hidden rounded-[20px] px-6 py-20 sm:px-10 lg:px-20 ${bg} ${className}`}
>
<div className="mx-auto w-full max-w-6xl">{children}</div>
</section>
@@ -69,7 +72,7 @@ export function Reveal({
initial={{ opacity: 0, y }}
whileInView={{ opacity: 1, y: 0 }}
viewport={viewport}
transition={{ type: "spring", stiffness: 120, damping: 18, delay }}
transition={{ duration: 0.7, ease: smoothEase, delay }}
>
{children}
</motion.div>
@@ -109,12 +112,13 @@ export function Pill({
}) {
return (
<motion.span
className="nb-sm inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-extrabold uppercase tracking-wide sm:text-sm"
className="nb inline-flex items-center gap-2.5 rounded-full px-6 py-3 text-lg font-extrabold uppercase tracking-wide sm:px-8 sm:py-4 sm:text-2xl"
style={{ background: bg, color: text }}
initial={{ opacity: 0, scale: 0.8, y: 12 }}
whileInView={{ opacity: 1, scale: 1, y: 0 }}
viewport={viewport}
transition={{ type: "spring", stiffness: 320, damping: 15 }}
whileHover={{ rotate: -2, scale: 1.04 }}
>
{children}
</motion.span>
@@ -146,7 +150,7 @@ export function Card({
initial: { opacity: 0, y: 30, scale: 0.96 },
whileInView: { opacity: 1, y: 0, scale: 1 },
viewport,
transition: { type: "spring" as const, stiffness: 130, damping: 16, delay },
transition: { duration: 0.7, ease: smoothEase, delay },
};
return (
<motion.div
@@ -206,7 +210,7 @@ export function Heading({
initial={{ opacity: 0, y: 28 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={viewport}
transition={{ type: "spring", stiffness: 120, damping: 18 }}
transition={{ duration: 0.75, ease: smoothEase }}
>
{children}
</motion.h2>