73 lines
3.4 KiB
TypeScript
73 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'motion/react';
|
|
|
|
const AboutHubSection: React.FC = () => {
|
|
return (
|
|
<section className="w-full bg-[#F9FAFB] py-20 px-6 md:px-12 lg:px-20 overflow-hidden">
|
|
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
|
|
|
{/* Left Side: Image & Floating Card */}
|
|
<div className="relative w-full h-[500px] lg:h-[600px] group perspective-1000">
|
|
<motion.img
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
viewport={{ once: true }}
|
|
src="https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/3425/2021/6/16/DSC08602.JPG"
|
|
alt="RIT Campus Collaboration"
|
|
className="w-full h-full object-cover rounded-3xl shadow-2xl transition-transform duration-700 group-hover:scale-[1.02]"
|
|
/>
|
|
|
|
{/* Floating Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50, scale: 0.9 }}
|
|
whileInView={{ opacity: 1, y: 0, scale: 1 }}
|
|
whileHover={{ y: -5 }}
|
|
transition={{ duration: 0.6, delay: 0.3, type: "spring", stiffness: 100 }}
|
|
viewport={{ once: true }}
|
|
className="absolute -bottom-6 -right-6 md:bottom-10 md:-right-10 bg-[#2D3748] text-[#f97316] p-6 md:p-8 rounded-xl shadow-xl max-w-[280px] z-10 border-l-4 border-[#f97316]"
|
|
>
|
|
<p className="text-xl md:text-2xl font-serif font-bold leading-tight tracking-wide">
|
|
INNOVATION
|
|
</p>
|
|
<p className="text-sm md:text-base text-gray-300 mt-2 font-medium">
|
|
Where creativity meets execution. Fueling the future of tech.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Right Side: Content */}
|
|
<div className="flex flex-col justify-center space-y-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-4"
|
|
>
|
|
<h4 className="text-[#f97316] font-serif tracking-widest text-sm font-bold uppercase">
|
|
Our Legacy
|
|
</h4>
|
|
<h2 className="text-4xl md:text-5xl lg:text-6xl font-serif text-[#2D3748] leading-tight">
|
|
What is <span className="italic text-[#f97316]">RIT EVENTS HUB?</span>
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-[#2D3748] text-lg leading-relaxed max-w-xl"
|
|
>
|
|
The RIT Events Hub is your centralized gateway to campus life, designed to simplify how you discover and participate in events. Whether it's a technical hackathon, a cultural fest, or a workshop, our platform brings everything to your fingertips. With seamless registration, real-time updates, and personalized recommendations, we ensure you never miss an opportunity to learn, compete, and grow. Join a community where accessing innovation is as easy as a single click.
|
|
</motion.p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutHubSection;
|