From 00c1f082b62e1d8a7565e7eba3dfc798c656e06d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 17:20:08 +0000
Subject: [PATCH] Switch to version 14: modified src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 120 ++++++++++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 41 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index e1fad7c..cf545e4 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactForm from "@/components/form/ContactForm";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Mail, Twitter, Linkedin } from "lucide-react";
 
 export default function ContactPage() {
   return (
@@ -12,59 +11,98 @@ export default function ContactPage() {
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
-      contentWidth="medium"
-      sizing="medium"
-      background="none"
-      cardStyle="solid"
+      contentWidth="mediumLarge"
+      sizing="largeSmall"
+      background="aurora"
+      cardStyle="glass-elevated"
       primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="semibold"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+        <NavbarStyleApple
           navItems={[
             { name: "Home", id: "/" },
-            { name: "Features", id: "#features" },
-            { name: "About", id: "#about" },
+            { name: "About", id: "about" },
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "/contact" },
           ]}
           brandName="billiclipd"
-          bottomLeftText="Global Community"
-          bottomRightText="hello@example.com"
         />
       </div>
 
-      <div className="flex items-center justify-center min-h-screen py-20">
-        <div className="w-full">
-          <ContactForm
-            title="Get in Touch"
-            description="Ready to turn your content into viral clips? Reach out to our team and let's discuss your project."
-            tag="Contact Us"
-            tagIcon={Mail}
-            inputPlaceholder="your@email.com"
-            buttonText="Send Message"
-            termsText="We'll get back to you within 24 hours."
-            centered={true}
-            useInvertedBackground={false}
-            onSubmit={(email) => console.log("Email:", email)}
-          />
+      <div id="contact-hero" data-section="contact-hero" className="py-20">
+        <ContactText
+          text="Get in touch with our team. We'd love to hear about your content and discuss how we can help you go viral."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Schedule a Call", onClick: () => window.open("https://calendly.com/billiclipd", "_blank") },
+            { text: "Back to Home", href: "/" },
+          ]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form" className="py-20">
+        <div className="flex flex-col items-center justify-center">
+          <div className="w-full max-w-2xl rounded-theme bg-card p-10">
+            <h2 className="mb-2 text-4xl font-bold text-foreground">Let's Connect</h2>
+            <p className="mb-8 text-lg text-foreground/75">
+              Fill out the form below or reach out directly. We typically respond within 24 hours.
+            </p>
+            <form className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Full Name
+                </label>
+                <input
+                  type="text"
+                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="Your name"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="your@email.com"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Message
+                </label>
+                <textarea
+                  rows={5}
+                  className="w-full px-4 py-3 rounded-theme border border-accent/20 bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="Tell us about your project..."
+                />
+              </div>
+              <button
+                type="submit"
+                className="w-full px-6 py-3 rounded-theme bg-primary-cta text-primary-cta-text font-semibold hover:opacity-90 transition-opacity"
+              >
+                Send Message
+              </button>
+            </form>
+            <p className="mt-8 text-center text-sm text-foreground/75">
+              Or schedule a call directly: billing@billiclipd.com
+            </p>
+          </div>
         </div>
       </div>
 
-      <FooterCard
-        logoText="billiclipd"
-        copyrightText="© 2025 | billiclipd. All rights reserved."
-        socialLinks={[
-          {
-            icon: Twitter,
-            href: "https://twitter.com/billiclipd",            ariaLabel: "Twitter"
-          },
-          {
-            icon: Linkedin,
-            href: "https://linkedin.com/company/billiclipd",            ariaLabel: "LinkedIn"
-          },
-        ]}
-      />
+      <footer>
+        <FooterCard
+          logoText="billiclipd"
+          copyrightText="© 2025 | billiclipd. All rights reserved."
+        />
+      </footer>
     </ThemeProvider>
   );
 }