updated home section by mdashad0 · Pull Request #907 · Premkolte/AnimateHub

mdashad0 · 2026-02-06T12:46:57Z

closes #906

Recording.2026-02-06.181231.mp4

i will change some basice thing and add new styling and motion effect

i share the video you check it @Premkolte

Please mention these details about yourself here.

Contributor Name : Md Ashad
Contributor Email ID : asadanwarr0@gmail.con
Contributor Github Link : https://github.com/mdashad0

regards,

Prem Kolte.

vercel · 2026-02-06T12:47:01Z

@mdashad0 is attempting to deploy a commit to the premkolte's projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-02-06T12:47:07Z

✨ Hi @mdashad0! Thanks for submitting another pull request. Your continuous improvements are highly valued. Keep contributing! 🙌

Copilot

Pull request overview

This pull request updates the home section with enhanced styling, motion effects, and hover interactions to improve the UI/UX, addressing issue #906. The changes introduce a comprehensive set of animations using Framer Motion, new Tailwind CSS animations, and a utility file for reusable motion variants. Additionally, the PR includes backend improvements to make email configuration optional and frontend changes to conditionally enable Google OAuth.

Changes:

Added extensive motion effects and hover animations to home page components (Hero, Features, Pricing, Templates, Testimonials, Footer)
Created a new motionVariants.js utility file with reusable Framer Motion animation variants
Extended Tailwind config with new keyframe animations (slideDown, slideLeft, slideRight, scaleIn, float, pulse, shimmer, glow, rotateIn, wiggle, heartbeat, morphGradient)
Added comprehensive CSS classes for motion and hover effects in index.css
Made email and Google OAuth services optional with graceful fallbacks when credentials are not configured
Simplified index.html by removing complex background animations and letting the React app handle UI

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
`tailwind.config.js`	Added 13 new animation keyframes and 15 new animation utilities for enhanced motion effects
`src/utils/motionVariants.js`	New file providing 20+ reusable Framer Motion animation variants for consistent animations
`src/main.jsx`	Made Google OAuth provider conditional, only wrapping App when valid credentials are present
`src/index.css`	Added extensive CSS classes for motion effects, hover interactions, and visual enhancements
`src/components/layout/Loader.jsx`	Changed style tag from JSX to regular syntax for compatibility
`src/components/layout/Footer.jsx`	Enhanced with Framer Motion animations, gradient effects, and interactive hover states
`src/components/UI/BackToTop.jsx`	Redesigned with Framer Motion animations, glow effects, and smooth transitions
`src/Pages/Home/Testimonial.jsx`	Added gradient accents, animated stars, and enhanced hover effects to testimonial cards
`src/Pages/Home/TemplatesSection.jsx`	Redesigned with gradient borders, icon animations, and floating particles on hover
`src/Pages/Home/Pricing.jsx`	Complete redesign with gradient effects, animated badges, and enhanced visual hierarchy
`src/Pages/Home/HeroSection.jsx`	Added gradient text animations, glow effects on buttons, and enhanced CTA interactions
`src/Pages/Home/FeaturesSection.jsx`	Enhanced with gradient icons, animated hover states, and top border animations
`index.html`	Simplified body styles and removed complex background animations, delegating to React app
`backend/src/services/emailService.js`	Added checks to gracefully skip email sending when transporter is not configured
`backend/src/services/EmailTransporter.js`	Made email configuration optional with clear console warnings when disabled

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-06T15:15:42Z

src/Pages/Home/FeaturesSection.jsx

 import React from "react";
 import { motion } from "framer-motion";
 import { Rocket, BookOpen, Heart, GitBranch, Users, Bookmark } from "lucide-react";
+import { staggerContainer, fadeInUp, cardHoverGlow } from "../../utils/motionVariants";


The imported motion variants staggerContainer, fadeInUp, and cardHoverGlow are not used anywhere in this file. These imports should be removed to avoid unused code.

Suggested change

import { staggerContainer, fadeInUp, cardHoverGlow } from "../../utils/motionVariants";

Copilot · 2026-02-06T15:15:43Z

src/Pages/Home/HeroSection.jsx

+// Button glow animation
+const buttonGlow = {
+  rest: {
+    boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
  },
+  hover: {
+    boxShadow: "0 8px 30px rgba(139, 92, 246, 0.4)",
+    transition: { duration: 0.3 }
+  }
 };



The buttonGlow animation variant is defined but never used in this component. This adds unnecessary code. Consider removing this unused variant or applying it to buttons if it was intended to be used.

Suggested change

// Button glow animation

const buttonGlow = {

rest: {

boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",

},

hover: {

boxShadow: "0 8px 30px rgba(139, 92, 246, 0.4)",

transition: { duration: 0.3 }

}

};

