Update src/app/page.tsx

Merge version_7 into main

src/app/layout.tsx

@@ -27,7 +27,8 @@ export const metadata: Metadata = {
   openGraph: {
     title: "CoreScale - Affordable Professional Websites for Small Businesses",    description: "Get a professional website for your small business starting at $250. Build trust, attract customers, and grow online with CoreScale.",    type: "website",    siteName: "CoreScale",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg",        alt: "Professional website design for small businesses"},
+        url: "http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg",        alt: "Professional website design for small businesses"
+      },
     ],
   },
   twitter: {
@@ -1419,4 +1420,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -6,12 +6,39 @@ import HeroOverlay from "@/components/sections/hero/HeroOverlay";
 import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
 import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
 import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
-import { ArrowRight, CheckCircle, Sparkles, Star } from "lucide-react";
+import { ArrowRight, CheckCircle, Sparkles, Phone, Mail } from "lucide-react";
+import { useState } from "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 = (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setFormData({
+      fullName: "",      businessName: "",      email: "",      phone: "",      message: ""});
+    setTimeout(() => setSubmitted(false), 5000);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -32,11 +59,11 @@ export default function LandingPage() {
             { name: "About", id: "about" },
             { name: "Services", id: "services" },
             { name: "Why We Matter", id: "why-matters" },
-            { name: "Testimonials", id: "testimonials" },
             { name: "Contact", id: "contact" },
           ]}
           button={{
-            text: "Get Your Website Today",            href: "contact"}}
+            text: "Get Your Website Today",            href: "contact"
+          }}
           animateOnLoad={true}
         />
       </div>
@@ -64,7 +91,8 @@ export default function LandingPage() {
         <TextSplitAbout
           title="Why 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."]}
+            "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."
+          ]}
           buttons={[{ text: "Start Your Journey", href: "contact" }]}
           buttonAnimation="blur-reveal"
           showBorder={false}
@@ -84,12 +112,13 @@ export default function LandingPage() {
           plans={[
             {
               id: "1",              badge: "Website Design",              badgeIcon: Sparkles,
-              price: "Starting at $250",              subtitle: "Perfect for your first website or redesign",              buttons: [
+              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"],
+                "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,
@@ -98,7 +127,8 @@ export default function LandingPage() {
                 { 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"],
+                "Website updates and content edits",                "Image or text updates",                "Small design improvements",                "Ongoing technical support",                "Keep your website running smoothly"
+              ],
             },
           ]}
         />
@@ -116,80 +146,176 @@ 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: "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: "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: "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: "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"},
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardOne
-          title="What Our Clients Say"
-          description="Real feedback from small business owners who've grown their online presence with CoreScale. With star ratings and detailed reviews, see why our clients trust us."
-          tag="Client Success"
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          carouselMode="buttons"
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Mitchell",              role: "Owner",              company: "Mitchell's Cleaning Services",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=1",              imageAlt: "Sarah Mitchell"},
-            {
-              id: "2",              name: "David Chen",              role: "Founder",              company: "Chen's Local Plumbing",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=2",              imageAlt: "David Chen"},
-            {
-              id: "3",              name: "Jennifer Rodriguez",              role: "Owner",              company: "Rodriguez Photography Studio",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=3",              imageAlt: "Jennifer Rodriguez"},
-            {
-              id: "4",              name: "Marcus Thompson",              role: "Owner",              company: "Thompson's Landscaping",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg?_wi=4",              imageAlt: "Marcus Thompson"},
+              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"
+            },
           ]}
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactFaq
-          ctaTitle="Ready to Get Your Website?"
-          ctaDescription="Contact CoreScale today and let's discuss how we can help your business grow online. We're ready to answer your questions and get you started."
-          ctaButton={{
-            text: "Contact Us Now",            href: "mailto:CoreScale.co@gmail.com"}}
-          ctaIcon={ArrowRight}
-          useInvertedBackground={false}
-          animationType="slide-up"
-          accordionAnimationType="smooth"
-          showCard={true}
-          faqs={[
-            {
-              id: "1",              title: "How much does a website cost?",              content: "Website design starts at $250. This includes professional modern design, mobile-friendly layout, fast loading pages, and everything needed to build customer trust. We also offer ongoing maintenance for $50/month."},
-            {
-              id: "2",              title: "How long does it take to get a website?",              content: "We work efficiently to get your website live quickly. Most projects are completed within 2-3 weeks, depending on complexity and how quickly you provide content and feedback."},
-            {
-              id: "3",              title: "Will my website work on mobile phones?",              content: "Absolutely! All CoreScale websites are mobile-friendly and responsive. They look and work perfectly on smartphones, tablets, and desktop computers."},
-            {
-              id: "4",              title: "Can I update my website myself?",              content: "Yes! We design websites that are easy to manage. We can train you on how to make updates, or we offer monthly maintenance packages to handle updates for you."},
-            {
-              id: "5",              title: "What if I already have a website?",              content: "If your current website is outdated or not performing well, we can redesign it with modern design and better functionality. Let's discuss your needs!"},
-            {
-              id: "6",              title: "Do you provide support after launch?",              content: "Yes! We offer ongoing support through our Website Maintenance & Edits service ($50/month). We can handle updates, improvements, and technical support to keep your site running smoothly."},
-          ]}
-        />
+        <section className="w-full py-20 px-4 md:px-8 lg:px-12 bg-background">
+          <div className="max-w-4xl mx-auto">
+            {/* Header */}
+            <div className="text-center mb-12">
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
+                Get Your Website Started
+              </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.
+              </p>
+            </div>
+
+            {/* Contact Information */}
+            <div className="grid md:grid-cols-2 gap-8 mb-12">
+              <div className="flex items-center gap-4 p-6 rounded-lg bg-card">
+                <Phone className="w-8 h-8 text-primary-cta flex-shrink-0" />
+                <div>
+                  <p className="text-sm text-foreground/60 mb-1">Phone</p>
+                  <a
+                    href="tel:206-741-9017"
+                    className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
+                  >
+                    206-741-9017
+                  </a>
+                </div>
+              </div>
+              <div className="flex items-center gap-4 p-6 rounded-lg bg-card">
+                <Mail className="w-8 h-8 text-primary-cta flex-shrink-0" />
+                <div>
+                  <p className="text-sm text-foreground/60 mb-1">Email</p>
+                  <a
+                    href="mailto:CoreScale.co@gmail.com"
+                    className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
+                  >
+                    CoreScale.co@gmail.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">
+                  <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
+                    Message
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleInputChange}
+                    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..."
+                  />
+                </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.
+                </p>
+                <p className="text-green-700">
+                  We will reach out shortly to discuss your website.
+                </p>
+              </div>
+            )}
+          </div>
+        </section>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="CoreScale"
           leftLink={{
-            text: "Privacy Policy",            href: "#"}}
+            text: "Privacy Policy",            href: "#"
+          }}
           rightLink={{
-            text: "Terms of Service",            href: "#"}}
+            text: "Terms of Service",            href: "#"
+          }}
         />
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -12,11 +12,11 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000f06e6;
-  --primary-cta: #0a7039;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000f06e6;
+  --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
   --background-accent: #c4c4c4;