Skip to content

Added Framer transitions in Home, About, Blog pages #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gunjanghate wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Framer transitions in Home, About, Blog pages #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 83 additions & 22 deletions client/src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
CheckCircle,
Sparkles,
} from "lucide-react";

import { motion } from "framer-motion";
const About = () => {
const [isVisible, setIsVisible] = useState(false);
const [activeCard, setActiveCard] = useState(null);
Expand Down Expand Up @@ -107,18 +107,49 @@ const About = () => {
];

return (
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden">
<motion.div
className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white overflow-hidden"
initial={{ opacity: 0}}
animate={{ opacity: 1}}
transition={{ duration: 0.8, ease: "easeOut" }}
>
{/* Animated Background Elements */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
<div className="absolute top-1/3 right-1/4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"></div>
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"></div>
</div>
<motion.div
className="absolute inset-0 overflow-hidden"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.2 }}
>
<motion.div
className="absolute top-1/4 left-1/4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 0.2 }}
transition={{ duration: 1, delay: 0.3 }}
></motion.div>
<motion.div
className="absolute top-1/3 right-1/4 w-72 h-72 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-1000"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 0.2 }}
transition={{ duration: 1, delay: 0.5 }}
></motion.div>
<motion.div
className="absolute bottom-1/4 left-1/3 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000"
initial={{ scale: 0.8, opacity: 0 }}
animate={{ scale: 1, opacity: 0.2 }}
transition={{ duration: 1, delay: 0.7 }}
></motion.div>
</motion.div>

{/* Main Content */}
<div className="relative z-10">
{/* Hero Section */}
<section className="py-20 px-4">
<motion.section
className="py-20 px-4"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.4 }}
transition={{ duration: 0.7, delay: 0.1 }}
>
<div className="container mx-auto max-w-6xl">
<div
className={`text-center transition-all duration-1000 ${
Expand Down Expand Up @@ -149,21 +180,31 @@ const About = () => {
</p>
</div>
</div>
</section>
</motion.section>

{/* Stats Section */}
<section className="py-16 px-4">
<motion.section
className="py-16 px-4"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.4 }}
transition={{ duration: 0.7, delay: 0.2 }}
>
<div className="container mx-auto max-w-6xl">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{stats.map((stat, index) => (
<div
<motion.div
key={index}
className={`text-center group transition-all duration-500 ${
isVisible
? "opacity-100 translate-y-0"
: "opacity-0 translate-y-10"
}`}
style={{ transitionDelay: `${index * 150}ms` }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.5 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
<div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-6 hover:bg-white/20 transition-all duration-300 group-hover:scale-105">
<div className="text-purple-400 mb-2 flex justify-center group-hover:scale-110 transition-transform duration-300">
Expand All @@ -174,14 +215,20 @@ const About = () => {
</div>
<div className="text-gray-300 text-sm">{stat.label}</div>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
</motion.section>

{/* Services Section */}
<section className="py-20 px-4">
<motion.section
className="py-20 px-4"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.7, delay: 0.2 }}
>
<div className="container mx-auto max-w-6xl">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
Expand All @@ -195,7 +242,7 @@ const About = () => {

<div className="grid gap-8 md:grid-cols-2">
{services.map((service, index) => (
<div
<motion.div
key={service.id}
className={`group relative overflow-hidden rounded-2xl transition-all duration-700 hover:scale-105 ${
isVisible
Expand All @@ -205,6 +252,10 @@ const About = () => {
style={{ transitionDelay: `${index * 200}ms` }}
onMouseEnter={() => setActiveCard(service.id)}
onMouseLeave={() => setActiveCard(null)}
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.6, delay: index * 0.15 }}
>
{/* Card Background */}
<div
Expand Down Expand Up @@ -233,20 +284,24 @@ const About = () => {
{/* Features */}
<div className="space-y-3">
{service.features.map((feature, featureIndex) => (
<div
<motion.div
key={featureIndex}
className={`flex items-center gap-3 transition-all duration-300 ${
activeCard === service.id
? "opacity-100 translate-x-0"
: "opacity-70 translate-x-2"
}`}
style={{ transitionDelay: `${featureIndex * 100}ms` }}
initial={{ opacity: 0, x: 10 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.4, delay: featureIndex * 0.07 }}
>
<CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0" />
<span className="text-gray-300 group-hover:text-white transition-colors duration-300">
{feature}
</span>
</div>
</motion.div>
))}
</div>

Expand All @@ -261,14 +316,20 @@ const About = () => {
{/* Hover Effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-out"></div>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
</motion.section>

{/* CTA Section */}
<section className="py-20 px-4">
<motion.section
className="py-20 px-4"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.7, delay: 0.2 }}
>
<div className="container mx-auto max-w-4xl">
<div className="text-center bg-gradient-to-r from-purple-600/20 to-pink-600/20 backdrop-blur-sm border border-purple-500/30 rounded-3xl p-12">
<h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white to-purple-200 bg-clip-text text-transparent">
Expand All @@ -288,9 +349,9 @@ const About = () => {
</div>
</div>
</div>
</section>
</motion.section>
</div>
</div>
</motion.div>
);
};

