Update src/app/contact/page.tsx

Merge version_5 into main

src/app/contact/page.tsx

@@ -2,11 +2,21 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import ContactText from '@/components/sections/contact/ContactText';
+import Input from '@/components/form/Input';
+import Textarea from '@/components/form/Textarea';
+import ButtonElasticEffect from '@/components/button/ButtonElasticEffect/ButtonElasticEffect';
+import { Phone, Mail } from "lucide-react";
 
-export default function LandingPage() {
+export const metadata = {
+  title: "Contact Property Whale",  description: "Contact Property Whale to sell your house fast for cash. Get a no-obligation offer or ask questions about our quick home selling process."
+};
+
+export default function ContactUsPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -35,13 +45,136 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="contact-section" data-section="contact-section">
-            <ContactText
-            useInvertedBackground={false}
+        <div id="intro-contact" data-section="intro-contact">
+          <HeroBillboardGallery
             background={{ variant: "plain" }}
-            text="Contact Logen directly at 715-409-1863 or email us at ThePropertyWhale@gmail.com for more information."
+            title="Contact Property Whale"
+            description="If you're thinking about selling your house and want a fast, straightforward solution, we're here to help. Contact us today to receive a no-obligation cash offer or ask any questions about the process."
+            mediaItems={[]} 
+            mediaAnimation="none"
+          />
+        </div>
+
+        <div id="contact-details-and-form" data-section="contact-details-and-form" className="py-20 md:py-32 bg-background-accent">
+          <div className="container max-w-screen-md mx-auto grid grid-cols-1 md:grid-cols-2 gap-12">
+            {/* Contact Information */}
+            <div className="flex flex-col gap-4 text-center md:text-left">
+              <h2 className="text-3xl font-semibold text-foreground">Reach Out To Us</h2>
+              <p className="text-lg text-foreground/80">
+                Our team is ready to assist you with any questions about selling your property.
+              </p>
+              <div className="mt-6 flex flex-col gap-2">
+                <p className="flex items-center justify-center md:justify-start gap-2 text-foreground text-lg font-medium">
+                  <span className="font-semibold">Contact:</span> Logen
+                </p>
+                <p className="flex items-center justify-center md:justify-start gap-2 text-foreground text-lg font-medium">
+                  <Phone className="w-5 h-5 text-primary-cta" />
+                  <a href="tel:7154091863" className="text-primary-cta hover:underline">715-409-1863</a>
+                </p>
+                <p className="flex items-center justify-center md:justify-start gap-2 text-foreground text-lg font-medium">
+                  <Mail className="w-5 h-5 text-primary-cta" />
+                  <a href="mailto:ThePropertyWhale@gmail.com" className="text-primary-cta hover:underline">ThePropertyWhale@gmail.com</a>
+                </p>
+              </div>
+            </div>
+
+            {/* Contact Form */}
+            <div className="p-8 bg-card rounded-lg shadow-lg">
+              <h3 className="text-2xl font-semibold text-foreground mb-6 text-center">Get Your No-Obligation Cash Offer</h3>
+              <form className="grid grid-cols-1 gap-y-6">
+                <Input type="text" placeholder="Full Name" onChange={() => {}} value="" required ariaLabel="Full Name" />
+                <Input type="tel" placeholder="Phone Number" onChange={() => {}} value="" required ariaLabel="Phone Number" />
+                <Input type="email" placeholder="Email Address" onChange={() => {}} value="" required ariaLabel="Email Address" />
+                <Textarea placeholder="Property Address" onChange={() => {}} value="" rows={3} required ariaLabel="Property Address" />
+
+                <div>
+                  <label htmlFor="property-condition" className="block text-sm font-medium text-foreground mb-1">
+                    Property Condition
+                  </label>
+                  <select
+                    id="property-condition"
+                    name="property-condition"
+                    className="block w-full rounded-md border-0 py-2.5 text-foreground shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-background"
+                    defaultValue=""
+                  >
+                    <option value="" disabled>Select Condition</option>
+                    <option value="excellent">Excellent</option>
+                    <option value="good">Good</option>
+                    <option value="needs-repairs">Needs Repairs</option>
+                    <option value="major-repairs">Major Repairs</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="timeline-to-sell" className="block text-sm font-medium text-foreground mb-1">
+                    Timeline to Sell
+                  </label>
+                  <select
+                    id="timeline-to-sell"
+                    name="timeline-to-sell"
+                    className="block w-full rounded-md border-0 py-2.5 text-foreground shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-cta sm:text-sm sm:leading-6 bg-background"
+                    defaultValue=""
+                  >
+                    <option value="" disabled>Select Timeline</option>
+                    <option value="asap">ASAP</option>
+                    <option value="30-days">30 Days</option>
+                    <option value="60-days">60 Days</option>
+                    <option value="exploring">Just Exploring Options</option>
+                  </select>
+                </div>
+
+                <Textarea placeholder="Message (optional)" onChange={() => {}} value="" rows={4} ariaLabel="Message" />
+
+                <div className="flex justify-center mt-4">
+                  <ButtonElasticEffect text="Request My Cash Offer" type="submit" className="w-full" />
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div id="service-assurance" data-section="service-assurance">
+          <FeatureCardOne
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width" 
+            useInvertedBackground={false}
+            title="Our Service Assurance: Selling Made Simple"
+            description="We're committed to a transparent, fair, and hassle-free process. Your peace of mind is our priority."
+            features={[
+              {
+                title: "We buy houses in any condition",                description: "Sell your property exactly as-is. We handle all types of properties, from perfect to distressed, without you needing to do any repairs.",                videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4?_wi=1", // Using placeholder
+                videoAriaLabel: "A short video clip illustrating the feature"
+              },
+              {
+                title: "No realtor commissions",                description: "Forget about hefty agent fees. When you sell to us, you avoid all commissions, maximizing the cash you receive.",                videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4?_wi=2", // Using placeholder
+                videoAriaLabel: "A short video clip illustrating the feature"
+              },
+              {
+                title: "No repairs required",                description: "Leave the hammers and paint brushes behind. We take on all necessary repairs and renovations after purchase, saving you time and money.",                videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4?_wi=3", // Using placeholder
+                videoAriaLabel: "A short video clip illustrating the feature"
+              },
+              {
+                title: "Close on your timeline",                description: "Whether you need to sell in a week or prefer a later date, we work around your schedule to ensure a convenient closing.",                videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4?_wi=4", // Using placeholder
+                videoAriaLabel: "A short video clip illustrating the feature"
+              },
+              {
+                title: "Simple and transparent process",                description: "Our entire home buying process is straightforward, easy to understand, and free from hidden clauses or surprises.",                videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4?_wi=5", // Using placeholder
+                videoAriaLabel: "A short video clip illustrating the feature"
+              }
+            ]}
+          />
+        </div>
+
+        <div id="final-cta" data-section="final-cta">
+          <ContactText
+            useInvertedBackground={false}
+            background={{ variant: "radial-gradient" }}
+            text="Get Your No-Obligation Cash Offer Today"
             buttons={[
-              { text: "Send Message", href: "/contact" }
+              {
+                text: "Call 715-409-1863",                href: "tel:7154091863"
+              }
             ]}
           />
         </div>
@@ -71,4 +204,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}