@opensite/ui 0.1.3 → 0.1.4
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/dist/components.cjs +1501 -0
- package/dist/components.cjs.map +1 -1
- package/dist/components.d.cts +13 -0
- package/dist/components.d.ts +13 -0
- package/dist/components.js +1489 -1
- package/dist/components.js.map +1 -1
- package/dist/footer-animated-social.cjs +272 -0
- package/dist/footer-animated-social.cjs.map +1 -0
- package/dist/footer-animated-social.d.cts +41 -0
- package/dist/footer-animated-social.d.ts +41 -0
- package/dist/footer-animated-social.js +250 -0
- package/dist/footer-animated-social.js.map +1 -0
- package/dist/footer-background-card.cjs +149 -0
- package/dist/footer-background-card.cjs.map +1 -0
- package/dist/footer-background-card.d.cts +74 -0
- package/dist/footer-background-card.d.ts +74 -0
- package/dist/footer-background-card.js +147 -0
- package/dist/footer-background-card.js.map +1 -0
- package/dist/footer-brand-description.cjs +244 -0
- package/dist/footer-brand-description.cjs.map +1 -0
- package/dist/footer-brand-description.d.cts +65 -0
- package/dist/footer-brand-description.d.ts +65 -0
- package/dist/footer-brand-description.js +222 -0
- package/dist/footer-brand-description.js.map +1 -0
- package/dist/footer-contact-card.cjs +238 -0
- package/dist/footer-contact-card.cjs.map +1 -0
- package/dist/footer-contact-card.d.cts +65 -0
- package/dist/footer-contact-card.d.ts +65 -0
- package/dist/footer-contact-card.js +216 -0
- package/dist/footer-contact-card.js.map +1 -0
- package/dist/footer-cta-banner.cjs +282 -0
- package/dist/footer-cta-banner.cjs.map +1 -0
- package/dist/footer-cta-banner.d.cts +77 -0
- package/dist/footer-cta-banner.d.ts +77 -0
- package/dist/footer-cta-banner.js +260 -0
- package/dist/footer-cta-banner.js.map +1 -0
- package/dist/footer-cta-social.cjs +221 -0
- package/dist/footer-cta-social.cjs.map +1 -0
- package/dist/footer-cta-social.d.cts +45 -0
- package/dist/footer-cta-social.d.ts +45 -0
- package/dist/footer-cta-social.js +199 -0
- package/dist/footer-cta-social.js.map +1 -0
- package/dist/footer-links-grid.cjs +119 -0
- package/dist/footer-links-grid.cjs.map +1 -0
- package/dist/footer-links-grid.d.cts +54 -0
- package/dist/footer-links-grid.d.ts +54 -0
- package/dist/footer-links-grid.js +117 -0
- package/dist/footer-links-grid.js.map +1 -0
- package/dist/footer-nav-social.cjs +273 -0
- package/dist/footer-nav-social.cjs.map +1 -0
- package/dist/footer-nav-social.d.cts +72 -0
- package/dist/footer-nav-social.d.ts +72 -0
- package/dist/footer-nav-social.js +251 -0
- package/dist/footer-nav-social.js.map +1 -0
- package/dist/footer-newsletter-grid.cjs +271 -0
- package/dist/footer-newsletter-grid.cjs.map +1 -0
- package/dist/footer-newsletter-grid.d.cts +74 -0
- package/dist/footer-newsletter-grid.d.ts +74 -0
- package/dist/footer-newsletter-grid.js +249 -0
- package/dist/footer-newsletter-grid.js.map +1 -0
- package/dist/footer-newsletter-minimal.cjs +271 -0
- package/dist/footer-newsletter-minimal.cjs.map +1 -0
- package/dist/footer-newsletter-minimal.d.cts +57 -0
- package/dist/footer-newsletter-minimal.d.ts +57 -0
- package/dist/footer-newsletter-minimal.js +249 -0
- package/dist/footer-newsletter-minimal.js.map +1 -0
- package/dist/footer-simple-centered.cjs +101 -0
- package/dist/footer-simple-centered.cjs.map +1 -0
- package/dist/footer-simple-centered.d.cts +52 -0
- package/dist/footer-simple-centered.d.ts +52 -0
- package/dist/footer-simple-centered.js +99 -0
- package/dist/footer-simple-centered.js.map +1 -0
- package/dist/footer-social-apps.cjs +247 -0
- package/dist/footer-social-apps.cjs.map +1 -0
- package/dist/footer-social-apps.d.cts +75 -0
- package/dist/footer-social-apps.d.ts +75 -0
- package/dist/footer-social-apps.js +225 -0
- package/dist/footer-social-apps.js.map +1 -0
- package/dist/footer-social-newsletter.cjs +267 -0
- package/dist/footer-social-newsletter.cjs.map +1 -0
- package/dist/footer-social-newsletter.d.cts +68 -0
- package/dist/footer-social-newsletter.d.ts +68 -0
- package/dist/footer-social-newsletter.js +245 -0
- package/dist/footer-social-newsletter.js.map +1 -0
- package/dist/index.cjs +1501 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +1489 -1
- package/dist/index.js.map +1 -1
- package/dist/registry.cjs +1971 -1
- package/dist/registry.cjs.map +1 -1
- package/dist/registry.js +1971 -1
- package/dist/registry.js.map +1 -1
- package/dist/team-media-showcase.cjs +182 -0
- package/dist/team-media-showcase.cjs.map +1 -0
- package/dist/team-media-showcase.d.cts +145 -0
- package/dist/team-media-showcase.d.ts +145 -0
- package/dist/team-media-showcase.js +160 -0
- package/dist/team-media-showcase.js.map +1 -0
- package/package.json +71 -1
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var tailwindMerge = require('tailwind-merge');
|
|
6
|
+
var img = require('@page-speed/img');
|
|
7
|
+
var React = require('react');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
+
|
|
10
|
+
function _interopNamespace(e) {
|
|
11
|
+
if (e && e.__esModule) return e;
|
|
12
|
+
var n = Object.create(null);
|
|
13
|
+
if (e) {
|
|
14
|
+
Object.keys(e).forEach(function (k) {
|
|
15
|
+
if (k !== 'default') {
|
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return e[k]; }
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
n.default = e;
|
|
25
|
+
return Object.freeze(n);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
29
|
+
|
|
30
|
+
// lib/utils.ts
|
|
31
|
+
function cn(...inputs) {
|
|
32
|
+
return tailwindMerge.twMerge(clsx.clsx(inputs));
|
|
33
|
+
}
|
|
34
|
+
var svgCache = /* @__PURE__ */ new Map();
|
|
35
|
+
function DynamicIcon({
|
|
36
|
+
name,
|
|
37
|
+
size = 28,
|
|
38
|
+
color,
|
|
39
|
+
className,
|
|
40
|
+
alt
|
|
41
|
+
}) {
|
|
42
|
+
const [svgContent, setSvgContent] = React__namespace.useState(null);
|
|
43
|
+
const [isLoading, setIsLoading] = React__namespace.useState(true);
|
|
44
|
+
const [error, setError] = React__namespace.useState(null);
|
|
45
|
+
const { url, iconName } = React__namespace.useMemo(() => {
|
|
46
|
+
const separator = name.includes("/") ? "/" : ":";
|
|
47
|
+
const [prefix, iconName2] = name.split(separator);
|
|
48
|
+
const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
|
|
49
|
+
return {
|
|
50
|
+
url: baseUrl,
|
|
51
|
+
iconName: iconName2
|
|
52
|
+
};
|
|
53
|
+
}, [name, size]);
|
|
54
|
+
React__namespace.useEffect(() => {
|
|
55
|
+
let isMounted = true;
|
|
56
|
+
const fetchSvg = async () => {
|
|
57
|
+
const cached = svgCache.get(url);
|
|
58
|
+
if (cached) {
|
|
59
|
+
if (isMounted) {
|
|
60
|
+
setSvgContent(cached);
|
|
61
|
+
setIsLoading(false);
|
|
62
|
+
}
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
try {
|
|
66
|
+
setIsLoading(true);
|
|
67
|
+
setError(null);
|
|
68
|
+
const response = await fetch(url);
|
|
69
|
+
if (!response.ok) {
|
|
70
|
+
throw new Error(`Failed to fetch icon: ${response.status}`);
|
|
71
|
+
}
|
|
72
|
+
let svg = await response.text();
|
|
73
|
+
svg = processSvgForCurrentColor(svg);
|
|
74
|
+
svgCache.set(url, svg);
|
|
75
|
+
if (isMounted) {
|
|
76
|
+
setSvgContent(svg);
|
|
77
|
+
setIsLoading(false);
|
|
78
|
+
}
|
|
79
|
+
} catch (err) {
|
|
80
|
+
if (isMounted) {
|
|
81
|
+
setError(err instanceof Error ? err.message : "Failed to load icon");
|
|
82
|
+
setIsLoading(false);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
fetchSvg();
|
|
87
|
+
return () => {
|
|
88
|
+
isMounted = false;
|
|
89
|
+
};
|
|
90
|
+
}, [url]);
|
|
91
|
+
if (isLoading) {
|
|
92
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
93
|
+
"span",
|
|
94
|
+
{
|
|
95
|
+
className: cn("inline-block", className),
|
|
96
|
+
style: { width: size, height: size },
|
|
97
|
+
"aria-hidden": "true"
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
if (error || !svgContent) {
|
|
102
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
"span",
|
|
104
|
+
{
|
|
105
|
+
className: cn("inline-block", className),
|
|
106
|
+
style: { width: size, height: size },
|
|
107
|
+
role: "img",
|
|
108
|
+
"aria-label": alt || iconName
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
113
|
+
"span",
|
|
114
|
+
{
|
|
115
|
+
className: cn("inline-flex items-center justify-center", className),
|
|
116
|
+
style: {
|
|
117
|
+
width: size,
|
|
118
|
+
height: size,
|
|
119
|
+
color: color || "inherit"
|
|
120
|
+
},
|
|
121
|
+
role: "img",
|
|
122
|
+
"aria-label": alt || iconName,
|
|
123
|
+
dangerouslySetInnerHTML: { __html: svgContent }
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
function processSvgForCurrentColor(svg) {
|
|
128
|
+
let processed = svg;
|
|
129
|
+
processed = processed.replace(
|
|
130
|
+
/stroke=["'](#000000|#000|black)["']/gi,
|
|
131
|
+
'stroke="currentColor"'
|
|
132
|
+
);
|
|
133
|
+
processed = processed.replace(
|
|
134
|
+
/fill=["'](#000000|#000|black)["']/gi,
|
|
135
|
+
'fill="currentColor"'
|
|
136
|
+
);
|
|
137
|
+
return processed;
|
|
138
|
+
}
|
|
139
|
+
var defaultSections = [
|
|
140
|
+
{
|
|
141
|
+
title: "Product",
|
|
142
|
+
links: [
|
|
143
|
+
{ name: "Overview", href: "#" },
|
|
144
|
+
{ name: "Pricing", href: "#" },
|
|
145
|
+
{ name: "Marketplace", href: "#" },
|
|
146
|
+
{ name: "Features", href: "#" }
|
|
147
|
+
]
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
title: "Company",
|
|
151
|
+
links: [
|
|
152
|
+
{ name: "About", href: "#" },
|
|
153
|
+
{ name: "Team", href: "#" },
|
|
154
|
+
{ name: "Blog", href: "#" },
|
|
155
|
+
{ name: "Careers", href: "#" }
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
title: "Resources",
|
|
160
|
+
links: [
|
|
161
|
+
{ name: "Help", href: "#" },
|
|
162
|
+
{ name: "Sales", href: "#" },
|
|
163
|
+
{ name: "Advertise", href: "#" },
|
|
164
|
+
{ name: "Privacy", href: "#" }
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
];
|
|
168
|
+
var defaultSocialLinks = [
|
|
169
|
+
{ icon: "simple-icons/instagram", href: "#", label: "Instagram" },
|
|
170
|
+
{ icon: "simple-icons/facebook", href: "#", label: "Facebook" },
|
|
171
|
+
{ icon: "simple-icons/x", href: "#", label: "X (Twitter)" },
|
|
172
|
+
{ icon: "simple-icons/linkedin", href: "#", label: "LinkedIn" }
|
|
173
|
+
];
|
|
174
|
+
var defaultLegalLinks = [
|
|
175
|
+
{ name: "Terms and Conditions", href: "#" },
|
|
176
|
+
{ name: "Privacy Policy", href: "#" }
|
|
177
|
+
];
|
|
178
|
+
function FooterBrandDescription({
|
|
179
|
+
logo = {
|
|
180
|
+
url: "https://opensite.ai",
|
|
181
|
+
src: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/os-suircle-black-white.png",
|
|
182
|
+
alt: "Opensite AI",
|
|
183
|
+
title: "Opensite AI"
|
|
184
|
+
},
|
|
185
|
+
className,
|
|
186
|
+
sections = defaultSections,
|
|
187
|
+
description = "A collection of components for your startup business or side project.",
|
|
188
|
+
socialLinks = defaultSocialLinks,
|
|
189
|
+
copyright = `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Opensite AI. All rights reserved.`,
|
|
190
|
+
legalLinks = defaultLegalLinks,
|
|
191
|
+
optixFlowConfig
|
|
192
|
+
}) {
|
|
193
|
+
return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
|
|
194
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-left", children: [
|
|
195
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-between gap-6 lg:items-start", children: [
|
|
196
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 lg:justify-start", children: [
|
|
197
|
+
/* @__PURE__ */ jsxRuntime.jsx("a", { href: logo.url, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
198
|
+
img.Img,
|
|
199
|
+
{
|
|
200
|
+
src: logo.src,
|
|
201
|
+
alt: logo.alt,
|
|
202
|
+
className: "h-8",
|
|
203
|
+
optixFlowConfig
|
|
204
|
+
}
|
|
205
|
+
) }),
|
|
206
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: logo.title })
|
|
207
|
+
] }),
|
|
208
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-[70%] text-sm text-muted-foreground", children: description }),
|
|
209
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex items-center space-x-6 text-muted-foreground", children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "font-medium hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20 }) }) }, idx)) })
|
|
210
|
+
] }),
|
|
211
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full gap-6 md:grid-cols-3 lg:gap-20", children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
212
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 font-bold", children: section.title }),
|
|
213
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3 text-sm text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
214
|
+
"li",
|
|
215
|
+
{
|
|
216
|
+
className: "font-medium hover:text-primary",
|
|
217
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, children: link.name })
|
|
218
|
+
},
|
|
219
|
+
linkIdx
|
|
220
|
+
)) })
|
|
221
|
+
] }, sectionIdx)) })
|
|
222
|
+
] }),
|
|
223
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left", children: [
|
|
224
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "order-2 flex flex-col gap-2 lg:order-1 lg:flex-row lg:items-center lg:gap-4", children: [
|
|
225
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { children: copyright }),
|
|
226
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
227
|
+
"a",
|
|
228
|
+
{
|
|
229
|
+
href: "https://opensite.ai",
|
|
230
|
+
className: "hover:text-primary",
|
|
231
|
+
target: "_blank",
|
|
232
|
+
rel: "noopener noreferrer",
|
|
233
|
+
children: "AI Website and Automation Platform by Opensite"
|
|
234
|
+
}
|
|
235
|
+
)
|
|
236
|
+
] }),
|
|
237
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "order-1 flex flex-col gap-2 md:order-2 md:flex-row", children: legalLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, children: link.name }) }, idx)) })
|
|
238
|
+
] })
|
|
239
|
+
] }) });
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
exports.FooterBrandDescription = FooterBrandDescription;
|
|
243
|
+
//# sourceMappingURL=footer-brand-description.cjs.map
|
|
244
|
+
//# sourceMappingURL=footer-brand-description.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/utils.ts","../components/ui/dynamic-icon.tsx","../components/blocks/footers/footer-brand-description.tsx"],"names":["twMerge","clsx","React","iconName","jsx","jsxs","Img"],"mappings":"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","file":"footer-brand-description.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\ninterface DynamicIconProps {\n /**\n * Icon name in format: prefix/name or prefix:name\n * Examples: \"lucide/home\", \"mdi:account\", \"heroicons/check\"\n */\n name: string;\n /**\n * Icon size in pixels\n * @default 28\n */\n size?: number;\n /**\n * Icon color - accepts any valid CSS color\n * Note: When not specified, the icon inherits color from parent via CSS currentColor\n */\n color?: string;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Alt text for accessibility\n */\n alt?: string;\n}\n\n// Simple in-memory cache for fetched SVGs\nconst svgCache = new Map<string, string>();\n\n/**\n * Lightweight icon component that dynamically loads SVG icons from icons.opensite.ai API.\n *\n * Features:\n * - Pulls SVGs from https://icons.opensite.ai API and inlines them for CSS color inheritance\n * - Supports currentColor - icons inherit color from parent element\n * - Accepts prefix/name or prefix:name format\n * - Customizable size and explicit color via props\n * - In-memory caching to prevent duplicate fetches\n *\n * @example\n * ```tsx\n * // Icon inherits color from parent (recommended for hover states, etc.)\n * <span className=\"text-white hover:text-red-500\">\n * <DynamicIcon name=\"lucide/home\" size={24} />\n * </span>\n *\n * // Icon with explicit color\n * <DynamicIcon name=\"mdi:account\" size={32} color=\"#ff0000\" />\n * ```\n */\nexport function DynamicIcon({\n name,\n size = 28,\n color,\n className,\n alt,\n}: DynamicIconProps) {\n const [svgContent, setSvgContent] = React.useState<string | null>(null);\n const [isLoading, setIsLoading] = React.useState(true);\n const [error, setError] = React.useState<string | null>(null);\n\n const { url, iconName } = React.useMemo(() => {\n const separator = name.includes(\"/\") ? \"/\" : \":\";\n const [prefix, iconName] = name.split(separator);\n // Don't pass color to API - we'll handle it via CSS\n const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName}?format=svg&width=${size}&height=${size}`;\n\n return {\n url: baseUrl,\n iconName,\n };\n }, [name, size]);\n\n React.useEffect(() => {\n let isMounted = true;\n\n const fetchSvg = async () => {\n // Check cache first\n const cached = svgCache.get(url);\n if (cached) {\n if (isMounted) {\n setSvgContent(cached);\n setIsLoading(false);\n }\n return;\n }\n\n try {\n setIsLoading(true);\n setError(null);\n\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`Failed to fetch icon: ${response.status}`);\n }\n\n let svg = await response.text();\n\n // Process SVG to ensure currentColor works:\n // 1. Replace any hardcoded colors with currentColor\n // 2. Ensure stroke/fill use currentColor where appropriate\n svg = processSvgForCurrentColor(svg);\n\n // Cache the processed SVG\n svgCache.set(url, svg);\n\n if (isMounted) {\n setSvgContent(svg);\n setIsLoading(false);\n }\n } catch (err) {\n if (isMounted) {\n setError(err instanceof Error ? err.message : \"Failed to load icon\");\n setIsLoading(false);\n }\n }\n };\n\n fetchSvg();\n\n return () => {\n isMounted = false;\n };\n }, [url]);\n\n // Loading state - show placeholder with same dimensions\n if (isLoading) {\n return (\n <span\n className={cn(\"inline-block\", className)}\n style={{ width: size, height: size }}\n aria-hidden=\"true\"\n />\n );\n }\n\n // Error state - show nothing or fallback\n if (error || !svgContent) {\n return (\n <span\n className={cn(\"inline-block\", className)}\n style={{ width: size, height: size }}\n role=\"img\"\n aria-label={alt || iconName}\n />\n );\n }\n\n // Render inline SVG\n // The color prop applies an explicit color, otherwise inherits from parent via currentColor\n return (\n <span\n className={cn(\"inline-flex items-center justify-center\", className)}\n style={{\n width: size,\n height: size,\n color: color || \"inherit\",\n }}\n role=\"img\"\n aria-label={alt || iconName}\n dangerouslySetInnerHTML={{ __html: svgContent }}\n />\n );\n}\n\n/**\n * Process SVG to ensure it uses currentColor for proper CSS inheritance.\n * This handles various icon libraries that may use different color approaches.\n */\nfunction processSvgForCurrentColor(svg: string): string {\n // Replace stroke=\"currentColor\" is already correct, but ensure fill also works\n // Some icons use fill=\"none\" with stroke, others use fill with no stroke\n\n // Ensure the SVG doesn't have hardcoded colors that should be currentColor\n // Common patterns to replace:\n // - stroke=\"#000\" or stroke=\"#000000\" or stroke=\"black\" -> stroke=\"currentColor\"\n // - fill=\"#000\" or fill=\"#000000\" or fill=\"black\" -> fill=\"currentColor\"\n\n let processed = svg;\n\n // Replace common black color values with currentColor for stroke\n processed = processed.replace(\n /stroke=[\"'](#000000|#000|black)[\"']/gi,\n 'stroke=\"currentColor\"'\n );\n\n // Replace common black color values with currentColor for fill\n // But be careful not to replace fill=\"none\"\n processed = processed.replace(\n /fill=[\"'](#000000|#000|black)[\"']/gi,\n 'fill=\"currentColor\"'\n );\n\n return processed;\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../../lib/utils\";\nimport { Img } from \"@page-speed/img\";\nimport { DynamicIcon } from \"../../ui/dynamic-icon\";\n\n/**\n * Social link configuration\n */\nexport interface FooterBrandDescriptionSocialLink {\n /** Icon name in format: prefix/name (e.g., \"simple-icons/instagram\") */\n icon: string;\n /** Link URL */\n href: string;\n /** Accessible label */\n label: string;\n}\n\n/**\n * Navigation section configuration\n */\nexport interface FooterBrandDescriptionSection {\n title: string;\n links: {\n name: string;\n href: string;\n }[];\n}\n\n/**\n * Props for the FooterBrandDescription component\n */\nexport interface FooterBrandDescriptionProps {\n /** Logo configuration */\n logo?: {\n url: string;\n src: string;\n alt: string;\n title: string;\n };\n /** Additional CSS classes */\n className?: string;\n /** Navigation sections */\n sections?: FooterBrandDescriptionSection[];\n /** Brand description text */\n description?: string;\n /** Social media links */\n socialLinks?: FooterBrandDescriptionSocialLink[];\n /** Copyright text */\n copyright?: string;\n /** Legal links (terms, privacy, etc.) */\n legalLinks?: {\n name: string;\n href: string;\n }[];\n /** Optional Optix Flow configuration for @page-speed/img */\n optixFlowConfig?: {\n apiKey: string;\n compression?: number;\n };\n}\n\nconst defaultSections: FooterBrandDescriptionSection[] = [\n {\n title: \"Product\",\n links: [\n { name: \"Overview\", href: \"#\" },\n { name: \"Pricing\", href: \"#\" },\n { name: \"Marketplace\", href: \"#\" },\n { name: \"Features\", href: \"#\" },\n ],\n },\n {\n title: \"Company\",\n links: [\n { name: \"About\", href: \"#\" },\n { name: \"Team\", href: \"#\" },\n { name: \"Blog\", href: \"#\" },\n { name: \"Careers\", href: \"#\" },\n ],\n },\n {\n title: \"Resources\",\n links: [\n { name: \"Help\", href: \"#\" },\n { name: \"Sales\", href: \"#\" },\n { name: \"Advertise\", href: \"#\" },\n { name: \"Privacy\", href: \"#\" },\n ],\n },\n];\n\nconst defaultSocialLinks: FooterBrandDescriptionSocialLink[] = [\n { icon: \"simple-icons/instagram\", href: \"#\", label: \"Instagram\" },\n { icon: \"simple-icons/facebook\", href: \"#\", label: \"Facebook\" },\n { icon: \"simple-icons/x\", href: \"#\", label: \"X (Twitter)\" },\n { icon: \"simple-icons/linkedin\", href: \"#\", label: \"LinkedIn\" },\n];\n\nconst defaultLegalLinks = [\n { name: \"Terms and Conditions\", href: \"#\" },\n { name: \"Privacy Policy\", href: \"#\" },\n];\n\n/**\n * FooterBrandDescription - A footer with logo, description, social icons, and navigation.\n *\n * Features a prominent brand section with logo, description, and social links on the left,\n * with multi-column navigation on the right. Ideal for brand-focused websites, startups,\n * and businesses that want to emphasize their identity and social presence in the footer.\n */\nexport function FooterBrandDescription({\n logo = {\n url: \"https://opensite.ai\",\n src: \"https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/os-suircle-black-white.png\",\n alt: \"Opensite AI\",\n title: \"Opensite AI\",\n },\n className,\n sections = defaultSections,\n description = \"A collection of components for your startup business or side project.\",\n socialLinks = defaultSocialLinks,\n copyright = `© ${new Date().getFullYear()} Opensite AI. All rights reserved.`,\n legalLinks = defaultLegalLinks,\n optixFlowConfig,\n}: FooterBrandDescriptionProps): React.JSX.Element {\n return (\n <section className={cn(\"py-32\", className)}>\n <div className=\"container\">\n <div className=\"flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-left\">\n <div className=\"flex w-full flex-col justify-between gap-6 lg:items-start\">\n <div className=\"flex items-center gap-2 lg:justify-start\">\n <a href={logo.url}>\n <Img\n src={logo.src}\n alt={logo.alt}\n className=\"h-8\"\n optixFlowConfig={optixFlowConfig}\n />\n </a>\n <h2 className=\"text-xl font-semibold\">{logo.title}</h2>\n </div>\n <p className=\"max-w-[70%] text-sm text-muted-foreground\">\n {description}\n </p>\n <ul className=\"flex items-center space-x-6 text-muted-foreground\">\n {socialLinks.map((social, idx) => (\n <li key={idx} className=\"font-medium hover:text-primary\">\n <a href={social.href} aria-label={social.label}>\n <DynamicIcon name={social.icon} size={20} />\n </a>\n </li>\n ))}\n </ul>\n </div>\n <div className=\"grid w-full gap-6 md:grid-cols-3 lg:gap-20\">\n {sections.map((section, sectionIdx) => (\n <div key={sectionIdx}>\n <h3 className=\"mb-4 font-bold\">{section.title}</h3>\n <ul className=\"space-y-3 text-sm text-muted-foreground\">\n {section.links.map((link, linkIdx) => (\n <li\n key={linkIdx}\n className=\"font-medium hover:text-primary\"\n >\n <a href={link.href}>{link.name}</a>\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n <div className=\"mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left\">\n <div className=\"order-2 flex flex-col gap-2 lg:order-1 lg:flex-row lg:items-center lg:gap-4\">\n <p>{copyright}</p>\n <a\n href=\"https://opensite.ai\"\n className=\"hover:text-primary\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n AI Website and Automation Platform by Opensite\n </a>\n </div>\n <ul className=\"order-1 flex flex-col gap-2 md:order-2 md:flex-row\">\n {legalLinks.map((link, idx) => (\n <li key={idx} className=\"hover:text-primary\">\n <a href={link.href}>{link.name}</a>\n </li>\n ))}\n </ul>\n </div>\n </div>\n </section>\n );\n}\n"]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Social link configuration
|
|
5
|
+
*/
|
|
6
|
+
interface FooterBrandDescriptionSocialLink {
|
|
7
|
+
/** Icon name in format: prefix/name (e.g., "simple-icons/instagram") */
|
|
8
|
+
icon: string;
|
|
9
|
+
/** Link URL */
|
|
10
|
+
href: string;
|
|
11
|
+
/** Accessible label */
|
|
12
|
+
label: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Navigation section configuration
|
|
16
|
+
*/
|
|
17
|
+
interface FooterBrandDescriptionSection {
|
|
18
|
+
title: string;
|
|
19
|
+
links: {
|
|
20
|
+
name: string;
|
|
21
|
+
href: string;
|
|
22
|
+
}[];
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Props for the FooterBrandDescription component
|
|
26
|
+
*/
|
|
27
|
+
interface FooterBrandDescriptionProps {
|
|
28
|
+
/** Logo configuration */
|
|
29
|
+
logo?: {
|
|
30
|
+
url: string;
|
|
31
|
+
src: string;
|
|
32
|
+
alt: string;
|
|
33
|
+
title: string;
|
|
34
|
+
};
|
|
35
|
+
/** Additional CSS classes */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Navigation sections */
|
|
38
|
+
sections?: FooterBrandDescriptionSection[];
|
|
39
|
+
/** Brand description text */
|
|
40
|
+
description?: string;
|
|
41
|
+
/** Social media links */
|
|
42
|
+
socialLinks?: FooterBrandDescriptionSocialLink[];
|
|
43
|
+
/** Copyright text */
|
|
44
|
+
copyright?: string;
|
|
45
|
+
/** Legal links (terms, privacy, etc.) */
|
|
46
|
+
legalLinks?: {
|
|
47
|
+
name: string;
|
|
48
|
+
href: string;
|
|
49
|
+
}[];
|
|
50
|
+
/** Optional Optix Flow configuration for @page-speed/img */
|
|
51
|
+
optixFlowConfig?: {
|
|
52
|
+
apiKey: string;
|
|
53
|
+
compression?: number;
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* FooterBrandDescription - A footer with logo, description, social icons, and navigation.
|
|
58
|
+
*
|
|
59
|
+
* Features a prominent brand section with logo, description, and social links on the left,
|
|
60
|
+
* with multi-column navigation on the right. Ideal for brand-focused websites, startups,
|
|
61
|
+
* and businesses that want to emphasize their identity and social presence in the footer.
|
|
62
|
+
*/
|
|
63
|
+
declare function FooterBrandDescription({ logo, className, sections, description, socialLinks, copyright, legalLinks, optixFlowConfig, }: FooterBrandDescriptionProps): React.JSX.Element;
|
|
64
|
+
|
|
65
|
+
export { FooterBrandDescription, type FooterBrandDescriptionProps, type FooterBrandDescriptionSection, type FooterBrandDescriptionSocialLink };
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Social link configuration
|
|
5
|
+
*/
|
|
6
|
+
interface FooterBrandDescriptionSocialLink {
|
|
7
|
+
/** Icon name in format: prefix/name (e.g., "simple-icons/instagram") */
|
|
8
|
+
icon: string;
|
|
9
|
+
/** Link URL */
|
|
10
|
+
href: string;
|
|
11
|
+
/** Accessible label */
|
|
12
|
+
label: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Navigation section configuration
|
|
16
|
+
*/
|
|
17
|
+
interface FooterBrandDescriptionSection {
|
|
18
|
+
title: string;
|
|
19
|
+
links: {
|
|
20
|
+
name: string;
|
|
21
|
+
href: string;
|
|
22
|
+
}[];
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Props for the FooterBrandDescription component
|
|
26
|
+
*/
|
|
27
|
+
interface FooterBrandDescriptionProps {
|
|
28
|
+
/** Logo configuration */
|
|
29
|
+
logo?: {
|
|
30
|
+
url: string;
|
|
31
|
+
src: string;
|
|
32
|
+
alt: string;
|
|
33
|
+
title: string;
|
|
34
|
+
};
|
|
35
|
+
/** Additional CSS classes */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Navigation sections */
|
|
38
|
+
sections?: FooterBrandDescriptionSection[];
|
|
39
|
+
/** Brand description text */
|
|
40
|
+
description?: string;
|
|
41
|
+
/** Social media links */
|
|
42
|
+
socialLinks?: FooterBrandDescriptionSocialLink[];
|
|
43
|
+
/** Copyright text */
|
|
44
|
+
copyright?: string;
|
|
45
|
+
/** Legal links (terms, privacy, etc.) */
|
|
46
|
+
legalLinks?: {
|
|
47
|
+
name: string;
|
|
48
|
+
href: string;
|
|
49
|
+
}[];
|
|
50
|
+
/** Optional Optix Flow configuration for @page-speed/img */
|
|
51
|
+
optixFlowConfig?: {
|
|
52
|
+
apiKey: string;
|
|
53
|
+
compression?: number;
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* FooterBrandDescription - A footer with logo, description, social icons, and navigation.
|
|
58
|
+
*
|
|
59
|
+
* Features a prominent brand section with logo, description, and social links on the left,
|
|
60
|
+
* with multi-column navigation on the right. Ideal for brand-focused websites, startups,
|
|
61
|
+
* and businesses that want to emphasize their identity and social presence in the footer.
|
|
62
|
+
*/
|
|
63
|
+
declare function FooterBrandDescription({ logo, className, sections, description, socialLinks, copyright, legalLinks, optixFlowConfig, }: FooterBrandDescriptionProps): React.JSX.Element;
|
|
64
|
+
|
|
65
|
+
export { FooterBrandDescription, type FooterBrandDescriptionProps, type FooterBrandDescriptionSection, type FooterBrandDescriptionSocialLink };
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { Img } from '@page-speed/img';
|
|
5
|
+
import * as React from 'react';
|
|
6
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
// lib/utils.ts
|
|
9
|
+
function cn(...inputs) {
|
|
10
|
+
return twMerge(clsx(inputs));
|
|
11
|
+
}
|
|
12
|
+
var svgCache = /* @__PURE__ */ new Map();
|
|
13
|
+
function DynamicIcon({
|
|
14
|
+
name,
|
|
15
|
+
size = 28,
|
|
16
|
+
color,
|
|
17
|
+
className,
|
|
18
|
+
alt
|
|
19
|
+
}) {
|
|
20
|
+
const [svgContent, setSvgContent] = React.useState(null);
|
|
21
|
+
const [isLoading, setIsLoading] = React.useState(true);
|
|
22
|
+
const [error, setError] = React.useState(null);
|
|
23
|
+
const { url, iconName } = React.useMemo(() => {
|
|
24
|
+
const separator = name.includes("/") ? "/" : ":";
|
|
25
|
+
const [prefix, iconName2] = name.split(separator);
|
|
26
|
+
const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
|
|
27
|
+
return {
|
|
28
|
+
url: baseUrl,
|
|
29
|
+
iconName: iconName2
|
|
30
|
+
};
|
|
31
|
+
}, [name, size]);
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
let isMounted = true;
|
|
34
|
+
const fetchSvg = async () => {
|
|
35
|
+
const cached = svgCache.get(url);
|
|
36
|
+
if (cached) {
|
|
37
|
+
if (isMounted) {
|
|
38
|
+
setSvgContent(cached);
|
|
39
|
+
setIsLoading(false);
|
|
40
|
+
}
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
try {
|
|
44
|
+
setIsLoading(true);
|
|
45
|
+
setError(null);
|
|
46
|
+
const response = await fetch(url);
|
|
47
|
+
if (!response.ok) {
|
|
48
|
+
throw new Error(`Failed to fetch icon: ${response.status}`);
|
|
49
|
+
}
|
|
50
|
+
let svg = await response.text();
|
|
51
|
+
svg = processSvgForCurrentColor(svg);
|
|
52
|
+
svgCache.set(url, svg);
|
|
53
|
+
if (isMounted) {
|
|
54
|
+
setSvgContent(svg);
|
|
55
|
+
setIsLoading(false);
|
|
56
|
+
}
|
|
57
|
+
} catch (err) {
|
|
58
|
+
if (isMounted) {
|
|
59
|
+
setError(err instanceof Error ? err.message : "Failed to load icon");
|
|
60
|
+
setIsLoading(false);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
fetchSvg();
|
|
65
|
+
return () => {
|
|
66
|
+
isMounted = false;
|
|
67
|
+
};
|
|
68
|
+
}, [url]);
|
|
69
|
+
if (isLoading) {
|
|
70
|
+
return /* @__PURE__ */ jsx(
|
|
71
|
+
"span",
|
|
72
|
+
{
|
|
73
|
+
className: cn("inline-block", className),
|
|
74
|
+
style: { width: size, height: size },
|
|
75
|
+
"aria-hidden": "true"
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
if (error || !svgContent) {
|
|
80
|
+
return /* @__PURE__ */ jsx(
|
|
81
|
+
"span",
|
|
82
|
+
{
|
|
83
|
+
className: cn("inline-block", className),
|
|
84
|
+
style: { width: size, height: size },
|
|
85
|
+
role: "img",
|
|
86
|
+
"aria-label": alt || iconName
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
return /* @__PURE__ */ jsx(
|
|
91
|
+
"span",
|
|
92
|
+
{
|
|
93
|
+
className: cn("inline-flex items-center justify-center", className),
|
|
94
|
+
style: {
|
|
95
|
+
width: size,
|
|
96
|
+
height: size,
|
|
97
|
+
color: color || "inherit"
|
|
98
|
+
},
|
|
99
|
+
role: "img",
|
|
100
|
+
"aria-label": alt || iconName,
|
|
101
|
+
dangerouslySetInnerHTML: { __html: svgContent }
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
function processSvgForCurrentColor(svg) {
|
|
106
|
+
let processed = svg;
|
|
107
|
+
processed = processed.replace(
|
|
108
|
+
/stroke=["'](#000000|#000|black)["']/gi,
|
|
109
|
+
'stroke="currentColor"'
|
|
110
|
+
);
|
|
111
|
+
processed = processed.replace(
|
|
112
|
+
/fill=["'](#000000|#000|black)["']/gi,
|
|
113
|
+
'fill="currentColor"'
|
|
114
|
+
);
|
|
115
|
+
return processed;
|
|
116
|
+
}
|
|
117
|
+
var defaultSections = [
|
|
118
|
+
{
|
|
119
|
+
title: "Product",
|
|
120
|
+
links: [
|
|
121
|
+
{ name: "Overview", href: "#" },
|
|
122
|
+
{ name: "Pricing", href: "#" },
|
|
123
|
+
{ name: "Marketplace", href: "#" },
|
|
124
|
+
{ name: "Features", href: "#" }
|
|
125
|
+
]
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
title: "Company",
|
|
129
|
+
links: [
|
|
130
|
+
{ name: "About", href: "#" },
|
|
131
|
+
{ name: "Team", href: "#" },
|
|
132
|
+
{ name: "Blog", href: "#" },
|
|
133
|
+
{ name: "Careers", href: "#" }
|
|
134
|
+
]
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
title: "Resources",
|
|
138
|
+
links: [
|
|
139
|
+
{ name: "Help", href: "#" },
|
|
140
|
+
{ name: "Sales", href: "#" },
|
|
141
|
+
{ name: "Advertise", href: "#" },
|
|
142
|
+
{ name: "Privacy", href: "#" }
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
];
|
|
146
|
+
var defaultSocialLinks = [
|
|
147
|
+
{ icon: "simple-icons/instagram", href: "#", label: "Instagram" },
|
|
148
|
+
{ icon: "simple-icons/facebook", href: "#", label: "Facebook" },
|
|
149
|
+
{ icon: "simple-icons/x", href: "#", label: "X (Twitter)" },
|
|
150
|
+
{ icon: "simple-icons/linkedin", href: "#", label: "LinkedIn" }
|
|
151
|
+
];
|
|
152
|
+
var defaultLegalLinks = [
|
|
153
|
+
{ name: "Terms and Conditions", href: "#" },
|
|
154
|
+
{ name: "Privacy Policy", href: "#" }
|
|
155
|
+
];
|
|
156
|
+
function FooterBrandDescription({
|
|
157
|
+
logo = {
|
|
158
|
+
url: "https://opensite.ai",
|
|
159
|
+
src: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/os-suircle-black-white.png",
|
|
160
|
+
alt: "Opensite AI",
|
|
161
|
+
title: "Opensite AI"
|
|
162
|
+
},
|
|
163
|
+
className,
|
|
164
|
+
sections = defaultSections,
|
|
165
|
+
description = "A collection of components for your startup business or side project.",
|
|
166
|
+
socialLinks = defaultSocialLinks,
|
|
167
|
+
copyright = `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} Opensite AI. All rights reserved.`,
|
|
168
|
+
legalLinks = defaultLegalLinks,
|
|
169
|
+
optixFlowConfig
|
|
170
|
+
}) {
|
|
171
|
+
return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
|
|
172
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col justify-between gap-10 lg:flex-row lg:items-start lg:text-left", children: [
|
|
173
|
+
/* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col justify-between gap-6 lg:items-start", children: [
|
|
174
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 lg:justify-start", children: [
|
|
175
|
+
/* @__PURE__ */ jsx("a", { href: logo.url, children: /* @__PURE__ */ jsx(
|
|
176
|
+
Img,
|
|
177
|
+
{
|
|
178
|
+
src: logo.src,
|
|
179
|
+
alt: logo.alt,
|
|
180
|
+
className: "h-8",
|
|
181
|
+
optixFlowConfig
|
|
182
|
+
}
|
|
183
|
+
) }),
|
|
184
|
+
/* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: logo.title })
|
|
185
|
+
] }),
|
|
186
|
+
/* @__PURE__ */ jsx("p", { className: "max-w-[70%] text-sm text-muted-foreground", children: description }),
|
|
187
|
+
/* @__PURE__ */ jsx("ul", { className: "flex items-center space-x-6 text-muted-foreground", children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { className: "font-medium hover:text-primary", children: /* @__PURE__ */ jsx("a", { href: social.href, "aria-label": social.label, children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 }) }) }, idx)) })
|
|
188
|
+
] }),
|
|
189
|
+
/* @__PURE__ */ jsx("div", { className: "grid w-full gap-6 md:grid-cols-3 lg:gap-20", children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { children: [
|
|
190
|
+
/* @__PURE__ */ jsx("h3", { className: "mb-4 font-bold", children: section.title }),
|
|
191
|
+
/* @__PURE__ */ jsx("ul", { className: "space-y-3 text-sm text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
|
|
192
|
+
"li",
|
|
193
|
+
{
|
|
194
|
+
className: "font-medium hover:text-primary",
|
|
195
|
+
children: /* @__PURE__ */ jsx("a", { href: link.href, children: link.name })
|
|
196
|
+
},
|
|
197
|
+
linkIdx
|
|
198
|
+
)) })
|
|
199
|
+
] }, sectionIdx)) })
|
|
200
|
+
] }),
|
|
201
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left", children: [
|
|
202
|
+
/* @__PURE__ */ jsxs("div", { className: "order-2 flex flex-col gap-2 lg:order-1 lg:flex-row lg:items-center lg:gap-4", children: [
|
|
203
|
+
/* @__PURE__ */ jsx("p", { children: copyright }),
|
|
204
|
+
/* @__PURE__ */ jsx(
|
|
205
|
+
"a",
|
|
206
|
+
{
|
|
207
|
+
href: "https://opensite.ai",
|
|
208
|
+
className: "hover:text-primary",
|
|
209
|
+
target: "_blank",
|
|
210
|
+
rel: "noopener noreferrer",
|
|
211
|
+
children: "AI Website and Automation Platform by Opensite"
|
|
212
|
+
}
|
|
213
|
+
)
|
|
214
|
+
] }),
|
|
215
|
+
/* @__PURE__ */ jsx("ul", { className: "order-1 flex flex-col gap-2 md:order-2 md:flex-row", children: legalLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { className: "hover:text-primary", children: /* @__PURE__ */ jsx("a", { href: link.href, children: link.name }) }, idx)) })
|
|
216
|
+
] })
|
|
217
|
+
] }) });
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
export { FooterBrandDescription };
|
|
221
|
+
//# sourceMappingURL=footer-brand-description.js.map
|
|
222
|
+
//# sourceMappingURL=footer-brand-description.js.map
|