Add src/app/call-us/page.tsx

src/app/call-us/page.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import { Phone, Mail, MapPin, Clock } from "lucide-react";
+
+export default function CallUsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="large"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Services", id: "services" },
+            { name: "About", id: "about" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "Contact", id: "contact" },
+            { name: "Free Quote", id: "/quote" },
+            { name: "Call Us", id: "/call-us" },
+          ]}
+          brandName="Go To Gophers"
+          bottomLeftText="Ready to transform your landscape"
+          bottomRightText="hello@gototophers.com"
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-20 px-4">
+        <div className="max-w-4xl mx-auto">
+          {/* Header */}
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-4">Get in Touch</h1>
+            <p className="text-xl text-gray-600">We're here to help! Reach out to us today for your landscaping needs.</p>
+          </div>
+
+          {/* Contact Information Cards */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+            {/* Phone */}
+            <div className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
+              <div className="flex items-center mb-4">
+                <Phone className="w-8 h-8 text-red-500 mr-3" />
+                <h2 className="text-2xl font-bold text-gray-900">Call Us</h2>
+              </div>
+              <p className="text-gray-600 mb-4">Speak directly with our team about your project.</p>
+              <a
+                href="tel:6125321875"
+                className="inline-block bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105"
+              >
+                (612) 532-1875
+              </a>
+              <p className="text-sm text-gray-500 mt-4">Available Monday - Friday, 8am - 6pm</p>
+            </div>
+
+            {/* Email */}
+            <div className="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
+              <div className="flex items-center mb-4">
+                <Mail className="w-8 h-8 text-red-500 mr-3" />
+                <h2 className="text-2xl font-bold text-gray-900">Email Us</h2>
+              </div>
+              <p className="text-gray-600 mb-4">Send us an email and we'll get back to you within 24 hours.</p>
+              <a
+                href="mailto:gotogopher@gmail.com"
+                className="inline-block bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 break-all"
+              >
+                gotogopher@gmail.com
+              </a>
+              <p className="text-sm text-gray-500 mt-4">Email response: 24 hours or less</p>
+            </div>
+          </div>
+
+          {/* Additional Information */}
+          <div className="bg-white rounded-xl shadow-lg p-8 md:p-12">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+              {/* Hours */}
+              <div>
+                <div className="flex items-center mb-4">
+                  <Clock className="w-6 h-6 text-red-500 mr-2" />
+                  <h3 className="text-xl font-bold text-gray-900">Business Hours</h3>
+                </div>
+                <ul className="space-y-2 text-gray-600">
+                  <li>Monday - Friday: 8:00 AM - 6:00 PM</li>
+                  <li>Saturday: 9:00 AM - 4:00 PM</li>
+                  <li>Sunday: Closed</li>
+                  <li className="pt-2 font-semibold text-gray-900">Emergency services available 24/7</li>
+                </ul>
+              </div>
+
+              {/* Why Call Us */}
+              <div>
+                <h3 className="text-xl font-bold text-gray-900 mb-4">Why Contact Us?</h3>
+                <ul className="space-y-2 text-gray-600">
+                  <li>✓ Free consultations and quotes</li>
+                  <li>✓ Experienced professionals</li>
+                  <li>✓ Fast response times</li>
+                  <li>✓ Satisfaction guaranteed</li>
+                  <li>✓ Custom solutions for your needs</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="mt-12 bg-gradient-to-r from-red-500 to-red-600 rounded-xl shadow-lg p-8 md:p-12 text-center text-white">
+            <h2 className="text-3xl font-bold mb-4">Ready to Transform Your Landscape?</h2>
+            <p className="text-lg mb-6 opacity-90">
+              Don't wait! Contact Go To Gophers today and let's discuss your landscaping vision.
+            </p>
+            <div className="flex flex-col md:flex-row gap-4 justify-center">
+              <a
+                href="tel:6125321875"
+                className="inline-block bg-white text-red-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition-colors"
+              >
+                Call Now
+              </a>
+              <a
+                href="mailto:gotogopher@gmail.com"
+                className="inline-block bg-white text-red-600 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition-colors"
+              >
+                Email Us
+              </a>
+              <a
+                href="/quote"
+                className="inline-block bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:text-red-600 transition-colors"
+              >
+                Get Free Quote
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Go To Gophers"
+          copyrightText="© 2025 Go To Gophers Landscaping. All rights reserved."
+          columns={[
+            {
+              title: "Services",              items: [
+                { label: "Landscape Design", href: "/#services" },
+                { label: "Lawn Maintenance", href: "/#services" },
+                { label: "Irrigation Systems", href: "/#services" },
+                { label: "Seasonal Care", href: "/#services" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/#about" },
+                { label: "Our Team", href: "/#about" },
+                { label: "Testimonials", href: "/#testimonials" },
+                { label: "Contact", href: "/#contact" },
+              ],
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Warranty", href: "#" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}