@umituz/web-design-system 3.1.6 → 3.1.7
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,7 +29,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
29
29
|
return (
|
|
30
30
|
<footer
|
|
31
31
|
ref={ref}
|
|
32
|
-
className={cn('relative mt-
|
|
32
|
+
className={cn('relative mt-12 transition-theme overflow-hidden', className)}
|
|
33
33
|
{...props}
|
|
34
34
|
>
|
|
35
35
|
<style>{`
|
|
@@ -43,42 +43,41 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
43
43
|
`}</style>
|
|
44
44
|
|
|
45
45
|
{/* Animated Gradient Background */}
|
|
46
|
-
<div className="absolute inset-0 bg-gradient-to-br from-bg-card via-bg-secondary/
|
|
47
|
-
<div className="absolute inset-0 bg-gradient-
|
|
48
|
-
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent animate-gradient-shift"></div>
|
|
46
|
+
<div className="absolute inset-0 bg-gradient-to-br from-bg-card via-bg-secondary/20 to-bg-card"></div>
|
|
47
|
+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/8 via-transparent to-transparent animate-gradient-shift"></div>
|
|
49
48
|
|
|
50
49
|
{/* Gradient Top Border */}
|
|
51
50
|
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
|
|
52
51
|
|
|
53
|
-
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-
|
|
54
|
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-
|
|
52
|
+
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
|
53
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-12">
|
|
55
54
|
{/* Brand Section - Prominent */}
|
|
56
55
|
{brand && (
|
|
57
56
|
<div className="lg:col-span-1 space-y-6">
|
|
58
|
-
<div className="space-y-
|
|
59
|
-
<h3 className="text-
|
|
57
|
+
<div className="space-y-2">
|
|
58
|
+
<h3 className="text-2xl font-bold text-text-primary tracking-tight">
|
|
60
59
|
{brand.name}
|
|
61
60
|
</h3>
|
|
62
61
|
{brand.description && (
|
|
63
|
-
<p className="text-text-secondary text-
|
|
62
|
+
<p className="text-text-secondary text-sm leading-relaxed">{brand.description}</p>
|
|
64
63
|
)}
|
|
65
64
|
</div>
|
|
66
65
|
|
|
67
|
-
{/* Social Icons
|
|
66
|
+
{/* Social Icons */}
|
|
68
67
|
{social && social.length > 0 && (
|
|
69
|
-
<div className="flex items-center gap-
|
|
68
|
+
<div className="flex items-center gap-3">
|
|
70
69
|
{social.map((item, index) => (
|
|
71
70
|
<a
|
|
72
71
|
key={index}
|
|
73
72
|
href={item.href}
|
|
74
73
|
target="_blank"
|
|
75
74
|
rel="noopener noreferrer"
|
|
76
|
-
className="group relative flex items-center justify-center w-
|
|
75
|
+
className="group relative flex items-center justify-center w-12 h-12 rounded-xl bg-bg-secondary/50 text-text-secondary hover:bg-primary-gradient hover:text-white border border-border/50 hover:border-transparent transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-primary/20"
|
|
77
76
|
aria-label={item.name}
|
|
78
77
|
title={item.name}
|
|
79
78
|
>
|
|
80
79
|
{/* Glow effect */}
|
|
81
|
-
<span className="absolute inset-0 rounded-
|
|
80
|
+
<span className="absolute inset-0 rounded-xl bg-primary/15 blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
|
82
81
|
{/* Icon */}
|
|
83
82
|
<span className="relative">{item.icon}</span>
|
|
84
83
|
</a>
|
|
@@ -92,17 +91,17 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
92
91
|
<div className="md:col-span-1 lg:col-span-2">
|
|
93
92
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
|
|
94
93
|
{sections?.map((section, index) => (
|
|
95
|
-
<div key={index} className="space-y-
|
|
96
|
-
<h4 className="font-
|
|
97
|
-
<ul className="space-y-
|
|
94
|
+
<div key={index} className="space-y-3">
|
|
95
|
+
<h4 className="font-semibold text-text-primary text-sm uppercase tracking-wider">{section.title}</h4>
|
|
96
|
+
<ul className="space-y-2">
|
|
98
97
|
{section.links.map((link, linkIndex) => (
|
|
99
98
|
<li key={linkIndex}>
|
|
100
99
|
<a
|
|
101
100
|
href={link.href}
|
|
102
|
-
className="text-text-secondary text-
|
|
101
|
+
className="text-text-secondary text-sm hover:text-primary-light transition-colors duration-200 inline-flex items-center gap-2 group"
|
|
103
102
|
>
|
|
104
|
-
<span className="opacity-0 group-hover:opacity-100
|
|
105
|
-
<span
|
|
103
|
+
<span className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-primary-light text-xs">→</span>
|
|
104
|
+
<span>{link.label}</span>
|
|
106
105
|
</a>
|
|
107
106
|
</li>
|
|
108
107
|
))}
|
|
@@ -113,9 +112,9 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
113
112
|
</div>
|
|
114
113
|
</div>
|
|
115
114
|
|
|
116
|
-
{/* Copyright Bar
|
|
115
|
+
{/* Copyright Bar */}
|
|
117
116
|
{copyright && (
|
|
118
|
-
<div className="border-t border-border/30 mt-
|
|
117
|
+
<div className="border-t border-border/30 mt-12 pt-6">
|
|
119
118
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
|
|
120
119
|
<p className="text-sm text-text-secondary/80">{copyright}</p>
|
|
121
120
|
</div>
|