Skip to content

Commit

Permalink
Landing Page animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@inkerton
inkerton committed Oct 24, 2024
1 parent b843e9d commit 2d78b88
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 38 deletions.
119 changes: 105 additions & 14 deletions src/components/Global/Hero.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,60 @@
// const Hero = () => {
// return (
// <div className="relative h-[600px] bg-white overflow-hidden border border-gray-300">
// <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%)`
// }}
// >
// <div className="absolute top-[-35px] left-[300px] h-36 w-36 bg-yellow-500 rounded-full"></div>
// <div className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-blue-700 rounded-full"></div>
// <div className="absolute bottom-10 right-[500px] h-28 w-28 bg-red-500 rounded-full"></div>
// <div className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-green-500 rounded-full"></div>
// </div>

// <div className="relative z-100 flex flex-col items-start justify-center h-full pl-12 text-left">
// <h1 className="text-5xl font-bold text-black">
// Bridging The Gap Between
// </h1>
// <h1 className="text-5xl font-bold text-black mt-4">
// Theory And Practice.
// </h1>
// <p className="mt-4 max-w-lg text-lg text-gray-600">
// The Google Developer Student Club at RCCIIT is a university-based community group powered by Google Developers. By joining RCCIIT, students gain experience working in a team environment and building technological solutions for their community.
// </p>
// <div className="mt-8 space-x-4">
// <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"
// >
// Contact Us
// </a>
// </div>
// </div>
// </div>
// );
// };

// export default Hero;

'use client'
import { motion } from "framer-motion";

