@umituz/web-design-system 3.1.7 → 3.1.8
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Footer Organism Component
|
|
3
|
-
* @description
|
|
3
|
+
* @description Minimal footer with brand and social icons
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
|
|
@@ -10,12 +10,7 @@ import type { BaseProps } from '../../domain/types';
|
|
|
10
10
|
export interface FooterProps extends HTMLAttributes<HTMLElement>, BaseProps {
|
|
11
11
|
brand?: {
|
|
12
12
|
name: string;
|
|
13
|
-
description?: string;
|
|
14
13
|
};
|
|
15
|
-
sections?: Array<{
|
|
16
|
-
title: string;
|
|
17
|
-
links: Array<{ label: string; href: string }>;
|
|
18
|
-
}>;
|
|
19
14
|
social?: Array<{
|
|
20
15
|
name: string;
|
|
21
16
|
href: string;
|
|
@@ -25,99 +20,46 @@ export interface FooterProps extends HTMLAttributes<HTMLElement>, BaseProps {
|
|
|
25
20
|
}
|
|
26
21
|
|
|
27
22
|
export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
28
|
-
({ className, brand,
|
|
23
|
+
({ className, brand, social, copyright = '© 2026 UmitUZ. All rights reserved.', ...props }, ref) => {
|
|
29
24
|
return (
|
|
30
25
|
<footer
|
|
31
26
|
ref={ref}
|
|
32
|
-
className={cn('relative mt-
|
|
27
|
+
className={cn('relative mt-8 transition-theme', className)}
|
|
33
28
|
{...props}
|
|
34
29
|
>
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
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/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>
|
|
48
|
-
|
|
49
|
-
{/* Gradient Top Border */}
|
|
50
|
-
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
|
|
51
|
-
|
|
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">
|
|
54
|
-
{/* Brand Section - Prominent */}
|
|
30
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
31
|
+
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
|
|
32
|
+
{/* Brand */}
|
|
55
33
|
{brand && (
|
|
56
|
-
<div className="
|
|
57
|
-
|
|
58
|
-
<h3 className="text-2xl font-bold text-text-primary tracking-tight">
|
|
59
|
-
{brand.name}
|
|
60
|
-
</h3>
|
|
61
|
-
{brand.description && (
|
|
62
|
-
<p className="text-text-secondary text-sm leading-relaxed">{brand.description}</p>
|
|
63
|
-
)}
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
{/* Social Icons */}
|
|
67
|
-
{social && social.length > 0 && (
|
|
68
|
-
<div className="flex items-center gap-3">
|
|
69
|
-
{social.map((item, index) => (
|
|
70
|
-
<a
|
|
71
|
-
key={index}
|
|
72
|
-
href={item.href}
|
|
73
|
-
target="_blank"
|
|
74
|
-
rel="noopener noreferrer"
|
|
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"
|
|
76
|
-
aria-label={item.name}
|
|
77
|
-
title={item.name}
|
|
78
|
-
>
|
|
79
|
-
{/* Glow effect */}
|
|
80
|
-
<span className="absolute inset-0 rounded-xl bg-primary/15 blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
|
|
81
|
-
{/* Icon */}
|
|
82
|
-
<span className="relative">{item.icon}</span>
|
|
83
|
-
</a>
|
|
84
|
-
))}
|
|
85
|
-
</div>
|
|
86
|
-
)}
|
|
34
|
+
<div className="text-xl font-bold text-text-primary">
|
|
35
|
+
{brand.name}
|
|
87
36
|
</div>
|
|
88
37
|
)}
|
|
89
38
|
|
|
90
|
-
{/*
|
|
91
|
-
|
|
92
|
-
<div className="
|
|
93
|
-
{
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
</a>
|
|
106
|
-
</li>
|
|
107
|
-
))}
|
|
108
|
-
</ul>
|
|
109
|
-
</div>
|
|
39
|
+
{/* Social Icons */}
|
|
40
|
+
{social && social.length > 0 && (
|
|
41
|
+
<div className="flex items-center gap-3">
|
|
42
|
+
{social.map((item, index) => (
|
|
43
|
+
<a
|
|
44
|
+
key={index}
|
|
45
|
+
href={item.href}
|
|
46
|
+
target="_blank"
|
|
47
|
+
rel="noopener noreferrer"
|
|
48
|
+
className="flex items-center justify-center w-10 h-10 rounded-lg bg-bg-secondary/50 text-text-secondary hover:bg-primary-gradient hover:text-white transition-all duration-200"
|
|
49
|
+
aria-label={item.name}
|
|
50
|
+
title={item.name}
|
|
51
|
+
>
|
|
52
|
+
<span className="relative">{item.icon}</span>
|
|
53
|
+
</a>
|
|
110
54
|
))}
|
|
111
55
|
</div>
|
|
112
|
-
|
|
56
|
+
)}
|
|
113
57
|
</div>
|
|
114
58
|
|
|
115
|
-
{/* Copyright
|
|
59
|
+
{/* Copyright */}
|
|
116
60
|
{copyright && (
|
|
117
|
-
<div className="border-t border-border/
|
|
118
|
-
<
|
|
119
|
-
<p className="text-sm text-text-secondary/80">{copyright}</p>
|
|
120
|
-
</div>
|
|
61
|
+
<div className="text-center mt-6 pt-6 border-t border-border/20">
|
|
62
|
+
<p className="text-sm text-text-secondary/60">{copyright}</p>
|
|
121
63
|
</div>
|
|
122
64
|
)}
|
|
123
65
|
</div>
|