@umituz/web-design-system 3.1.4 → 3.1.6
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,96 @@ 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 overflow-hidden', className)}
|
|
33
33
|
{...props}
|
|
34
34
|
>
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
{
|
|
35
|
+
<style>{`
|
|
36
|
+
@keyframes gradient-shift {
|
|
37
|
+
0%, 100% { opacity: 0.3; transform: scale(1) translate(0, 0); }
|
|
38
|
+
50% { opacity: 0.5; transform: scale(1.1) translate(-10px, -10px); }
|
|
39
|
+
}
|
|
40
|
+
.animate-gradient-shift {
|
|
41
|
+
animation: gradient-shift 8s ease-in-out infinite;
|
|
42
|
+
}
|
|
43
|
+
`}</style>
|
|
44
|
+
|
|
45
|
+
{/* Animated Gradient Background */}
|
|
46
|
+
<div className="absolute inset-0 bg-gradient-to-br from-bg-card via-bg-secondary/30 to-bg-card"></div>
|
|
47
|
+
<div className="absolute inset-0 bg-gradient-to-tr from-primary/5 via-transparent to-primary/5"></div>
|
|
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>
|
|
49
|
+
|
|
50
|
+
{/* Gradient Top Border */}
|
|
51
|
+
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
|
|
52
|
+
|
|
53
|
+
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
|
|
54
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16">
|
|
55
|
+
{/* Brand Section - Prominent */}
|
|
38
56
|
{brand && (
|
|
39
|
-
<div className="lg:col-span-1">
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
<div className="lg:col-span-1 space-y-6">
|
|
58
|
+
<div className="space-y-3">
|
|
59
|
+
<h3 className="text-3xl font-bold text-text-primary tracking-tight bg-gradient-to-r from-text-primary to-text-secondary bg-clip-text text-transparent">
|
|
60
|
+
{brand.name}
|
|
61
|
+
</h3>
|
|
62
|
+
{brand.description && (
|
|
63
|
+
<p className="text-text-secondary text-base leading-relaxed">{brand.description}</p>
|
|
64
|
+
)}
|
|
65
|
+
</div>
|
|
46
66
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
<ul className="space-y-3">
|
|
52
|
-
{section.links.map((link, linkIndex) => (
|
|
53
|
-
<li key={linkIndex}>
|
|
67
|
+
{/* Social Icons - Enhanced */}
|
|
68
|
+
{social && social.length > 0 && (
|
|
69
|
+
<div className="flex items-center gap-4">
|
|
70
|
+
{social.map((item, index) => (
|
|
54
71
|
<a
|
|
55
|
-
|
|
56
|
-
|
|
72
|
+
key={index}
|
|
73
|
+
href={item.href}
|
|
74
|
+
target="_blank"
|
|
75
|
+
rel="noopener noreferrer"
|
|
76
|
+
className="group relative flex items-center justify-center w-14 h-14 rounded-2xl 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-xl hover:shadow-primary/30 hover:-translate-y-1"
|
|
77
|
+
aria-label={item.name}
|
|
78
|
+
title={item.name}
|
|
57
79
|
>
|
|
58
|
-
{
|
|
80
|
+
{/* Glow effect */}
|
|
81
|
+
<span className="absolute inset-0 rounded-2xl bg-primary/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
|
82
|
+
{/* Icon */}
|
|
83
|
+
<span className="relative">{item.icon}</span>
|
|
59
84
|
</a>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
85
|
+
))}
|
|
86
|
+
</div>
|
|
87
|
+
)}
|
|
63
88
|
</div>
|
|
64
|
-
)
|
|
89
|
+
)}
|
|
65
90
|
|
|
66
|
-
{/*
|
|
67
|
-
|
|
68
|
-
<div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
{/* Links Sections */}
|
|
92
|
+
<div className="md:col-span-1 lg:col-span-2">
|
|
93
|
+
<div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
|
|
94
|
+
{sections?.map((section, index) => (
|
|
95
|
+
<div key={index} className="space-y-4">
|
|
96
|
+
<h4 className="font-bold text-text-primary text-sm uppercase tracking-widest">{section.title}</h4>
|
|
97
|
+
<ul className="space-y-3">
|
|
98
|
+
{section.links.map((link, linkIndex) => (
|
|
99
|
+
<li key={linkIndex}>
|
|
100
|
+
<a
|
|
101
|
+
href={link.href}
|
|
102
|
+
className="text-text-secondary text-base hover:text-primary-light transition-all duration-200 inline-flex items-center gap-2 group"
|
|
103
|
+
>
|
|
104
|
+
<span className="opacity-0 group-hover:opacity-100 group-hover:translate-x-0 -translate-x-2 transition-all duration-200 text-primary-light">→</span>
|
|
105
|
+
<span className="group-hover:translate-x-1 transition-transform duration-200">{link.label}</span>
|
|
106
|
+
</a>
|
|
107
|
+
</li>
|
|
108
|
+
))}
|
|
109
|
+
</ul>
|
|
110
|
+
</div>
|
|
111
|
+
))}
|
|
85
112
|
</div>
|
|
86
|
-
|
|
113
|
+
</div>
|
|
87
114
|
</div>
|
|
88
115
|
|
|
89
|
-
{/* Copyright */}
|
|
116
|
+
{/* Copyright Bar - Clean */}
|
|
90
117
|
{copyright && (
|
|
91
|
-
<div className="border-t border-border mt-
|
|
92
|
-
<
|
|
118
|
+
<div className="border-t border-border/30 mt-16 pt-8">
|
|
119
|
+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
|
|
120
|
+
<p className="text-sm text-text-secondary/80">{copyright}</p>
|
|
121
|
+
</div>
|
|
93
122
|
</div>
|
|
94
123
|
)}
|
|
95
124
|
</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 */}
|