Expand Down
89 changes: 72 additions & 17 deletions client/src/pages/Blog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Calendar, User, Clock, ArrowRight, Sparkles, Eye, Heart, Share2, BookOpen, TrendingUp, Star } from 'lucide-react';

import { motion } from 'framer-motion';
const blogs = [
{
id: 1,
Expand Down Expand Up @@ -220,7 +220,12 @@ const Blog = () => {
);

return (
<section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20">
<motion.section
className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white py-20"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.7, ease: "easeOut" }}
>
{/* Animated Background */}
<div className="fixed inset-0 pointer-events-none">
<div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/20 rounded-full blur-3xl animate-pulse"></div>
Expand All @@ -229,7 +234,13 @@ const Blog = () => {

<div className="relative max-w-7xl mx-auto px-6">
{/* Header Section */}
<div className="text-center mb-16">
<motion.div
className="text-center mb-16"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.6 }}
transition={{ duration: 0.6, delay: 0.1 }}
>
<div className="flex justify-center mb-6">
<div className="relative">
<BookOpen className="w-16 h-16 text-blue-400" />
Expand All @@ -244,10 +255,16 @@ const Blog = () => {
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Discover evidence-based articles, expert advice, and practical tips to support your parenting journey with confidence and knowledge.
</p>
</div>
</motion.div>

{/* Search and Filters */}
<div className="mb-12">
<motion.div
className="mb-12"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.6 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<div className="flex flex-col lg:flex-row gap-6 items-center justify-between">
{/* Search Bar */}
<div className="relative flex-1 max-w-md">
Expand Down Expand Up @@ -284,41 +301,73 @@ const Blog = () => {
))}
</div>
</div>
</div>
</motion.div>

{/* Featured Articles */}
{featuredBlogs.length > 0 && (
<div className="mb-16">
<motion.div
className="mb-16"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.4 }}
transition={{ duration: 0.6, delay: 0.15 }}
>
<div className="flex items-center gap-3 mb-8">
<TrendingUp className="w-6 h-6 text-yellow-400" />
<h2 className="text-2xl font-bold text-white">Featured Articles</h2>
</div>
<div className="grid gap-8 lg:grid-cols-3 lg:grid-rows-2">
{featuredBlogs.map(blog => (
<BlogCard key={blog.id} blog={blog} featured={true} />
<motion.div
key={blog.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5, delay: 0.1 * blog.id }}
>
<BlogCard blog={blog} featured={true} />
</motion.div>
))}
</div>
</div>
</motion.div>
)}

{/* Regular Articles */}
{regularBlogs.length > 0 && (
<div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.4 }}
transition={{ duration: 0.6, delay: 0.18 }}
>
<div className="flex items-center gap-3 mb-8">
<BookOpen className="w-6 h-6 text-blue-400" />
<h2 className="text-2xl font-bold text-white">Latest Articles</h2>
</div>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{regularBlogs.map(blog => (
<BlogCard key={blog.id} blog={blog} />
<motion.div
key={blog.id}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.2 }}
transition={{ duration: 0.5, delay: 0.1 * blog.id }}
>
<BlogCard blog={blog} />
</motion.div>
))}
</div>
</div>
</motion.div>
)}

{/* No Results */}
{filteredBlogs.length === 0 && (
<div className="text-center py-20">
<motion.div
className="text-center py-20"
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<div className="w-32 h-32 mx-auto mb-8 bg-white/10 rounded-full flex items-center justify-center">
<BookOpen className="w-16 h-16 text-gray-400" />
</div>
Expand All @@ -333,22 +382,28 @@ const Blog = () => {
>
Show All Articles
</button>
</div>
</motion.div>
)}

{/* Load More Button */}
{filteredBlogs.length > 0 && (
<div className="text-center mt-16">
<motion.div
className="text-center mt-16"
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.5, delay: 0.1 }}
>
<button className="group px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-semibold text-white transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30">
<div className="flex items-center gap-2">
Load More Articles
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</div>
</button>
</div>
</motion.div>
)}
</div>
</section>
</motion.section>
);
};

Expand Down
Loading