@nextworks/blocks-templates 0.2.0-alpha.2 → 0.2.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -3
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/templates/digitalagency/Page.d.ts +3 -0
- package/dist/templates/digitalagency/Page.d.ts.map +1 -1
- package/dist/templates/digitalagency/Page.jsx +35 -0
- package/dist/templates/digitalagency/PresetThemeVars.d.ts.map +1 -1
- package/dist/templates/digitalagency/PresetThemeVars.jsx +33 -0
- package/dist/templates/digitalagency/components/About.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/About.jsx +45 -0
- package/dist/templates/digitalagency/components/CTA.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/CTA.jsx +29 -0
- package/dist/templates/digitalagency/components/Contact.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Contact.jsx +92 -0
- package/dist/templates/digitalagency/components/Footer.d.ts +8 -0
- package/dist/templates/digitalagency/components/Footer.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Footer.jsx +60 -0
- package/dist/templates/digitalagency/components/Hero.d.ts +6 -0
- package/dist/templates/digitalagency/components/Hero.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Hero.jsx +64 -0
- package/dist/templates/digitalagency/components/Navbar.d.ts +22 -0
- package/dist/templates/digitalagency/components/Navbar.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Navbar.jsx +87 -0
- package/dist/templates/digitalagency/components/NetworkPattern.d.ts +7 -0
- package/dist/templates/digitalagency/components/NetworkPattern.d.ts.map +1 -0
- package/dist/templates/digitalagency/components/NetworkPattern.jsx +120 -0
- package/dist/templates/digitalagency/components/Portfolio.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Portfolio.jsx +112 -0
- package/dist/templates/digitalagency/components/Pricing.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Pricing.jsx +86 -0
- package/dist/templates/digitalagency/components/Process.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Process.jsx +42 -0
- package/dist/templates/digitalagency/components/Services.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Services.jsx +38 -0
- package/dist/templates/digitalagency/components/Team.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Team.jsx +16 -0
- package/dist/templates/digitalagency/components/Testimonials.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Testimonials.jsx +42 -0
- package/dist/templates/gallery/Page.d.ts +2 -0
- package/dist/templates/gallery/PresetThemeVars.d.ts +14 -0
- package/dist/templates/gallery/PresetThemeVars.d.ts.map +1 -1
- package/dist/templates/gallery/PresetThemeVars.jsx +36 -0
- package/dist/templates/gallery/page.d.ts.map +1 -1
- package/dist/templates/gallery/page.jsx +281 -0
- package/dist/templates/productlaunch/Page.d.ts.map +1 -1
- package/dist/templates/productlaunch/Page.jsx +44 -0
- package/dist/templates/productlaunch/PresetThemeVars.d.ts +17 -0
- package/dist/templates/productlaunch/PresetThemeVars.d.ts.map +1 -1
- package/dist/templates/productlaunch/PresetThemeVars.jsx +33 -0
- package/dist/templates/productlaunch/components/About.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/About.jsx +57 -0
- package/dist/templates/productlaunch/components/CTA.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/CTA.jsx +37 -0
- package/dist/templates/productlaunch/components/Contact.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Contact.jsx +95 -0
- package/dist/templates/productlaunch/components/FAQ.d.ts +5 -0
- package/dist/templates/productlaunch/components/FAQ.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/FAQ.jsx +59 -0
- package/dist/templates/productlaunch/components/Features.d.ts +5 -0
- package/dist/templates/productlaunch/components/Features.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Features.jsx +52 -0
- package/dist/templates/productlaunch/components/Footer.d.ts +5 -0
- package/dist/templates/productlaunch/components/Footer.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Footer.jsx +104 -0
- package/dist/templates/productlaunch/components/Hero.d.ts +5 -0
- package/dist/templates/productlaunch/components/Hero.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Hero.jsx +70 -0
- package/dist/templates/productlaunch/components/Navbar.d.ts +25 -0
- package/dist/templates/productlaunch/components/Navbar.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Navbar.jsx +84 -0
- package/dist/templates/productlaunch/components/Pricing.d.ts +5 -0
- package/dist/templates/productlaunch/components/Pricing.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Pricing.jsx +78 -0
- package/dist/templates/productlaunch/components/ProcessTimeline.d.ts +5 -0
- package/dist/templates/productlaunch/components/ProcessTimeline.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/ProcessTimeline.jsx +64 -0
- package/dist/templates/productlaunch/components/ServicesGrid.d.ts +5 -0
- package/dist/templates/productlaunch/components/ServicesGrid.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/ServicesGrid.jsx +42 -0
- package/dist/templates/productlaunch/components/Team.d.ts +5 -0
- package/dist/templates/productlaunch/components/Team.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Team.jsx +73 -0
- package/dist/templates/productlaunch/components/Testimonials.d.ts +6 -0
- package/dist/templates/productlaunch/components/Testimonials.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Testimonials.jsx +57 -0
- package/dist/templates/productlaunch/components/TrustBadges.d.ts +5 -0
- package/dist/templates/productlaunch/components/TrustBadges.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/TrustBadges.jsx +51 -0
- package/dist/templates/saasdashboard/Page.d.ts +2 -0
- package/dist/templates/saasdashboard/Page.d.ts.map +1 -1
- package/dist/templates/saasdashboard/Page.jsx +37 -0
- package/dist/templates/saasdashboard/PresetThemeVars.d.ts.map +1 -1
- package/dist/templates/saasdashboard/PresetThemeVars.jsx +31 -0
- package/dist/templates/saasdashboard/components/Contact.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Contact.jsx +92 -0
- package/dist/templates/saasdashboard/components/Dashboard.d.ts.map +1 -0
- package/dist/templates/saasdashboard/components/Dashboard.jsx +170 -0
- package/dist/templates/saasdashboard/components/FAQ.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/FAQ.jsx +36 -0
- package/dist/templates/saasdashboard/components/Features.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Features.jsx +54 -0
- package/dist/templates/saasdashboard/components/Footer.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Footer.jsx +53 -0
- package/dist/templates/saasdashboard/components/Hero.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Hero.jsx +71 -0
- package/dist/templates/saasdashboard/components/Hero_mask.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Hero_mask.jsx +86 -0
- package/dist/templates/saasdashboard/components/Navbar.d.ts +25 -0
- package/dist/templates/saasdashboard/components/Navbar.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Navbar.jsx +85 -0
- package/dist/templates/saasdashboard/components/Pricing.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Pricing.jsx +66 -0
- package/dist/templates/saasdashboard/components/SmoothScroll.d.ts.map +1 -0
- package/dist/templates/saasdashboard/components/SmoothScroll.jsx +87 -0
- package/dist/templates/saasdashboard/components/Testimonials.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Testimonials.jsx +41 -0
- package/dist/templates/saasdashboard/components/TrustBadges.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/TrustBadges.jsx +38 -0
- package/package.json +34 -34
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
"use client";
|
|
4
|
+
import { About } from "@nextworks/blocks-sections";
|
|
5
|
+
import { Contact } from "@nextworks/blocks-sections";
|
|
6
|
+
import { CTA } from "@nextworks/blocks-sections";
|
|
7
|
+
import { FAQ } from "@nextworks/blocks-sections";
|
|
8
|
+
import { Features } from "@nextworks/blocks-sections";
|
|
9
|
+
import { Footer } from "@nextworks/blocks-sections";
|
|
10
|
+
import { HeroMotion } from "@nextworks/blocks-sections";
|
|
11
|
+
import { HeroOverlay } from "@nextworks/blocks-sections";
|
|
12
|
+
import { HeroSplit } from "@nextworks/blocks-sections";
|
|
13
|
+
import { Navbar } from "@nextworks/blocks-sections";
|
|
14
|
+
import { Newsletter } from "@nextworks/blocks-sections";
|
|
15
|
+
import { PortfolioSimple } from "@nextworks/blocks-sections";
|
|
16
|
+
import { Pricing } from "@nextworks/blocks-sections";
|
|
17
|
+
import { ProcessTimeline } from "@nextworks/blocks-sections";
|
|
18
|
+
import { ServicesGrid } from "@nextworks/blocks-sections";
|
|
19
|
+
import { Team } from "@nextworks/blocks-sections";
|
|
20
|
+
import { Testimonials } from "@nextworks/blocks-sections";
|
|
21
|
+
import { ThemeSelector } from "@nextworks/blocks-core";
|
|
22
|
+
import { TrustBadges } from "@nextworks/blocks-sections";
|
|
23
|
+
import { PresetThemeVars } from "./PresetThemeVars";
|
|
24
|
+
export function Gallery() {
|
|
25
|
+
const defaultFeaturesData = [
|
|
26
|
+
{
|
|
27
|
+
imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626431.jpg",
|
|
28
|
+
imageAlt: "Advanced Analytics Dashboard",
|
|
29
|
+
headingText: "Advanced Analytics",
|
|
30
|
+
subheadingText: "Get deep insights into your business performance with our comprehensive analytics dashboard that tracks key metrics and provides actionable recommendations.",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626432.jpg",
|
|
34
|
+
imageAlt: "Real-time Collaboration Tools",
|
|
35
|
+
headingText: "Real-time Collaboration",
|
|
36
|
+
subheadingText: "Work seamlessly with your team using our real-time collaboration tools that keep everyone in sync and boost productivity across all projects.",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626434.jpg",
|
|
40
|
+
imageAlt: "Secure Data Management",
|
|
41
|
+
headingText: "Secure Data Management",
|
|
42
|
+
subheadingText: "Protect your sensitive information with enterprise-grade security features including encryption, access controls, and compliance monitoring.",
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
imageSrc: "/placeholders/gallery/pexels-googledeepmind-25626436.jpg",
|
|
46
|
+
imageAlt: "Mobile-First Design",
|
|
47
|
+
headingText: "Mobile-First Design",
|
|
48
|
+
subheadingText: "Access your data and manage your workflow from anywhere with our responsive, mobile-optimized interface that works perfectly on all devices.",
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
const BrandNode = (<>
|
|
52
|
+
<ThemeSelector ariaLabel="Demo: Color theme" label="" className="mr-2"/>
|
|
53
|
+
|
|
54
|
+
{/* <ThemeSelector /> */}
|
|
55
|
+
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-gradient-to-br from-zinc-900 via-zinc-700 to-zinc-500 text-xs font-bold text-white shadow-sm dark:from-zinc-100 dark:via-zinc-300 dark:to-zinc-500 dark:text-zinc-900">
|
|
56
|
+
NW
|
|
57
|
+
</div>
|
|
58
|
+
</>);
|
|
59
|
+
return (<PresetThemeVars>
|
|
60
|
+
<div className="component-gallery">
|
|
61
|
+
{/* Navigation */}
|
|
62
|
+
<Navbar container={{ className: "max-w-7xl mx-auto" }} mobileMenu={{
|
|
63
|
+
className: "border-t border-border md:block lg:hidden",
|
|
64
|
+
}} desktopMenu={{
|
|
65
|
+
className: "hidden md:hidden lg:flex items-center space-x-1 lg:space-x-0",
|
|
66
|
+
}} id="site-navigation" brand="Nextworks" brandNode={BrandNode} menuItems={[
|
|
67
|
+
{ label: "Hero", href: "#hero-product-demo" },
|
|
68
|
+
{ label: "Trust", href: "#trust" },
|
|
69
|
+
{ label: "Features", href: "#features" },
|
|
70
|
+
{ label: "About", href: "#about-process" },
|
|
71
|
+
{ label: "Work", href: "#portfolio-team" },
|
|
72
|
+
{ label: "Testimonials", href: "#testimonials" },
|
|
73
|
+
{ label: "Pricing", href: "#pricing" },
|
|
74
|
+
{ label: "FAQ", href: "#faq" },
|
|
75
|
+
{ label: "CTA", href: "#cta" },
|
|
76
|
+
{ label: "Contact", href: "#contact" },
|
|
77
|
+
]} links={{
|
|
78
|
+
className: "text-base font-normal text-foreground hover:text-gray-500 dark:hover:text-gray-400 transition-colors",
|
|
79
|
+
}} ctaButton={null}/>
|
|
80
|
+
{/* Hero Sections */}
|
|
81
|
+
<div id="hero-sections" className="scroll-mt-16">
|
|
82
|
+
<div className="relative pt-4 sm:pt-5 mb-10">
|
|
83
|
+
<HeroOverlay heading="Forecast The Next Move" subheading="Predict demand, personalize journeys, and scale impact with AI-guided insights your team can use today." cta1={{
|
|
84
|
+
label: "Try It Free",
|
|
85
|
+
href: "#hero-sections",
|
|
86
|
+
className: "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
|
|
87
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
88
|
+
"hover:[--btn-hover-fg:var(--primary-foreground)]",
|
|
89
|
+
}} cta2={{
|
|
90
|
+
label: "See Demo",
|
|
91
|
+
href: "#hero-sections",
|
|
92
|
+
className: "border [&:where(button)]:border " +
|
|
93
|
+
"[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
|
|
94
|
+
"[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
|
|
95
|
+
"[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
|
|
96
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
|
|
97
|
+
"dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
|
|
98
|
+
"hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
|
|
99
|
+
}}
|
|
100
|
+
// Set ring color on the CTA container so both buttons share it
|
|
101
|
+
ctaContainer={{
|
|
102
|
+
className: "flex flex-col sm:flex-row gap-4 mt-6 justify-center items-center [--btn-ring:var(--ring)]",
|
|
103
|
+
}} image={{
|
|
104
|
+
src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
|
|
105
|
+
}}/>
|
|
106
|
+
</div>
|
|
107
|
+
<div className="relative pt-3 sm:pt-4 mb-10">
|
|
108
|
+
<HeroMotion actions={{
|
|
109
|
+
className: "mt-8 flex items-center justify-center gap-3 [--btn-ring:var(--ring)]",
|
|
110
|
+
}} primaryButtonStyle={{
|
|
111
|
+
size: "lg",
|
|
112
|
+
variant: "default",
|
|
113
|
+
className: "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
|
|
114
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
115
|
+
"hover:[--btn-hover-fg:var(--primary-foreground)]",
|
|
116
|
+
}} secondaryButtonStyle={{
|
|
117
|
+
size: "lg",
|
|
118
|
+
variant: "outline",
|
|
119
|
+
className: "border [&:where(button)]:border " +
|
|
120
|
+
"[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
|
|
121
|
+
"[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
|
|
122
|
+
"[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
|
|
123
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
|
|
124
|
+
"dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
|
|
125
|
+
"hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
|
|
126
|
+
}} primaryCta={{ label: "Get Started", href: "#hero-sections" }} secondaryCta={{ label: "See Demo", href: "#hero-sections" }}/>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div className="relative pt-4 sm:pt-5">
|
|
130
|
+
<HeroSplit section={{ className: "bg-muted" }} heading="Confident Decisions, On Demand" subheading="Reliable data when you need it." cta1={{
|
|
131
|
+
label: "Start Free Trial",
|
|
132
|
+
href: "#hero-sections",
|
|
133
|
+
className: "[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
|
|
134
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
135
|
+
"hover:[--btn-hover-fg:var(--primary-foreground)]",
|
|
136
|
+
}} cta2={{
|
|
137
|
+
label: "View Sample Report",
|
|
138
|
+
href: "#hero-sections",
|
|
139
|
+
className: "border [&:where(button)]:border " +
|
|
140
|
+
"[--btn-bg:transparent] dark:[--btn-bg:transparent] " +
|
|
141
|
+
"[--btn-fg:var(--primary)] dark:[--btn-fg:var(--primary)] " +
|
|
142
|
+
"[--btn-border:var(--primary)] dark:[--btn-border:var(--primary)] " +
|
|
143
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_15%,transparent)] " +
|
|
144
|
+
"dark:hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_18%,transparent)] " +
|
|
145
|
+
"hover:[--btn-hover-fg:var(--primary)] dark:hover:[--btn-hover-fg:var(--primary)]",
|
|
146
|
+
}} buttonsContainer={{
|
|
147
|
+
className: "flex flex-col md:flex-row gap-4 mt-6 [--btn-ring:var(--ring)]",
|
|
148
|
+
}} image={{
|
|
149
|
+
src: "/placeholders/gallery/hero-pexels-broken-9945014.avif",
|
|
150
|
+
}} imageLayout="full-bleed"/>
|
|
151
|
+
</div>
|
|
152
|
+
{/* */}
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
{/* Trust & Social Proof */}
|
|
156
|
+
<div id="trust" className="scroll-mt-16">
|
|
157
|
+
<div className="relative pt-0">
|
|
158
|
+
<TrustBadges section={{
|
|
159
|
+
className: "py-8 px-6 bg-[color-mix(in_oklab,var(--muted)_94%,black)] dark:bg-[color-mix(in_oklab,var(--muted)_90%,white)]",
|
|
160
|
+
}}/>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
{/* Features & Services */}
|
|
165
|
+
<div id="features" className="scroll-mt-16">
|
|
166
|
+
<div className="relative pt-3 sm:pt-4">
|
|
167
|
+
<Features featuresData={defaultFeaturesData}></Features>
|
|
168
|
+
</div>
|
|
169
|
+
<div className="relative pt-4 sm:pt-5 mb-0">
|
|
170
|
+
<ServicesGrid />
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
{/* About & Process */}
|
|
175
|
+
<div id="about-process" className="scroll-mt-16">
|
|
176
|
+
<div className="relative pt-0">
|
|
177
|
+
<About animateStats={false}/>
|
|
178
|
+
</div>
|
|
179
|
+
<div className="relative pt-0 mb-0">
|
|
180
|
+
<ProcessTimeline />
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
{/* Portfolio & Team */}
|
|
185
|
+
<div id="portfolio-team" className="scroll-mt-16">
|
|
186
|
+
<div className="relative pt-3 sm:pt-4">
|
|
187
|
+
<PortfolioSimple />
|
|
188
|
+
</div>
|
|
189
|
+
<div className="relative pt-4 sm:pt-5 mb-0">
|
|
190
|
+
<Team />
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
{/* Testimonials */}
|
|
195
|
+
<div id="testimonials" className="scroll-mt-16">
|
|
196
|
+
<div className="relative pt-0 mb-0">
|
|
197
|
+
<Testimonials />
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
{/* Pricing */}
|
|
202
|
+
<div id="pricing" className="scroll-mt-16">
|
|
203
|
+
<div className="relative pt-3 sm:pt-4 mb-0">
|
|
204
|
+
<Pricing />
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
{/* FAQ */}
|
|
209
|
+
<div id="faq" className="scroll-mt-16">
|
|
210
|
+
<div className="relative pt-4 sm:pt-5 mb-0">
|
|
211
|
+
<FAQ questionButton={{
|
|
212
|
+
className:
|
|
213
|
+
// Distinct, theme-driven gradient tile + brand ring/border
|
|
214
|
+
"bg-gradient-to-r " +
|
|
215
|
+
"from-[var(--primary)] to-[color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
216
|
+
"hover:from-[color-mix(in_oklab,var(--primary)_92%,black)] " +
|
|
217
|
+
"hover:to-[color-mix(in_oklab,var(--primary)_95%,black)] " +
|
|
218
|
+
"text-[var(--primary-foreground)] p-5 cursor-pointer rounded-lg " +
|
|
219
|
+
"transition-all duration-200 flex items-center justify-between " +
|
|
220
|
+
"shadow-lg hover:shadow-xl hover:-translate-y-0.5 " +
|
|
221
|
+
// define ring/border vars and ensure a visible border if tokens apply
|
|
222
|
+
"[--btn-ring:var(--ring)] [--btn-border:var(--primary)] border [&:where(button)]:border",
|
|
223
|
+
}} answer={{
|
|
224
|
+
className: "bg-gradient-to-r " +
|
|
225
|
+
"from-[var(--secondary)] to-[color-mix(in_oklab,var(--secondary)_90%,white)] ",
|
|
226
|
+
}}/>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
{/* Call to Action */}
|
|
231
|
+
<div id="cta" className="scroll-mt-16">
|
|
232
|
+
<div className="relative pt-3 sm:pt-4 mb-0">
|
|
233
|
+
<CTA ctaButton={{ label: "Sign Up Now", href: "#contact" }} actionsWrapper={{
|
|
234
|
+
className: "mt-6 flex flex-col items-center gap-3 sm:flex-row [--btn-ring:var(--ring)]",
|
|
235
|
+
}} ctaButtonStyle={{
|
|
236
|
+
variant: "default",
|
|
237
|
+
size: "default",
|
|
238
|
+
className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
|
|
239
|
+
"[--btn-bg:var(--primary)] [--btn-fg:var(--primary-foreground)] " +
|
|
240
|
+
"hover:[--btn-hover-bg:color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
241
|
+
"hover:[--btn-hover-fg:var(--primary-foreground)]",
|
|
242
|
+
}}/>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
{/* Contact */}
|
|
247
|
+
<div id="contact" className="scroll-mt-16">
|
|
248
|
+
<div className="relative pt-4 sm:pt-5 mb-0">
|
|
249
|
+
<Contact submitButtonStyle={{
|
|
250
|
+
variant: "default",
|
|
251
|
+
size: "lg",
|
|
252
|
+
className: "w-full shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
|
|
253
|
+
// Match FAQ question button gradient + brand ring/border
|
|
254
|
+
"bg-gradient-to-r " +
|
|
255
|
+
"from-[var(--primary)] to-[color-mix(in_oklab,var(--primary)_88%,black)] " +
|
|
256
|
+
"hover:from-[color-mix(in_oklab,var(--primary)_92%,black)] " +
|
|
257
|
+
"hover:to-[color-mix(in_oklab,var(--primary)_95%,black)] " +
|
|
258
|
+
"text-[var(--primary-foreground)] " +
|
|
259
|
+
"[--btn-ring:var(--ring)] [--btn-border:var(--primary)] border [&:where(button)]:border",
|
|
260
|
+
}}/>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
{/* Newsletter */}
|
|
265
|
+
<div id="newsletter" className="scroll-mt-16">
|
|
266
|
+
<div className="relative pt-3 sm:pt-4 mb-0">
|
|
267
|
+
<Newsletter button={{
|
|
268
|
+
className: "!bg-[var(--primary)] hover:!bg-[color-mix(in_oklab,var(--primary)_90%,transparent)] !text-[var(--primary-foreground)] hover:!text-[var(--primary-background)]",
|
|
269
|
+
}}/>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
|
|
273
|
+
{/* Footer */}
|
|
274
|
+
<div id="footer">
|
|
275
|
+
<div className="relative pt-3 sm:pt-4 mb-0">
|
|
276
|
+
<Footer />
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</PresetThemeVars>);
|
|
281
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/Page.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/Page.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,gCA6BhC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
import { Navbar } from "./components/Navbar";
|
|
4
|
+
import { CTA } from "./components/CTA";
|
|
5
|
+
import { Hero } from "./components/Hero";
|
|
6
|
+
import { About } from "./components/About";
|
|
7
|
+
import { Pricing } from "./components/Pricing";
|
|
8
|
+
import { ProcessTimeline } from "./components/ProcessTimeline";
|
|
9
|
+
import { FAQ } from "./components/FAQ";
|
|
10
|
+
import { Contact } from "./components/Contact";
|
|
11
|
+
import { Footer } from "./components/Footer";
|
|
12
|
+
import { Testimonials } from "./components/Testimonials";
|
|
13
|
+
import { TrustBadges } from "./components/TrustBadges";
|
|
14
|
+
import { Features } from "./components/Features";
|
|
15
|
+
export function ProductLaunchPage() {
|
|
16
|
+
return (
|
|
17
|
+
// <PresetThemeVars>
|
|
18
|
+
<>
|
|
19
|
+
<Navbar />
|
|
20
|
+
<section id="home">
|
|
21
|
+
<Hero />
|
|
22
|
+
</section>
|
|
23
|
+
<TrustBadges />
|
|
24
|
+
<About />
|
|
25
|
+
<section id="features">
|
|
26
|
+
<Features />
|
|
27
|
+
<ProcessTimeline />
|
|
28
|
+
</section>
|
|
29
|
+
<Testimonials />
|
|
30
|
+
<CTA />
|
|
31
|
+
<section id="pricing">
|
|
32
|
+
<Pricing />
|
|
33
|
+
</section>
|
|
34
|
+
<section id="faq">
|
|
35
|
+
<FAQ />
|
|
36
|
+
</section>
|
|
37
|
+
<section id="contact">
|
|
38
|
+
<Contact />
|
|
39
|
+
</section>
|
|
40
|
+
<Footer />
|
|
41
|
+
</>
|
|
42
|
+
// </PresetThemeVars>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type Props = React.PropsWithChildren<{
|
|
3
|
+
className?: string;
|
|
4
|
+
}>;
|
|
5
|
+
/**
|
|
6
|
+
* ProductLaunch template theme variables wrapper.
|
|
7
|
+
* Not used by default for the ProductLaunch template.
|
|
8
|
+
*
|
|
9
|
+
* Sets a small CSS variable contract consumed by shared components
|
|
10
|
+
* (Buttons, Inputs, Cards, Badges, Footer, Table, etc.).
|
|
11
|
+
*
|
|
12
|
+
* You can override any variable per-section by re-declaring it on
|
|
13
|
+
* that section/container.
|
|
14
|
+
*/
|
|
15
|
+
export declare function PresetThemeVars({ className, children }: Props): React.JSX.Element;
|
|
16
|
+
export {};
|
|
17
|
+
//# sourceMappingURL=PresetThemeVars.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PresetThemeVars.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/PresetThemeVars.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PresetThemeVars.d.ts","sourceRoot":"","sources":["../../../src/templates/productlaunch/PresetThemeVars.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,KAAK,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE7D;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,qBA2D7D"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { cn } from "@nextworks/blocks-core";
|
|
5
|
+
/**
|
|
6
|
+
* ProductLaunch template theme variables wrapper.
|
|
7
|
+
* Not used by default for the ProductLaunch template.
|
|
8
|
+
*
|
|
9
|
+
* Sets a small CSS variable contract consumed by shared components
|
|
10
|
+
* (Buttons, Inputs, Cards, Badges, Footer, Table, etc.).
|
|
11
|
+
*
|
|
12
|
+
* You can override any variable per-section by re-declaring it on
|
|
13
|
+
* that section/container.
|
|
14
|
+
*/
|
|
15
|
+
export function PresetThemeVars({ className, children }) {
|
|
16
|
+
return (<div className={cn(
|
|
17
|
+
// Button ring shared across template
|
|
18
|
+
"[--btn-ring:theme(colors.purple.500)] dark:[--btn-ring:theme(colors.purple.400)]",
|
|
19
|
+
// Inputs (Contact)
|
|
20
|
+
"[--input-bg:theme(colors.white)] dark:[--input-bg:theme(colors.gray.900)]", "[--input-fg:theme(colors.gray.900)] dark:[--input-fg:theme(colors.gray.100)]", "[--input-placeholder:theme(colors.gray.400)] dark:[--input-placeholder:theme(colors.gray.500)]", "[--input-border:theme(colors.purple.200)] dark:[--input-border:theme(colors.purple.700)]", "[--input-focus-ring:theme(colors.purple.500)] dark:[--input-focus-ring:theme(colors.purple.400)]", "[--input-ring-offset:theme(colors.white)] dark:[--input-ring-offset:theme(colors.gray.900)]",
|
|
21
|
+
// Cards (Features, ServicesGrid, Pricing, Testimonials, etc.)
|
|
22
|
+
"[--card-bg:theme(colors.white)] dark:[--card-bg:theme(colors.gray.900)]", "[--card-fg:theme(colors.gray.900)] dark:[--card-fg:theme(colors.gray.100)]", "[--card-title-fg:theme(colors.gray.900)] dark:[--card-title-fg:theme(colors.gray.100)]", "[--card-muted-fg:theme(colors.gray.500)] dark:[--card-muted-fg:theme(colors.gray.400)]", "[--card-border:theme(colors.gray.200)] dark:[--card-border:theme(colors.gray.800)]", "[--card-shadow:0_6px_20px_rgba(0,0,0,0.06)]",
|
|
23
|
+
// Badges/Chips (Portfolio filters/tags, Pricing badge, Testimonials avatar)
|
|
24
|
+
"[--badge-bg:theme(colors.purple.50)] dark:[--badge-bg:theme(colors.purple.950)]", "[--badge-fg:theme(colors.purple.700)] dark:[--badge-fg:theme(colors.purple.300)]", "[--badge-border:theme(colors.purple.200)] dark:[--badge-border:theme(colors.purple.800)]", "[--badge-active-bg:theme(colors.purple.600)] dark:[--badge-active-bg:theme(colors.purple.500)]", "[--badge-active-fg:theme(colors.white)] dark:[--badge-active-fg:theme(colors.white)]", "[--badge-active-border:theme(colors.purple.700)] dark:[--badge-active-border:theme(colors.purple.400)]",
|
|
25
|
+
// Headings/Subheadings
|
|
26
|
+
"[--heading-fg:theme(colors.gray.900)] dark:[--heading-fg:theme(colors.gray.100)]", "[--subheading-fg:theme(colors.gray.600)] dark:[--subheading-fg:theme(colors.gray.300)]", "[--description-fg:theme(colors.gray.700)] dark:[--description-fg:theme(colors.gray.200)]",
|
|
27
|
+
// Footer
|
|
28
|
+
"[--footer-bg:transparent] dark:[--footer-bg:transparent]", "[--footer-fg:theme(colors.gray.800)] dark:[--footer-fg:theme(colors.gray.100)]", "[--footer-heading-fg:theme(colors.gray.900)] dark:[--footer-heading-fg:theme(colors.gray.100)]", "[--footer-link-fg:theme(colors.gray.700)] dark:[--footer-link-fg:theme(colors.gray.300)]", "[--footer-link-hover-fg:theme(colors.purple.700)] dark:[--footer-link-hover-fg:theme(colors.purple.400)]", "[--footer-link-hover-bg:theme(colors.purple.50)] dark:[--footer-link-hover-bg:color-mix(in_oklab,oklch(0.17_0.05_324)_20%,transparent)]", "[--footer-muted-fg:theme(colors.gray.500)] dark:[--footer-muted-fg:theme(colors.gray.400)]", "[--footer-border:theme(colors.gray.200)] dark:[--footer-border:theme(colors.gray.800)]",
|
|
29
|
+
// Table (optional)
|
|
30
|
+
"[--table-fg:inherit]", "[--table-muted-fg:theme(colors.gray.500)] dark:[--table-muted-fg:theme(colors.gray.400)]", "[--table-head-fg:theme(colors.gray.700)] dark:[--table-head-fg:theme(colors.gray.300)]", "[--table-border:theme(colors.gray.200)] dark:[--table-border:theme(colors.gray.800)]", "[--table-row-hover-bg:theme(colors.gray.50)] dark:[--table-row-hover-bg:theme(colors.gray.900)]", className)}>
|
|
31
|
+
{children}
|
|
32
|
+
</div>);
|
|
33
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/About.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"About.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/About.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;;;;GAWG;AAEH,wBAAgB,KAAK,sBAkEpB"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
"use client";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { About as SharedAbout } from "@nextworks/blocks-sections";
|
|
6
|
+
/**
|
|
7
|
+
* A preset About component customized for the product launch page,
|
|
8
|
+
* using the shared About.tsx with predefined styles and content.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - "About IntelliOpAI" heading with custom typography
|
|
12
|
+
* - Purple-themed styling matching the brand
|
|
13
|
+
* - Custom stats optimized for AI product launch
|
|
14
|
+
* - Responsive design with proper spacing
|
|
15
|
+
* - Dark mode support with consistent theming
|
|
16
|
+
* - Clean, modern design with hover effects
|
|
17
|
+
*/
|
|
18
|
+
export function About() {
|
|
19
|
+
return (<SharedAbout
|
|
20
|
+
// Content
|
|
21
|
+
aboutSubheadingText="The Future of AI is Here" aboutHeadingText="About IntelliOpAI" aboutContentText="IntelliOpAI is pioneering the next generation of artificial intelligence solutions for modern businesses. Founded by AI researchers and industry disruptors, we're building intelligent systems that learn, adapt, and deliver results in real-time. Our breakthrough technology combines deep learning, natural language processing, and predictive analytics to create AI that actually works for your business." aboutTextAlign="center"
|
|
22
|
+
// Stats
|
|
23
|
+
showStats={true} animateStats={true} aboutStats={[
|
|
24
|
+
{ value: "10M", suffix: "+", label: "Data Points Processed" },
|
|
25
|
+
{ value: "99.7", suffix: "%", label: "AI Accuracy Rate" },
|
|
26
|
+
{ value: "500", suffix: "+", label: "Early Adopters" },
|
|
27
|
+
{ value: "24", suffix: "/7", label: "AI Innovation" },
|
|
28
|
+
]}
|
|
29
|
+
// Slots / styling
|
|
30
|
+
section={{
|
|
31
|
+
className: "py-20 bg-white dark:bg-black text-gray-800 dark:text-white",
|
|
32
|
+
}} container={{
|
|
33
|
+
className: "max-w-7xl mx-auto px-6",
|
|
34
|
+
}} inner={{
|
|
35
|
+
className: "flex flex-col gap-12",
|
|
36
|
+
}} contentContainer={{
|
|
37
|
+
className: "max-w-4xl mx-auto",
|
|
38
|
+
}} contentStack={{
|
|
39
|
+
className: "flex flex-col gap-6",
|
|
40
|
+
}} subheading={{
|
|
41
|
+
className: "text-sm font-semibold text-purple-600 dark:text-purple-400 uppercase tracking-wider font-inter",
|
|
42
|
+
}} heading={{
|
|
43
|
+
className: "text-3xl md:text-4xl lg:text-5xl font-bold text-gray-800 dark:text-white leading-tight font-outfit",
|
|
44
|
+
}} content={{
|
|
45
|
+
className: "text-base md:text-lg text-gray-700 dark:text-gray-200 leading-relaxed opacity-90 max-w-3xl font-inter",
|
|
46
|
+
}} statsSection={{
|
|
47
|
+
className: "bg-gradient-to-r from-purple-50 via-white to-purple-50 dark:from-purple-900/20 dark:via-gray-800 dark:to-purple-900/20 p-8 md:p-12 rounded-2xl shadow-xl mx-auto max-w-5xl w-full border border-purple-200 dark:border-purple-800",
|
|
48
|
+
}} statsGrid={{
|
|
49
|
+
className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 justify-items-center",
|
|
50
|
+
}} statItem={{
|
|
51
|
+
className: "flex flex-col items-center gap-3",
|
|
52
|
+
}} statNumber={{
|
|
53
|
+
className: "text-2xl md:text-3xl lg:text-4xl font-bold text-purple-600 dark:text-purple-400 leading-none font-outfit",
|
|
54
|
+
}} statLabel={{
|
|
55
|
+
className: "text-sm md:text-base font-medium text-gray-700 dark:text-gray-300 text-center opacity-90 font-inter",
|
|
56
|
+
}}/>);
|
|
57
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/CTA.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CTA.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/CTA.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,GAAG,sBA4ClB"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
"use client";
|
|
4
|
+
import React from "react";
|
|
5
|
+
import { CTA as SharedCTA } from "@nextworks/blocks-sections";
|
|
6
|
+
export function CTA() {
|
|
7
|
+
return (<SharedCTA
|
|
8
|
+
// Background and theme colors live on the section slot
|
|
9
|
+
section={{
|
|
10
|
+
className: "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700 [--heading-fg:white] [--subheading-fg:rgba(255,255,255,0.85)] [--description-fg:rgba(255,255,255,0.8)]",
|
|
11
|
+
}}
|
|
12
|
+
// Layout, height, and centering are controlled by the container slot
|
|
13
|
+
container={{
|
|
14
|
+
className: "flex h-[45.5vh] w-full flex-col items-center overflow-hidden",
|
|
15
|
+
}}
|
|
16
|
+
// Heading mapped to the new headingText slot
|
|
17
|
+
headingText={{
|
|
18
|
+
text: "Join The Launch Today!",
|
|
19
|
+
className: "text-xl md:text-2xl lg:text-3xl font-bold leading-tight text-white dark:text-white font-outfit",
|
|
20
|
+
}}
|
|
21
|
+
// Use actionsWrapper for spacing instead of margin on the button
|
|
22
|
+
actionsWrapper={{
|
|
23
|
+
className: "mt-4 [--btn-ring:rgba(124,58,237,0.35)] dark:[--btn-ring:rgba(124,58,237,0.45)]",
|
|
24
|
+
}}
|
|
25
|
+
// Primary CTA
|
|
26
|
+
ctaButton={{ label: "Sign Up Now", href: "#contact" }} ctaButtonStyle={{
|
|
27
|
+
variant: "secondary",
|
|
28
|
+
size: "lg",
|
|
29
|
+
className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border-0 [--btn-bg:white] dark:[--btn-bg:white] [--btn-hover-bg:#f3f4f6] dark:[--btn-hover-bg:#e5e7eb] [--btn-fg:#7c3aed] dark:[--btn-fg:#7c3aed] hover:[--btn-hover-fg:#6d28d9] dark:hover:[--btn-hover-fg:#6d28d9] [--btn-border:transparent]",
|
|
30
|
+
}}
|
|
31
|
+
// Secondary CTA
|
|
32
|
+
secondaryButton={{ label: "Learn More", href: "#features" }} secondaryButtonStyle={{
|
|
33
|
+
variant: "outline",
|
|
34
|
+
size: "lg",
|
|
35
|
+
className: "text-base md:text-lg font-semibold shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all duration-200 border [--btn-bg:transparent] dark:[--btn-bg:transparent] [--btn-fg:white] [--btn-border:rgba(255,255,255,0.9)] dark:[--btn-border:rgba(255,255,255,0.85)] hover:[--btn-hover-bg:white] hover:[--btn-hover-fg:#7c3aed]",
|
|
36
|
+
}} spacing={{ topMargin: "mt-[17vh]" }} ariaLabel="Join the product launch call to action"/>);
|
|
37
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Contact.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Contact.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/Contact.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwD1B,wBAAgB,OAAO,sBAkEtB"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
// AUTO-GENERATED from cli/kits/blocks by scripts/sync-kit-to-packages.mjs
|
|
2
|
+
// Do not edit this file directly. Edit the kit source instead.
|
|
3
|
+
// app/templates/productlaunch/componnets/Contact.tsx
|
|
4
|
+
"use client";
|
|
5
|
+
import React from "react";
|
|
6
|
+
import { Contact as SharedContact, } from "@nextworks/blocks-sections";
|
|
7
|
+
/**
|
|
8
|
+
* A preset Contact component customized for the product launch page,
|
|
9
|
+
* using the shared Contact.tsx with predefined styles and content.
|
|
10
|
+
*
|
|
11
|
+
* Features:
|
|
12
|
+
* - "Get Started with IntelliOpAI" heading with custom typography
|
|
13
|
+
* - Purple-themed styling matching the brand
|
|
14
|
+
* - Custom form fields optimized for product launch
|
|
15
|
+
* - Responsive design with proper spacing
|
|
16
|
+
* - Dark mode support with consistent theming
|
|
17
|
+
* - Clean, modern design with hover effects
|
|
18
|
+
*/
|
|
19
|
+
const productLaunchContactFormData = [
|
|
20
|
+
{
|
|
21
|
+
id: "name",
|
|
22
|
+
label: "Your Full Name",
|
|
23
|
+
placeholder: "John Doe",
|
|
24
|
+
required: true,
|
|
25
|
+
type: "text",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: "email",
|
|
29
|
+
label: "Email Address",
|
|
30
|
+
placeholder: "you@example.com",
|
|
31
|
+
required: true,
|
|
32
|
+
type: "email",
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
id: "company",
|
|
36
|
+
label: "Company Name",
|
|
37
|
+
placeholder: "Your Company",
|
|
38
|
+
required: false,
|
|
39
|
+
type: "text",
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
id: "phone",
|
|
43
|
+
label: "Phone Number",
|
|
44
|
+
placeholder: "+1 (555) 123-4567",
|
|
45
|
+
required: false,
|
|
46
|
+
type: "tel",
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: "message",
|
|
50
|
+
label: "Tell us about your project",
|
|
51
|
+
placeholder: "Describe your business needs and how we can help...",
|
|
52
|
+
required: true,
|
|
53
|
+
type: "textarea",
|
|
54
|
+
},
|
|
55
|
+
];
|
|
56
|
+
export function Contact() {
|
|
57
|
+
const handleFormSubmit = (e) => {
|
|
58
|
+
e.preventDefault();
|
|
59
|
+
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
|
60
|
+
console.log("Contact form submitted:", data);
|
|
61
|
+
};
|
|
62
|
+
return (<SharedContact id="contact" fields={productLaunchContactFormData} contactHeaderText="Get Started with IntelliOpAI" contactSubHeaderText="Ready to revolutionize your workflow? Get in touch with our team to learn how our AI solutions can transform your business operations and drive growth."
|
|
63
|
+
// Root and layout
|
|
64
|
+
className="w-full" section={{
|
|
65
|
+
className: "py-16 px-4 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 dark:from-purple-500 dark:via-purple-600 dark:to-purple-700",
|
|
66
|
+
}} container={{
|
|
67
|
+
className: "mx-auto max-w-4xl",
|
|
68
|
+
}}
|
|
69
|
+
// Header slots
|
|
70
|
+
headerWrapper={{ className: "mb-4 text-center" }} headerText={{
|
|
71
|
+
className: "text-2xl md:text-3xl lg:text-4xl font-bold font-outfit text-white dark:text-white",
|
|
72
|
+
}} subheaderText={{
|
|
73
|
+
className: "text-base md:text-lg text-white dark:text-gray-200 text-center mb-8 px-4 md:px-14 font-inter leading-relaxed",
|
|
74
|
+
}}
|
|
75
|
+
// Form container
|
|
76
|
+
form={{
|
|
77
|
+
className: "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg shadow-lg border border-purple-200 dark:border-purple-300",
|
|
78
|
+
}}
|
|
79
|
+
// Fields wrapper and field item
|
|
80
|
+
fieldsWrapper={{ className: "space-y-6" }} field={{ className: "space-y-2" }}
|
|
81
|
+
// Label + inputs
|
|
82
|
+
label={{
|
|
83
|
+
className: "text-gray-700 dark:text-white text-sm font-semibold block font-inter",
|
|
84
|
+
}} input={{
|
|
85
|
+
className: "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent transition-all duration-200",
|
|
86
|
+
}} textarea={{
|
|
87
|
+
className: "w-full p-3 border border-gray-200 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus-visible:ring-2 focus-visible:ring-purple-500 focus-visible:ring-offset-0 focus:border-transparent resize-vertical min-h-[120px] transition-all duration-200",
|
|
88
|
+
}}
|
|
89
|
+
// Submit button (split: wrapper/style/text)
|
|
90
|
+
submitButtonWrapper={{ className: "pt-2" }} submitButtonStyle={{
|
|
91
|
+
variant: "default",
|
|
92
|
+
size: "lg",
|
|
93
|
+
className: "w-full font-semibold text-base shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 border-0 [--btn-bg:theme(colors.purple.600)] hover:[--btn-hover-bg:theme(colors.purple.700)] [--btn-fg:white] hover:[--btn-hover-fg:white] [--btn-border:transparent]",
|
|
94
|
+
}} submitButtonText="Start Your AI Journey" onSubmit={handleFormSubmit} ariaLabel="Get started with IntelliOpAI contact form"/>);
|
|
95
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../../src/templates/productlaunch/components/FAQ.tsx"],"names":[],"mappings":"AAQA;;GAEG;AACH,wBAAgB,GAAG,gCA6ElB"}
|