Merge version_6 into main

Merge version_6 into main
This commit was merged in pull request #8.
This commit is contained in:
2026-03-14 18:21:04 +00:00
2 changed files with 142 additions and 2 deletions

View File

@@ -33,7 +33,8 @@ export default function LandingPage() {
navItems={[
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" }
{ name: "About", id: "about" },
{ name: "Pricing", id: "pricing" }
]}
button={{ text: "Get Started", href: "#contact" }}
/>
@@ -235,6 +236,7 @@ export default function LandingPage() {
{ label: "Home", href: "/" },
{ label: "Services", href: "#services" },
{ label: "Portfolio", href: "#portfolio" },
{ label: "Pricing", href: "/pricing" },
{ label: "About", href: "#about" }
]
},
@@ -261,4 +263,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}

138
src/app/pricing/page.tsx Normal file
View File

@@ -0,0 +1,138 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CheckCircle, Sparkles } from 'lucide-react';
export default function PricingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="Webild Design Studio"
navItems={[
{ name: "Services", id: "services" },
{ name: "Portfolio", id: "portfolio" },
{ name: "About", id: "about" },
{ name: "Pricing", id: "pricing" }
]}
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="pricing" data-section="pricing" className="relative">
<PricingCardEight
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your web design needs. All plans include ongoing support and revisions."
plans={[
{
id: "starter", badge: "Starter", badgeIcon: Sparkles,
price: "$2,500", subtitle: "Perfect for small businesses getting started online", buttons: [
{ text: "Choose Plan", href: "#contact" }
],
features: [
"5-page responsive website", "Mobile-first design", "Basic SEO optimization", "Contact form integration", "3 rounds of revisions", "30-day support included", "SSL certificate included"
]
},
{
id: "professional", badge: "Professional", badgeIcon: CheckCircle,
price: "$5,500", subtitle: "Ideal for growing businesses with advanced requirements", buttons: [
{ text: "Choose Plan", href: "#contact" }
],
features: [
"Up to 15-page custom website", "Advanced responsive design", "Comprehensive SEO strategy", "E-commerce integration", "Blog setup and optimization", "5 rounds of revisions", "90-day support included", "Analytics setup", "Custom animations and effects"
]
},
{
id: "enterprise", badge: "Enterprise", badgeIcon: CheckCircle,
price: "Custom", subtitle: "Tailored solutions for large-scale digital transformation", buttons: [
{ text: "Request Quote", href: "#contact" }
],
features: [
"Unlimited pages and custom functionality", "Full design system development", "Advanced SEO and SEM strategy", "Complex integrations and APIs", "CMS implementation", "Unlimited revisions", "6-month dedicated support", "Performance optimization", "Security audit and hardening", "Ongoing maintenance retainer"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tag="Pricing Plans"
tagIcon={Sparkles}
tagAnimation="slide-up"
className="relative"
containerClassName="max-w-7xl mx-auto px-4 py-16 md:py-24"
textBoxTitleClassName="text-4xl md:text-5xl font-bold mb-4 text-center"
textBoxDescriptionClassName="text-lg text-center text-opacity-80 mb-12"
/>
</div>
<div id="contact" data-section="contact" className="relative">
<ContactText
text="Ready to get started? Our team is here to help you choose the right plan and answer any questions you may have. Let's discuss your project and create a custom proposal if needed."
animationType="entrance-slide"
buttons={[
{ text: "Send Us a Message", href: "mailto:hello@webild-design.com" },
{ text: "Schedule a Consultation", href: "#" }
]}
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
ariaLabel="Contact us section"
className="relative"
containerClassName="max-w-4xl mx-auto px-4 py-20 md:py-32"
contentClassName="text-center"
textClassName="text-3xl md:text-4xl font-bold mb-8"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mt-8"
/>
</div>
<div id="footer" data-section="footer" className="relative border-t border-opacity-20">
<FooterLogoEmphasis
logoText="Webild Design Studio"
columns={[
{
items: [
{ label: "Home", href: "/" },
{ label: "Services", href: "/#services" },
{ label: "Portfolio", href: "/#portfolio" },
{ label: "Pricing", href: "/pricing" },
{ label: "About", href: "/#about" }
]
},
{
items: [
{ label: "Contact", href: "/#contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" }
]
},
{
items: [
{ label: "Email", href: "mailto:hello@webild-design.com" },
{ label: "Phone", href: "tel:+1-850-555-0123" },
{ label: "Northwest Florida", href: "#" },
{ label: "Serving USA", href: "#" }
]
}
]}
ariaLabel="Site footer"
className="relative"
containerClassName="max-w-7xl mx-auto px-4 py-16"
/>
</div>
</ThemeProvider>
);
}