|
26 | 26 | <!-- Logo section -->
|
27 | 27 | <div class="border-b p-4">
|
28 | 28 | <div class="flex flex-col space-y-1">
|
29 |
| - <h1 class="text-primary text-xl font-semibold">SvelteDnD</h1> |
30 |
| - <a href="https://thisux.com" target="_blank" class="hover:text-primary text-xs" |
| 29 | + <h1 class="text-xl font-semibold text-primary">SvelteDnD</h1> |
| 30 | + <a href="https://thisux.com" target="_blank" class="text-xs hover:text-primary" |
31 | 31 | >by ThisUX</a
|
32 | 32 | >
|
33 | 33 | </div>
|
|
48 | 48 | </a>
|
49 | 49 | {/each}
|
50 | 50 | </div>
|
| 51 | + |
| 52 | + <!-- Sidebar footer with GitHub and NPM buttons --> |
| 53 | + <div class="border-t p-4"> |
| 54 | + <div class="flex gap-2"> |
| 55 | + <a |
| 56 | + href="https://github.com/yourusername/svelte-dnd" |
| 57 | + target="_blank" |
| 58 | + class="flex-1 rounded-md bg-gray-900 px-3 py-2 text-center text-sm font-medium text-white transition-colors hover:bg-gray-800" |
| 59 | + > |
| 60 | + GitHub |
| 61 | + </a> |
| 62 | + <a |
| 63 | + href="https://www.npmjs.com/package/your-package" |
| 64 | + target="_blank" |
| 65 | + class="flex-1 rounded-md bg-[#CB3837] px-3 py-2 text-center text-sm font-medium text-white transition-colors hover:bg-[#B02E2E]" |
| 66 | + > |
| 67 | + NPM |
| 68 | + </a> |
| 69 | + </div> |
| 70 | + </div> |
51 | 71 | </div>
|
52 | 72 | </aside>
|
53 | 73 |
|
|
78 | 98 | </div>
|
79 | 99 | </nav>
|
80 | 100 |
|
81 |
| -<!-- Floating badge (hidden on mobile)--> |
| 101 | +<!-- Redesigned floating badge --> |
82 | 102 | <footer class="fixed bottom-8 right-8 z-50 hidden md:block">
|
83 | 103 | <div
|
84 |
| - class="flex flex-col items-center justify-center gap-2 rounded-lg border bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm" |
| 104 | + class="group relative overflow-hidden rounded-lg border bg-white/90 px-6 py-4 shadow-lg backdrop-blur-md transition-all duration-300 hover:bg-white/95" |
85 | 105 | >
|
86 |
| - <p class="text-sm font-light tracking-wide text-gray-500"> |
87 |
| - ThisUX, a forward-thinking product studio |
88 |
| - </p> |
89 |
| - <a |
90 |
| - href="https://thisux.com" |
91 |
| - class="hover:text-primary group flex items-center gap-2 text-sm font-medium text-gray-900 transition-colors" |
92 |
| - target="_blank" |
93 |
| - rel="noopener noreferrer" |
94 |
| - > |
95 |
| - thisux.com |
96 |
| - <span class="text-xs opacity-0 transition-opacity group-hover:opacity-100">→</span> |
97 |
| - </a> |
| 106 | + <div class="flex flex-col items-start gap-3"> |
| 107 | + <div class="flex items-center gap-2"> |
| 108 | + <div class="h-2 w-2 rounded-full bg-green-500"></div> |
| 109 | + <span class="text-sm font-medium text-green-600">Available for Projects</span> |
| 110 | + </div> |
| 111 | + <div class="space-y-1"> |
| 112 | + <h3 class="text-sm font-medium text-gray-900">Let's build something amazing</h3> |
| 113 | + <p class="text-sm text-gray-500">Product design & development studio</p> |
| 114 | + </div> |
| 115 | + <a |
| 116 | + href="https://thisux.com" |
| 117 | + class="inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800" |
| 118 | + target="_blank" |
| 119 | + rel="noopener noreferrer" |
| 120 | + > |
| 121 | + Get in Touch |
| 122 | + <svg |
| 123 | + class="h-4 w-4 transition-transform group-hover:translate-x-1" |
| 124 | + fill="none" |
| 125 | + viewBox="0 0 24 24" |
| 126 | + stroke="currentColor" |
| 127 | + > |
| 128 | + <path |
| 129 | + stroke-linecap="round" |
| 130 | + stroke-linejoin="round" |
| 131 | + stroke-width="2" |
| 132 | + d="M14 5l7 7m0 0l-7 7m7-7H3" |
| 133 | + /> |
| 134 | + </svg> |
| 135 | + </a> |
| 136 | + </div> |
98 | 137 | </div>
|
99 | 138 | </footer>
|
100 | 139 |
|
101 | 140 | <!-- Static text on mobile (above bottom nav) -->
|
102 | 141 | <div class="flex flex-col items-center justify-center gap-1 border-t bg-white px-4 py-3 md:hidden">
|
103 |
| - <p class="text-xs font-light tracking-wide text-gray-500"> |
104 |
| - ThisUX, a forward-thinking product studio |
105 |
| - </p> |
| 142 | + <div class="flex items-center gap-2"> |
| 143 | + <div class="h-2 w-2 rounded-full bg-green-500"></div> |
| 144 | + <span class="text-xs font-medium text-green-600">Available for Projects</span> |
| 145 | + </div> |
106 | 146 | <a
|
107 | 147 | href="https://thisux.com"
|
108 |
| - class="hover:text-primary text-xs font-medium text-gray-900" |
| 148 | + class="text-xs font-medium text-gray-900 hover:text-primary" |
109 | 149 | target="_blank"
|
110 | 150 | rel="noopener noreferrer"
|
111 | 151 | >
|
112 |
| - thisux.com |
| 152 | + Get in Touch → |
113 | 153 | </a>
|
114 | 154 | </div>
|
115 | 155 |
|
|
0 commit comments