10 Commits

Author SHA1 Message Date
6a41182e03 Merge version_6 into main
Merge version_6 into main
2026-05-06 15:33:46 +00:00
5752a52802 Update src/app/page.tsx 2026-05-06 15:33:40 +00:00
d8f4c01867 Merge version_5 into main
Merge version_5 into main
2026-05-06 15:32:00 +00:00
61724b1521 Update src/app/styles/base.css 2026-05-06 15:31:57 +00:00
b8a86cf3e6 Update src/app/layout.tsx 2026-05-06 15:31:57 +00:00
00ed237840 Merge version_4 into main
Merge version_4 into main
2026-05-06 15:29:15 +00:00
d82cafbc75 Update src/app/page.tsx 2026-05-06 15:29:12 +00:00
e90f11ddc1 Merge version_3 into main
Merge version_3 into main
2026-05-06 15:26:03 +00:00
f3ccd8d0d9 Update src/app/page.tsx 2026-05-06 15:26:00 +00:00
e8b3694622 Merge version_2 into main
Merge version_2 into main
2026-05-06 15:24:51 +00:00
3 changed files with 122 additions and 117 deletions

View File

@@ -6,20 +6,17 @@ import "@/lib/gsap-setup";
import { ServiceWrapper } from "@/components/ServiceWrapper"; import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag"; import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script"; import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Playfair_Display } from "next/font/google";
const halant = Halant({
variable: "--font-halant",
subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
});
export const metadata: Metadata = { title: 'Webild SaaS | High-Performance Landing Page Templates', description: 'Accelerate your SaaS growth with Webild\'s high-conversion, responsive landing page templates. Built for performance, scalability, and modern design.' }; export const metadata: Metadata = { title: 'Webild SaaS | High-Performance Landing Page Templates', description: 'Accelerate your SaaS growth with Webild\'s high-conversion, responsive landing page templates. Built for performance, scalability, and modern design.' };
const playfairDisplay = Playfair_Display({
variable: "--font-playfair-display", subsets: ["latin"],
weight: ["400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
@@ -28,9 +25,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<ServiceWrapper> <ServiceWrapper>
<body <body className={`${playfairDisplay.variable} antialiased`}>
className={`${halant.variable} ${inter.variable} antialiased`}
>
<Tag /> <Tag />
{children} {children}
<script <script

View File

@@ -48,63 +48,69 @@ export default function SaasTemplatePage() {
<ReactLenis root> <ReactLenis root>
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
navItems={navItems} navItems={navItems}
brandName="GROWTHENGINE CRM" brandName="GROWTHENGINECRM"
button={{ text: "Get Started", href: "#" }} button={{ text: "Get Started", href: "#" }}
/> />
<HeroCentered <div id="hero">
background={{ variant: "rotated-rays-animated-grid" }} <HeroCentered
avatars={avatars} background={{ variant: "rotated-rays-animated-grid" }}
avatarText="Trusted by 1000+ users" avatars={avatars}
title="Build Modern Web Experiences-Out of the world california apple" avatarText="Trusted by 1000+ users"
description="Create stunning, responsive websites with our comprehensive component library designed" title="An all-in-one platform designed to help your business grow and thrive"
buttons={[ description="All the tools your business needs websites, online courses, automation, CRM, and more running 24/7, 365 days a year, to help you attract, convert, and scale with ease."
{ buttons={[
text: "Get Started", onClick: () => console.log("Get Started clicked"), {
}, text: "Get Started", onClick: () => console.log("Get Started clicked"),
{ },
text: "Learn More", onClick: () => console.log("Learn More clicked"), {
}, text: "Learn More", onClick: () => console.log("Learn More clicked"),
]} },
marqueeItems={[ ]}
{ type: "text-icon", text: "Lightning Fast", icon: Zap }, marqueeItems={[
{ type: "text-icon", text: "Enterprise Security", icon: Shield }, { type: "text-icon", text: "Lightning Fast", icon: Zap },
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket }, { type: "text-icon", text: "Enterprise Security", icon: Shield },
{ type: "text-icon", text: "Precision Targeting", icon: Target }, { type: "text-icon", text: "99.9% Uptime", icon: Rocket },
{ type: "text-icon", text: "AI Powered", icon: Sparkles }, { type: "text-icon", text: "Precision Targeting", icon: Target },
]} { type: "text-icon", text: "AI Powered", icon: Sparkles },
/> ]}
<FeatureBento />
features={features} </div>
animationType="none" <div id="features">
tag="Features" <FeatureBento
title="Powerful Features" features={features}
description="Everything you need to build and scale your product" animationType="none"
textboxLayout="default" tag="Features"
useInvertedBackground={false} title="Powerful Features"
/> description="Everything you need to build and scale your product"
<FeatureBorderGlow textboxLayout="default"
tag="Why Choose Us" useInvertedBackground={false}
tagIcon={Users} />
title="Built by developers, for developers" </div>
description="We understand the challenges of modern software development because we face them every day." <div id="about">
animationType="slide-up" <FeatureBorderGlow
textboxLayout="default" tag="Why Choose Us"
useInvertedBackground={false} tagIcon={Users}
features={[ title="Built by developers, for developers"
{ description="We understand the challenges of modern software development because we face them every day."
icon: Layers, animationType="slide-up"
title: "Modular Architecture", description: "Build with composable components that scale with your needs"}, textboxLayout="default"
{ useInvertedBackground={false}
icon: Code, features={[
title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"}, {
{ icon: Layers,
icon: Shield, title: "Modular Architecture", description: "Build with composable components that scale with your needs"},
title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"}, {
{ icon: Code,
icon: Rocket, title: "Developer Experience", description: "Clean APIs and comprehensive documentation for faster development"},
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"}, {
]} icon: Shield,
/> title: "Enterprise Security", description: "Bank-level encryption and compliance with industry standards"},
{
icon: Rocket,
title: "Lightning Fast", description: "Optimized for performance with sub-second response times"},
]}
/>
</div>
<TestimonialCardFifteen <TestimonialCardFifteen
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched." testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
rating={5} rating={5}
@@ -114,54 +120,58 @@ export default function SaasTemplatePage() {
avatarsAnimation="slide-up" avatarsAnimation="slide-up"
useInvertedBackground={false} useInvertedBackground={false}
/> />
<PricingCardEight <div id="pricing">
tag="Pricing" <PricingCardEight
tagIcon={Sparkles} tag="Pricing"
title="Simple, transparent pricing" tagIcon={Sparkles}
description="Choose the plan that works best for you. All plans include a 14-day free trial." title="Simple, transparent pricing"
animationType="opacity" description="Choose the plan that works best for you. All plans include a 14-day free trial."
textboxLayout="default" animationType="opacity"
useInvertedBackground={false} textboxLayout="default"
plans={[ useInvertedBackground={false}
{ plans={[
id: "starter", badge: "Starter", badgeIcon: Zap, {
price: "$19/mo", subtitle: "Perfect for individuals", buttons: [ id: "starter", badge: "Starter", badgeIcon: Zap,
{ text: "Get Started", onClick: () => console.log("Starter clicked") }, price: "$19/mo", subtitle: "Perfect for individuals", buttons: [
], { text: "Get Started", onClick: () => console.log("Starter clicked") },
features: [ ],
"Up to 5 projects", "Basic analytics", "24/7 email support", "API access"], features: [
}, "Up to 5 projects", "Basic analytics", "24/7 email support", "API access"],
{ },
id: "pro", badge: "Pro", badgeIcon: Rocket, {
price: "$49/mo", subtitle: "For growing teams", buttons: [ id: "pro", badge: "Pro", badgeIcon: Rocket,
{ text: "Get Started", onClick: () => console.log("Pro clicked") }, price: "$49/mo", subtitle: "For growing teams", buttons: [
], { text: "Get Started", onClick: () => console.log("Pro clicked") },
features: [ ],
"Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"], features: [
}, "Unlimited projects", "Advanced analytics", "Priority support", "Custom integrations", "Team collaboration"],
{ },
id: "enterprise", badge: "Enterprise", badgeIcon: Crown, {
price: "$99/mo", subtitle: "For large organizations", buttons: [ id: "enterprise", badge: "Enterprise", badgeIcon: Crown,
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") }, price: "$99/mo", subtitle: "For large organizations", buttons: [
], { text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
features: [ ],
"Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"], features: [
}, "Everything in Pro", "Dedicated account manager", "Custom SLA", "On-premise deployment", "Advanced security"],
]} },
/> ]}
<ContactCenter />
tag="Contact" </div>
tagIcon={Mail} <div id="contact">
title="Ready to get started?" <ContactCenter
description="Join thousands of developers building better products with our platform." tag="Contact"
background={{ variant: "animated-grid" }} tagIcon={Mail}
useInvertedBackground={false} title="Ready to get started?"
inputPlaceholder="Enter your email" description="Join thousands of developers building better products with our platform."
buttonText="Get Early Access" background={{ variant: "animated-grid" }}
onSubmit={(email) => console.log("Email submitted:", email)} useInvertedBackground={false}
/> inputPlaceholder="Enter your email"
buttonText="Get Early Access"
onSubmit={(email) => console.log("Email submitted:", email)}
/>
</div>
<FooterBaseReveal <FooterBaseReveal
logoText="GROWTHENGINE CRM" logoText="GROWTHENGINECRM"
columns={[ columns={[
{ {
title: "Product", items: [ title: "Product", items: [
@@ -195,7 +205,7 @@ export default function SaasTemplatePage() {
], ],
}, },
]} ]}
copyrightText="2024 GROWTHENGINE CRM. All rights reserved." copyrightText="2024 GROWTHENGINECRM. All rights reserved."
/> />
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>

View File

@@ -11,7 +11,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-playfair-display), sans-serif;
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
overscroll-behavior: none; overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: var(--font-inter-tight), sans-serif; font-family: var(--font-playfair-display), sans-serif;
} }