Skip to content

fix: landing page wide-screen clipping, Y-axis alignment, and animation warnings #248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nodeanurag wants to merge 2 commits into from
+256 −228
Closed

fix: landing page wide-screen clipping, Y-axis alignment, and animation warnings #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da239db
fix: landing page wide-screen clipping, playground Y-axis alignment, …
nodeanurag Aug 29, 2026
c378401
fix: address CodeRabbit accessibility and Tailwind dark mode color co…
nodeanurag Aug 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions landing-page/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,21 +104,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
</head>
<body className={`${inter.variable} ${playfair.variable} font-sans`}>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
{/* Three-column layout */}
<div className="flex min-h-screen">
{/* Left fixed panel */}
<div className="hidden lg:block w-[120px] shrink-0">
<div className="fixed top-0 left-0 w-[120px] h-full bg-[#e8e8e8] dark:bg-[#111111] border-r border-neutral-200 dark:border-neutral-900 z-40" />
</div>

{/* Main content */}
<div className="flex-1 min-w-0">{children}</div>

{/* Right fixed panel */}
<div className="hidden lg:block w-[120px] shrink-0">
<div className="fixed top-0 right-0 w-[120px] h-full bg-[#e8e8e8] dark:bg-[#111111] border-l border-neutral-200 dark:border-neutral-900 z-40" />
</div>
</div>
<div className="min-h-screen">{children}</div>
</ThemeProvider>
</body>
Comment on lines -107 to 123

@amankv1234 amankv1234 Aug 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nodeanurag ,
Only this change is needed, but we don’t want to apply it right now. Maybe in the future, we can consider it.

