Compare commits
20 Commits
version_4
...
version_11
| Author | SHA1 | Date | |
|---|---|---|---|
| ec828c5e28 | |||
| 7e2ce31c2f | |||
| dfc0500e7e | |||
| 80546c2ddf | |||
| 2888ff90ac | |||
| 1fad1b5bfb | |||
| 0d4a62f433 | |||
| 3fac4b6d68 | |||
| e009f2ed81 | |||
| b9a63f0fc6 | |||
| fdf07f2a24 | |||
| 4886572a14 | |||
| ca28dc5047 | |||
| 43e66bf416 | |||
| ef03615c9d | |||
| 3c39d8d459 | |||
| 17a1fc9a75 | |||
| 6dc0f9905e | |||
| 8d36a7f9cd | |||
| a9183bd3e2 |
@@ -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 Tag from "@/tag/Tag";
|
||||
import "./styles/variables.css";
|
||||
import "./styles/base.css";
|
||||
|
||||
const halant = Halant({
|
||||
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"],
|
||||
});
|
||||
const inter = Inter({ 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: {
|
||||
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"],
|
||||
},
|
||||
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."
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1417,7 +1385,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
276
src/app/page.tsx
276
src/app/page.tsx
@@ -6,11 +6,69 @@ 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 } 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 [error, setError] = useState("");
|
||||
|
||||
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();
|
||||
setError("");
|
||||
|
||||
try {
|
||||
// Send email using Formspree
|
||||
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 – CoreScale", _reply_to: formData.email
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
setFormData({
|
||||
fullName: "", businessName: "", email: "", phone: "", message: ""
|
||||
});
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
} else {
|
||||
setError("Failed to send form. Please try again.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
setError("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"
|
||||
@@ -31,7 +89,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"
|
||||
@@ -53,7 +111,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"
|
||||
/>
|
||||
@@ -84,24 +142,24 @@ 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: "#" },
|
||||
{ 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>
|
||||
@@ -125,44 +183,176 @@ 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
|
||||
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: "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."
|
||||
},
|
||||
{
|
||||
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">
|
||||
{error && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-red-50 border border-red-200">
|
||||
<p className="text-red-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user