Compare commits
39 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 768157de6b | |||
| d147424633 | |||
| 53c697b4ec | |||
| 3f0e641635 | |||
| 78a856d0dc | |||
| 6e93a37724 | |||
| ca8af035e6 | |||
| 77ffcd08fc | |||
| 19515d5cf2 | |||
| a571d5bf3a | |||
| ff88567cef | |||
| 6d4cd3be7f | |||
| 9709854572 | |||
| ec828c5e28 | |||
| 7e2ce31c2f | |||
| dfc0500e7e | |||
| 80546c2ddf | |||
| 2888ff90ac | |||
| 1fad1b5bfb | |||
| 0d4a62f433 | |||
| 3fac4b6d68 | |||
| e009f2ed81 | |||
| b9a63f0fc6 | |||
| fdf07f2a24 | |||
| 4886572a14 | |||
| ca28dc5047 | |||
| 43e66bf416 | |||
| ef03615c9d | |||
| 3c39d8d459 | |||
| 17a1fc9a75 | |||
| 6dc0f9905e | |||
| 8d36a7f9cd | |||
| 41bf64043b | |||
| a9183bd3e2 | |||
| 9734e36ef4 | |||
| cfe23a3b4c | |||
| b920a10d71 | |||
| 80b174ab75 | |||
| f45c543c97 |
41
src/app/api/send-email/route.ts
Normal file
41
src/app/api/send-email/route.ts
Normal file
@@ -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 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,54 +1,23 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import { Public_Sans } from "next/font/google";
|
|
||||||
import "./globals.css";
|
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 = {
|
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({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
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
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1416,7 +1385,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
315
src/app/page.tsx
315
src/app/page.tsx
@@ -6,55 +6,53 @@ import HeroOverlay from "@/components/sections/hero/HeroOverlay";
|
|||||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||||
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
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 FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||||
import { ArrowRight, CheckCircle, Sparkles, Star } from "lucide-react";
|
import { Sparkles, CheckCircle, Phone, Mail } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="directional-hover"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="pill"
|
borderRadius="rounded"
|
||||||
contentWidth="smallMedium"
|
contentWidth="medium"
|
||||||
sizing="large"
|
sizing="medium"
|
||||||
background="noiseDiagonalGradient"
|
background="circleGradient"
|
||||||
cardStyle="gradient-mesh"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="primary-glow"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingInline
|
<NavbarLayoutFloatingInline
|
||||||
brandName="CoreScale"
|
brandName="CoreScale"
|
||||||
navItems={[
|
navItems={[
|
||||||
|
{ name: "Features", id: "features" },
|
||||||
|
{ name: "Pricing", id: "pricing" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "about" },
|
||||||
{ name: "Services", id: "services" },
|
{ name: "Contact", id: "contact" }
|
||||||
{ name: "Why We Matter", id: "why-matters" },
|
|
||||||
{ name: "Testimonials", id: "testimonials" },
|
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
]}
|
]}
|
||||||
button={{
|
button={{
|
||||||
text: "Get Your Website Today", href: "contact"}}
|
text: "Get Started", href: "contact"
|
||||||
|
}}
|
||||||
animateOnLoad={true}
|
animateOnLoad={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroOverlay
|
<HeroOverlay
|
||||||
title="Affordable Professional Websites for Small Businesses"
|
title="Build Your Professional Website"
|
||||||
description="At CoreScale, we help small and local businesses build a strong online presence with clean, modern websites that attract customers and build trust."
|
description="Create a stunning, high-converting website for your business. No coding required. Affordable pricing for small businesses."
|
||||||
tag="Helping Small Businesses Grow Online"
|
tag="Professional Websites"
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg"
|
imageSrc="https://images.unsplash.com/photo-1460925895917-adf4e565db40?w=1200&q=80"
|
||||||
imageAlt="Modern professional business workspace"
|
imageAlt="Professional website builder interface"
|
||||||
textPosition="bottom-left"
|
textPosition="bottom-left"
|
||||||
showBlur={true}
|
showBlur={true}
|
||||||
showDimOverlay={false}
|
showDimOverlay={false}
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Get Your Website Today", href: "contact" },
|
{ text: "Start Free Trial", href: "contact" },
|
||||||
{ text: "Learn More", href: "about" },
|
{ text: "Learn More", href: "about" }
|
||||||
]}
|
]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
/>
|
/>
|
||||||
@@ -62,53 +60,22 @@ export default function LandingPage() {
|
|||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TextSplitAbout
|
||||||
title="Why CoreScale?"
|
title="About CoreScale"
|
||||||
description={[
|
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"
|
buttonAnimation="blur-reveal"
|
||||||
showBorder={false}
|
showBorder={false}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services" data-section="services">
|
<div id="features" data-section="features">
|
||||||
<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: "Perfect for your first website or redesign", 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">
|
|
||||||
<FeatureCardThree
|
<FeatureCardThree
|
||||||
title="Why a Website Matters"
|
title="Why CoreScale"
|
||||||
description="In today's digital world, a professional online presence is essential for business growth"
|
description="Everything you need to build and manage your professional website"
|
||||||
tag="Business Growth"
|
tag="Features"
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
@@ -116,80 +83,202 @@ export default function LandingPage() {
|
|||||||
gridVariant="three-columns-all-equal-width"
|
gridVariant="three-columns-all-equal-width"
|
||||||
features={[
|
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>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="pricing" data-section="pricing">
|
||||||
<TestimonialCardOne
|
<PricingCardTwo
|
||||||
title="What Our Clients Say"
|
title="Simple, Transparent Pricing"
|
||||||
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."
|
description="Choose the plan that's right for your business"
|
||||||
tag="Client Success"
|
tag="Pricing"
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
gridVariant="uniform-all-items-equal"
|
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
carouselMode="buttons"
|
plans={[
|
||||||
testimonials={[
|
|
||||||
{
|
{
|
||||||
id: "1", name: "Sarah Mitchell", role: "Owner", company: "Mitchell's Cleaning Services", rating: 5,
|
id: "1", badge: "Starter", badgeIcon: Sparkles,
|
||||||
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"},
|
price: "$250", subtitle: "One-time payment for your website", buttons: [
|
||||||
|
{ text: "Get Started", href: "contact" }
|
||||||
|
],
|
||||||
|
features: [
|
||||||
|
"Up to 5 pages", "Free domain for 1 year", "Mobile responsive", "Basic analytics", "Email support"
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "2", name: "David Chen", role: "Founder", company: "Chen's Local Plumbing", rating: 5,
|
id: "2", badge: "Professional", badgeIcon: CheckCircle,
|
||||||
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"},
|
price: "$50/mo", subtitle: "Best for managing your website", buttons: [
|
||||||
{
|
{ text: "Get Started", href: "contact" }
|
||||||
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"},
|
features: [
|
||||||
{
|
"Unlimited pages", "Free domain", "SEO tools", "Advanced analytics", "Priority support", "Email marketing integration"
|
||||||
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>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<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", href: "mailto:CoreScale.co@gmail.com"}}
|
<h2 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
|
||||||
ctaIcon={ArrowRight}
|
Get Started Today
|
||||||
useInvertedBackground={false}
|
</h2>
|
||||||
animationType="slide-up"
|
<p className="text-lg text-foreground/80 mb-8">
|
||||||
accordionAnimationType="smooth"
|
Join CoreScale and build your professional website in hours.
|
||||||
showCard={true}
|
</p>
|
||||||
faqs={[
|
</div>
|
||||||
{
|
|
||||||
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."},
|
{/* Contact Information */}
|
||||||
{
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||||
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."},
|
<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: "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."},
|
<div>
|
||||||
{
|
<p className="text-sm text-foreground/60 mb-1">Phone</p>
|
||||||
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."},
|
<a
|
||||||
{
|
href="tel:1-800-555-0123"
|
||||||
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!"},
|
className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
|
||||||
{
|
>
|
||||||
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."},
|
1-800-555-0123
|
||||||
]}
|
</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:support@corescale.com"
|
||||||
|
className="text-lg font-semibold text-foreground hover:text-primary-cta transition"
|
||||||
|
>
|
||||||
|
support@corescale.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Form */}
|
||||||
|
<form 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"
|
||||||
|
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="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>
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="CoreScale"
|
logoText="CoreScale"
|
||||||
leftLink={{
|
leftLink={{
|
||||||
text: "Privacy Policy", href: "#"}}
|
text: "Privacy Policy", href: "#"
|
||||||
|
}}
|
||||||
rightLink={{
|
rightLink={{
|
||||||
text: "Terms of Service", href: "#"}}
|
text: "Contact Us", href: "#contact"
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -12,11 +12,11 @@
|
|||||||
|
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--card: #f9f9f9;
|
--card: #f9f9f9;
|
||||||
--foreground: #000f06e6;
|
--foreground: #000612e6;
|
||||||
--primary-cta: #0a7039;
|
--primary-cta: #15479c;
|
||||||
--primary-cta-text: #ffffff;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #f9f9f9;
|
--secondary-cta: #f9f9f9;
|
||||||
--secondary-cta-text: #000f06e6;
|
--secondary-cta-text: #000612e6;
|
||||||
--accent: #e2e2e2;
|
--accent: #e2e2e2;
|
||||||
--background-accent: #c4c4c4;
|
--background-accent: #c4c4c4;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user