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

website landing page

Browse Source
This commit is contained in:
Marc Mintel
2025-12-02 19:44:18 +01:00
parent fd3b4171aa
commit 895318ac40
33 changed files with 2226 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,16 +44,16 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
<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
onClick={() => setIsOpen(!isOpen)}
className="w-full p-6 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-blue rounded-lg"
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]"
>
<div className="flex items-center justify-between gap-4">
<h3 className="text-lg font-semibold text-white group-hover:text-primary-blue transition-colors duration-150">
<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">
{faq.question}
</h3>
<motion.svg
animate={{ rotate: isOpen ? 180 : 0 }}
transition={{ duration: 0.15, ease: 'easeInOut' }}
className="w-5 h-5 text-neon-aqua flex-shrink-0"
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"
@@ -74,8 +74,8 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
}}
className="overflow-hidden"
>
<div className="px-6 pb-6">
<p className="text-base text-gray-300 font-light">
<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">
{faq.answer}
</p>
</div>
@@ -87,15 +87,27 @@ function FAQItem({ faq, index }: { faq: typeof faqs[0]; index: number }) {
export default function FAQ() {
return (
<section className="py-24 bg-deep-graphite">
<div className="max-w-3xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-semibold text-white mb-3">
<section className="relative py-3 md:py-12 lg:py-16 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%)'
}}
/>
{/* 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" />
<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">
Frequently Asked Questions
</h2>
<div className="w-32 h-1 bg-gradient-to-r from-primary-blue to-neon-aqua mx-auto rounded-full" />
<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-4">
<div className="space-y-1.5 md:space-y-2">
{faqs.map((faq, index) => (
<FAQItem key={faq.question} faq={faq} index={index} />
))}