mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website poc

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 01:31:31 +01:00
parent 747a77cb39
commit fd3b4171aa
15 changed files with 939 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
apps/website/components/landing/AlternatingSection.tsx Normal file
View File

@@ -0,0 +1,88 @@
import { ReactNode } from 'react';
import Container from '@/components/ui/Container';
interface AlternatingSectionProps {
heading: string;
description: string | ReactNode;
mockup: ReactNode;
layout: 'text-left' | 'text-right';
backgroundImage?: string;
}
export default function AlternatingSection({
heading,
description,
mockup,
layout,
backgroundImage
}: AlternatingSectionProps) {
return (
<section className="relative overflow-hidden bg-deep-graphite px-6 py-24 sm:py-32 lg:px-8">
{backgroundImage && (
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: `url(${backgroundImage})`,
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)',
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.06) 40%, transparent 70%)'
}}
/>
)}
<Container size="lg" className="relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{layout === 'text-left' ? (
<>
{/* Text Content - Left */}
<div className="space-y-6">
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
{heading}
</h2>
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
{description}
</div>
</div>
{/* Mockup - Right (fade right) */}
<div className="relative">
<div
className="w-full h-[400px] lg:h-[500px]"
style={{
maskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to right, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
}}
>
{mockup}
</div>
</div>
</>
) : (
<>
{/* Mockup - Left (fade left) */}
<div className="relative order-2 lg:order-1">
<div
className="w-full h-[400px] lg:h-[500px]"
style={{
maskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to left, white 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0.4) 85%, transparent 100%)'
}}
>
{mockup}
</div>
</div>
{/* Text Content - Right */}
<div className="space-y-6 order-1 lg:order-2">
<h2 className="text-3xl sm:text-4xl font-semibold text-white leading-tight">
{heading}
</h2>
<div className="text-lg text-slate-400 font-light leading-relaxed space-y-4">
{description}
</div>
</div>
</>
)}
</div>
</Container>
</section>
);
}