Refactor website to use shadcn components

frontend/components/Contact/Contact.tsx

@@ -1,31 +1,32 @@
 'use client';
 
-import React from "react";
-import {motion} from "framer-motion";
-import {useThemeColors} from "@/utils/useThemeColors";
-import ContactHero from "@/components/Contact/Section/ContactHero";
-import ContactFormSection from "@/components/Contact/Section/ContactFormSection";
-import Section from "@/components/Section";
-
-const Contact = () => {
-    const colors = useThemeColors();
+import {motion} from 'framer-motion'
+import ContactFormSection from '@/components/Contact/Section/ContactFormSection'
+import SmallHero from '@/components/Helper/SmallHero'
 
+export default function Contact() {
     return (
-        <motion.div
-            initial={{opacity: 0, y: 20}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.7, ease: "easeOut"}}
-            className="overflow-hidden"
-        >
-            <Section style={{backgroundColor: colors.primaryBg}} shadow>
-                <ContactHero/>
-            </Section>
+        <>
+            <SmallHero
+                title="Kontakt"
+                subtitle="Du hast Fragen oder möchtest ein Projekt besprechen? Schreib uns!"
+                backgroundImage="/images/contact.png"
+                blurBackground
+            />
 
-            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
-                <ContactFormSection/>
-            </Section>
-        </motion.div>
-    );
-};
-
-export default Contact;
+            <section className="bg-background text-foreground">
+                <div className="px-4 sm:px-6 lg:px-8">
+                    <div className="max-w-6xl mx-auto">
+                        <motion.div
+                            initial={{opacity: 0, y: 20}}
+                            animate={{opacity: 1, y: 0}}
+                            transition={{duration: 0.6}}
+                        >
+                            <ContactFormSection/>
+                        </motion.div>
+                    </div>
+                </div>
+            </section>
+        </>
+    )
+}