Update src/app/page.tsx

Merge version_13 into main

src/app/api/send-email/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { to, subject, name, email, businessName, phone, message } = await request.json();
+
+    // Validate required fields
+    if (!to || !subject || !name || !email || !businessName || !phone || !message) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    // Create email body
+    const emailBody = `
+      <h2>New Website Request</h2>
+      <p><strong>Name:</strong> ${name}</p>
+      <p><strong>Email:</strong> ${email}</p>
+      <p><strong>Business Name:</strong> ${businessName}</p>
+      <p><strong>Phone:</strong> ${phone}</p>
+      <p><strong>Message:</strong></p>
+      <p>${message.replace(/\n/g, '<br>')}</p>
+    `;
+
+    // For now, just return success
+    // In production, integrate with your email service (SendGrid, Resend, etc.)
+    console.log('Email request received:', { to, subject, name, email });
+
+    return NextResponse.json(
+      { success: true, message: 'Email request received successfully' },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('Email handling error:', error);
+    return NextResponse.json(
+      { error: 'Failed to process email request' },
+      { status: 500 }
+    );
+  }
+}

src/app/page.tsx

@@ -7,97 +7,33 @@ import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { ArrowRight, CheckCircle, Sparkles, Phone, Mail } from "lucide-react";
-import { useState } from "react";
+import { Sparkles, CheckCircle, Phone, Mail } from "lucide-react";
 
 export default function LandingPage() {
-  const [submitted, setSubmitted] = useState(false);
-  const [formData, setFormData] = useState({
-    fullName: "",    businessName: "",    email: "",    phone: "",    message: ""
-  });
-
-  const handlePhoneClick = () => {
-    window.location.href = "tel:206-741-9017";
-  };
-
-  const handleEmailClick = () => {
-    window.location.href = "mailto:CoreScale.co@gmail.com";
-  };
-
-  const handleFormSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    // Prepare email content
-    const emailBody = `New Website Request from CoreScale Contact Form\n\n${
-      "==".repeat(40)
-    }\n\nFull Name: ${formData.fullName}\nBusiness Name: ${formData.businessName}\nEmail Address: ${formData.email}\nPhone Number: ${formData.phone}\nMessage: ${formData.message}\n\n${
-      "==".repeat(40)
-    }`;
-
-    try {
-      // Send email using Formspree or similar service
-      const response = await fetch("https://formspree.io/f/mpwazqqq", {
-        method: "POST",        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          name: formData.fullName,
-          email: formData.email,
-          businessName: formData.businessName,
-          phone: formData.phone,
-          message: formData.message,
-          _subject: "New Website Request \u2013 CoreScale",          _reply_to: formData.email
-        })
-      });
-
-      if (response.ok) {
-        setSubmitted(true);
-        setFormData({
-          fullName: "",          businessName: "",          email: "",          phone: "",          message: ""
-        });
-        setTimeout(() => setSubmitted(false), 5000);
-      } else {
-        alert("Failed to send form. Please try again.");
-      }
-    } catch (error) {
-      console.error("Error submitting form:", error);
-      alert("An error occurred. Please try again.");
-    }
-  };
-
-  const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => {
-    setFormData({
-      ...formData,
-      [e.target.name]: e.target.value
-    });
-  };
-
   return (
     <ThemeProvider
-      defaultButtonVariant="directional-hover"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="large"
-      background="noiseDiagonalGradient"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="primary-glow"
-      secondaryButtonStyle="layered"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           brandName="CoreScale"
           navItems={[
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
             { name: "About", id: "about" },
-            { name: "Services", id: "services" },
-            { name: "Why We Matter", id: "why-matters" },
             { name: "Contact", id: "contact" }
           ]}
           button={{
-            text: "Get Your Website Today",            href: "contact"
+            text: "Get Started",            href: "contact"
           }}
           animateOnLoad={true}
         />
@@ -105,17 +41,17 @@ export default function LandingPage() {
 
       <div id="hero" data-section="hero">
         <HeroOverlay
-          title="Affordable Professional Websites for Small Businesses"
-          description="At CoreScale, we help small and local businesses build a strong online presence with clean, modern websites that attract customers and build trust."
-          tag="Helping Small Businesses Grow Online"
+          title="Build Your Professional Website"
+          description="Create a stunning, high-converting website for your business. No coding required. Affordable pricing for small businesses."
+          tag="Professional Websites"
           tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg"
-          imageAlt="Modern professional business workspace"
+          imageSrc="https://images.unsplash.com/photo-1460925895917-adf4e565db40?w=1200&q=80"
+          imageAlt="Professional website builder interface"
           textPosition="bottom-left"
           showBlur={true}
           showDimOverlay={false}
           buttons={[
-            { text: "Get Your Website Today", href: "contact" },
+            { text: "Start Free Trial", href: "contact" },
             { text: "Learn More", href: "about" }
           ]}
           buttonAnimation="slide-up"
@@ -124,56 +60,22 @@ export default function LandingPage() {
 
       <div id="about" data-section="about">
         <TextSplitAbout
-          title="Why CoreScale?"
+          title="About CoreScale"
           description={[
-            "Most customers search online before visiting or contacting a business. Without a website, your business is missing valuable opportunities to connect with potential customers.",            "CoreScale specializes in helping small businesses get online quickly and affordably. We create professional websites that help businesses look credible, showcase their services, and build lasting customer relationships.",            "We focus on clean design, fast performance, and mobile-friendly layouts that work perfectly on any device. Your website will be a powerful tool to attract new customers and establish trust in your market."
+            "CoreScale is dedicated to empowering small businesses with professional web presence. We believe every business deserves a website that showcases their value.",            "Our platform combines ease of use with powerful features, allowing business owners to create, customize, and launch their websites in hours, not months.",            "Join hundreds of satisfied business owners who have transformed their online presence with CoreScale."
           ]}
-          buttons={[{ text: "Start Your Journey", href: "contact" }]}
+          buttons={[{ text: "Explore Features", href: "features" }]}
           buttonAnimation="blur-reveal"
           showBorder={false}
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="services" data-section="services">
-        <PricingCardTwo
-          title="Our Services"
-          description="Simple, transparent pricing for professional web solutions tailored to small businesses"
-          tag="Services & Pricing"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          plans={[
-            {
-              id: "1",              badge: "Website Design",              badgeIcon: Sparkles,
-              price: "Starting at $250",              subtitle: "Professional website starting at $250 built to help your business attract more customers online",              buttons: [
-                { text: "Get Started", href: "contact" },
-                { text: "Learn More", href: "#" }
-              ],
-              features: [
-                "Professional modern design",                "Mobile-friendly layout",                "Fast loading pages",                "Clean and simple user experience",                "Website that builds trust with customers"
-              ]
-            },
-            {
-              id: "2",              badge: "Maintenance & Edits",              badgeIcon: CheckCircle,
-              price: "$50/month",              subtitle: "Ongoing support to keep your site fresh",              buttons: [
-                { text: "Add to Service", href: "contact" },
-                { text: "Learn More", href: "#" }
-              ],
-              features: [
-                "Website updates and content edits",                "Image or text updates",                "Small design improvements",                "Ongoing technical support",                "Keep your website running smoothly"
-              ]
-            }
-          ]}
-        />
-      </div>
-
-      <div id="why-matters" data-section="why-matters">
+      <div id="features" data-section="features">
         <FeatureCardThree
-          title="Why a Website Matters"
-          description="In today's digital world, a professional online presence is essential for business growth"
-          tag="Business Growth"
+          title="Why CoreScale"
+          description="Everything you need to build and manage your professional website"
+          tag="Features"
           tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
@@ -181,13 +83,45 @@ export default function LandingPage() {
           gridVariant="three-columns-all-equal-width"
           features={[
             {
-              id: "01",              title: "Build Trust & Credibility",              description: "A professional website shows customers that you're legitimate and serious about your business. It's often the first impression customers have of your company.",              imageSrc: "http://img.b2bpic.net/free-vector/flat-design-responsive-website-design_23-2149483806.jpg",              imageAlt: "Professional website design"
+              id: "01",              title: "Easy to Use",              description: "Intuitive drag-and-drop interface makes it simple to build your website without any technical knowledge.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=500&q=80",              imageAlt: "Easy to use interface"
             },
             {
-              id: "02",              title: "Attract More Customers",              description: "When customers search online for services you offer, a well-designed website helps them find you. Don't miss out on valuable business opportunities.",              imageSrc: "http://img.b2bpic.net/free-photo/website-construction-error-concept_53876-132306.jpg",              imageAlt: "Customer attraction through online presence"
+              id: "02",              title: "Professional Templates",              description: "Choose from professionally designed templates optimized for conversions and customer engagement.",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&q=80",              imageAlt: "Professional templates"
             },
             {
-              id: "03",              title: "Stand Out from Competitors",              description: "Many local businesses still don't have websites. By getting online with CoreScale, you'll have a competitive advantage and reach customers your competitors are missing.",              imageSrc: "http://img.b2bpic.net/free-photo/group-people-working-website-template_53876-25068.jpg",              imageAlt: "Competitive advantage online"
+              id: "03",              title: "Affordable Pricing",              description: "Transparent pricing plans that scale with your business. No hidden fees or surprise charges.",              imageSrc: "https://images.unsplash.com/photo-1557821552-17105176677c?w=500&q=80",              imageAlt: "Affordable pricing"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="pricing" data-section="pricing">
+        <PricingCardTwo
+          title="Simple, Transparent Pricing"
+          description="Choose the plan that's right for your business"
+          tag="Pricing"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          plans={[
+            {
+              id: "1",              badge: "Starter",              badgeIcon: Sparkles,
+              price: "$19/mo",              subtitle: "Perfect for small businesses getting started",              buttons: [
+                { text: "Get Started", href: "contact" }
+              ],
+              features: [
+                "Up to 5 pages",                "Free domain for 1 year",                "Mobile responsive",                "Basic analytics",                "Email support"
+              ]
+            },
+            {
+              id: "2",              badge: "Professional",              badgeIcon: CheckCircle,
+              price: "$49/mo",              subtitle: "Best for growing businesses",              buttons: [
+                { text: "Get Started", href: "contact" }
+              ],
+              features: [
+                "Unlimited pages",                "Free domain",                "SEO tools",                "Advanced analytics",                "Priority support",                "Email marketing integration"
+              ]
             }
           ]}
         />
@@ -199,10 +133,10 @@ export default function LandingPage() {
             {/* Header */}
             <div className="text-center mb-12">
               <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
-                Get Your Website Started
+                Get Started Today
               </h2>
               <p className="text-lg text-foreground/80 mb-8">
-                Ready to grow your business online? Contact CoreScale today to get your professional website built quickly and affordably.
+                Join CoreScale and build your professional website in hours.
               </p>
             </div>
 
@@ -213,10 +147,10 @@ export default function LandingPage() {
                 <div>
                   <p className="text-sm text-foreground/60 mb-1">Phone</p>
                   <a
-                    href="tel:206-741-9017"
+                    href="tel:1-800-555-0123"
                     className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
                   >
-                    206-741-9017
+                    1-800-555-0123
                   </a>
                 </div>
               </div>
@@ -225,132 +159,111 @@ export default function LandingPage() {
                 <div>
                   <p className="text-sm text-foreground/60 mb-1">Email</p>
                   <a
-                    href="mailto:CoreScale.co@gmail.com"
+                    href="mailto:support@corescale.com"
                     className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
                   >
-                    CoreScale.co@gmail.com
+                    support@corescale.com
                   </a>
                 </div>
               </div>
             </div>
 
             {/* Contact Form */}
-            {!submitted ? (
-              <form onSubmit={handleFormSubmit} className="bg-card p-8 rounded-lg">
-                <div className="grid md:grid-cols-2 gap-6 mb-6">
-                  <div>
-                    <label
-                      htmlFor="fullName"
-                      className="block text-sm font-medium text-foreground mb-2"
-                    >
-                      Full Name
-                    </label>
-                    <input
-                      type="text"
-                      id="fullName"
-                      name="fullName"
-                      value={formData.fullName}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                      placeholder="John Doe"
-                    />
-                  </div>
-                  <div>
-                    <label
-                      htmlFor="businessName"
-                      className="block text-sm font-medium text-foreground mb-2"
-                    >
-                      Business Name
-                    </label>
-                    <input
-                      type="text"
-                      id="businessName"
-                      name="businessName"
-                      value={formData.businessName}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                      placeholder="Your Business"
-                    />
-                  </div>
-                </div>
-
-                <div className="grid md:grid-cols-2 gap-6 mb-6">
-                  <div>
-                    <label
-                      htmlFor="email"
-                      className="block text-sm font-medium text-foreground mb-2"
-                    >
-                      Email Address
-                    </label>
-                    <input
-                      type="email"
-                      id="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                      placeholder="your@email.com"
-                    />
-                  </div>
-                  <div>
-                    <label
-                      htmlFor="phone"
-                      className="block text-sm font-medium text-foreground mb-2"
-                    >
-                      Phone Number
-                    </label>
-                    <input
-                      type="tel"
-                      id="phone"
-                      name="phone"
-                      value={formData.phone}
-                      onChange={handleInputChange}
-                      required
-                      className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                      placeholder="206-741-9017"
-                    />
-                  </div>
-                </div>
-
-                <div className="mb-6">
+            <form className="bg-card p-8 rounded-lg">
+              <div className="grid md:grid-cols-2 gap-6 mb-6">
+                <div>
                   <label
-                    htmlFor="message"
+                    htmlFor="fullName"
                     className="block text-sm font-medium text-foreground mb-2"
                   >
-                    Message
+                    Full Name
                   </label>
-                  <textarea
-                    id="message"
-                    name="message"
-                    value={formData.message}
-                    onChange={handleInputChange}
+                  <input
+                    type="text"
+                    id="fullName"
+                    name="fullName"
                     required
-                    rows={5}
                     className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                    placeholder="Tell us about your business and what you're looking for in a website..."
+                    placeholder="John Doe"
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="phone"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    Phone Number
+                  </label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    required
+                    className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="1-800-555-0123"
                   />
                 </div>
-
-                <button
-                  type="submit"
-                  className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text font-semibold py-3 px-6 rounded-lg transition"
-                >
-                  Request Website
-                </button>
-              </form>
-            ) : (
-              <div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
-                <p className="text-lg font-semibold text-green-800 mb-2">
-                  Thank you for contacting CoreScale. We will reach out to you shortly.
-                </p>
-                <p className="text-green-700">
-                  We've received your website request and will be in touch soon to discuss your project.
-                </p>
               </div>
-            )}
+
+              <div className="grid md:grid-cols-2 gap-6 mb-6">
+                <div>
+                  <label
+                    htmlFor="email"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    Email Address
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    required
+                    className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    placeholder="your@email.com"
+                  />
+                </div>
+                <div>
+                  <label
+                    htmlFor="interest"
+                    className="block text-sm font-medium text-foreground mb-2"
+                  >
+                    I'm interested in
+                  </label>
+                  <select
+                    id="interest"
+                    name="interest"
+                    className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  >
+                    <option>Website Builder</option>
+                    <option>E-commerce</option>
+                    <option>Both</option>
+                  </select>
+                </div>
+              </div>
+
+              <div className="mb-6">
+                <label
+                  htmlFor="message"
+                  className="block text-sm font-medium text-foreground mb-2"
+                >
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={5}
+                  className="w-full px-4 py-2 rounded-lg border border-accent bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  placeholder="Tell us about your business..."
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text font-semibold py-3 px-6 rounded-lg transition"
+              >
+                Start Free Trial
+              </button>
+            </form>
           </div>
         </section>
       </div>
@@ -362,10 +275,10 @@ export default function LandingPage() {
             text: "Privacy Policy",            href: "#"
           }}
           rightLink={{
-            text: "Terms of Service",            href: "#"
+            text: "Contact Us",            href: "#contact"
           }}
         />
       </div>
     </ThemeProvider>
   );
-}
+}