Update src/app/page.tsx

Update src/app/layout.tsx
Merge version_9 into main
2026-03-06 04:27:14 +00:00 · 2026-03-06 04:27:14 +00:00 · 2026-03-06 04:04:25 +00:00 · 2026-03-06 04:04:21 +00:00 · 2026-03-06 04:04:21 +00:00 · 2026-03-06 03:58:12 +00:00
2 changed files with 233 additions and 84 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,55 +1,23 @@
 import type { Metadata } from "next";
 import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import { Public_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
+import "./styles/variables.css";
-import Tag from "@/tag/Tag";
+import "./styles/base.css";
-const halant = Halant({
+const inter = Inter({ subsets: ["latin"] });
  variable: "--font-halant",  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
 });
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
 const publicSans = Public_Sans({
  variable: "--font-public-sans",  subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "CoreScale - Professional Websites for Small Businesses",  description: "Affordable, professional web design for small businesses. Build trust online with clean, modern websites starting at $250. CoreScale helps local businesses grow online.",  keywords: "web design, small business, affordable websites, professional website design, local business website, online presence",  robots: {
+  title: "CoreScale - Professional Websites for Small Businesses",  description: "Affordable professional websites for small and local businesses. Build trust, attract customers, and grow your business online with CoreScale."
    index: true,
    follow: true,
  },
  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"
      },
    ],
  },
  twitter: {
    card: "summary_large_image",    title: "CoreScale - Professional Websites for Small Businesses",    description: "Affordable, professional web design starting at $250. Build your online presence with CoreScale.",    images: ["http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg"],
  },
 };
 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={inter.className}>{children}
        <body
          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
        >
          <Tag />
          {children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1417,7 +1385,6 @@ export default function RootLayout({
          }}
        />
      </body>
      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,11 +6,16 @@ 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 ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
 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";
  };
@@ -19,6 +24,56 @@ export default function LandingPage() {
    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"
@@ -39,7 +94,7 @@ export default function LandingPage() {
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Why We Matter", id: "why-matters" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Get Your Website Today",            href: "contact"
@@ -61,7 +116,7 @@ export default function LandingPage() {
          showDimOverlay={false}
          buttons={[
            { text: "Get Your Website Today", href: "contact" },
-            { text: "Learn More", href: "about" },
+            { text: "Learn More", href: "about" }
          ]}
          buttonAnimation="slide-up"
        />
@@ -94,22 +149,22 @@ export default function LandingPage() {
              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: "#" },
+                { 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: "#" },
+                { 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>
@@ -133,44 +188,171 @@ export default function LandingPage() {
            },
            {
              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
+        <section className="w-full py-20 px-4 md:px-8 lg:px-12 bg-background">
-          ctaTitle="Ready to Get Your Website?"
+          <div className="max-w-4xl mx-auto">
-          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."
+            {/* Header */}
-          ctaButton={{
+            <div className="text-center mb-12">
-            text: "Contact Us Now",            onClick: handlePhoneClick
+              <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
-          }}
+                Get Your Website Started
-          ctaIcon={Phone}
+              </h2>
-          useInvertedBackground={false}
+              <p className="text-lg text-foreground/80 mb-8">
-          animationType="slide-up"
+                Ready to grow your business online? Contact CoreScale today to get your professional website built quickly and affordably.
-          accordionAnimationType="smooth"
+              </p>
-          showCard={true}
+            </div>
-          faqs={[
+
-            {
+            {/* Contact Information */}
-              id: "1",              title: "How much does a website cost?",              content: "Website design starts at $250, and you pay after the website is completed. 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."
+            <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" />
-              id: "2",              title: "How long does it take to get a website?",              content: "It can take up to 1-2 weeks depending on the complexity and how quickly you provide content and feedback. We work efficiently to get your website live as soon as possible."
+                <div>
-            },
+                  <p className="text-sm text-foreground/60 mb-1">Phone</p>
-            {
+                  <a
-              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."
+                    href="tel:206-741-9017"
-            },
+                    className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
-            {
+                  >
-              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."
+                    206-741-9017
-            },
+                  </a>
-            {
+                </div>
-              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!"
+              </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" />
-              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."
+                <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. 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>
        </section>
      </div>
      <div id="footer" data-section="footer">
Author	SHA1	Message	Date
bender	80546c2ddf	Update src/app/page.tsx	2026-03-06 04:27:14 +00:00
bender	2888ff90ac	Update src/app/layout.tsx	2026-03-06 04:27:14 +00:00
bender	1fad1b5bfb	Merge version_9 into main Merge version_9 into main	2026-03-06 04:04:25 +00:00
bender	0d4a62f433	Update src/app/page.tsx	2026-03-06 04:04:21 +00:00
bender	3fac4b6d68	Update src/app/layout.tsx	2026-03-06 04:04:21 +00:00
bender	e009f2ed81	Merge version_8 into main Merge version_8 into main	2026-03-06 03:58:12 +00:00
bender	b9a63f0fc6	Update src/app/page.tsx	2026-03-06 03:58:08 +00:00
bender	fdf07f2a24	Merge version_7 into main Merge version_7 into main	2026-03-06 03:41:52 +00:00
bender	ca28dc5047	Merge version_7 into main Merge version_7 into main	2026-03-06 03:40:52 +00:00