Update src/app/page.tsx

Merge version_10 into main

src/app/page.tsx

@@ -10,56 +10,9 @@ import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCa
 import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import ContactText from "@/components/sections/contact/ContactText";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Sparkles, Lightbulb, Zap, Award, Heart, Shield, Brain, Target, Palette, Code, Lock, CheckCircle, Star, Briefcase, Users, TrendingUp, Trophy, Linkedin, Twitter, Instagram, Github } from "lucide-react";
-import { useState } from "react";
+import { Lightbulb, Zap, Award, Star, Briefcase, Users, TrendingUp, Trophy, Linkedin, Twitter, Instagram, Github, Brain, Target, Palette, Heart, Shield, Code, Lock, CheckCircle, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
-  const [showFormModal, setShowFormModal] = useState(false);
-  const [formData, setFormData] = useState({
-    name: "",    email: "",    company: "",    message: ""
-  });
-  const [submitStatus, setSubmitStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
-
-  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleFormSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setSubmitStatus("loading");
-
-    try {
-      const response = await fetch("/api/submit-project", {
-        method: "POST",        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          ...formData,
-          source: "project-inquiry",          timestamp: new Date().toISOString()
-        })
-      });
-
-      if (response.ok) {
-        setSubmitStatus("success");
-        setFormData({ name: "", email: "", company: "", message: "" });
-        setTimeout(() => {
-          setShowFormModal(false);
-          setSubmitStatus("idle");
-        }, 2000);
-      } else {
-        const errorData = await response.json();
-        console.error("Form submission error:", errorData);
-        setSubmitStatus("error");
-      }
-    } catch (error) {
-      console.error("Form submission error:", error);
-      setSubmitStatus("error");
-    }
-  };
-
-  const handleStartProject = () => {
-    setShowFormModal(true);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="icon-arrow"
@@ -83,7 +36,7 @@ export default function LandingPage() {
             { name: "Contact", id: "contact" }
           ]}
           button={{
-            text: "Start Project",            onClick: handleStartProject
+            text: "Start Project", href: "https://calendly.com/jonathan123817"
           }}
           animateOnLoad={true}
         />
