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

black theme complete

Browse Source
This commit is contained in:
Emre
2025-10-11 06:18:46 +03:00
parent 16c1a09bc4
commit 31fe89eabb
16 changed files with 276 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,14 @@
import { ReactNode, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
type ScrollLockedSectionProps = {
id: string;
eyebrow: string;
title: ReactNode;
description: string;
description: ReactNode;
showButton?: boolean;
buttonText?: string;
buttonLink?: string;
};
export const ScrollLockedSection = ({
@@ -12,7 +16,11 @@ export const ScrollLockedSection = ({
eyebrow,
title,
description,
showButton = true,
buttonText = 'Directory Info',
buttonLink,
}: ScrollLockedSectionProps) => {
const navigate = useNavigate();
const sectionRef = useRef<HTMLElement | null>(null);
return (
@@ -36,14 +44,28 @@ export const ScrollLockedSection = ({
<div className="flex flex-col items-center gap-6 py-10 sm:gap-8 sm:py-12 lg:gap-10">
<div className="mx-auto w-full border border-white/10 bg-black shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] aspect-[28/8]" />
{/* Button below animation card */}
<div className="flex justify-center">
<button
type="button"
className="rounded-full border border-brand-200 bg-white px-5 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
>
Directory Info
</button>
</div>
{showButton && buttonLink && (
<div className="flex justify-center">
{buttonLink.startsWith('http') ? (
<a
href={buttonLink}
target="_blank"
rel="noopener noreferrer"
className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
>
{buttonText}
</a>
) : (
<button
type="button"
onClick={() => navigate(buttonLink)}
className="rounded-full bg-white px-5 py-2 text-sm font-bold text-black shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
>
{buttonText}
</button>
)}
</div>
)}
</div>
</div>
</div>