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 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 "./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 = {
|
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"),
|
title: "Stratus Web Co - Local Business Websites That Convert", description: "Professional website design for local businesses. See your free demo website—no commitment required."};
|
||||||
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
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
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>
|
||||||
<body
|
{children}
|
||||||
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1421,7 +1381,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
307
src/app/page.tsx
307
src/app/page.tsx
@@ -2,47 +2,19 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
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 FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||||
import { Mail, Rocket, CheckCircle } from 'lucide-react';
|
import { Award, Briefcase, CheckCircle, Lightbulb, Rocket, Target, TrendingUp, Zap } from 'lucide-react';
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
const [formData, setFormData] = useState({
|
const handleDemoSubmit = (data: Record<string, string>) => {
|
||||||
name: '',
|
console.log('Demo request submitted:', data);
|
||||||
email: '',
|
// Handle form submission here
|
||||||
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);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -63,134 +35,144 @@ export default function LandingPage() {
|
|||||||
brandName="Stratus Web Co"
|
brandName="Stratus Web Co"
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "How It Works", id: "process" },
|
{ 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}
|
animateOnLoad={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="form" data-section="form" className="w-full py-20">
|
<div id="hero" data-section="hero">
|
||||||
<div className="mx-auto flex w-content-width flex-col items-center gap-8">
|
<HeroSplitTestimonial
|
||||||
<div className="text-center">
|
title="Stratus"
|
||||||
<h1 className="text-5xl font-bold mb-4">Request Your Free Demo Website</h1>
|
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."
|
||||||
<p className="text-lg text-foreground/75">
|
background={{ variant: "plain" }}
|
||||||
Fill out the form below and we'll build a sample website for your business within 48 hours.
|
useInvertedBackground={false}
|
||||||
</p>
|
tag="Premium Web Design"
|
||||||
</div>
|
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">
|
<div id="about" data-section="about">
|
||||||
{submitted ? (
|
<TestimonialAboutCard
|
||||||
<div className="rounded-lg border-2 border-primary-cta bg-background p-6 text-center">
|
tag="Why Choose Us"
|
||||||
<CheckCircle className="mx-auto mb-4 h-12 w-12 text-primary-cta" />
|
tagIcon={CheckCircle}
|
||||||
<h2 className="text-xl font-semibold mb-2">Thanks for reaching out!</h2>
|
tagAnimation="slide-up"
|
||||||
<p className="text-foreground/75">
|
title="Websites Built to Convert, Not Just Impress"
|
||||||
We'll review your information and send you a link to your free demo website within 48 hours.
|
description="We focus on one thing: bringing more paying customers to your business. No templates. No fluff. Just results."
|
||||||
</p>
|
subdescription="Our approach"
|
||||||
</div>
|
icon={Target}
|
||||||
) : (
|
imageSrc="http://img.b2bpic.net/free-vector/marketing-optimization-background_23-2148004532.jpg"
|
||||||
<form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-accent bg-card p-6">
|
imageAlt="Website conversion funnel"
|
||||||
<div>
|
mediaAnimation="slide-up"
|
||||||
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
|
useInvertedBackground={false}
|
||||||
Your Name *
|
/>
|
||||||
</label>
|
</div>
|
||||||
<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>
|
<div id="socialproof" data-section="socialproof">
|
||||||
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
|
<SocialProofOne
|
||||||
Email Address *
|
title="Trusted by Local Businesses"
|
||||||
</label>
|
description="From restaurants to gyms to service providers, we've helped hundreds of local businesses attract more customers online."
|
||||||
<input
|
textboxLayout="default"
|
||||||
type="email"
|
useInvertedBackground={false}
|
||||||
id="email"
|
tag="Proven Track Record"
|
||||||
name="email"
|
tagIcon={Award}
|
||||||
value={formData.email}
|
tagAnimation="slide-up"
|
||||||
onChange={handleChange}
|
names={[
|
||||||
required
|
"Local Cafe Network", "Fitness Studio Group", "Home Services Co", "Restaurant Alliance", "Beauty Salon Chain", "Consulting Firms", "Medical Practices", "Professional Services"
|
||||||
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"
|
speed={40}
|
||||||
/>
|
showCard={true}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div id="process" data-section="process">
|
||||||
<label htmlFor="businessName" className="block text-sm font-medium text-foreground mb-1">
|
<FeatureHoverPattern
|
||||||
Business Name *
|
title="How It Works"
|
||||||
</label>
|
description="Our simple three-step process gets your business online and attracting customers fast."
|
||||||
<input
|
tag="The Process"
|
||||||
type="text"
|
tagAnimation="slide-up"
|
||||||
id="businessName"
|
animationType="slide-up"
|
||||||
name="businessName"
|
textboxLayout="default"
|
||||||
value={formData.businessName}
|
useInvertedBackground={false}
|
||||||
onChange={handleChange}
|
features={[
|
||||||
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"
|
icon: Lightbulb,
|
||||||
placeholder="Your Business Name"
|
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."
|
||||||
/>
|
},
|
||||||
</div>
|
{
|
||||||
|
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>
|
<div id="testimonials" data-section="testimonials">
|
||||||
<label htmlFor="phone" className="block text-sm font-medium text-foreground mb-1">
|
<TestimonialCardSix
|
||||||
Phone Number
|
title="Real Results from Real Businesses"
|
||||||
</label>
|
description="Hear from business owners who transformed their online presence with Stratus Web Co."
|
||||||
<input
|
textboxLayout="default"
|
||||||
type="tel"
|
useInvertedBackground={false}
|
||||||
id="phone"
|
tag="Client Feedback"
|
||||||
name="phone"
|
tagAnimation="slide-up"
|
||||||
value={formData.phone}
|
animationType="slide-up"
|
||||||
onChange={handleChange}
|
speed={40}
|
||||||
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"
|
testimonials={[
|
||||||
placeholder="(555) 000-0000"
|
{
|
||||||
/>
|
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"
|
||||||
</div>
|
},
|
||||||
|
{
|
||||||
|
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>
|
<div id="cta" data-section="cta">
|
||||||
<label htmlFor="businessType" className="block text-sm font-medium text-foreground mb-1">
|
<ContactSplitForm
|
||||||
Business Type *
|
title="See Your Free Demo Website Today"
|
||||||
</label>
|
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."
|
||||||
<select
|
useInvertedBackground={false}
|
||||||
id="businessType"
|
inputs={[
|
||||||
name="businessType"
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||||
value={formData.businessType}
|
{ name: "email", type: "email", placeholder: "your@business.com", required: true },
|
||||||
onChange={handleChange}
|
{ name: "businessName", type: "text", placeholder: "Business Name", required: true },
|
||||||
required
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||||
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"
|
]}
|
||||||
>
|
textarea={{
|
||||||
<option value="">Select your business type</option>
|
name: "message", placeholder: "Tell us about your business (optional)", rows: 4
|
||||||
<option value="restaurant">Restaurant/Cafe</option>
|
}}
|
||||||
<option value="fitness">Fitness/Gym</option>
|
buttonText="Request Free Demo"
|
||||||
<option value="salon">Salon/Spa</option>
|
onSubmit={handleDemoSubmit}
|
||||||
<option value="retail">Retail Shop</option>
|
mediaAnimation="slide-up"
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
@@ -199,19 +181,24 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
title: "Navigate", items: [
|
title: "Navigate", items: [
|
||||||
{ label: "Home", href: "#" },
|
{ 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: [
|
title: "Company", items: [
|
||||||
{ label: "About Us", href: "#" },
|
{ label: "About Us", href: "#about" },
|
||||||
{ label: "Contact", href: "#form" }
|
{ label: "Blog", href: "https://blog.stratus.com" },
|
||||||
|
{ label: "Contact", href: "#cta" },
|
||||||
|
{ label: "Careers", href: "https://careers.stratus.com" }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Legal", items: [
|
title: "Legal", items: [
|
||||||
{ label: "Privacy Policy", href: "#" },
|
{ 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