@@ -94,11 +47,11 @@ export default function LandingPage() {
           logoText="buildex "
           description="We're a forward-thinking creative web agency specializing in stunning design, powerful development, and strategic branding that drives measurable results for ambitious brands."
           buttons={[
-            { text: "Start Your Project", href: "https://whop.com/biz_bx17qIcoRtzUqB" },
+            { text: "Start Your Project", href: "https://calendly.com/jonathan123817" },
             { text: "View Our Work", href: "#work" }
           ]}
           buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/young-creative-people-working-together-with-laptop-group-cool-guys-working-new-project-while-spending-time-modern-office_574295-5685.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASLGYccFjXKpWVAwVmrXFmFW23/uploaded-1773113569569-r9z7t2y8.jpg"
           imageAlt="Creative agency dashboard showcasing modern design tools and portfolio"
           mediaAnimation="slide-up"
           frameStyle="card"
@@ -132,13 +85,13 @@ export default function LandingPage() {
           buttonAnimation="slide-up"
           features={[
             {
-              id: 1,              tag: "Design",              title: "Web Design",              subtitle: "Stunning Visual Experiences",              description: "We create beautiful, intuitive websites that captivate users and reflect your brand's unique personality. Every pixel is purposeful.",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg?_wi=1",              imageAlt: "Web design mockup showing responsive layouts and modern interface",              buttons: [{ text: "Explore Design Services", href: "#" }]
+              id: 1, tag: "Design", title: "Web Design", subtitle: "Stunning Visual Experiences", description: "We create beautiful, intuitive websites that captivate users and reflect your brand's unique personality. Every pixel is purposeful.", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg?_wi=1", imageAlt: "Web design mockup showing responsive layouts and modern interface", buttons: [{ text: "Explore Design Services", href: "#" }]
             },
             {
-              id: 2,              tag: "Development",              title: "Web Development",              subtitle: "Powerful Technology Solutions",              description: "Our expert developers build fast, scalable, and secure web applications using cutting-edge technology stacks and best practices.",              imageSrc: "http://img.b2bpic.net/free-photo/desk-with-multiple-computer-monitors-displaying-parsing-code-programming-language-compiling-empty-software-developing-agency-office-servers-cloud-computing-big-data-algorithms_482257-33541.jpg?_wi=1",              imageAlt: "Developer workspace showing modern coding environment and tools",              buttons: [{ text: "Explore Development Services", href: "#" }]
+              id: 2, tag: "Development", title: "Web Development", subtitle: "Powerful Technology Solutions", description: "Our expert developers build fast, scalable, and secure web applications using cutting-edge technology stacks and best practices.", imageSrc: "http://img.b2bpic.net/free-photo/desk-with-multiple-computer-monitors-displaying-parsing-code-programming-language-compiling-empty-software-developing-agency-office-servers-cloud-computing-big-data-algorithms_482257-33541.jpg?_wi=1", imageAlt: "Developer workspace showing modern coding environment and tools", buttons: [{ text: "Explore Development Services", href: "#" }]
             },
             {
-              id: 3,              tag: "Branding",              title: "Strategic Branding",              subtitle: "Identity That Resonates",              description: "We develop comprehensive brand strategies and identities that tell your story, build trust, and create lasting connections with your audience.",              imageSrc: "http://img.b2bpic.net/free-photo/colleagues-generating-ideas_53876-42869.jpg?_wi=1",              imageAlt: "Branding guide showing color palette, logo concepts, and identity guidelines",              buttons: [{ text: "Explore Branding Services", href: "#" }]
+              id: 3, tag: "Branding", title: "Strategic Branding", subtitle: "Identity That Resonates", description: "We develop comprehensive brand strategies and identities that tell your story, build trust, and create lasting connections with your audience.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-generating-ideas_53876-42869.jpg?_wi=1", imageAlt: "Branding guide showing color palette, logo concepts, and identity guidelines", buttons: [{ text: "Explore Branding Services", href: "#" }]
             }
           ]}
         />
@@ -199,17 +152,17 @@ export default function LandingPage() {
           animationType="blur-reveal"
           features={[
             {
-              id: "feature-1",              title: "Strategic Approach",              description: "Every project starts with deep research and strategic planning to ensure we deliver solutions that drive real business results.",              media: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg?_wi=2", imageAlt: "Strategic planning and research visualization" },
+              id: "", title: "Strategic Approach", description: "Every project starts with deep research and strategic planning to ensure we deliver solutions that drive real business results.", media: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg?_wi=2", imageAlt: "Strategic planning and research visualization" },
               items: [{ icon: Brain, text: "Data-driven insights" }, { icon: Target, text: "Focused objectives" }, { icon: Zap, text: "Strategic execution" }],
               reverse: false
             },
             {
-              id: "feature-2",              title: "Creative Excellence",              description: "Our designers and creatives push boundaries to create work that captivates, inspires, and differentiates your brand in the market.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/colleagues-generating-ideas_53876-42869.jpg?_wi=2", imageAlt: "Creative design process and artistic excellence" },
+              id: "", title: "Creative Excellence", description: "Our designers and creatives push boundaries to create work that captivates, inspires, and differentiates your brand in the market.", media: { imageSrc: "http://img.b2bpic.net/free-photo/colleagues-generating-ideas_53876-42869.jpg?_wi=2", imageAlt: "Creative design process and artistic excellence" },
               items: [{ icon: Palette, text: "Innovative design" }, { icon: Sparkles, text: "Brand storytelling" }, { icon: Heart, text: "Emotional connection" }],
               reverse: true
             },
             {
-              id: "feature-3",              title: "Technical Mastery",              description: "Our developers leverage cutting-edge technologies and best practices to build robust, scalable, and secure digital solutions.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/desk-with-multiple-computer-monitors-displaying-parsing-code-programming-language-compiling-empty-software-developing-agency-office-servers-cloud-computing-big-data-algorithms_482257-33541.jpg?_wi=2", imageAlt: "Advanced development and technology implementation" },
+              id: "", title: "Technical Mastery", description: "Our developers leverage cutting-edge technologies and best practices to build robust, scalable, and secure digital solutions.", media: { imageSrc: "http://img.b2bpic.net/free-photo/desk-with-multiple-computer-monitors-displaying-parsing-code-programming-language-compiling-empty-software-developing-agency-office-servers-cloud-computing-big-data-algorithms_482257-33541.jpg?_wi=2", imageAlt: "Advanced development and technology implementation" },
               items: [{ icon: Code, text: "Modern stack" }, { icon: Zap, text: "High performance" }, { icon: Lock, text: "Security first" }],
               reverse: false
             }
@@ -222,8 +175,7 @@ export default function LandingPage() {
           text="Ready to Transform Your Digital Future?"
           animationType="entrance-slide"
           buttons={[
-            { text: "Schedule a Consultation", onClick: handleStartProject },
-            { text: "Get a Free Quote", onClick: handleStartProject }
+            { text: "Schedule a Consultation", href: "https://calendly.com/jonathan123817" }
           ]}
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
@@ -242,54 +194,6 @@ export default function LandingPage() {
           ]}
         />
       </div>
-
-      {showFormModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
-            <button
-              onClick={() => setShowFormModal(false)}
-              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
-              aria-label="Close form"
-            >
-              ✕
-            </button>
-            <h2 className="text-2xl font-bold mb-2 text-foreground">Start Your Project</h2>
-            <p className="text-gray-600 mb-6">Tell us about your project and we'll be in touch soon.</p>
-            {submitStatus === "success" ? (
-              <div className="text-center py-8">
-                <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-green-600">Thank You!</h3>
-                <p className="text-gray-600 mt-2">Your project inquiry has been sent to our inbox via Webild.</p>
-              </div>
-            ) : (
-              <form onSubmit={handleFormSubmit} className="space-y-4">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
-                  <input type="text" id="name" name="name" value={formData.name} onChange={handleFormChange} required className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="John Doe" />
-                </div>
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
-                  <input type="email" id="email" name="email" value={formData.email} onChange={handleFormChange} required className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="john@example.com" />
-                </div>
-                <div>
-                  <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">Company</label>
-                  <input type="text" id="company" name="company" value={formData.company} onChange={handleFormChange} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your Company" />
-                </div>
-                <div>
-                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Project Details</label>
-                  <textarea id="message" name="message" value={formData.message} onChange={handleFormChange} required rows={4} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Tell us about your project..." />
-                </div>
-                {submitStatus === "error" && (
-                  <div className="bg-red-50 border border-red-200 text-red-700 text-sm font-medium p-3 rounded-lg">Failed to send your inquiry. Please check that Webild is properly configured in your settings, or try again in a moment.</div>
-                )}
-                <button type="submit" disabled={submitStatus === "loading"} className="w-full bg-blue-600 text-white py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
-                  {submitStatus === "loading" ? "Sending..." : "Send Project Inquiry"}
-                </button>
-              </form>
-            )}
-          </div>
-        </div>
-      )}
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0b07ff;
-  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #0c1325;
-  --accent: #93b7ff;
-  --background-accent: #a8bae8;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #ffffffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);