You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
5.3 KiB
120 lines
5.3 KiB
import Image from "next/image";
|
|
|
|
interface FaqItem {
|
|
id: string;
|
|
question: string;
|
|
}
|
|
|
|
const FAQ_ITEMS: FaqItem[] = [
|
|
{
|
|
id: "4193:10416",
|
|
question: "We’ve been using Jira / ClickUp for years. How difficult is data migration?",
|
|
},
|
|
{
|
|
id: "4193:10431",
|
|
question: "Won’t employees feel uncomfortable or monitored with time tracking?",
|
|
},
|
|
{
|
|
id: "4193:10447",
|
|
question: "Transitioning from Basecamp to Monday.com requires careful planning to avoid data loss.",
|
|
},
|
|
{
|
|
id: "4193:10462",
|
|
question: "Is the subscription cost justified for mid-sized and large teams?",
|
|
},
|
|
{
|
|
id: "4193:10478",
|
|
question: "Transitioning from Basecamp to Monday.com requires careful planning to avoid data loss.",
|
|
},
|
|
{
|
|
id: "4193:10493",
|
|
question: "Is the subscription cost justified for mid-sized and large teams?",
|
|
},
|
|
];
|
|
|
|
export function FaqSection() {
|
|
return (
|
|
<section
|
|
id="faq-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[60px] md:mt-[100px] mb-[120px]"
|
|
>
|
|
{/* Root Container: FAQ (Type: FRAME, id: 4193:10413, width: 1010, height: 534) */}
|
|
<div className="relative w-full max-w-[1010px] flex flex-col items-center">
|
|
|
|
{/* Header Block: Text (Type: FRAME, id: 4193:10508, width: 1010, height: 132, x: 0, y: 0) */}
|
|
<div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
|
|
|
|
{/* Background Glow Aura: Back (Clipped from half of icon to top) */}
|
|
<div className="absolute top-[20px] left-1/2 -translate-x-1/2 w-[300px] h-[200px] pointer-events-none -z-10 overflow-hidden">
|
|
<div className="absolute -top-[70px] left-1/2 -translate-x-1/2 w-[130px] h-[130px]">
|
|
<div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[100px] opacity-70" />
|
|
<div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[50px] opacity-80" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badge: 3 (Type: FRAME, id: 4193:10514, width: 40, height: 40, x: 485, y: 0, cornerRadius: 50) */}
|
|
<div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/faq_header_badge.svg"
|
|
alt=""
|
|
width={100}
|
|
height={100}
|
|
unoptimized
|
|
className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Header Text Container: Frame 2095586188 (Type: FRAME, id: 4193:10518, width: 1010, height: 68, itemSpacing: 12) */}
|
|
<div className="w-full flex flex-col items-center gap-[12px]">
|
|
{/* Title (Type: TEXT, id: 4193:10519, 32px, Inter Medium, #ffffff) */}
|
|
<h2 className="text-white text-[28px] sm:text-[32px] leading-[34px] sm:leading-[39px] font-medium tracking-tight text-center max-w-[1010px]">
|
|
Addressing Your Concerns
|
|
</h2>
|
|
|
|
{/* Subtitle (Type: TEXT, id: 4193:10520, 14px, Inter Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[1010px]">
|
|
We answer the most common questions about switching to TeamBy so you can choose with confidence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Cards Grid: Frame 2095586174 (Type: FRAME, id: 4193:10414, width: 1010, height: 322, x: 0, y: 212, itemSpacing: 32) */}
|
|
<div className="w-full grid grid-cols-1 md:grid-cols-2 gap-[24px] md:gap-[32px] mt-[48px] md:mt-[80px] z-20">
|
|
{FAQ_ITEMS.map((item, index) => (
|
|
<div
|
|
key={`${item.id}-${index}`}
|
|
id={`faq-card-${index + 1}`}
|
|
className="relative w-full md:max-w-[489px] min-h-[86px] rounded-[20px] bg-[#080f1a]/50 border border-white/10 backdrop-blur-md px-[24px] py-[24px] flex items-center justify-between gap-[16px] overflow-hidden group transition-all duration-300 hover:border-white/20"
|
|
>
|
|
{/* Subtle Card Background Glow */}
|
|
<div
|
|
className="absolute -top-[20px] -left-[20px] w-[180px] h-[180px] pointer-events-none -z-10 rounded-full bg-[radial-gradient(circle_at_top_left,rgba(0,41,178,0.25)_0%,transparent_70%)] opacity-80"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Question Title (Type: TEXT, 16px, Inter Medium, gradient #ffffff -> #a2beff) */}
|
|
<span className="text-white text-[15px] sm:text-[16px] leading-[20px] sm:leading-[22px] font-medium text-left select-none drop-shadow-[0_0_10px_rgba(75,128,255,0.25)]">
|
|
{item.question}
|
|
</span>
|
|
|
|
{/* Plus Icon: plus-sign-circle (Type: INSTANCE, id: 4193:10419, width: 24, height: 24) */}
|
|
<div className="w-[24px] h-[24px] flex-shrink-0 flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/faq_plus_icon.svg"
|
|
alt=""
|
|
width={24}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[24px] h-[24px] pointer-events-none select-none flex-shrink-0 transition-transform duration-200 group-hover:scale-110"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export const FAQSection = FaqSection;
|