const Hero = () => {
return (
<div className="relative h-[600px] bg-white overflow-hidden border border-gray-300">
<div
<motion.div
className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
style={{
backgroundImage: `
Expand All @@ -11,23 +64,61 @@ const Hero = () => {
linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`
}}
>
<div className="absolute top-[-35px] left-[300px] h-36 w-36 bg-yellow-500 rounded-full"></div>
<div className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-blue-700 rounded-full"></div>
<div className="absolute bottom-10 right-[500px] h-28 w-28 bg-red-500 rounded-full"></div>
<div className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-green-500 rounded-full"></div>
</div>
{/* 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>

{/* Text and buttons with fade-in and upward motion */}
<div className="relative z-100 flex flex-col items-start justify-center h-full pl-12 text-left">
<h1 className="text-5xl font-bold text-black">
<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
</h1>
<h1 className="text-5xl font-bold text-black mt-4">
</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.
</h1>
<p className="mt-4 max-w-lg text-lg text-gray-600">
</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. By joining RCCIIT, students gain experience working in a team environment and building technological solutions for their community.
</p>
<div className="mt-8 space-x-4">
</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"
Expand All @@ -40,7 +131,7 @@ const Hero = () => {
>
Contact Us
</a>
</div>
</motion.div>
</div>
</div>
);
Expand Down
174 changes: 150 additions & 24 deletions src/components/ui/homepage.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,179 @@
// export default function Homepage() {
// return (
// <div className="bg-white text-gray-900 select-none">
// <section className="py-12 px-6 md:px-16 ml-40 mr-40">
// <h2 className="text-4xl font-bold text-center mb-12 text-blue-600">Path to Success</h2>
// <div className="flex flex-col md:flex-row items-center mb-16">
// <img
// src="/vision.webp"
// alt="Vision"
// className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
// />
// <div className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
// <h3 className="text-4xl font-semibold text-gray-800 mb-4">🌟 Vision</h3>
// <p className="text-xl text-gray-600 leading-relaxed">
// Our vision is to create a world where technology and innovation lead to the betterment of human lives, driving progress and success.
// We aim to bridge gaps and create opportunities through collaboration and forward-thinking strategies that inspire change and growth across all sectors.
// </p>
// </div>
// </div>
// <div className="flex flex-col md:flex-row-reverse items-center mb-16">
// <img
// src="/mission.webp"
// alt="Mission"
// className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
// />
// <div className="md:mr-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
// <h3 className="text-4xl font-semibold text-gray-800 mb-4">🎯 Mission</h3>
// <p className="text-xl text-gray-600 leading-relaxed">
// Our mission is to empower individuals and organizations through cutting-edge technological solutions, fostering growth and innovation.
// By providing comprehensive support and resources, we strive to cultivate an environment where creativity and technology thrive together.
// </p>
// </div>
// </div>
// <div className="flex flex-col md:flex-row items-center mb-16">
// <img
// src="/goal.webp"
// alt="Goal"
// className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
// />
// <div className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
// <h3 className="text-4xl font-semibold text-gray-800 mb-4">🚀 Goal</h3>
// <p className="text-xl text-gray-600 leading-relaxed">
// Our goal is to continuously push the boundaries of what's possible and lead the way towards a more prosperous, tech-driven future.
// We aim to inspire and equip the next generation of innovators to tackle challenges and seize opportunities that arise in a rapidly evolving digital landscape.
// </p>
// </div>
// </div>
// </section>
// <section className="bg-blue-600 py-16 px-8">
// <div className="max-w-4xl mx-auto text-center relative bg-white rounded-lg shadow-lg p-12 transform transition-transform duration-500 hover:scale-105">
// <div className="absolute inset-0 bg-blue-600 opacity-10 rounded-lg"></div>

// <blockquote className="relative text-3xl font-semibold text-gray-800 italic mb-6">
// <svg xmlns="http://www.w3.org/2000/svg" className="w-12 h-12 text-blue-600 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
// <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 11V9a6 6 0 0112 0v1a6 6 0 01-6 6h-3v2a6 6 0 11-12 0v-1" />
// </svg>
// "Coming together is a beginning, staying together is progress, and working together is success."
// </blockquote>

// <cite className="relative text-lg font-medium text-gray-700">
// - Henry Ford
// </cite>
// </div>
// </section>
// </div>
// );
// }
'use client'
import { motion } from "framer-motion";

export default function Homepage() {
return (
<div className="bg-white text-gray-900 select-none">
<section className="py-12 px-6 md:px-16 ml-40 mr-40">
<h2 className="text-4xl font-bold text-center mb-12 text-blue-600">Path to Success</h2>
<div className="flex flex-col md:flex-row items-center mb-16">
<img
<motion.h2
className="text-4xl font-bold text-center mb-12 text-blue-600"
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
Path to Success
</motion.h2>

<motion.div
className="flex flex-col md:flex-row items-center mb-16"
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<motion.img
src="/vision.webp"
alt="Vision"
className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
className="w-full md:w-1/2 h-64 object-contain rounded-lg"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
/>
<div className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
<motion.div
className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2"
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<h3 className="text-4xl font-semibold text-gray-800 mb-4">🌟 Vision</h3>
<p className="text-xl text-gray-600 leading-relaxed">
Our vision is to create a world where technology and innovation lead to the betterment of human lives, driving progress and success.
We aim to bridge gaps and create opportunities through collaboration and forward-thinking strategies that inspire change and growth across all sectors.
</p>
</div>
</div>
<div className="flex flex-col md:flex-row-reverse items-center mb-16">
<img
</motion.div>
</motion.div>

<motion.div
className="flex flex-col md:flex-row-reverse items-center mb-16"
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<motion.img
src="/mission.webp"
alt="Mission"
className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
className="w-full md:w-1/2 h-64 object-contain rounded-lg"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
/>
<div className="md:mr-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
<motion.div
className="md:mr-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2"
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<h3 className="text-4xl font-semibold text-gray-800 mb-4">🎯 Mission</h3>
<p className="text-xl text-gray-600 leading-relaxed">
Our mission is to empower individuals and organizations through cutting-edge technological solutions, fostering growth and innovation.
By providing comprehensive support and resources, we strive to cultivate an environment where creativity and technology thrive together.
</p>
</div>
</div>
<div className="flex flex-col md:flex-row items-center mb-16">
<img
</motion.div>
</motion.div>

<motion.div
className="flex flex-col md:flex-row items-center mb-16"
initial={{ opacity: 0, x: -100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<motion.img
src="/goal.webp"
alt="Goal"
className="w-full md:w-1/2 h-64 object-contain rounded-lg transition-transform duration-300 hover:scale-105"
className="w-full md:w-1/2 h-64 object-contain rounded-lg"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
/>
<div className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2">
<motion.div
className="md:ml-8 text-center md:text-left mt-6 md:mt-0 md:w-1/2"
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.6 }}
>
<h3 className="text-4xl font-semibold text-gray-800 mb-4">🚀 Goal</h3>
<p className="text-xl text-gray-600 leading-relaxed">
Our goal is to continuously push the boundaries of what's possible and lead the way towards a more prosperous, tech-driven future.
We aim to inspire and equip the next generation of innovators to tackle challenges and seize opportunities that arise in a rapidly evolving digital landscape.
</p>
</div>
</div>
</motion.div>
</motion.div>
</section>
<section className="bg-blue-600 py-16 px-8">
<div className="max-w-4xl mx-auto text-center relative bg-white rounded-lg shadow-lg p-12 transform transition-transform duration-500 hover:scale-105">

<motion.section
className="bg-blue-600 py-16 px-8"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1.2 }}
>
<motion.div
className="max-w-4xl mx-auto text-center relative bg-white rounded-lg shadow-lg p-12"
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.5 }}
>
<div className="absolute inset-0 bg-blue-600 opacity-10 rounded-lg"></div>

<blockquote className="relative text-3xl font-semibold text-gray-800 italic mb-6">
Expand All @@ -60,8 +186,8 @@ export default function Homepage() {
<cite className="relative text-lg font-medium text-gray-700">
- Henry Ford
</cite>
</div>
</section>
</motion.div>
</motion.section>
</div>
);
}
}

0 comments on commit 2d78b88

Please sign in to comment.