Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0748380ddb | |||
| e20fceeb63 | |||
| db73b9ac07 | |||
| 8a5b5fd50d | |||
| c4ce3db75e | |||
| 95df0210ae | |||
| dc6abfca3b | |||
| 8cedce609a | |||
| e3338c390c | |||
| eeff5b28c1 |
@@ -1,59 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Figtree } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
variable: "--font-halant", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const figtree = Figtree({
|
||||
variable: "--font-figtree", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Stratus Web Co | Request Your Free Demo Website", description: "Request a free demo website for your local business. See exactly what your online presence will look like before making any decision.", keywords: "web design, local business website, small business website builder, website design agency, customer conversion", metadataBase: new URL("https://stratus-web-co.com"),
|
||||
alternates: {
|
||||
canonical: "https://stratus-web-co.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Stratus Web Co | Request Your Free Demo Website", description: "Request a free demo website for your local business. See exactly what's possible.", url: "https://stratus-web-co.com", siteName: "Stratus Web Co", type: "website", images: [
|
||||
{
|
||||
url: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=630&fit=crop", alt: "Stratus Web Co - Request Demo"
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Stratus Web Co | Request Your Free Demo Website", description: "Request a free demo website for your local business.", images: ["https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=630&fit=crop"]
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true
|
||||
}
|
||||
};
|
||||
title: "Stratus Web Co - Local Business Websites That Convert", description: "Professional website design for local businesses. See your free demo website—no commitment required."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1421,7 +1381,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
307
src/app/page.tsx
307
src/app/page.tsx
@@ -2,47 +2,19 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import { Mail, Rocket, CheckCircle } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Award, Briefcase, CheckCircle, Lightbulb, Rocket, Target, TrendingUp, Zap } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
businessName: '',
|
||||
phone: '',
|
||||
businessType: '',
|
||||
});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/demo-request', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSubmitted(true);
|
||||
setFormData({ name: '', email: '', businessName: '', phone: '', businessType: '' });
|
||||
setTimeout(() => setSubmitted(false), 5000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Form submission error:', error);
|
||||
}
|
||||
const handleDemoSubmit = (data: Record<string, string>) => {
|
||||
console.log('Demo request submitted:', data);
|
||||
// Handle form submission here
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -63,134 +35,144 @@ export default function LandingPage() {
|
||||
brandName="Stratus Web Co"
|
||||
navItems={[
|
||||
{ name: "How It Works", id: "process" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "About", id: "about" }
|
||||
]}
|
||||
button={{ text: "Request Demo", href: "#form" }}
|
||||
button={{ text: "Request Demo", href: "#cta" }}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="form" data-section="form" className="w-full py-20">
|
||||
<div className="mx-auto flex w-content-width flex-col items-center gap-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-5xl font-bold mb-4">Request Your Free Demo Website</h1>
|
||||
<p className="text-lg text-foreground/75">
|
||||
Fill out the form below and we'll build a sample website for your business within 48 hours.
|
||||
</p>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
title="Stratus"
|
||||
description="Your Website Should Bring Customers In. Stratus Web Co builds clean, modern websites designed to convert local visitors into paying customers. See a free sample built for your business—no commitment required."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
tag="Premium Web Design"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
buttons={[{ text: "Request Your Free Demo Website", href: "#cta" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/business-owner-analyzing-blank-mockup-display-smartphone_482257-87225.jpg"
|
||||
imageAlt="Modern website dashboard for local businesses"
|
||||
mediaAnimation="slide-up"
|
||||
testimonials={[]}
|
||||
testimonialRotationInterval={5000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-md">
|
||||
{submitted ? (
|
||||
<div className="rounded-lg border-2 border-primary-cta bg-background p-6 text-center">
|
||||
<CheckCircle className="mx-auto mb-4 h-12 w-12 text-primary-cta" />
|
||||
<h2 className="text-xl font-semibold mb-2">Thanks for reaching out!</h2>
|
||||
<p className="text-foreground/75">
|
||||
We'll review your information and send you a link to your free demo website within 48 hours.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-accent bg-card p-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
|
||||
Your Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
placeholder="John Smith"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Why Choose Us"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
title="Websites Built to Convert, Not Just Impress"
|
||||
description="We focus on one thing: bringing more paying customers to your business. No templates. No fluff. Just results."
|
||||
subdescription="Our approach"
|
||||
icon={Target}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/marketing-optimization-background_23-2148004532.jpg"
|
||||
imageAlt="Website conversion funnel"
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
placeholder="john@business.com"
|
||||
/>
|
||||
</div>
|
||||
<div id="socialproof" data-section="socialproof">
|
||||
<SocialProofOne
|
||||
title="Trusted by Local Businesses"
|
||||
description="From restaurants to gyms to service providers, we've helped hundreds of local businesses attract more customers online."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Proven Track Record"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
names={[
|
||||
"Local Cafe Network", "Fitness Studio Group", "Home Services Co", "Restaurant Alliance", "Beauty Salon Chain", "Consulting Firms", "Medical Practices", "Professional Services"
|
||||
]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="businessName" className="block text-sm font-medium text-foreground mb-1">
|
||||
Business Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="businessName"
|
||||
name="businessName"
|
||||
value={formData.businessName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
placeholder="Your Business Name"
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<FeatureHoverPattern
|
||||
title="How It Works"
|
||||
description="Our simple three-step process gets your business online and attracting customers fast."
|
||||
tag="The Process"
|
||||
tagAnimation="slide-up"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Lightbulb,
|
||||
title: "Free Demo Website", description: "We build a sample website for your business at no cost. See exactly what your online presence will look like."
|
||||
},
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: "Custom Strategy", description: "No generic templates. We design your site to turn visitors into customers, tailored to your industry."
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Launch & Support", description: "We handle everything from launch to ongoing optimization. Your success is our only metric."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
placeholder="(555) 000-0000"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Real Results from Real Businesses"
|
||||
description="Hear from business owners who transformed their online presence with Stratus Web Co."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
tag="Client Feedback"
|
||||
tagAnimation="slide-up"
|
||||
animationType="slide-up"
|
||||
speed={40}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Maria Rodriguez", handle: "Cafe Owner", testimonial: "Within the first month, foot traffic increased by 40%. The website is clean and converts people perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-nerdy-waitress-work_329181-2082.jpg", imageAlt: "Maria Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "2", name: "James Chen", handle: "Gym Manager", testimonial: "No more complicated processes. They delivered a professional site that actually brings in new members.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-fit-man-gym_23-2149517268.jpg", imageAlt: "James Chen"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Sarah Thompson", handle: "Salon Owner", testimonial: "Transparent from day one. The free demo showed us they were serious about results.", imageSrc: "http://img.b2bpic.net/free-photo/happy-client-hairdresser-shop_23-2149319767.jpg", imageAlt: "Sarah Thompson"
|
||||
},
|
||||
{
|
||||
id: "4", name: "David Kim", handle: "Restaurant Owner", testimonial: "Our booking system went from zero to 30+ reservations a month through the website.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-barista-boy-cafe_23-2148436241.jpg", imageAlt: "David Kim"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Emily Watson", handle: "Service Business Owner", testimonial: "Finally, a web design company that understands small business. No jargon, just results.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2", imageAlt: "Emily Watson"
|
||||
},
|
||||
{
|
||||
id: "6", name: "Michael Torres", handle: "Consulting Firm Owner", testimonial: "The investment paid for itself in the first three months. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Michael Torres"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="businessType" className="block text-sm font-medium text-foreground mb-1">
|
||||
Business Type *
|
||||
</label>
|
||||
<select
|
||||
id="businessType"
|
||||
name="businessType"
|
||||
value={formData.businessType}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full rounded border border-accent bg-background px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
>
|
||||
<option value="">Select your business type</option>
|
||||
<option value="restaurant">Restaurant/Cafe</option>
|
||||
<option value="fitness">Fitness/Gym</option>
|
||||
<option value="salon">Salon/Spa</option>
|
||||
<option value="retail">Retail Shop</option>
|
||||
<option value="service">Service Business</option>
|
||||
<option value="consulting">Consulting</option>
|
||||
<option value="medical">Medical/Healthcare</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded bg-primary-cta px-4 py-2 font-semibold text-primary-cta-text transition-opacity hover:opacity-90"
|
||||
>
|
||||
Request Free Demo
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-foreground/60 text-center">
|
||||
We'll build a sample website for your business within 48 hours and send you a link to review. No spam, no pressure to buy.
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div id="cta" data-section="cta">
|
||||
<ContactSplitForm
|
||||
title="See Your Free Demo Website Today"
|
||||
description="No credit card required. No commitment. Just a professional website built for your business, so you can see exactly what's possible before making any decision."
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "your@business.com", required: true },
|
||||
{ name: "businessName", type: "text", placeholder: "Business Name", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Tell us about your business (optional)", rows: 4
|
||||
}}
|
||||
buttonText="Request Free Demo"
|
||||
onSubmit={handleDemoSubmit}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
@@ -199,19 +181,24 @@ export default function LandingPage() {
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "#" },
|
||||
{ label: "Request Demo", href: "#form" }
|
||||
{ label: "How It Works", href: "#process" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "About", href: "#about" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#" },
|
||||
{ label: "Contact", href: "#form" }
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Blog", href: "https://blog.stratus.com" },
|
||||
{ label: "Contact", href: "#cta" },
|
||||
{ label: "Careers", href: "https://careers.stratus.com" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" }
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user