</html>
Expand Down
103 changes: 61 additions & 42 deletions landing-page/src/components/EverywhereFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,61 +56,80 @@ export function EverywhereFeatures() {
HOW IT WORKS
</span>
<h2 className="text-4xl md:text-5xl font-serif font-bold tracking-tight text-balance">
Wherever content<br />gets <span className="underline decoration-[#FFCC00] decoration-4 underline-offset-8">shared.</span>
Wherever content
<br />
gets{" "}
<span className="underline decoration-[#FFCC00] decoration-4 underline-offset-8">
shared.
</span>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</h2>
</div>
</div>

<div className="flex gap-4 sm:gap-6 md:gap-8 overflow-x-auto pb-12 pt-4 snap-x hide-scrollbar">
{track.map((card, i) => (
<div
key={i}
onMouseEnter={() => setHoveredCard(i)}
onMouseLeave={() => setHoveredCard(null)}
className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square
<div className="flex gap-4 sm:gap-6 md:gap-8 overflow-x-auto pb-12 pt-4 snap-x hide-scrollbar">
{track.map((card, i) => (
<div
key={i}
onMouseEnter={() => setHoveredCard(i)}
onMouseLeave={() => setHoveredCard(null)}
className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square
hover:-translate-y-4 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)]
hover:rotate-[360deg] hover:scale-110
${hoveredCard === i ? 'z-10' : 'z-0'}
${hoveredCard === i ? "z-10" : "z-0"}
animate-float`}
style={{
transformStyle: "preserve-3d",
perspective: "1000px",
animation: hoveredCard === i ? "none" : `float 3s ease-in-out ${i * 0.2}s infinite`,
}}
>
{/* Glow effect */}
<div
className={`absolute inset-0 rounded-[32px] opacity-0 transition-opacity duration-500 ${hoveredCard === i ? "opacity-100" : ""}`}
style={{
transformStyle: 'preserve-3d',
perspective: '1000px',
animation: hoveredCard === i ? 'none' : 'float 3s ease-in-out infinite',
animationDelay: `${i * 0.2}s`,
background:
"radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%)",
filter: "blur(20px)",
}}
/>

{/* Shine effect */}
<div
className={`absolute inset-0 rounded-[32px] overflow-hidden opacity-0 transition-opacity duration-500 ${hoveredCard === i ? "opacity-100" : ""}`}
>
{/* Glow effect */}
<div className={`absolute inset-0 rounded-[32px] opacity-0 transition-opacity duration-500 ${hoveredCard === i ? 'opacity-100' : ''}`}
style={{
background: 'radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%)',
filter: 'blur(20px)',
}}
<div
className={`absolute top-0 left-0 w-full h-full bg-linear-to-r from-transparent via-white/20 to-transparent ${hoveredCard === i ? "animate-shine" : ""}`}
/>

{/* Shine effect */}
<div className={`absolute inset-0 rounded-[32px] overflow-hidden opacity-0 transition-opacity duration-500 ${hoveredCard === i ? 'opacity-100' : ''}`}>
<div className={`absolute top-0 left-0 w-full h-full bg-linear-to-r from-transparent via-white/20 to-transparent ${hoveredCard === i ? 'animate-shine' : ''}`} />
</div>

<span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
{card.num}
</span>

<div className="mt-auto pt-8 sm:pt-12">
<h3 className="text-lg sm:text-xl md:text-2xl font-bold mb-3 sm:mb-4 pr-4 transition-transform duration-300">{card.title}</h3>
<p className={`text-[12px] sm:text-[14px] md:text-[15px] opacity-90 leading-relaxed font-semibold mb-6 sm:mb-8 transition-transform duration-300`}>
{card.desc}
</p>
</div>

<div>
<Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer hover:scale-105 hover:shadow-lg transform focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
Learn more
</Link>
</div>
<span
className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? "scale-110 rotate-12" : ""}`}
>
{card.num}
</span>

<div className="mt-auto pt-8 sm:pt-12">
<h3 className="text-lg sm:text-xl md:text-2xl font-bold mb-3 sm:mb-4 pr-4 transition-transform duration-300">
{card.title}
</h3>
<p
className={`text-[12px] sm:text-[14px] md:text-[15px] opacity-90 leading-relaxed font-semibold mb-6 sm:mb-8 transition-transform duration-300`}
>
{card.desc}
</p>

<div>
<Link
href="/docs"
className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer hover:scale-105 hover:shadow-lg transform focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white"
>
Learn more
</Link>
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
);
}
}
119 changes: 71 additions & 48 deletions landing-page/src/components/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,31 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
className={`snap-center shrink-0 w-[280px] sm:w-[300px] md:w-[350px] lg:w-[400px] rounded-[32px] p-6 sm:p-8 md:p-10 relative flex flex-col transition-all duration-700 ease-in-out border-[3px] border-black dark:border-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] ${card.color} ${card.textColor} aspect-square cursor-pointer
hover:-translate-y-4 hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)]
hover:rotate-3
${rotatedCard === index ? 'rotate-[360deg] scale-110 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] dark:shadow-[16px_16px_0px_0px_rgba(255,255,255,1)]' : ''}`}
${rotatedCard === index ? "rotate-[360deg] scale-110 shadow-[16px_16px_0px_0px_rgba(0,0,0,1)] dark:shadow-[16px_16px_0px_0px_rgba(255,255,255,1)]" : ""}`}
style={{
transformStyle: 'preserve-3d',
perspective: '1000px',
transformStyle: "preserve-3d",
perspective: "1000px",
}}
>
<span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
<span
className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}
>
{card.num}
</span>

<div className="mt-auto pt-8 sm:pt-12">
<h3 className="text-lg sm:text-xl md:text-2xl font-bold mb-3 sm:mb-4 pr-4">{card.title}</h3>
<p className={`text-[12px] sm:text-[14px] md:text-[15px] opacity-90 leading-relaxed font-semibold mb-6 sm:mb-8`}>
<p
className={`text-[12px] sm:text-[14px] md:text-[15px] opacity-90 leading-relaxed font-semibold mb-6 sm:mb-8`}
>
{card.desc}
</p>

<div>
<Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
<Link
href="/docs"
className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white"
>
Learn more
</Link>
</div>
Expand All @@ -47,34 +54,35 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
export function Features() {
const [rotatedCard, setRotatedCard] = useState<number | null>(null);

const cards = [{
num: "01",
title: "Lightweight & Fast",
desc: "Under 10KB gzipped. Zero external dependencies. Won't slow down your website's load time or affect Core Web Vitals.",
color: "bg-[#FFCC00]",
textColor: "text-black",
},
{
num: "02",
title: "Fully Customizable",
desc: "Every button comes with a clean default design, but can be easily themed using CSS variables to match your brand.",
color: "bg-[#00C853]",
textColor: "text-black",
},
{
num: "03",
title: "Framework Agnostic",
desc: "Use it with Vanilla JS, React, Vue, Angular, or any modern framework. It just works.",
color: "bg-white dark:bg-neutral-900",
textColor: "text-black dark:text-white",
},
{
num: "04",
title: "Privacy Respected",
desc: "No tracking scripts. No analytics bloat. We don't collect any data about you or your users. Ever.",
color: "bg-[#00C853]",
textColor: "text-black",
},
const cards = [
{
num: "01",
title: "Lightweight & Fast",
desc: "Under 10KB gzipped. Zero external dependencies. Won't slow down your website's load time or affect Core Web Vitals.",
color: "bg-[#FFCC00]",
textColor: "text-black",
},
{
num: "02",
title: "Fully Customizable",
desc: "Every button comes with a clean default design, but can be easily themed using CSS variables to match your brand.",
color: "bg-[#00C853]",
textColor: "text-black",
},
{
num: "03",
title: "Framework Agnostic",
desc: "Use it with Vanilla JS, React, Vue, Angular, or any modern framework. It just works.",
color: "bg-white dark:bg-neutral-900",
textColor: "text-black dark:text-white",
},
{
num: "04",
title: "Privacy Respected",
desc: "No tracking scripts. No analytics bloat. We don't collect any data about you or your users. Ever.",
color: "bg-[#00C853]",
textColor: "text-black",
},
];

const timeoutRef = useRef<NodeJS.Timeout | null>(null);
Expand All @@ -101,29 +109,44 @@ export function Features() {
return (
<div className="py-24 bg-background border-t-2 border-black dark:border-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

<div className="mb-16">
<span className="text-xs font-bold tracking-widest text-[#FFCC00] uppercase mb-4 block">
Core Features
</span>
<h2 className="text-4xl md:text-5xl font-serif font-bold tracking-tight text-balance">
Everything you need.<br />Nothing you don&apos;t.
Everything you need.
<br />
Nothing you don&apos;t.
</h2>
</div>
</div>

<div className="overflow-hidden pb-12 pt-4 relative group flex">
<div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8">
{cards.map((card, i) => (
<FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
))}
</div>
<div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true">
{cards.map((card, i) => (
<FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
))}
</div>
<div className="overflow-hidden pb-12 pt-4 relative group flex">
<div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8">
{cards.map((card, i) => (
<FeatureCard
key={i}
card={card}
index={i}
rotatedCard={rotatedCard}
handleCardClick={handleCardClick}
/>
))}
</div>
<div
className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8"
aria-hidden="true"
>
{cards.map((card, i) => (
<FeatureCard
key={`dup-${i}`}
card={card}
index={i}
rotatedCard={rotatedCard}
handleCardClick={handleCardClick}
/>
))}
</div>

</div>
</div>
);
Expand Down
Loading
Loading