Switch to version 1: modified src/app/page.tsx
This commit is contained in:
322
src/app/page.tsx
322
src/app/page.tsx
@@ -2,49 +2,16 @@
|
||||
|
||||
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 ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -63,134 +30,160 @@ 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="Your Website Should Bring Customers In"
|
||||
description="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={[
|
||||
{
|
||||
name: "Maria Rodriguez", handle: "Owner, Local Cafe", testimonial: "More customers found us online within the first month. Simple and effective.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1"
|
||||
},
|
||||
{
|
||||
name: "James Chen", handle: "Gym Manager", testimonial: "Clear, professional design that actually converts. Best investment we made.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg"
|
||||
},
|
||||
{
|
||||
name: "Sarah Thompson", handle: "Service Business Owner", testimonial: "No jargon, no confusion. They delivered exactly what we needed.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-pretty-girl-plaid-shirt-posing_114579-70643.jpg"
|
||||
},
|
||||
{
|
||||
name: "David Kim", handle: "Restaurant Owner", testimonial: "The free demo convinced us immediately. Transparent and professional.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
|
||||
}
|
||||
]}
|
||||
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">
|
||||
<ContactSplit
|
||||
tag="Get Started"
|
||||
tagIcon={Rocket}
|
||||
tagAnimation="slide-up"
|
||||
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."
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/digital-devices-screen-editable_24972-2368.jpg"
|
||||
imageAlt="Website mockup on devices"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="your@business.com"
|
||||
buttonText="Request Free Demo"
|
||||
termsText="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."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
@@ -199,19 +192,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