@@ -73,38 +73,134 @@ const footerImageLinks = [
7373];
7474---
7575
76- <footer class =" bg-black text-white pt-8 pb-4 px-8" >
77- <div class =" container-custom" >
78- <div class =" grid md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6" >
79- <div class =" md:col-span-2 lg:col-span-2" >
80- <a href =" /" class =" flex items-center mb-4" aria-label =" Go to homepage" >
81- <Image src ={ Icon } alt =" Logo" loading =" lazy" class =" h-8 w-auto" />
82- <span class =" ml-2 text-lg font-display font-semibold text-white" >
76+ <footer
77+ class =" relative bg-gradient-to-br from-slate-900 via-slate-800 to-black text-white pt-16 pb-8 overflow-hidden"
78+ >
79+ <!-- Background decorative elements -->
80+ <div class =" absolute inset-0" >
81+ <div
82+ class =" absolute top-0 left-0 w-96 h-96 bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-full filter blur-3xl -translate-x-1/2 -translate-y-1/2"
83+ >
84+ </div >
85+ <div
86+ class =" absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-r from-orange-600/20 to-red-600/20 rounded-full filter blur-3xl translate-x-1/2 translate-y-1/2"
87+ >
88+ </div >
89+ <div
90+ class =" absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:24px_24px]"
91+ >
92+ </div >
93+ </div >
94+
95+ <div class =" container-custom relative z-10" >
96+ <!-- Main footer content -->
97+ <div class =" grid md:grid-cols-2 lg:grid-cols-3 gap-12 mb-12" >
98+ <!-- Brand section -->
99+ <div class =" lg:col-span-2" >
100+ <a
101+ href =" /"
102+ class =" inline-flex items-center mb-6 group"
103+ aria-label =" Go to homepage"
104+ >
105+ <div class =" relative" >
106+ <div
107+ class =" absolute inset-0 bg-gradient-to-r from-orange-500 to-red-500 rounded-xl blur-sm opacity-60 group-hover:opacity-80 transition-opacity"
108+ >
109+ </div >
110+ <Image
111+ src ={ Icon }
112+ alt =" Logo"
113+ loading =" lazy"
114+ class =" relative h-10 w-auto rounded-xl ring-2 ring-white/20"
115+ />
116+ </div >
117+ <span
118+ class =" ml-4 text-2xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
119+ >
83120 { KEYWORDS .name }
84121 </span >
85122 </a >
86123
87- <div class =" flex space-x-3" >
88- <div class =" flex space-x-4" >
89- {
90- footerImageLinks .map ((link ) => (
91- <a
92- href = { link .url }
93- class = " text-gray-400 hover:text-primary-400 transition-colors"
94- aria-label = { link .label }
124+ <p class =" text-gray-300 text-lg leading-relaxed mb-8 max-w-md" >
125+ Revolutionizing recruitment with AI-powered CV matching, orbit call,
126+ and M&A intelligence for job seekers.
127+ </p >
128+
129+ <div class =" flex space-x-4" >
130+ {
131+ footerImageLinks .map ((link ) => (
132+ <a
133+ href = { link .url }
134+ class = " group relative p-3 bg-white/5 hover:bg-white/10 backdrop-blur-sm rounded-xl border border-white/10 hover:border-white/20 transition-all duration-300 transform hover:-translate-y-1"
135+ aria-label = { link .label }
136+ >
137+ <div class = " absolute inset-0 bg-gradient-to-r from-orange-500/20 to-red-500/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity" />
138+ <svg
139+ class = " relative w-5 h-5 text-gray-400 group-hover:text-white transition-colors"
140+ fill = " currentColor"
141+ viewBox = " 0 0 24 24"
142+ xmlns = " http://www.w3.org/2000/svg"
95143 >
96- <svg
97- class = " w-6 h-6"
98- fill = " currentColor"
99- viewBox = " 0 0 24 24"
100- xmlns = " http://www.w3.org/2000/svg"
101- >
102- <path d = { link .svg } />
103- </svg >
104- </a >
105- ))
106- }
107- </div >
144+ <path d = { link .svg } />
145+ </svg >
146+ </a >
147+ ))
148+ }
149+ </div >
150+ </div >
151+
152+ <!-- Quick links section -->
153+ <div >
154+ <h3
155+ class =" text-xl font-bold mb-6 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent"
156+ >
157+ Quick Links
158+ </h3 >
159+ <div class =" space-y-4" >
160+ <a
161+ href =" /role-fit-index"
162+ class =" block text-gray-300 hover:text-white transition-colors group"
163+ >
164+ <span class =" relative" >
165+ Role Fit Index
166+ <span
167+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
168+ ></span >
169+ </span >
170+ </a >
171+ <a
172+ href =" /orbit-call"
173+ class =" block text-gray-300 hover:text-white transition-colors group"
174+ >
175+ <span class =" relative" >
176+ Orbit Call
177+ <span
178+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
179+ ></span >
180+ </span >
181+ </a >
182+ <a
183+ href =" /talent-pool"
184+ class =" block text-gray-300 hover:text-white transition-colors group"
185+ >
186+ <span class =" relative" >
187+ Talent Pool
188+ <span
189+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
190+ ></span >
191+ </span >
192+ </a >
193+ <a
194+ href =" /role-fit-studio"
195+ class =" block text-gray-300 hover:text-white transition-colors group"
196+ >
197+ <span class =" relative" >
198+ Role Fit Studio
199+ <span
200+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
201+ ></span >
202+ </span >
203+ </a >
108204 </div >
109205 </div >
110206 </div >
@@ -128,32 +224,65 @@ const footerImageLinks = [
128224 </div >
129225 ))
130226 }
131- </div >
132227
133- <div class =" border-t border-gray-800 pt-4 mt-4" >
134- <div class =" flex flex-col md:flex-row justify-between items-center" >
135- <p class =" text-gray-400 text-xs mb-2" >
136- © { currentYear } Bounteer. All rights reserved. v{ version }
137- </p >
138- <div class =" flex space-x-4" >
139- <a
140- href =" /privacy-policy"
141- class =" text-gray-400 hover:text-primary-400 text-xs transition-colors"
142- >
143- Privacy Policy
144- </a >
145- <a
146- href =" /terms-conditions"
147- class =" text-gray-400 hover:text-primary-400 text-xs transition-colors"
148- >
149- Terms of Service
150- </a >
151- <a
152- href =" /"
153- class =" text-gray-400 hover:text-primary-400 text-xs transition-colors"
228+ <!-- Bottom section -->
229+ <div class =" border-t border-white/10 pt-8 mt-8" >
230+ <div
231+ class =" flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0"
232+ >
233+ <div
234+ class =" flex flex-col lg:flex-row items-center space-y-2 lg:space-y-0 lg:space-x-8"
154235 >
155- Cookie Policy
156- </a >
236+ <p class =" text-gray-400 text-sm" >
237+ © { currentYear } Bounteer. All rights reserved.
238+ </p >
239+ <div class =" flex items-center space-x-2" >
240+ <span
241+ class =" inline-flex items-center px-2 py-1 bg-gradient-to-r from-orange-500/20 to-red-500/20 text-orange-400 text-xs rounded-full border border-orange-500/30"
242+ >
243+ <span
244+ class =" w-1.5 h-1.5 bg-orange-500 rounded-full mr-1.5 animate-pulse"
245+ ></span >
246+ v{ version }
247+ </span >
248+ </div >
249+ </div >
250+
251+ <div class =" flex flex-wrap justify-center lg:justify-end space-x-6" >
252+ <a
253+ href =" /privacy-policy"
254+ class =" text-gray-400 hover:text-white text-sm transition-colors group"
255+ >
256+ <span class =" relative" >
257+ Privacy Policy
258+ <span
259+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
260+ ></span >
261+ </span >
262+ </a >
263+ <a
264+ href =" /terms-conditions"
265+ class =" text-gray-400 hover:text-white text-sm transition-colors group"
266+ >
267+ <span class =" relative" >
268+ Terms of Service
269+ <span
270+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
271+ ></span >
272+ </span >
273+ </a >
274+ <a
275+ href =" /"
276+ class =" text-gray-400 hover:text-white text-sm transition-colors group"
277+ >
278+ <span class =" relative" >
279+ Cookie Policy
280+ <span
281+ class =" absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-orange-500 to-red-500 group-hover:w-full transition-all duration-300"
282+ ></span >
283+ </span >
284+ </a >
285+ </div >
157286 </div >
158287 </div >
159288 </div >
0 commit comments