@umituz/web-design-system 3.1.3 → 3.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/package.json
CHANGED
|
@@ -29,17 +29,17 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
29
29
|
return (
|
|
30
30
|
<footer
|
|
31
31
|
ref={ref}
|
|
32
|
-
className={cn('bg-bg-
|
|
32
|
+
className={cn('bg-bg-card border-t border-border mt-20 transition-theme', className)}
|
|
33
33
|
{...props}
|
|
34
34
|
>
|
|
35
|
-
<div className="max-w-7xl mx-auto px-4 py-12">
|
|
36
|
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-
|
|
35
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
|
|
36
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
|
37
37
|
{/* Brand */}
|
|
38
38
|
{brand && (
|
|
39
|
-
<div>
|
|
40
|
-
<h3 className="text-xl font-bold text-text-primary mb-
|
|
39
|
+
<div className="lg:col-span-1">
|
|
40
|
+
<h3 className="text-xl font-bold text-text-primary mb-4">{brand.name}</h3>
|
|
41
41
|
{brand.description && (
|
|
42
|
-
<p className="text-text-secondary text-sm">{brand.description}</p>
|
|
42
|
+
<p className="text-text-secondary text-sm leading-relaxed">{brand.description}</p>
|
|
43
43
|
)}
|
|
44
44
|
</div>
|
|
45
45
|
)}
|
|
@@ -47,13 +47,13 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
47
47
|
{/* Sections */}
|
|
48
48
|
{sections?.map((section, index) => (
|
|
49
49
|
<div key={index}>
|
|
50
|
-
<h4 className="font-semibold text-text-primary mb-
|
|
51
|
-
<ul className="space-y-
|
|
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
52
|
{section.links.map((link, linkIndex) => (
|
|
53
53
|
<li key={linkIndex}>
|
|
54
54
|
<a
|
|
55
55
|
href={link.href}
|
|
56
|
-
className="text-text-secondary hover:text-primary-light transition-colors"
|
|
56
|
+
className="text-text-secondary text-sm hover:text-primary-light transition-colors duration-200 hover:underline"
|
|
57
57
|
>
|
|
58
58
|
{link.label}
|
|
59
59
|
</a>
|
|
@@ -64,17 +64,19 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
64
64
|
))}
|
|
65
65
|
|
|
66
66
|
{/* Social */}
|
|
67
|
-
{social && (
|
|
67
|
+
{social && social.length > 0 && (
|
|
68
68
|
<div>
|
|
69
|
-
<h4 className="font-semibold text-text-primary mb-
|
|
70
|
-
<div className="flex flex-
|
|
69
|
+
<h4 className="font-semibold text-text-primary mb-4 text-sm uppercase tracking-wide">Connect</h4>
|
|
70
|
+
<div className="flex flex-wrap gap-3">
|
|
71
71
|
{social.map((item, index) => (
|
|
72
72
|
<a
|
|
73
73
|
key={index}
|
|
74
74
|
href={item.href}
|
|
75
75
|
target="_blank"
|
|
76
76
|
rel="noopener noreferrer"
|
|
77
|
-
className="text-text-secondary hover:text-primary-
|
|
77
|
+
className="flex items-center justify-center w-10 h-10 rounded-lg bg-bg-secondary text-text-secondary hover:bg-primary-gradient hover:text-text-primary border border-border hover:border-transparent transition-all duration-200 hover:scale-105 hover:shadow-lg"
|
|
78
|
+
aria-label={item.name}
|
|
79
|
+
title={item.name}
|
|
78
80
|
>
|
|
79
81
|
{item.icon}
|
|
80
82
|
</a>
|
|
@@ -86,8 +88,8 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(
|
|
|
86
88
|
|
|
87
89
|
{/* Copyright */}
|
|
88
90
|
{copyright && (
|
|
89
|
-
<div className="border-t border-border mt-
|
|
90
|
-
<p>{copyright}</p>
|
|
91
|
+
<div className="border-t border-border mt-10 pt-8 text-center">
|
|
92
|
+
<p className="text-sm text-text-secondary">{copyright}</p>
|
|
91
93
|
</div>
|
|
92
94
|
)}
|
|
93
95
|
</div>
|
|
@@ -87,9 +87,10 @@ export const MainNavbar = ({
|
|
|
87
87
|
<nav className={`bg-bg-primary sticky top-0 z-50 border-b border-border transition-theme ${className || ''}`}>
|
|
88
88
|
<div className="max-w-7xl mx-auto px-4">
|
|
89
89
|
<div className="flex justify-between h-16 items-center">
|
|
90
|
-
{/* Logo */}
|
|
91
|
-
<Link to="/" className="flex items-center gap-2">
|
|
92
|
-
{logo
|
|
90
|
+
{/* Logo + App Name */}
|
|
91
|
+
<Link to="/" className="flex items-center gap-2 sm:gap-3">
|
|
92
|
+
{logo}
|
|
93
|
+
<span className="text-xl font-bold text-text-primary hidden xs:block">{appName}</span>
|
|
93
94
|
</Link>
|
|
94
95
|
|
|
95
96
|
{/* Desktop Menu */}
|