Compare commits
21 Commits
version_3
...
version_10
| Author | SHA1 | Date | |
|---|---|---|---|
| 80546c2ddf | |||
| 2888ff90ac | |||
| 1fad1b5bfb | |||
| 0d4a62f433 | |||
| 3fac4b6d68 | |||
| e009f2ed81 | |||
| b9a63f0fc6 | |||
| fdf07f2a24 | |||
| 4886572a14 | |||
| ca28dc5047 | |||
| 43e66bf416 | |||
| ef03615c9d | |||
| 3c39d8d459 | |||
| 17a1fc9a75 | |||
| 6dc0f9905e | |||
| 8d36a7f9cd | |||
| 41bf64043b | |||
| a9183bd3e2 | |||
| 9734e36ef4 | |||
| cfe23a3b4c | |||
| b920a10d71 |
@@ -1,54 +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: `
|
||||
@@ -1416,7 +1385,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
310
src/app/page.tsx
310
src/app/page.tsx
@@ -6,12 +6,74 @@ 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 = 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"
|
||||
@@ -32,8 +94,7 @@ 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" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get Your Website Today", href: "contact"
|
||||
@@ -55,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"
|
||||
/>
|
||||
@@ -86,24 +147,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>
|
||||
@@ -127,76 +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="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"
|
||||
},
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</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">
|
||||
<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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user