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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-15 17:12:24 +01:00
parent c3b308e960
commit f035cfe7ce
468 changed files with 24378 additions and 17324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/website/components/landing/FAQ.tsx
View File

@@ -1,7 +1,12 @@
'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { motion } from 'framer-motion';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { ChevronDown } from 'lucide-react';
const faqs = [
{
@@ -34,35 +39,43 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
const [isOpen, setIsOpen] = useState(false);
return (
<motion.div
<Box
as={motion.div}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.1 }}
className="group"
group
>
<div className="rounded-lg bg-iron-gray border border-charcoal-outline transition-all duration-150 hover:-translate-y-1 hover:shadow-lg hover:border-primary-blue/50">
<button
<Box rounded="lg" bg="bg-iron-gray" border borderColor="border-charcoal-outline" transition hoverBorderColor="border-primary-blue/50" transform={isOpen ? '' : 'translateY(0)'} hoverScale={!isOpen}>
<Box
as="button"
onClick={() => setIsOpen(!isOpen)}
className="w-full p-2 md:p-3 lg:p-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-blue rounded-lg min-h-[44px]"
fullWidth
p={{ base: 2, md: 3, lg: 4 }}
textAlign="left"
rounded="lg"
minHeight="44px"
>
<div className="flex items-center justify-between gap-1.5 md:gap-2">
<h3 className="text-xs md:text-sm font-semibold text-white group-hover:text-primary-blue transition-colors duration-150">
<Box display="flex" alignItems="center" justifyContent="between" gap={{ base: 1.5, md: 2 }}>
<Heading level={3} fontSize={{ base: 'xs', md: 'sm' }} weight="semibold" color="text-white" groupHoverColor="primary-blue" transition>
{faq.question}
</h3>
<motion.svg
</Heading>
<Box
as={motion.div}
animate={{ rotate: isOpen ? 180 : 0 }}
transition={{ duration: 0.15, ease: 'easeInOut' }}
className="w-3.5 h-3.5 md:w-4 md:h-4 text-neon-aqua flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
w={{ base: "3.5", md: "4" }}
h={{ base: "3.5", md: "4" }}
color="text-neon-aqua"
flexShrink={0}
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</motion.svg>
</div>
</button>
<motion.div
<Icon icon={ChevronDown} size="full" />
</Box>
</Box>
</Box>
<Box
as={motion.div}
initial={false}
animate={{
height: isOpen ? 'auto' : 0,
@@ -72,47 +85,48 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
height: { duration: 0.3, ease: [0.34, 1.56, 0.64, 1] },
opacity: { duration: 0.2, ease: 'easeInOut' }
}}
className="overflow-hidden"
overflow="hidden"
>
<div className="px-2 pb-2 pt-1 md:px-3 md:pb-3">
<p className="text-[10px] md:text-xs text-gray-300 font-light leading-relaxed">
<Box px={{ base: 2, md: 3 }} pb={{ base: 2, md: 3 }} pt={1}>
<Text size={{ base: 'xs', md: 'xs' }} color="text-gray-300" weight="light" leading="relaxed">
{faq.answer}
</p>
</div>
</motion.div>
</div>
</motion.div>
</Text>
</Box>
</Box>
</Box>
</Box>
);
}
export default function FAQ() {
export function FAQ() {
return (
<section className="relative py-3 md:py-12 lg:py-16 bg-deep-graphite overflow-hidden">
<Box as="section" position="relative" py={{ base: 3, md: 12, lg: 16 }} bg="bg-deep-graphite" overflow="hidden">
{/* Background image with mask */}
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: 'url(/images/porsche.jpeg)',
maskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)',
WebkitMaskImage: 'radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)'
}}
<Box
position="absolute"
inset="0"
bg="url(/images/porsche.jpeg)"
backgroundSize="cover"
backgroundPosition="center"
maskImage="radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)"
webkitMaskImage="radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.1) 40%, transparent 70%)"
/>
{/* Racing red accent */}
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-red-500/30 to-transparent" />
<Box position="absolute" top="0" left="0" right="0" h="px" bg="linear-gradient(to right, transparent, rgba(239, 68, 68, 0.3), transparent)" />
<div className="max-w-3xl mx-auto px-4 md:px-6 relative z-10">
<div className="text-center mb-4 md:mb-8">
<h2 className="text-base md:text-xl lg:text-2xl font-semibold text-white mb-1">
<Box maxWidth="3xl" mx="auto" px={{ base: 4, md: 6 }} position="relative" zIndex={10}>
<Box textAlign="center" mb={{ base: 4, md: 8 }}>
<Heading level={2} fontSize={{ base: 'base', md: 'xl', lg: '2xl' }} weight="semibold" color="text-white" mb={1}>
Frequently Asked Questions
</h2>
<div className="w-24 md:w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto rounded-full" />
</div>
<div className="space-y-1.5 md:space-y-2">
</Heading>
<Box mx="auto" rounded="full" w={{ base: "24", md: "32" }} h="1" bg="linear-gradient(to right, var(--primary-blue), var(--neon-aqua))" />
</Box>
<Box display="flex" flexDirection="column" gap={{ base: 1.5, md: 2 }}>
{faqs.map((faq, index) => (
<FAQItem key={faq.question} faq={faq} index={index} />
))}
</div>
</div>
</section>
</Box>
</Box>
</Box>
);
}