Professionalize landing page design

src/components/faq7.tsx

@@ -41,35 +41,39 @@ interface Faq7Props {
 
 const Faq7 = ({ className }: Faq7Props) => {
   return (
-    <section className={cn("py-32", className)}>
-      <div className="container">
-        <div className="mx-auto grid max-w-7xl gap-10 md:grid-cols-2">
-          <div className="flex flex-col gap-6">
-            <h2 className="text-4xl font-semibold">
-              Fragen vor dem Start?
-              <br />
-              <span className="text-muted-foreground/70">
-                Hier finden Sie schnelle Antworten.
-              </span>
+    <section className={cn("px-4 py-20 sm:px-6 lg:px-8 lg:py-28", className)}>
+      <div className="mx-auto max-w-6xl">
+        <div className="grid gap-10 border-t border-border/80 pt-10 md:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)] lg:gap-16">
+          <div className="flex max-w-md flex-col gap-6">
+            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
+              Häufige Fragen
+            </p>
+            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+              Vor dem Start soll nichts schwammig bleiben.
             </h2>
-            <p className="text-lg text-muted-foreground md:text-xl">
-              Falls noch etwas offen ist, schreiben Sie mir gern ueber das
-              <a href="#" className="mx-1 whitespace-nowrap underline">
+            <p className="text-base leading-7 text-muted-foreground">
+              Falls noch etwas offen ist, schreiben Sie mir gern über das
+              <a
+                href="#kontakt"
+                className="mx-1 whitespace-nowrap underline underline-offset-4 transition-colors hover:text-foreground"
+              >
                 Kontaktformular
               </a>
               .
             </p>
-            <Button size="lg" variant="outline" className="w-fit">
-              Alle Fragen ansehen
+            <Button asChild size="lg" variant="outline" className="w-fit rounded-md">
+              <a href="#kontakt">Frage stellen</a>
             </Button>
           </div>
-          <Accordion type="multiple">
+          <Accordion type="multiple" className="rounded-lg border border-border bg-card px-4">
             {faqs.map((faq, index) => (
               <AccordionItem key={index} value={`item-${index}`}>
-                <AccordionTrigger className="text-left">
+                <AccordionTrigger className="text-left text-base font-semibold">
                   {faq.question}
                 </AccordionTrigger>
-                <AccordionContent>{faq.answer}</AccordionContent>
+                <AccordionContent className="text-muted-foreground">
+                  {faq.answer}
+                </AccordionContent>
               </AccordionItem>
             ))}
           </Accordion>