Copilot · 2026-02-06T15:15:43Z

src/Pages/Home/HeroSection.jsx

+            whileTap="tap"
+            className="relative group"
+          >
+            <div className="absolute -inset-1 bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600 rounded-full blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-gradient" style={{ backgroundSize: '200% 200%' }} />


The inline style attribute with backgroundSize can be replaced with the Tailwind class bg-[length:200%_200%] for consistency with the rest of the codebase. Inline styles should be avoided when Tailwind utilities are available.

Suggested change

<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600 rounded-full blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-gradient" style={{ backgroundSize: '200% 200%' }} />

<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600 rounded-full blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-gradient bg-[length:200%_200%]" />

Copilot · 2026-02-06T15:15:43Z

src/Pages/Home/Pricing.jsx

+      {/* Popular Badge */}
+      {plan.popular && (
+        <motion.div 
+          className="absolute -top-1 left-1/2 -translate-x-1/2 z-[60]"


Using arbitrary z-index values like z-[60] and z-[999] can lead to z-index conflicts and maintenance issues. Consider defining these z-index values in your Tailwind config as named layers (e.g., z-badge, z-back-to-top) for better maintainability and consistency across the codebase.

Suggested change

className="absolute -top-1 left-1/2 -translate-x-1/2 z-[60]"

className="absolute -top-1 left-1/2 -translate-x-1/2 z-50"

Copilot · 2026-02-06T15:15:44Z

src/components/UI/BackToTop.jsx

@@ -17,23 +18,43 @@ const BackToTop = () => {
  };

  return (
-<button
-  className={`back-to-top ${visible ? 'visible' : 'hidden'} 
-    bg-gradient-to-r from-[#3b82f6] to-[#accefbff] 
-    dark:from-purple-600 dark:to-blue-600 text-white font-medium px-4 py-2 rounded-full shadow-lg`}
-  onClick={scrollToTop}
-  aria-label="Back to top"
->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="40"
-        height="40"
-        fill="white"
-        viewBox="0 0 24 24"
-      >
-        <path d="M12 5.5l-6.5 6.5 1.4 1.4L12 8.3l5.1 5.1 1.4-1.4L12 5.5z" />
-      </svg>
-    </button>
+    <AnimatePresence>
+      {visible && (
+        <motion.button
+          className="fixed bottom-6 right-6 z-[999] w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"
+          onClick={scrollToTop}
+          aria-label="Back to top"
+          initial={{ opacity: 0, y: 20, scale: 0.8 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 20, scale: 0.8 }}
+          transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          whileHover={{ 
+            scale: 1.1,
+            boxShadow: "0 0 25px rgba(59, 130, 246, 0.5)"
+          }}
+          whileTap={{ scale: 0.95 }}
+        >
+          {/* Glow effect */}
+          <div className="absolute inset-0 bg-gradient-to-r from-primary-400 to-accent-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+
+          {/* Ripple effect */}
+          <span className="absolute inset-0 rounded-full bg-white/20 scale-0 group-hover:scale-100 transition-transform duration-500" />
+
+          <motion.svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="28"
+            height="28"
+            fill="white"
+            viewBox="0 0 24 24"
+            className="relative z-10"
+            animate={{ y: [0, -3, 0] }}
+            transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+          >
+            <path d="M12 5.5l-6.5 6.5 1.4 1.4L12 8.3l5.1 5.1 1.4-1.4L12 5.5z" />
+          </motion.svg>
+        </motion.button>
+      )}
+    </AnimatePresence>
  );
 };



This component adds animations but does not respect the user's prefers-reduced-motion setting, which is an accessibility concern. Consider importing and using useReducedMotion from framer-motion to disable or reduce animations for users who prefer reduced motion, similar to how it's done in src/Pages/About/AboutUs.jsx.

Copilot · 2026-02-06T15:15:46Z

src/Pages/Home/TemplatesSection.jsx

+                <div className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-300" />
+                <div className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-500" />


The animation-delay-300 and animation-delay-500 classes are used here but not defined globally. While the Loader component defines these classes in its own style tag, using them in other components will not work unless these classes are added to the global CSS or Tailwind config. Consider adding these animation delay utilities to your src/index.css file or Tailwind configuration for consistency across the codebase.

Suggested change

<div className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-300" />

<div className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-500" />

<div

className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500"

style={{ animationDelay: "300ms" }}

/>

<div

className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500"

style={{ animationDelay: "500ms" }}

/>

Copilot · 2026-02-06T15:15:47Z

src/Pages/Home/HeroSection.jsx

          }}
        >
