Add src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterCard from '@/components/sections/footer/FooterCard';
+import { Github, Twitter, Linkedin } from 'lucide-react';
+
+export default function Contact() {
+  const navItems = [{ name: 'Home', id: '/' }, { name: 'About', id: '/about' }, { name: 'Contact', id: '/contact' }];
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple navItems={navItems} brandName="Webild" />
+      </div>
+      <div id="contact" data-section="contact">
+        <ContactText text="Get in touch!" background={{ variant: "gradient-bars" }} useInvertedBackground={false} />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="Webild" socialLinks={[{ icon: Github, href: "#", ariaLabel: "Github" }, { icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Linkedin, href: "#", ariaLabel: "Linkedin" }]} />
+      </div>
+    </ThemeProvider>
+  );
+}