working on hire talent banner
This commit is contained in:
priyanshuvish
@@ -14,6 +14,7 @@ import { Input } from "./ui/input";
|
||||
import BlackLogo14 from "../assets/BlackLogo14";
|
||||
import { navigateTo } from "../App";
|
||||
import { useState } from "react";
|
||||
import GlobalOffices from "./GlobalOffices";
|
||||
|
||||
const footerNavigation = {
|
||||
Explore: [
|
||||
@@ -269,110 +270,109 @@ const NewsletterSection = () => {
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer className="relative bg-[#0E0E0E] border-t border-white/10 overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
<>
|
||||
<GlobalOffices />
|
||||
<footer className="relative bg-[#0E0E0E] border-t border-white/10 overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Main Footer Content */}
|
||||
<div className="container mx-auto px-6 lg:px-8 py-16">
|
||||
<div className="grid lg:grid-cols-7 gap-12">
|
||||
{/* Company Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="lg:col-span-2 space-y-6"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12">
|
||||
<BlackLogo14 />
|
||||
<div className="relative z-10">
|
||||
{/* Main Footer Content */}
|
||||
<div className="container mx-auto px-6 lg:px-8 py-16">
|
||||
<div className="grid lg:grid-cols-7 gap-12">
|
||||
{/* Company Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="lg:col-span-2 space-y-6"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12">
|
||||
<BlackLogo14 />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[#CCCCCC] leading-relaxed max-w-md">
|
||||
Web Development Institute - Transforming ideas
|
||||
into scalable digital products. 25+ years of
|
||||
industry expertise, serving founders and CTOs
|
||||
across 15+ countries.
|
||||
</p>
|
||||
<p className="text-[#CCCCCC] leading-relaxed max-w-md">
|
||||
Website Developers India Pvt. Ltd. - Transforming ideas into scalable digital products. 25+ years of industry expertise, serving founders and CTOs across 15+ countries.
|
||||
</p>
|
||||
|
||||
{/* India Office Contact Information */}
|
||||
<div className="space-y-4">
|
||||
<h5 className="font-semibold text-white text-sm tracking-wide uppercase">
|
||||
India Office
|
||||
</h5>
|
||||
<div className="space-y-3">
|
||||
{contactInfo.map((contact) => {
|
||||
const Icon = contact.icon;
|
||||
{/* India Office Contact Information */}
|
||||
<div className="space-y-4">
|
||||
<h5 className="font-semibold text-white text-sm tracking-wide uppercase">
|
||||
India Office
|
||||
</h5>
|
||||
<div className="space-y-3">
|
||||
{contactInfo.map((contact) => {
|
||||
const Icon = contact.icon;
|
||||
return (
|
||||
<a
|
||||
key={contact.label}
|
||||
href={contact.url}
|
||||
className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-sm leading-relaxed">
|
||||
{contact.label}
|
||||
</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4 pt-4">
|
||||
{socialLinks.map((social) => {
|
||||
const Icon = social.icon;
|
||||
return (
|
||||
<a
|
||||
key={contact.label}
|
||||
href={contact.url}
|
||||
className="flex items-start gap-3 text-[#CCCCCC] hover:text-white transition-colors duration-200"
|
||||
key={social.name}
|
||||
href={social.url}
|
||||
className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
|
||||
aria-label={social.name}
|
||||
>
|
||||
<Icon className="w-4 h-4 text-[#E5195E] mt-0.5 flex-shrink-0" />
|
||||
<span className="text-sm leading-relaxed">
|
||||
{contact.label}
|
||||
</span>
|
||||
<Icon className="w-4 h-4" />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4 pt-4">
|
||||
{socialLinks.map((social) => {
|
||||
const Icon = social.icon;
|
||||
return (
|
||||
<a
|
||||
key={social.name}
|
||||
href={social.url}
|
||||
className="w-10 h-10 bg-white/5 rounded-lg flex items-center justify-center text-[#CCCCCC] hover:text-white hover:bg-[#E5195E]/20 transition-all duration-200"
|
||||
aria-label={social.name}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Navigation Sections */}
|
||||
<FooterSection
|
||||
title="Explore"
|
||||
links={footerNavigation.Explore}
|
||||
delay={0.1}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Services"
|
||||
links={footerNavigation.Services}
|
||||
delay={0.2}
|
||||
/>
|
||||
<FooterSection
|
||||
title="AI & ML"
|
||||
links={footerNavigation["AI & ML"]}
|
||||
delay={0.3}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Solutions"
|
||||
links={footerNavigation.Solutions}
|
||||
delay={0.4}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Resources"
|
||||
links={footerNavigation.Resources}
|
||||
delay={0.5}
|
||||
/>
|
||||
{/* Navigation Sections */}
|
||||
<FooterSection
|
||||
title="Explore"
|
||||
links={footerNavigation.Explore}
|
||||
delay={0.1}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Services"
|
||||
links={footerNavigation.Services}
|
||||
delay={0.2}
|
||||
/>
|
||||
<FooterSection
|
||||
title="AI & ML"
|
||||
links={footerNavigation["AI & ML"]}
|
||||
delay={0.3}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Solutions"
|
||||
links={footerNavigation.Solutions}
|
||||
delay={0.4}
|
||||
/>
|
||||
<FooterSection
|
||||
title="Resources"
|
||||
links={footerNavigation.Resources}
|
||||
delay={0.5}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Subscription Section */}
|
||||
<NewsletterSection />
|
||||
{/* Newsletter Subscription Section */}
|
||||
<NewsletterSection />
|
||||
|
||||
{/* Bottom Bar */}
|
||||
{/* <motion.div
|
||||
{/* Bottom Bar */}
|
||||
{/* <motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6, delay: 0.6 }}
|
||||
@@ -420,7 +420,8 @@ export const Footer = () => {
|
||||
</div>
|
||||
</div>
|
||||
</motion.div> */}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user