-          Animation UI Library <br /> for Developers
+          <span className="bg-gradient-to-r from-primary-600 via-accent-500 to-pink-500 dark:from-primary-400 dark:via-accent-400 dark:to-pink-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">


Using animate-gradient with bg-[length:200%_auto] on text creates a continuously running animation that requires constant repaints. This can impact performance, especially on lower-end devices or when multiple instances are rendered. Consider using prefers-reduced-motion media query to disable or reduce the animation for users who prefer reduced motion.

Suggested change

<span className="bg-gradient-to-r from-primary-600 via-accent-500 to-pink-500 dark:from-primary-400 dark:via-accent-400 dark:to-pink-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">

<span className="bg-gradient-to-r from-primary-600 via-accent-500 to-pink-500 dark:from-primary-400 dark:via-accent-400 dark:to-pink-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient motion-reduce:animate-none motion-reduce:bg-[length:100%_auto]">

Copilot · 2026-02-06T15:15:47Z

src/components/UI/BackToTop.jsx

+    <AnimatePresence>
+      {visible && (
+        <motion.button
+          className="fixed bottom-6 right-6 z-[999] w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"


Using arbitrary z-index value z-[999] can lead to z-index conflicts. Consider defining this z-index value in your Tailwind config as a named layer (e.g., z-back-to-top) for better maintainability and consistency.

Suggested change

className="fixed bottom-6 right-6 z-[999] w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"

className="fixed bottom-6 right-6 z-50 w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"

src/Pages/Home/FeaturesSection.jsx

src/components/layout/Footer.jsx

vercel · 2026-02-06T16:24:48Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
animate-hub	Ignored	Preview	Feb 6, 2026 4:24pm

Premkolte · 2026-02-06T16:34:57Z

You have used many vibrant colours, which doesn't go with the professionalism of the website. please look into it.

mdashad0 · 2026-02-06T16:39:57Z

@copilot open a new pull request to apply changes based on the comments in this thread

mdashad0 · 2026-02-07T17:41:38Z

You have used many vibrant colours, which doesn't go with the professionalism of the website. please look into it.

you can check it i will slightly fix

updated home section

965e2f3

Premkolte requested review from Premkolte and Copilot February 6, 2026 15:07

Premkolte assigned mdashad0 Feb 6, 2026

Premkolte added the OSCG label Feb 6, 2026

Copilot started reviewing on behalf of Premkolte February 6, 2026 15:08 View session

Copilot AI reviewed Feb 6, 2026

View reviewed changes

	<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600 rounded-full blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-gradient" style={{ backgroundSize: '200% 200%' }} />
	<div className="absolute -inset-1 bg-gradient-to-r from-purple-600 via-pink-500 to-indigo-600 rounded-full blur-md opacity-70 group-hover:opacity-100 transition-opacity duration-300 animate-gradient bg-[length:200%_200%]" />

	className="absolute -top-1 left-1/2 -translate-x-1/2 z-[60]"
	className="absolute -top-1 left-1/2 -translate-x-1/2 z-50"

		<div className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-300" />
		<div className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-500" />

-                <div className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-300" />
-                <div className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500 animation-delay-500" />
+                <div
+                  className="absolute bottom-8 left-6 w-1.5 h-1.5 rounded-full bg-gradient-to-r from-pink-400 to-rose-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500"
+                  style={{ animationDelay: "300ms" }}
+                />
+                <div
+                  className="absolute top-1/3 left-4 w-1 h-1 rounded-full bg-gradient-to-r from-cyan-400 to-blue-400 opacity-0 group-hover:opacity-100 group-hover:animate-float transition-opacity duration-500"
+                  style={{ animationDelay: "500ms" }}
+                />

	<span className="bg-gradient-to-r from-primary-600 via-accent-500 to-pink-500 dark:from-primary-400 dark:via-accent-400 dark:to-pink-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient">
	<span className="bg-gradient-to-r from-primary-600 via-accent-500 to-pink-500 dark:from-primary-400 dark:via-accent-400 dark:to-pink-400 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient motion-reduce:animate-none motion-reduce:bg-[length:100%_auto]">

	className="fixed bottom-6 right-6 z-[999] w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"
	className="fixed bottom-6 right-6 z-50 w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-primary-500 to-primary-600 dark:from-accent-500 dark:to-accent-600 text-white shadow-lg cursor-pointer overflow-hidden group"

Conversation

mdashad0 commented Feb 6, 2026

Please mention these details about yourself here.

Uh oh!

vercel bot commented Feb 6, 2026

Uh oh!

github-actions bot commented Feb 6, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

vercel bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Premkolte commented Feb 6, 2026

Uh oh!

mdashad0 commented Feb 6, 2026

Uh oh!

mdashad0 commented Feb 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Feb 6, 2026 •

edited

Loading