@umituz/web-design-system 3.1.4 → 3.1.5
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/package.json
CHANGED
|
@@ -29,67 +29,76 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
29
29
|
return (
|
|
30
30
|
<footer
|
|
31
31
|
ref={ref}
|
|
32
|
-
className={cn('
|
|
32
|
+
className={cn('relative mt-20 transition-theme', className)}
|
|
33
33
|
{...props}
|
|
34
34
|
>
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
{/* Gradient Background */}
|
|
36
|
+
<div className="absolute inset-0 bg-gradient-to-br from-bg-card via-bg-card to-bg-secondary opacity-50"></div>
|
|
37
|
+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent"></div>
|
|
38
|
+
|
|
39
|
+
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
|
|
40
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16">
|
|
41
|
+
{/* Brand Section - Prominent */}
|
|
38
42
|
{brand && (
|
|
39
43
|
<div className="lg:col-span-1">
|
|
40
|
-
<h3 className="text-
|
|
44
|
+
<h3 className="text-2xl font-bold text-text-primary mb-4 tracking-tight">{brand.name}</h3>
|
|
41
45
|
{brand.description && (
|
|
42
|
-
<p className="text-text-secondary text-
|
|
46
|
+
<p className="text-text-secondary text-base leading-relaxed mb-6">{brand.description}</p>
|
|
43
47
|
)}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
{sections?.map((section, index) => (
|
|
49
|
-
<div key={index}>
|
|
50
|
-
<h4 className="font-semibold text-text-primary mb-4 text-sm uppercase tracking-wide">{section.title}</h4>
|
|
51
|
-
<ul className="space-y-3">
|
|
52
|
-
{section.links.map((link, linkIndex) => (
|
|
53
|
-
<li key={linkIndex}>
|
|
48
|
+
{/* Social Icons in Brand Section */}
|
|
49
|
+
{social && social.length > 0 && (
|
|
50
|
+
<div className="flex items-center gap-3">
|
|
51
|
+
{social.map((item, index) => (
|
|
54
52
|
<a
|
|
55
|
-
|
|
56
|
-
|
|
53
|
+
key={index}
|
|
54
|
+
href={item.href}
|
|
55
|
+
target="_blank"
|
|
56
|
+
rel="noopener noreferrer"
|
|
57
|
+
className="flex items-center justify-center w-12 h-12 rounded-xl bg-bg-secondary text-text-secondary hover:bg-primary-gradient hover:text-text-primary border border-border hover:border-transparent transition-all duration-300 hover:scale-110 hover:shadow-xl hover:shadow-primary/20"
|
|
58
|
+
aria-label={item.name}
|
|
59
|
+
title={item.name}
|
|
57
60
|
>
|
|
58
|
-
{
|
|
61
|
+
{item.icon}
|
|
59
62
|
</a>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
))}
|
|
64
|
+
</div>
|
|
65
|
+
)}
|
|
63
66
|
</div>
|
|
64
|
-
)
|
|
67
|
+
)}
|
|
65
68
|
|
|
66
|
-
{/*
|
|
67
|
-
|
|
68
|
-
<div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
69
|
+
{/* Links Sections */}
|
|
70
|
+
<div className="md:col-span-1 lg:col-span-2">
|
|
71
|
+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-8">
|
|
72
|
+
{sections?.map((section, index) => (
|
|
73
|
+
<div key={index}>
|
|
74
|
+
<h4 className="font-semibold text-text-primary mb-4 text-sm uppercase tracking-wider">{section.title}</h4>
|
|
75
|
+
<ul className="space-y-3">
|
|
76
|
+
{section.links.map((link, linkIndex) => (
|
|
77
|
+
<li key={linkIndex}>
|
|
78
|
+
<a
|
|
79
|
+
href={link.href}
|
|
80
|
+
className="text-text-secondary text-base hover:text-primary-light transition-colors duration-200 inline-flex items-center gap-2 group"
|
|
81
|
+
>
|
|
82
|
+
<span className="group-hover:translate-x-1 transition-transform duration-200">→</span>
|
|
83
|
+
{link.label}
|
|
84
|
+
</a>
|
|
85
|
+
</li>
|
|
86
|
+
))}
|
|
87
|
+
</ul>
|
|
88
|
+
</div>
|
|
89
|
+
))}
|
|
85
90
|
</div>
|
|
86
|
-
|
|
91
|
+
</div>
|
|
87
92
|
</div>
|
|
88
93
|
|
|
89
|
-
{/* Copyright */}
|
|
94
|
+
{/* Copyright Bar */}
|
|
90
95
|
{copyright && (
|
|
91
|
-
<div className="border-t border-border mt-
|
|
96
|
+
<div className="border-t border-border/50 mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
92
97
|
<p className="text-sm text-text-secondary">{copyright}</p>
|
|
98
|
+
<div className="flex items-center gap-6 text-sm text-text-secondary">
|
|
99
|
+
<a href="#" className="hover:text-primary-light transition-colors">Privacy</a>
|
|
100
|
+
<a href="#" className="hover:text-primary-light transition-colors">Terms</a>
|
|
101
|
+
</div>
|
|
93
102
|
</div>
|
|
94
103
|
)}
|
|
95
104
|
</div>
|
|
@@ -90,7 +90,7 @@ export const MainNavbar = ({
|
|
|
90
90
|
{/* Logo + App Name */}
|
|
91
91
|
<Link to="/" className="flex items-center gap-2 sm:gap-3">
|
|
92
92
|
{logo}
|
|
93
|
-
<span className="text-xl font-bold text-text-primary
|
|
93
|
+
<span className="text-xl font-bold text-text-primary">{appName}</span>
|
|
94
94
|
</Link>
|
|
95
95
|
|
|
96
96
|
{/* Desktop Menu */}
|