Skip to content

Commit

Permalink
fix: homepage resp
Browse files Browse the repository at this point in the history
  • Loading branch information
@AE-Hertz
AE-Hertz committed Oct 29, 2024
1 parent 961657b commit 29f9a3a
Show file tree
Hide file tree
Showing 3 changed files with 255 additions and 251 deletions.
122 changes: 62 additions & 60 deletions src/components/Global/Footer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,73 +40,72 @@ const socialLinks = [
const Footer = () => {
return (
<footer className="relative bg-gradient-to-br from-blue-50 via-white to-blue-50">
{/* Google-inspired geometric shapes */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -right-12 -top-12 w-48 h-48 bg-blue-100 rounded-full opacity-20"></div>
<div className="absolute left-1/4 top-1/3 w-24 h-24 bg-green-100 rotate-45 opacity-20"></div>
<div className="absolute right-1/3 bottom-1/4 w-32 h-32 bg-yellow-100 rounded-lg opacity-20"></div>
<div className="absolute left-1/2 top-1/2 w-40 h-40 bg-red-100 rounded-full opacity-20"></div>
</div>
{/* Google-inspired geometric shapes */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -right-12 -top-12 w-48 h-48 bg-blue-100 rounded-full opacity-20"></div>
<div className="absolute left-1/4 top-1/3 w-24 h-24 bg-green-100 rotate-45 opacity-20"></div>
<div className="absolute right-1/3 bottom-1/4 w-32 h-32 bg-yellow-100 rounded-lg opacity-20"></div>
<div className="absolute left-1/2 top-1/2 w-40 h-40 bg-red-100 rounded-full opacity-20"></div>
</div>

<div className="relative mx-auto w-full max-w-7xl px-6 py-16">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
{/* Brand Section with enhanced styling */}
<div className="lg:col-span-4 space-y-6">
<Link href="/" className="inline-block">
<div className="flex items-center gap-3 mb-6">
<div className="relative">
<img src="/Logo.svg" className="h-14 w-auto" alt="Logo" />
<div className="absolute -bottom-2 -right-2 w-6 h-6 bg-blue-500 rounded-full opacity-20"></div>
</div>
<div className="flex flex-col">
<span className="text-3xl font-bold bg-gradient-to-r from-blue-600 via-blue-500 to-green-500 bg-clip-text text-transparent">
GDSC
</span>
<span className="text-lg font-medium text-gray-600">RCCIIT</span>
</div>
</div>
</Link>
<p className="text-gray-600 max-w-md">
Join our community of student developers, designers, and innovators. Build solutions for local businesses and your community.
</p>
<div className="relative mx-auto w-full max-w-7xl px-6 py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12">
{/* Brand Section with enhanced styling */}
<div className="lg:col-span-4 space-y-6 text-center md:text-left">
<Link href="/" className="inline-block">
<div className="flex justify-center md:justify-start items-center gap-3 mb-6">
<div className="relative">
<img src="/Logo.svg" className="h-14 w-auto" alt="Logo" />
<div className="absolute -bottom-2 -right-2 w-6 h-6 bg-blue-500 rounded-full opacity-20"></div>
</div>
<div className="flex flex-col">
<span className="text-3xl font-bold bg-gradient-to-r from-blue-600 via-blue-500 to-green-500 bg-clip-text text-transparent">
GDSC
</span>
<span className="text-lg font-medium text-gray-600">RCCIIT</span>
</div>
</div>
</Link>
<p className="text-gray-600 max-w-md mx-auto md:mx-0">
Join our community of student developers, designers, and innovators. Build solutions for local businesses and your community.
</p>
</div>

{/* Links Sections with enhanced styling */}
<div className="lg:col-span-5 grid grid-cols-3 gap-8">
<FooterSection title="Resources" links={resources} />
<FooterSection title="Follow Us" links={followUs} />
<FooterSection title="Legal" links={legal} />
</div>
{/* Links Sections with enhanced styling */}
<div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center sm:text-left">
<FooterSection title="Resources" links={resources} />
<FooterSection title="Follow Us" links={followUs} />
<FooterSection title="Legal" links={legal} />
</div>

{/* Social Section with embedded design */}
<div className="lg:col-span-3">
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 className="text-lg font-semibold mb-6 text-gray-800">Connect With Us</h3>
<div className="grid grid-cols-3 gap-4">
{socialLinks.map((link, index) => (
<SocialButton key={index} icon={link.icon} color={link.color} href={link.href} />
))}
</div>
</div>
{/* Social Section with embedded design */}
<div className="lg:col-span-3">
<div className="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 className="text-lg font-semibold mb-6 text-gray-800 text-center md:text-left">Connect With Us</h3>
<div className="grid grid-cols-3 gap-4">
{socialLinks.map((link, index) => (
<SocialButton key={index} icon={link.icon} color={link.color} href={link.href} />
))}
</div>
</div>
</div>
</div>

{/* Footer Bottom with enhanced design */}
<div className="mt-16 pt-8 border-t border-gray-200">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-sm text-gray-600">
© 2024 Google Developer Student Club - RCCIIT. All Rights Reserved.
</p>
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">Made with</span>
<div className="flex gap-1">
<HeartIcon color='red' />
</div>
</div>
</div>
{/* Footer Bottom with enhanced design */}
<div className="mt-16 pt-8 border-t border-gray-200">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-sm text-gray-600 text-center md:text-left">
© 2024 Google Developer Student Club - RCCIIT. All Rights Reserved.
</p>
<div className="flex items-center gap-2">
<span className="text-sm text-gray-500">Made with</span>
<HeartIcon color="red" />
</div>
</div>
</footer>
</div>
</div>
</footer>

);
};

Expand All @@ -132,10 +131,13 @@ const FooterSection = ({ title, links }) => (
const SocialButton = ({ href, icon, color }) => (
<Link
href={href}
className={`${color} p-3 rounded-lg text-white transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center`}
className={`${color} p-2 sm:p-3 rounded-lg text-white transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg flex items-center justify-center`}
>
{icon}
<span className="text-lg sm:text-xl lg:text-2xl">
{icon}
</span>
</Link>
);


export default Footer;
159 changes: 80 additions & 79 deletions src/components/Global/Hero.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,87 +42,88 @@ const Hero = () => {
}

return (
<div className="relative h-[600px] bg-white overflow-hidden border border-gray-300">
<motion.div
className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
style={{
backgroundImage: `
linear-gradient(270deg, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 25.1%),
linear-gradient(to right, #e2e8f0 0.5px, transparent 3.1px),
linear-gradient(to bottom, #e2e8f0 1px, transparent 1px),
linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`
}}
>
{/* Floating Circles with subtle scaling and hovering animation */}
<motion.div
className="absolute top-[-35px] left-[300px] h-36 w-36 bg-yellow-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
<motion.div
className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-blue-700 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
/>
<motion.div
className="absolute bottom-10 right-[500px] h-28 w-28 bg-red-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
/>
<motion.div
className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-green-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.7 }}
/>
</motion.div>

{/* Main Content */}
<div className="relative z-10 flex flex-col items-start justify-center h-full pl-12 text-left">
<motion.h1
className="text-5xl font-bold text-black"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
Bridging The Gap Between
</motion.h1>
<motion.h1
className="text-5xl font-bold text-black mt-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
>
Theory And Practice.
</motion.h1>
<motion.p
className="mt-4 max-w-lg text-lg text-gray-600"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
>
The Google Developer Student Club at RCCIIT is a university-based community group powered by Google Developers.
</motion.p>
<motion.div
className="mt-8 space-x-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.7 }}
>
<a
href="#"
className="inline-block px-6 py-3 text-white bg-blue-600 rounded-md hover:bg-blue-700"
>
Join Us
</a>
<a
href="#"
className="inline-block px-6 py-3 text-gray-800 border-2 border-gray-300 rounded-md hover:bg-gray-50 bg-white"
<div className="relative h-[600px] md:h-[500px] lg:h-[600px] bg-white overflow-hidden border border-gray-300">
<motion.div
className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
style={{
backgroundImage: `
linear-gradient(270deg, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 25.1%),
linear-gradient(to right, #e2e8f0 0.5px, transparent 3.1px),
linear-gradient(to bottom, #e2e8f0 1px, transparent 1px),
linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`,
}}
>
Contact Us
</a>
</motion.div>
{/* Floating Circles with subtle scaling and hovering animation */}
<motion.div
className="absolute top-[-35px] left-[200px] md:left-[100px] lg:left-[300px] h-24 w-24 md:h-32 md:w-32 lg:h-36 lg:w-36 bg-yellow-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity }}
/>
<motion.div
className="absolute top-[50px] right-[20px] md:right-[50px] h-[250px] w-[250px] md:h-[300px] md:w-[300px] lg:h-[400px] lg:w-[400px] bg-blue-700 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
/>
<motion.div
className="absolute bottom-10 right-[150px] md:right-[300px] h-20 w-20 md:h-24 md:w-24 lg:h-28 lg:w-28 bg-red-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
/>
<motion.div
className="absolute bottom-[-40px] left-4 md:left-8 h-20 w-20 md:h-24 md:w-24 lg:h-[200px] lg:w-[200px] bg-green-500 rounded-full"
animate={{ scale: [1, 1.1, 1] }}
transition={{ duration: 2, repeat: Infinity, delay: 0.7 }}
/>
</motion.div>

{/* Main Content */}
<div className="relative z-10 flex flex-col items-start justify-center h-full pl-6 md:pl-10 lg:pl-12 text-left">
<motion.h1
className="text-3xl md:text-4xl lg:text-5xl font-bold text-black"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
Bridging The Gap Between
</motion.h1>
<motion.h1
className="text-3xl md:text-4xl lg:text-5xl font-bold text-black mt-2 md:mt-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
>
Theory And Practice.
</motion.h1>
<motion.p
className="mt-2 md:mt-4 max-w-md text-sm md:text-lg text-gray-600"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
>
The Google Developer Student Club at RCCIIT is a
university-based community group powered by Google Developers.
</motion.p>
<motion.div
className="mt-4 md:mt-8 space-x-2 md:space-x-4"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.7 }}
>
<a
href="#"
className="inline-block px-4 py-2 md:px-6 md:py-3 text-white bg-blue-600 rounded-md hover:bg-blue-700"
>
Join Us
</a>
<a
href="#"
className="inline-block px-4 py-2 md:px-6 md:py-3 text-gray-800 border-2 border-gray-300 rounded-md hover:bg-gray-50 bg-white"
>
Contact Us
</a>
</motion.div>
</div>
</div>
</div>
);
};

Expand Down
Loading

0 comments on commit 29f9a3a

Please sign in to comment.