@nextworks/blocks-templates 0.1.0-alpha.8 → 0.2.0-alpha.10
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 +25 -11
- package/dist/templates/digitalagency/Page.d.ts.map +1 -1
- package/dist/templates/digitalagency/Page.jsx +0 -1
- package/dist/templates/digitalagency/components/Contact.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Contact.jsx +3 -4
- package/dist/templates/digitalagency/components/Footer.d.ts +1 -1
- package/dist/templates/digitalagency/components/Footer.jsx +1 -1
- package/dist/templates/digitalagency/components/Hero.d.ts +1 -1
- package/dist/templates/digitalagency/components/Hero.jsx +1 -1
- package/dist/templates/digitalagency/components/Navbar.d.ts +1 -2
- package/dist/templates/digitalagency/components/Navbar.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/Navbar.jsx +1 -1
- package/dist/templates/digitalagency/components/NetworkPattern.d.ts +0 -1
- package/dist/templates/digitalagency/components/NetworkPattern.d.ts.map +1 -1
- package/dist/templates/digitalagency/components/NetworkPattern.jsx +1 -4
- package/dist/templates/digitalagency/components/Portfolio.jsx +1 -1
- package/dist/templates/gallery/PresetThemeVars.d.ts +2 -2
- package/dist/templates/gallery/PresetThemeVars.jsx +2 -2
- package/dist/templates/gallery/page.d.ts.map +1 -1
- package/dist/templates/gallery/page.jsx +1 -2
- package/dist/templates/productlaunch/components/About.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/About.jsx +0 -2
- package/dist/templates/productlaunch/components/Contact.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Contact.jsx +0 -1
- package/dist/templates/productlaunch/components/FAQ.d.ts +1 -3
- package/dist/templates/productlaunch/components/FAQ.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/FAQ.jsx +2 -10
- package/dist/templates/productlaunch/components/Features.d.ts +1 -2
- package/dist/templates/productlaunch/components/Features.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Features.jsx +1 -2
- package/dist/templates/productlaunch/components/Footer.d.ts +1 -1
- package/dist/templates/productlaunch/components/Footer.jsx +1 -1
- package/dist/templates/productlaunch/components/Hero.d.ts +1 -2
- package/dist/templates/productlaunch/components/Hero.d.ts.map +1 -1
- package/dist/templates/productlaunch/components/Hero.jsx +5 -6
- package/dist/templates/productlaunch/components/Navbar.d.ts +1 -1
- package/dist/templates/productlaunch/components/Navbar.jsx +79 -75
- package/dist/templates/productlaunch/components/Pricing.d.ts +1 -1
- package/dist/templates/productlaunch/components/Pricing.jsx +1 -1
- package/dist/templates/productlaunch/components/ProcessTimeline.d.ts +1 -1
- package/dist/templates/productlaunch/components/ProcessTimeline.jsx +1 -1
- package/dist/templates/productlaunch/components/ServicesGrid.d.ts +1 -1
- package/dist/templates/productlaunch/components/ServicesGrid.jsx +1 -1
- package/dist/templates/productlaunch/components/Team.d.ts +1 -1
- package/dist/templates/productlaunch/components/Team.jsx +1 -1
- package/dist/templates/productlaunch/components/Testimonials.d.ts +1 -1
- package/dist/templates/productlaunch/components/Testimonials.jsx +1 -1
- package/dist/templates/productlaunch/components/TrustBadges.d.ts +1 -1
- package/dist/templates/productlaunch/components/TrustBadges.jsx +1 -1
- package/dist/templates/saasdashboard/components/Dashboard.jsx +2 -2
- package/dist/templates/saasdashboard/components/Hero.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Hero.jsx +0 -1
- package/dist/templates/saasdashboard/components/Hero_mask.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Hero_mask.jsx +0 -1
- package/dist/templates/saasdashboard/components/Navbar.d.ts +1 -1
- package/dist/templates/saasdashboard/components/Navbar.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/Navbar.jsx +1 -2
- package/dist/templates/saasdashboard/components/SmoothScroll.d.ts.map +1 -1
- package/dist/templates/saasdashboard/components/SmoothScroll.jsx +3 -4
- package/package.json +34 -34
- package/dist/index.d.ts +0 -5
- package/dist/index.js +0 -4
- package/dist/templates/digitalagency/Page.d.ts +0 -3
- package/dist/templates/digitalagency/Page.js +0 -18
- package/dist/templates/digitalagency/PresetThemeVars.d.ts +0 -11
- package/dist/templates/digitalagency/PresetThemeVars.js +0 -29
- package/dist/templates/digitalagency/components/About.d.ts +0 -3
- package/dist/templates/digitalagency/components/About.js +0 -45
- package/dist/templates/digitalagency/components/CTA.d.ts +0 -3
- package/dist/templates/digitalagency/components/CTA.js +0 -33
- package/dist/templates/digitalagency/components/Contact.d.ts +0 -3
- package/dist/templates/digitalagency/components/Contact.js +0 -91
- package/dist/templates/digitalagency/components/Footer.js +0 -58
- package/dist/templates/digitalagency/components/Hero.js +0 -69
- package/dist/templates/digitalagency/components/Navbar.js +0 -86
- package/dist/templates/digitalagency/components/NetworkPattern.js +0 -38
- package/dist/templates/digitalagency/components/Portfolio.d.ts +0 -3
- package/dist/templates/digitalagency/components/Portfolio.js +0 -108
- package/dist/templates/digitalagency/components/Pricing.d.ts +0 -3
- package/dist/templates/digitalagency/components/Pricing.js +0 -82
- package/dist/templates/digitalagency/components/Pricing.jsx +0 -84
- package/dist/templates/digitalagency/components/Process.d.ts +0 -3
- package/dist/templates/digitalagency/components/Process.js +0 -38
- package/dist/templates/digitalagency/components/Process.jsx +0 -40
- package/dist/templates/digitalagency/components/Services.d.ts +0 -3
- package/dist/templates/digitalagency/components/Services.js +0 -34
- package/dist/templates/digitalagency/components/Services.jsx +0 -36
- package/dist/templates/digitalagency/components/Team.d.ts +0 -3
- package/dist/templates/digitalagency/components/Team.js +0 -14
- package/dist/templates/digitalagency/components/Team.jsx +0 -14
- package/dist/templates/digitalagency/components/Testimonials.d.ts +0 -3
- package/dist/templates/digitalagency/components/Testimonials.js +0 -38
- package/dist/templates/digitalagency/components/Testimonials.jsx +0 -40
- package/dist/templates/gallery/PresetThemeVars.js +0 -31
- package/dist/templates/gallery/page.d.ts +0 -2
- package/dist/templates/gallery/page.js +0 -151
- package/dist/templates/productlaunch/Page.d.ts +0 -2
- package/dist/templates/productlaunch/Page.js +0 -20
- package/dist/templates/productlaunch/Page.jsx +0 -42
- package/dist/templates/productlaunch/PresetThemeVars.d.ts +0 -16
- package/dist/templates/productlaunch/PresetThemeVars.js +0 -28
- package/dist/templates/productlaunch/components/About.d.ts +0 -15
- package/dist/templates/productlaunch/components/About.js +0 -59
- package/dist/templates/productlaunch/components/CTA.d.ts +0 -3
- package/dist/templates/productlaunch/components/CTA.js +0 -39
- package/dist/templates/productlaunch/components/Contact.d.ts +0 -3
- package/dist/templates/productlaunch/components/Contact.js +0 -93
- package/dist/templates/productlaunch/components/FAQ.js +0 -64
- package/dist/templates/productlaunch/components/Features.js +0 -52
- package/dist/templates/productlaunch/components/Footer.js +0 -103
- package/dist/templates/productlaunch/components/Hero.js +0 -70
- package/dist/templates/productlaunch/components/Navbar.js +0 -82
- package/dist/templates/productlaunch/components/Pricing.js +0 -77
- package/dist/templates/productlaunch/components/ProcessTimeline.js +0 -63
- package/dist/templates/productlaunch/components/ServicesGrid.js +0 -41
- package/dist/templates/productlaunch/components/Team.js +0 -72
- package/dist/templates/productlaunch/components/Testimonials.js +0 -55
- package/dist/templates/productlaunch/components/TrustBadges.js +0 -50
- package/dist/templates/saasdashboard/Page.d.ts +0 -2
- package/dist/templates/saasdashboard/Page.js +0 -15
- package/dist/templates/saasdashboard/Page.jsx +0 -35
- package/dist/templates/saasdashboard/PresetThemeVars.d.ts +0 -11
- package/dist/templates/saasdashboard/PresetThemeVars.js +0 -27
- package/dist/templates/saasdashboard/components/Contact.d.ts +0 -3
- package/dist/templates/saasdashboard/components/Contact.js +0 -83
- package/dist/templates/saasdashboard/components/Dashboard.d.ts +0 -21
- package/dist/templates/saasdashboard/components/Dashboard.js +0 -120
- package/dist/templates/saasdashboard/components/FAQ.d.ts +0 -2
- package/dist/templates/saasdashboard/components/FAQ.js +0 -35
- package/dist/templates/saasdashboard/components/FAQ.jsx +0 -34
- package/dist/templates/saasdashboard/components/Features.d.ts +0 -2
- package/dist/templates/saasdashboard/components/Features.js +0 -55
- package/dist/templates/saasdashboard/components/Footer.d.ts +0 -2
- package/dist/templates/saasdashboard/components/Footer.js +0 -52
- package/dist/templates/saasdashboard/components/Hero.d.ts +0 -2
- package/dist/templates/saasdashboard/components/Hero.js +0 -65
- package/dist/templates/saasdashboard/components/Hero_mask.d.ts +0 -3
- package/dist/templates/saasdashboard/components/Hero_mask.js +0 -73
- package/dist/templates/saasdashboard/components/Navbar.js +0 -83
- package/dist/templates/saasdashboard/components/Pricing.d.ts +0 -2
- package/dist/templates/saasdashboard/components/Pricing.js +0 -65
- package/dist/templates/saasdashboard/components/SmoothScroll.d.ts +0 -2
- package/dist/templates/saasdashboard/components/SmoothScroll.js +0 -87
- package/dist/templates/saasdashboard/components/Testimonials.d.ts +0 -2
- package/dist/templates/saasdashboard/components/Testimonials.js +0 -35
- package/dist/templates/saasdashboard/components/TrustBadges.d.ts +0 -2
- package/dist/templates/saasdashboard/components/TrustBadges.js +0 -37
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { HeroSplit } from "@nextworks/blocks-sections";
|
|
4
|
-
import { NetworkPattern } from "../components/NetworkPattern";
|
|
5
|
-
/**
|
|
6
|
-
* Upgraded HeroNew preset for the digital agency template,
|
|
7
|
-
* wired to the shared HeroSplit with slots + cn API.
|
|
8
|
-
*/
|
|
9
|
-
export function Hero() {
|
|
10
|
-
return (_jsx("section", { id: "home", className: "bg-white dark:bg-black", children: _jsx(HeroSplit, { section: {
|
|
11
|
-
className: "relative bg-gradient-to-br from-violet-600 to-fuchsia-600 px-6 pt-8 pb-16 md:pt-12 md:pb-20 text-white hero-pattern",
|
|
12
|
-
}, heading: {
|
|
13
|
-
text: "Digital Innovation That Drives Growth",
|
|
14
|
-
className: "text-5xl md:text-5xl lg:text-7xl font-extrabold leading-tight text-white font-poppins",
|
|
15
|
-
}, subheading: {
|
|
16
|
-
text: "We craft exceptional digital experiences that transform businesses. From cutting-edge web applications to AI-powered solutions, we turn your vision into reality.",
|
|
17
|
-
className: "mt-6 text-xl md:text-1xl text-white/90 max-w-3xl font-inter font-medium leading-relaxed",
|
|
18
|
-
}, cta1: {
|
|
19
|
-
label: "Start Your Project",
|
|
20
|
-
href: "#contact",
|
|
21
|
-
variant: "default",
|
|
22
|
-
size: "lg",
|
|
23
|
-
className: [
|
|
24
|
-
"font-poppins font-semibold px-8 py-3 shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 text-lg",
|
|
25
|
-
"[--btn-bg:theme(colors.fuchsia.600)]",
|
|
26
|
-
"hover:[--btn-hover-bg:theme(colors.fuchsia.700)]",
|
|
27
|
-
"[--btn-fg:theme(colors.white)]",
|
|
28
|
-
"hover:[--btn-hover-fg:theme(colors.white)]",
|
|
29
|
-
].join(" "),
|
|
30
|
-
}, cta2: {
|
|
31
|
-
label: "Explore Solutions",
|
|
32
|
-
href: "#services",
|
|
33
|
-
variant: "outline",
|
|
34
|
-
size: "lg",
|
|
35
|
-
className: [
|
|
36
|
-
"font-poppins font-semibold px-8 py-3 text-lg shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5",
|
|
37
|
-
"border-2", // match previous thickness
|
|
38
|
-
// set colors via vars
|
|
39
|
-
"[--btn-fg:oklch(0.51_0.18_341)]", // fuchsia-700-ish
|
|
40
|
-
"[--btn-border:oklch(0.97_0.01_0)]", // white/90 approx
|
|
41
|
-
"[--btn-bg:oklch(0.97_0.01_0_/0.9)]",
|
|
42
|
-
"hover:[--btn-hover-bg:oklch(1_0_0)]", // white
|
|
43
|
-
"hover:[--btn-hover-fg:oklch(0.51_0.18_341)]",
|
|
44
|
-
// dark: make it a light outline with white text
|
|
45
|
-
"dark:[--btn-fg:oklch(1_0_0)]",
|
|
46
|
-
"dark:[--btn-border:oklch(1_0_0_/0.9)]",
|
|
47
|
-
"dark:[--btn-bg:transparent]",
|
|
48
|
-
"dark:hover:[--btn-hover-bg:oklch(1_0_0))]",
|
|
49
|
-
].join(" "),
|
|
50
|
-
}, image: {
|
|
51
|
-
src: undefined,
|
|
52
|
-
alt: "Digital innovation network visualization",
|
|
53
|
-
className: "object-contain",
|
|
54
|
-
}, imageLayout: "full-bleed", fallback: _jsx(NetworkPattern, {}), imageContainer: { className: "mt-10 sm:mt-10 md:mt-0 md:mr-0 lg:mr-7" },
|
|
55
|
-
// imageContainer={{
|
|
56
|
-
// className:
|
|
57
|
-
// "relative w-full min-h-[16rem] h-[20rem] md:h-[28rem] lg:h-[32rem] self-start mt-20 lg:mt-0 mb-10 lg:mb-0",
|
|
58
|
-
// }}
|
|
59
|
-
textContainer: {
|
|
60
|
-
className: "flex-1 px-5 lg:px-8 lg:self-start pt-0 md:pt-2 lg:pt-4",
|
|
61
|
-
}, buttonsContainer: {
|
|
62
|
-
className: [
|
|
63
|
-
"gap-4 mt-8 sm:flex-col lg:flex-row",
|
|
64
|
-
"[--btn-ring:oklch(1_0_0)]", // white ring to match on purple bg
|
|
65
|
-
].join(" "),
|
|
66
|
-
},
|
|
67
|
-
// buttonsContainer={{ className: "flex gap-4 mt-8" }}
|
|
68
|
-
textAlign: "center", ariaLabel: "Digital innovation that drives growth hero section" }) }));
|
|
69
|
-
}
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Navbar as SharedNavbar } from "@nextworks/blocks-sections";
|
|
4
|
-
import { BrandNodeGradientRing } from "@nextworks/blocks-core";
|
|
5
|
-
const defaultProps = {
|
|
6
|
-
brand: "Nexus Digital",
|
|
7
|
-
brandNode: (_jsx(BrandNodeGradientRing, { gradient: "conic-gradient(#7c3aed, #ec4899, #7c3aed)" })),
|
|
8
|
-
menuItems: [
|
|
9
|
-
{ label: "Home", href: "#home" },
|
|
10
|
-
{ label: "Services", href: "#services" },
|
|
11
|
-
{ label: "Portfolio", href: "#portfolio" },
|
|
12
|
-
{ label: "Pricing", href: "#pricing" },
|
|
13
|
-
{ label: "Contact", href: "#contact" },
|
|
14
|
-
],
|
|
15
|
-
ctaButton: null,
|
|
16
|
-
showColorModeToggle: true,
|
|
17
|
-
navHeight: "h-16",
|
|
18
|
-
sticky: true,
|
|
19
|
-
ariaLabel: "Nexus Digital main navigation",
|
|
20
|
-
// Allow page-level layout overrides if needed
|
|
21
|
-
className: "",
|
|
22
|
-
// Style slots (preserve original look; add defaults for new slots)
|
|
23
|
-
nav: {
|
|
24
|
-
className: "bg-white/80 dark:bg-gray-900/80 backdrop-blur border-b border-gray-200 dark:border-gray-800 " +
|
|
25
|
-
"text-gray-800 dark:text-white " +
|
|
26
|
-
// Accent variables for this preset (read by toggle, links, mobile links)
|
|
27
|
-
"[--navbar-accent:theme(colors.fuchsia.600)] dark:[--navbar-accent:theme(colors.fuchsia.400)] " +
|
|
28
|
-
"[--navbar-toggle-bg:theme(colors.white)] dark:[--navbar-toggle-bg:theme(colors.gray.900)] " +
|
|
29
|
-
"[--navbar-hover-bg:theme(colors.fuchsia.50)] dark:[--navbar-hover-bg:color-mix(in oklab,oklch(0.24 0.07 330) 20%, transparent)] " +
|
|
30
|
-
"[--navbar-ring:theme(colors.fuchsia.500)] dark:[--navbar-ring:theme(colors.fuchsia.400)] " +
|
|
31
|
-
"[--navbar-border:theme(colors.gray.200)] dark:[--navbar-border:theme(colors.gray.800)]",
|
|
32
|
-
},
|
|
33
|
-
brandText: {
|
|
34
|
-
className: "text-2xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400",
|
|
35
|
-
},
|
|
36
|
-
links: {
|
|
37
|
-
className: "text-sm font-inter font-medium text-gray-700 dark:text-gray-200 " +
|
|
38
|
-
"hover:text-fuchsia-600 dark:hover:text-fuchsia-400 " +
|
|
39
|
-
"focus:ring-[var(--navbar-ring)]",
|
|
40
|
-
},
|
|
41
|
-
// CTA hidden by default; styled to match theme if enabled later
|
|
42
|
-
ctaButtonStyle: {
|
|
43
|
-
variant: "default",
|
|
44
|
-
size: "default",
|
|
45
|
-
className: "shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 " +
|
|
46
|
-
"bg-fuchsia-600 text-white hover:bg-fuchsia-700 " +
|
|
47
|
-
"dark:bg-fuchsia-500 dark:hover:bg-fuchsia-400",
|
|
48
|
-
},
|
|
49
|
-
mobileMenu: {
|
|
50
|
-
className: "border-t border-gray-200 dark:border-gray-800",
|
|
51
|
-
},
|
|
52
|
-
container: {
|
|
53
|
-
className: "max-w-7xl mx-auto",
|
|
54
|
-
},
|
|
55
|
-
brandWrapper: {
|
|
56
|
-
className: "",
|
|
57
|
-
},
|
|
58
|
-
desktopMenu: {
|
|
59
|
-
className: "hidden items-center space-x-1 md:flex lg:space-x-6",
|
|
60
|
-
},
|
|
61
|
-
toggleButton: {
|
|
62
|
-
className: "md:hidden flex items-center justify-center rounded-md p-2 transition-colors " +
|
|
63
|
-
"hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900/20 " +
|
|
64
|
-
"focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400",
|
|
65
|
-
},
|
|
66
|
-
colorModeWrapper: {
|
|
67
|
-
className: "ml-2",
|
|
68
|
-
},
|
|
69
|
-
// With variables above, ThemeToggle can rely on them; explicit override optional
|
|
70
|
-
// themeToggle: { ... }
|
|
71
|
-
ctaButtonWrapper: {
|
|
72
|
-
className: "ml-2",
|
|
73
|
-
},
|
|
74
|
-
mobileMenuInner: {
|
|
75
|
-
className: "space-y-2 px-4 pt-2 pb-4",
|
|
76
|
-
},
|
|
77
|
-
// Mobile links will read --navbar-hover-bg; explicit class optional
|
|
78
|
-
mobileLinks: {
|
|
79
|
-
className: "hover:bg-[var(--navbar-hover-bg)]",
|
|
80
|
-
},
|
|
81
|
-
};
|
|
82
|
-
export function Navbar(overrides = {}) {
|
|
83
|
-
// Shallow-merge: providing a slot object replaces that slot entirely.
|
|
84
|
-
const props = Object.assign(Object.assign({}, defaultProps), overrides);
|
|
85
|
-
return _jsx(SharedNavbar, Object.assign({}, props));
|
|
86
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
/**
|
|
4
|
-
* NetworkPattern
|
|
5
|
-
* Tailwind-based animated network background for hero fallbacks.
|
|
6
|
-
* Lightweight and dependency-free (no Chakra).
|
|
7
|
-
*/
|
|
8
|
-
export const NetworkPattern = () => {
|
|
9
|
-
return (
|
|
10
|
-
// <div className="relative h-full w-full">
|
|
11
|
-
_jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden", children: [_jsx("div", { className: "absolute -top-16 -left-16 h-72 w-72 rounded-full bg-blue-500/25 blur-3xl" }), _jsx("div", { className: "absolute right-0 bottom-0 h-80 w-80 rounded-full bg-cyan-400/25 blur-3xl" }), _jsx("div", { className: "absolute top-14 right-1/3 h-56 w-56 rounded-full bg-indigo-500/15 blur-3xl" }), _jsx("div", { className: "absolute -bottom-10 left-1/4 h-64 w-64 rounded-full bg-sky-500/10 blur-3xl" })] }), _jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 900 520", className: "absolute top-0 left-0 [transform:scale(1.12)]", children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "nodeGradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#3B82F6", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "#2563EB", stopOpacity: 1 })] }), _jsxs("linearGradient", { id: "lineGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: "#60A5FA", stopOpacity: 0.28 }), _jsx("stop", { offset: "50%", stopColor: "#3B82F6", stopOpacity: 0.6 }), _jsx("stop", { offset: "100%", stopColor: "#60A5FA", stopOpacity: 0.28 })] })] }), _jsxs("g", { className: "opacity-30", children: [Array.from({ length: 18 }).map((_, i) => (_jsx("line", { x1: i * 50, y1: 0, x2: i * 50, y2: 520, stroke: "#e5e7eb", strokeWidth: "0.5" }, `v-${i}`))), Array.from({ length: 12 }).map((_, i) => (_jsx("line", { x1: 0, y1: i * 45, x2: 900, y2: i * 45, stroke: "#e5e7eb", strokeWidth: "0.5" }, `h-${i}`)))] }), _jsxs("g", { children: [_jsx("line", { x1: "120", y1: "80", x2: "320", y2: "180", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "320", y1: "180", x2: "600", y2: "140", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "600", y1: "140", x2: "720", y2: "340", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "320", y1: "180", x2: "420", y2: "420", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "120", y1: "80", x2: "220", y2: "320", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "220", y1: "320", x2: "420", y2: "420", stroke: "url(#lineGradient)", strokeWidth: "2" }), _jsx("line", { x1: "60", y1: "260", x2: "120", y2: "80", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "420", y1: "420", x2: "580", y2: "470", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "600", y1: "140", x2: "780", y2: "80", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "320", y1: "180", x2: "540", y2: "260", stroke: "url(#lineGradient)", strokeWidth: "1.5" }), _jsx("line", { x1: "220", y1: "320", x2: "540", y2: "260", stroke: "url(#lineGradient)", strokeWidth: "1.5" })] }), _jsxs("g", { children: [_jsx("circle", { cx: "320", cy: "180", r: "12", fill: "url(#nodeGradient)", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "12;15;12", dur: "3s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "600", cy: "140", r: "10", fill: "url(#nodeGradient)", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "10;13;10", dur: "3.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "120", cy: "80", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4s", begin: "1s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "420", cy: "420", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4.5s", begin: "2.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "720", cy: "340", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "3.8s", begin: "1.8s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "220", cy: "320", r: "8", fill: "#3B82F6", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "8;11;8", dur: "4.2s", begin: "0.5s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "60", cy: "260", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "5s", begin: "3s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "580", cy: "470", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "5.5s", begin: "4s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "780", cy: "80", r: "5", fill: "#60A5FA", className: "pulse-node", children: _jsx("animate", { attributeName: "r", values: "5;7;5", dur: "4.8s", begin: "2s", repeatCount: "indefinite" }) }), _jsx("circle", { cx: "200", cy: "100", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "380", cy: "200", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "150", cy: "320", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "500", cy: "260", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "660", cy: "220", r: "3", fill: "#93C5FD" }), _jsx("circle", { cx: "740", cy: "420", r: "3", fill: "#93C5FD" })] })] }), _jsx("style", { children: `
|
|
12
|
-
.pulse-node {
|
|
13
|
-
filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
@keyframes slow-pan {
|
|
17
|
-
0% {
|
|
18
|
-
transform: scale(1.08) translateY(0px);
|
|
19
|
-
}
|
|
20
|
-
50% {
|
|
21
|
-
transform: scale(1.1) translateY(-6px);
|
|
22
|
-
}
|
|
23
|
-
100% {
|
|
24
|
-
transform: scale(1.08) translateY(0px);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
svg {
|
|
29
|
-
animation: slow-pan 18s ease-in-out infinite;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@media (max-width: 768px) {
|
|
33
|
-
svg {
|
|
34
|
-
transform: scale(1.15);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
` })] }));
|
|
38
|
-
};
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { PortfolioSimple } from "@nextworks/blocks-sections";
|
|
4
|
-
// Default portfolio data without images - Digital Marketing Agency focused
|
|
5
|
-
const defaultProjects = [
|
|
6
|
-
{
|
|
7
|
-
id: 1,
|
|
8
|
-
title: "TechStartup Growth Campaign",
|
|
9
|
-
category: "Digital Marketing",
|
|
10
|
-
industry: "Technology",
|
|
11
|
-
result: "+300% Leads",
|
|
12
|
-
description: "Comprehensive digital marketing campaign that increased qualified leads by 300% through targeted SEO, social media marketing, and conversion optimization strategies.",
|
|
13
|
-
tags: ["SEO", "Social Media", "PPC", "Analytics"],
|
|
14
|
-
color: "blue",
|
|
15
|
-
url: "#",
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
id: 2,
|
|
19
|
-
title: "E-Commerce Brand Launch",
|
|
20
|
-
category: "Brand Marketing",
|
|
21
|
-
industry: "Retail",
|
|
22
|
-
result: "+250% Revenue",
|
|
23
|
-
description: "Complete brand launch and digital marketing strategy for a new e-commerce platform, resulting in 250% revenue growth within the first 6 months.",
|
|
24
|
-
tags: ["Brand Strategy", "Content Marketing", "Influencer", "Email"],
|
|
25
|
-
color: "green",
|
|
26
|
-
url: "#",
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
id: 3,
|
|
30
|
-
title: "Healthcare Practice Expansion",
|
|
31
|
-
category: "Local Marketing",
|
|
32
|
-
industry: "Healthcare",
|
|
33
|
-
result: "+180% Patients",
|
|
34
|
-
description: "Local SEO and digital marketing campaign that helped a healthcare practice expand to three new locations and increase patient acquisition by 180%.",
|
|
35
|
-
tags: ["Local SEO", "Google Ads", "Reputation", "Content"],
|
|
36
|
-
color: "purple",
|
|
37
|
-
url: "#",
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
id: 4,
|
|
41
|
-
title: "SaaS Product Launch",
|
|
42
|
-
category: "B2B Marketing",
|
|
43
|
-
industry: "Software",
|
|
44
|
-
result: "+400% Signups",
|
|
45
|
-
description: "Strategic B2B marketing campaign for a SaaS product launch, achieving 400% increase in trial signups through targeted content marketing and account-based marketing.",
|
|
46
|
-
tags: ["B2B Strategy", "Content", "LinkedIn Ads", "Webinars"],
|
|
47
|
-
color: "indigo",
|
|
48
|
-
url: "#",
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
id: 5,
|
|
52
|
-
title: "Restaurant Chain Rebrand",
|
|
53
|
-
category: "Brand Marketing",
|
|
54
|
-
industry: "Food & Beverage",
|
|
55
|
-
result: "+220% Foot Traffic",
|
|
56
|
-
description: "Complete rebrand and digital marketing transformation for a restaurant chain, resulting in 220% increase in foot traffic and 150% growth in online orders.",
|
|
57
|
-
tags: ["Rebranding", "Social Media", "Local SEO", "Delivery"],
|
|
58
|
-
color: "red",
|
|
59
|
-
url: "#",
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
id: 6,
|
|
63
|
-
title: "Fitness App User Acquisition",
|
|
64
|
-
category: "Mobile Marketing",
|
|
65
|
-
industry: "Health & Fitness",
|
|
66
|
-
result: "+500% Downloads",
|
|
67
|
-
description: "Mobile-first marketing campaign that achieved 500% increase in app downloads through app store optimization, influencer partnerships, and targeted social media advertising.",
|
|
68
|
-
tags: ["ASO", "Influencer", "Social Ads", "Retention"],
|
|
69
|
-
color: "yellow",
|
|
70
|
-
url: "#",
|
|
71
|
-
},
|
|
72
|
-
];
|
|
73
|
-
const defaultFilters = [
|
|
74
|
-
"All Projects",
|
|
75
|
-
"Digital Marketing",
|
|
76
|
-
"Brand Marketing",
|
|
77
|
-
"B2B Marketing",
|
|
78
|
-
"Local Marketing",
|
|
79
|
-
"Mobile Marketing",
|
|
80
|
-
];
|
|
81
|
-
// Upgraded Portfolio Preset Component
|
|
82
|
-
export function Portfolio() {
|
|
83
|
-
return (_jsx("section", { id: "portfolio", children: _jsx(PortfolioSimple, { enableMotion: true, projects: defaultProjects, filters: defaultFilters, sectionTitle: "Our Portfolio", sectionSubtitle: "Discover our successful projects that have transformed businesses across various industries with innovative digital solutions.", ctaTitle: "Ready to Start Your Project?", ctaDescription: "Let's work together to create something amazing that drives real results for your business.", section: {
|
|
84
|
-
className: "py-16 md:py-24 bg-background",
|
|
85
|
-
}, title: {
|
|
86
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-[var(--heading-fg)]",
|
|
87
|
-
}, subtitle: {
|
|
88
|
-
className: "text-xl md:text-2xl font-inter text-[var(--subheading-fg)] max-w-2xl mx-auto leading-relaxed",
|
|
89
|
-
}, ctaTitleStyle: {
|
|
90
|
-
className: "text-2xl md:text-3xl font-bold text-[var(--heading-fg)]",
|
|
91
|
-
}, ctaDescriptionStyle: {
|
|
92
|
-
className: "text-lg md:text-xl text-[var(--subheading-fg)] max-w-md mx-auto",
|
|
93
|
-
}, tagStyle: {
|
|
94
|
-
className: "px-2 py-1 text-xs rounded-full border-[var(--badge-border)] text-[var(--badge-fg)] bg-[var(--badge-bg)]",
|
|
95
|
-
}, ctaSection: {
|
|
96
|
-
className: "space-y-6 text-center mt-16 pt-12 border-t border-[var(--footer-border)]",
|
|
97
|
-
}, cta1Label: "Start Your Project", cta1Href: "#contact", cta2Label: "View All Projects", cta2Href: "#portfolio", cta1Button: {
|
|
98
|
-
className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 [--btn-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.700)] [--btn-fg:theme(colors.white)] hover:[--btn-hover-fg:theme(colors.white)]",
|
|
99
|
-
}, cta2Button: {
|
|
100
|
-
className: "h-10 px-6 flex items-center justify-center font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5 border-2 [--btn-bg:transparent] [--btn-fg:theme(colors.fuchsia.700)] [--btn-border:theme(colors.fuchsia.600)] hover:[--btn-hover-bg:theme(colors.fuchsia.600)] hover:[--btn-hover-fg:theme(colors.white)] dark:[--btn-fg:theme(colors.fuchsia.400)] dark:[--btn-border:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-bg:theme(colors.fuchsia.500)] dark:hover:[--btn-hover-fg:theme(colors.white)]",
|
|
101
|
-
}, onProjectClick: (project) => {
|
|
102
|
-
console.log("Project clicked:", project);
|
|
103
|
-
}, onPrimaryCtaClick: () => {
|
|
104
|
-
console.log("CTA 1 clicked:");
|
|
105
|
-
}, onSecondaryCtaClick: () => {
|
|
106
|
-
console.log("CTA 2 clicked:");
|
|
107
|
-
}, ariaLabel: "Portfolio showcase section" }) }));
|
|
108
|
-
}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Pricing as SharedPricing } from "@nextworks/blocks-sections";
|
|
4
|
-
const AgencyPricingData = [
|
|
5
|
-
{
|
|
6
|
-
pricingPlanHeaderText: "Starter",
|
|
7
|
-
pricingPlanPrice: "$2,999",
|
|
8
|
-
pricingPlanFeatures: [
|
|
9
|
-
"5-page custom website",
|
|
10
|
-
"Mobile-responsive design",
|
|
11
|
-
"Basic SEO optimization",
|
|
12
|
-
"Contact form integration",
|
|
13
|
-
"2 rounds of revisions",
|
|
14
|
-
"1 month post-launch support",
|
|
15
|
-
],
|
|
16
|
-
pricingPlanCTALabel: "Get Started",
|
|
17
|
-
pricingPlanCTAHref: "#contact",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
pricingPlanHeaderText: "Professional",
|
|
21
|
-
pricingPlanPrice: "$5,999",
|
|
22
|
-
pricingPlanFeatures: [
|
|
23
|
-
"10-page custom website",
|
|
24
|
-
"Advanced responsive design",
|
|
25
|
-
"Comprehensive SEO setup",
|
|
26
|
-
"CMS integration",
|
|
27
|
-
"Analytics & tracking setup",
|
|
28
|
-
"Social media integration",
|
|
29
|
-
"3 rounds of revisions",
|
|
30
|
-
"3 months ongoing support",
|
|
31
|
-
],
|
|
32
|
-
pricingPlanCTALabel: "Most Popular",
|
|
33
|
-
pricingPlanCTAHref: "#contact",
|
|
34
|
-
isPopular: true,
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
pricingPlanHeaderText: "Enterprise",
|
|
38
|
-
pricingPlanPrice: "Custom Quote",
|
|
39
|
-
pricingPlanFeatures: [
|
|
40
|
-
"Unlimited pages",
|
|
41
|
-
"Custom functionality",
|
|
42
|
-
"E-commerce integration",
|
|
43
|
-
"Advanced SEO strategy",
|
|
44
|
-
"Performance optimization",
|
|
45
|
-
"Third-party integrations",
|
|
46
|
-
"Priority support",
|
|
47
|
-
"Dedicated project manager",
|
|
48
|
-
"6 months ongoing support",
|
|
49
|
-
],
|
|
50
|
-
pricingPlanCTALabel: "Contact Sales",
|
|
51
|
-
pricingPlanCTAHref: "#contact",
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
export function Pricing() {
|
|
55
|
-
return (_jsx("section", { id: "pricing", children: _jsx(SharedPricing, { pricingPlans: AgencyPricingData, pricingHeadingText: "Choose Your Plan", section: {
|
|
56
|
-
className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
|
|
57
|
-
}, container: {
|
|
58
|
-
className: "max-w-7xl mx-auto px-6",
|
|
59
|
-
}, heading: {
|
|
60
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
|
|
61
|
-
}, grid: {
|
|
62
|
-
className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
|
|
63
|
-
}, card: {
|
|
64
|
-
className: "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
|
|
65
|
-
}, header: {
|
|
66
|
-
className: "p-6 text-center border-b border-gray-200 dark:border-gray-700",
|
|
67
|
-
}, title: {
|
|
68
|
-
className: "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
|
|
69
|
-
}, price: {
|
|
70
|
-
className: "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
|
|
71
|
-
}, features: {
|
|
72
|
-
className: "p-6 space-y-3 font-inter",
|
|
73
|
-
}, featureItem: {
|
|
74
|
-
className: "flex items-center text-gray-600 dark:text-gray-300 text-sm",
|
|
75
|
-
}, cta: {
|
|
76
|
-
variant: "default",
|
|
77
|
-
size: "lg",
|
|
78
|
-
className: "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
|
|
79
|
-
}, popularBadge: {
|
|
80
|
-
className: "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
|
|
81
|
-
}, ariaLabel: "Pricing section" }) }));
|
|
82
|
-
}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { Pricing as SharedPricing } from "@nextworks/blocks-sections";
|
|
4
|
-
const AgencyPricingData = [
|
|
5
|
-
{
|
|
6
|
-
pricingPlanHeaderText: "Starter",
|
|
7
|
-
pricingPlanPrice: "$2,999",
|
|
8
|
-
pricingPlanFeatures: [
|
|
9
|
-
"5-page custom website",
|
|
10
|
-
"Mobile-responsive design",
|
|
11
|
-
"Basic SEO optimization",
|
|
12
|
-
"Contact form integration",
|
|
13
|
-
"2 rounds of revisions",
|
|
14
|
-
"1 month post-launch support",
|
|
15
|
-
],
|
|
16
|
-
pricingPlanCTALabel: "Get Started",
|
|
17
|
-
pricingPlanCTAHref: "#contact",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
pricingPlanHeaderText: "Professional",
|
|
21
|
-
pricingPlanPrice: "$5,999",
|
|
22
|
-
pricingPlanFeatures: [
|
|
23
|
-
"10-page custom website",
|
|
24
|
-
"Advanced responsive design",
|
|
25
|
-
"Comprehensive SEO setup",
|
|
26
|
-
"CMS integration",
|
|
27
|
-
"Analytics & tracking setup",
|
|
28
|
-
"Social media integration",
|
|
29
|
-
"3 rounds of revisions",
|
|
30
|
-
"3 months ongoing support",
|
|
31
|
-
],
|
|
32
|
-
pricingPlanCTALabel: "Most Popular",
|
|
33
|
-
pricingPlanCTAHref: "#contact",
|
|
34
|
-
isPopular: true,
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
pricingPlanHeaderText: "Enterprise",
|
|
38
|
-
pricingPlanPrice: "Custom Quote",
|
|
39
|
-
pricingPlanFeatures: [
|
|
40
|
-
"Unlimited pages",
|
|
41
|
-
"Custom functionality",
|
|
42
|
-
"E-commerce integration",
|
|
43
|
-
"Advanced SEO strategy",
|
|
44
|
-
"Performance optimization",
|
|
45
|
-
"Third-party integrations",
|
|
46
|
-
"Priority support",
|
|
47
|
-
"Dedicated project manager",
|
|
48
|
-
"6 months ongoing support",
|
|
49
|
-
],
|
|
50
|
-
pricingPlanCTALabel: "Contact Sales",
|
|
51
|
-
pricingPlanCTAHref: "#contact",
|
|
52
|
-
},
|
|
53
|
-
];
|
|
54
|
-
export function Pricing() {
|
|
55
|
-
return (<section id="pricing">
|
|
56
|
-
<SharedPricing pricingPlans={AgencyPricingData} pricingHeadingText="Choose Your Plan" section={{
|
|
57
|
-
className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-800",
|
|
58
|
-
}} container={{
|
|
59
|
-
className: "max-w-7xl mx-auto px-6",
|
|
60
|
-
}} heading={{
|
|
61
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-center text-gray-800 dark:text-white mb-8",
|
|
62
|
-
}} grid={{
|
|
63
|
-
className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8",
|
|
64
|
-
}} card={{
|
|
65
|
-
className: "relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200",
|
|
66
|
-
}} header={{
|
|
67
|
-
className: "p-6 text-center border-b border-gray-200 dark:border-gray-700",
|
|
68
|
-
}} title={{
|
|
69
|
-
className: "text-xl font-bold font-poppins text-gray-800 dark:text-white mb-2",
|
|
70
|
-
}} price={{
|
|
71
|
-
className: "text-3xl font-bold font-poppins text-fuchsia-600 dark:text-fuchsia-400 mb-4",
|
|
72
|
-
}} features={{
|
|
73
|
-
className: "p-6 space-y-3 font-inter",
|
|
74
|
-
}} featureItem={{
|
|
75
|
-
className: "flex items-center text-gray-600 dark:text-gray-300 text-sm",
|
|
76
|
-
}} cta={{
|
|
77
|
-
variant: "default",
|
|
78
|
-
size: "lg",
|
|
79
|
-
className: "w-full bg-fuchsia-600 hover:bg-fuchsia-700 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white hover:text-white font-medium shadow-md hover:shadow-lg transition-all duration-200 hover:-translate-y-0.5",
|
|
80
|
-
}} popularBadge={{
|
|
81
|
-
className: "absolute -top-3 left-1/2 transform -translate-x-1/2 bg-fuchsia-600 text-white px-4 py-1 rounded-full text-sm font-medium",
|
|
82
|
-
}} ariaLabel="Pricing section"/>
|
|
83
|
-
</section>);
|
|
84
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { ProcessTimeline } from "@nextworks/blocks-sections";
|
|
4
|
-
const agencySteps = [
|
|
5
|
-
{
|
|
6
|
-
stepNumber: 1,
|
|
7
|
-
title: "Discovery Call",
|
|
8
|
-
description: "Understanding your goals and requirements",
|
|
9
|
-
icon: "🔍",
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
stepNumber: 2,
|
|
13
|
-
title: "Strategy & Design",
|
|
14
|
-
description: "Custom mockups and project roadmap",
|
|
15
|
-
icon: "🎨",
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
stepNumber: 3,
|
|
19
|
-
title: "Development",
|
|
20
|
-
description: "Building your site with regular updates",
|
|
21
|
-
icon: "⚡",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
stepNumber: 4,
|
|
25
|
-
title: "Launch & Support",
|
|
26
|
-
description: "Going live with ongoing maintenance",
|
|
27
|
-
icon: "🚀",
|
|
28
|
-
},
|
|
29
|
-
];
|
|
30
|
-
export function Process() {
|
|
31
|
-
return (_jsx("section", { id: "process", children: _jsx(ProcessTimeline, { steps: agencySteps, heading: "How We Work", subheading: "Our proven 4-step process ensures your project delivers real results, on time and within budget.", section: {
|
|
32
|
-
className: "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
|
|
33
|
-
}, container: { className: "max-w-6xl mx-auto px-6" }, headingStyle: {
|
|
34
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
|
|
35
|
-
}, subheadingStyle: {
|
|
36
|
-
className: "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
|
|
37
|
-
}, connectingLine: undefined, stepCircle: undefined, ariaLabel: "Process timeline section" }) }));
|
|
38
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import { ProcessTimeline } from "@nextworks/blocks-sections";
|
|
4
|
-
const agencySteps = [
|
|
5
|
-
{
|
|
6
|
-
stepNumber: 1,
|
|
7
|
-
title: "Discovery Call",
|
|
8
|
-
description: "Understanding your goals and requirements",
|
|
9
|
-
icon: "🔍",
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
stepNumber: 2,
|
|
13
|
-
title: "Strategy & Design",
|
|
14
|
-
description: "Custom mockups and project roadmap",
|
|
15
|
-
icon: "🎨",
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
stepNumber: 3,
|
|
19
|
-
title: "Development",
|
|
20
|
-
description: "Building your site with regular updates",
|
|
21
|
-
icon: "⚡",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
stepNumber: 4,
|
|
25
|
-
title: "Launch & Support",
|
|
26
|
-
description: "Going live with ongoing maintenance",
|
|
27
|
-
icon: "🚀",
|
|
28
|
-
},
|
|
29
|
-
];
|
|
30
|
-
export function Process() {
|
|
31
|
-
return (<section id="process">
|
|
32
|
-
<ProcessTimeline steps={agencySteps} heading="How We Work" subheading="Our proven 4-step process ensures your project delivers real results, on time and within budget." section={{
|
|
33
|
-
className: "py-16 md:py-20 bg-fuchsia-50 dark:bg-gray-900 [--process-step-bg:theme(colors.fuchsia.600)] [--process-step-fg:theme(colors.white)] [--process-connector:theme(colors.gray.300)] dark:[--process-connector:theme(colors.gray.600)]",
|
|
34
|
-
}} container={{ className: "max-w-6xl mx-auto px-6" }} headingStyle={{
|
|
35
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white leading-tight",
|
|
36
|
-
}} subheadingStyle={{
|
|
37
|
-
className: "text-xl md:text-2xl font-inter text-gray-600 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed",
|
|
38
|
-
}} connectingLine={undefined} stepCircle={undefined} ariaLabel="Process timeline section"/>
|
|
39
|
-
</section>);
|
|
40
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { ServicesGrid } from "@nextworks/blocks-sections";
|
|
4
|
-
const defaultServicesData = [
|
|
5
|
-
{
|
|
6
|
-
icon: "💻",
|
|
7
|
-
title: "Web Design & Development",
|
|
8
|
-
description: "Custom websites that capture your brand and convert visitors into customers",
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
icon: "📈",
|
|
12
|
-
title: "SEO & Digital Marketing",
|
|
13
|
-
description: "Get found on Google and drive qualified traffic to your website",
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
icon: "🛒",
|
|
17
|
-
title: "E-commerce Solutions",
|
|
18
|
-
description: "Online stores that maximize sales and customer experience",
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
icon: "🎨",
|
|
22
|
-
title: "Brand Identity & Design",
|
|
23
|
-
description: "Logo, branding, and visual identity that makes you stand out",
|
|
24
|
-
},
|
|
25
|
-
];
|
|
26
|
-
export function Services() {
|
|
27
|
-
return (_jsx("section", { id: "services", children: _jsx(ServicesGrid, { enableMotion: true, section: {
|
|
28
|
-
className: "py-16 md:py-20 lg:py-24 bg-fuchsia-50 dark:bg-gray-900",
|
|
29
|
-
}, container: { className: "max-w-6xl mx-auto px-6" }, heading: {
|
|
30
|
-
className: "text-4xl md:text-5xl lg:text-6xl font-bold font-poppins text-gray-800 dark:text-white text-center mb-8 md:mb-12",
|
|
31
|
-
}, grid: { className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8" }, card: {
|
|
32
|
-
className: "bg-white dark:bg-gray-800 p-6 md:p-8 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300",
|
|
33
|
-
}, servicesData: defaultServicesData, sectionHeading: "Our Services", ariaLabel: "Services section" }) }));
|
|
34
|
-
}
|