From 25a582ee1c7fdc656a6b0c1a6e44ba6484837c01 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 8 Oct 2025 16:45:57 +0530 Subject: [PATCH 1/2] Scroll back to top button added to the application --- package-lock.json | 9 -- src/assets/ScrollToTop.png | Bin 0 -> 10745 bytes src/components/ScrollToTop.jsx | 36 +++++++ src/components/ui/Hero.jsx | 186 ++++++++++++++++++++++++++++++++- src/pages/AboutPage.jsx | 4 + src/pages/FeaturesPage.jsx | 3 + 6 files changed, 228 insertions(+), 10 deletions(-) create mode 100644 src/assets/ScrollToTop.png create mode 100644 src/components/ScrollToTop.jsx diff --git a/package-lock.json b/package-lock.json index b9f48bf..6ac81e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -61,7 +61,6 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1611,7 +1610,6 @@ "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1653,7 +1651,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1776,7 +1773,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001741", @@ -2130,7 +2126,6 @@ "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3282,7 +3277,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -3349,7 +3343,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -3359,7 +3352,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -3694,7 +3686,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz", "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", diff --git a/src/assets/ScrollToTop.png b/src/assets/ScrollToTop.png new file mode 100644 index 0000000000000000000000000000000000000000..5bbe6ded90bf067c580209560e9f1682ef27b95f GIT binary patch literal 10745 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 { + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const toggleVisibility = () => { + setIsVisible(window.scrollY > 300); + }; + + window.addEventListener("scroll", toggleVisibility); + return () => window.removeEventListener("scroll", toggleVisibility); + }, []); + + const scrollToTop = () => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }; + + if (!isVisible) return null; + + return ( + // Scroll to top button + + ); +}; + +export default ScrollToTopButton; diff --git a/src/components/ui/Hero.jsx b/src/components/ui/Hero.jsx index 4e6bb6f..9352382 100644 --- a/src/components/ui/Hero.jsx +++ b/src/components/ui/Hero.jsx @@ -1,6 +1,7 @@ import { motion } from "framer-motion"; import { useState } from "react"; import HeroAnimation from "../animations/HeroAnimation"; +import ScrollToTopButton from "../ScrollToTop"; import { useNavigate } from "react-router-dom"; function Hero() { @@ -33,6 +34,9 @@ function Hero() { return (
+ {/* scroll to top button */} + + {/* top animation */} @@ -140,4 +144,184 @@ function Hero() { ); } -export default Hero; \ No newline at end of file +export default Hero; + +// import { motion } from "framer-motion"; +// import { useEffect, useState } from "react"; +// import HeroAnimation from "../animations/HeroAnimation"; +// import { useNavigate } from "react-router-dom"; + +// function Hero() { +// const [userProfile] = useState(null); +// const [showScrollTop, setShowScrollTop] = useState(false); +// const navigate = useNavigate(); + +// // Scroll listener +// useEffect(() => { +// const handleScroll = () => { +// if (window.scrollY > 300) { +// setShowScrollTop(true); +// } else { +// setShowScrollTop(false); +// } +// }; + +// window.addEventListener("scroll", handleScroll); +// return () => window.removeEventListener("scroll", handleScroll); +// }, []); + +// const scrollToTop = () => { +// window.scrollTo({ top: 0, behavior: "smooth" }); +// }; + +// const containerVariants = { +// hidden: { opacity: 0 }, +// visible: { +// opacity: 1, +// transition: { staggerChildren: 0.2 }, +// }, +// }; + +// const itemVariants = { +// hidden: { opacity: 0, y: 20 }, +// visible: { +// opacity: 1, +// y: 0, +// transition: { duration: 0.5 }, +// }, +// }; + +// function handleRedirect(value) { +// if (value === "register") { +// navigate("/register"); +// } else if (value === "login") { +// navigate("/login"); +// } else { +// navigate("/dashboard"); +// } +// } + +// return ( +//
+// {/* Top animation */} +// + +// {/* Bottom animation */} +// + +// {/* Subtle central animation effect */} +//
+// +//
+ +// {/* Hero contents */} +// +// +// +// HackerBlog +// +// + +// +// Where developers share stories, insights, and code - no cap! 🔥 +// + +// {!userProfile ? ( +// +// handleRedirect("register")} +// > +// Get Started +// +// handleRedirect("login")} +// > +// Sign In +// +// +// ) : ( +// +//

+// Welcome back, {userProfile.name || "Developer"}! Ready to drop +// some fire content? 🚀 +//

+// handleRedirect("dashboard")} +// > +// Go to Dashboard +// +// +// )} + +// +// +// ↓ +// +// +// + +// {/* Scroll to Top */} +// {showScrollTop && ( +// +// )} +//
+// ); +// } + +// export default Hero; diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx index 53ce5fe..9b37da9 100644 --- a/src/pages/AboutPage.jsx +++ b/src/pages/AboutPage.jsx @@ -10,6 +10,7 @@ import { FiHeart, } from "react-icons/fi"; import Footer from "../components/Footer"; +import ScrollToTopButton from "../components/ScrollToTop" //? Scroll to top on mount const AboutPage = () => { @@ -63,6 +64,9 @@ const AboutPage = () => { return (
+ {/* Scroll to Top Button */} + + {/* Hero Section */}
{ useEffect(() => { @@ -153,6 +154,8 @@ const FeaturesPage = () => { return (
+ {/* Scroll to Top Button */} + {/* Hero Section */}
{/* Background decoration */} From 0cd856384e3a1157a4b217450eea6b198138888b Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 8 Oct 2025 16:47:35 +0530 Subject: [PATCH 2/2] Scroll back to top button added to the application --- src/components/ui/Hero.jsx | 182 +------------------------------------ 1 file changed, 1 insertion(+), 181 deletions(-) diff --git a/src/components/ui/Hero.jsx b/src/components/ui/Hero.jsx index 9352382..ac0a1b7 100644 --- a/src/components/ui/Hero.jsx +++ b/src/components/ui/Hero.jsx @@ -144,184 +144,4 @@ function Hero() { ); } -export default Hero; - -// import { motion } from "framer-motion"; -// import { useEffect, useState } from "react"; -// import HeroAnimation from "../animations/HeroAnimation"; -// import { useNavigate } from "react-router-dom"; - -// function Hero() { -// const [userProfile] = useState(null); -// const [showScrollTop, setShowScrollTop] = useState(false); -// const navigate = useNavigate(); - -// // Scroll listener -// useEffect(() => { -// const handleScroll = () => { -// if (window.scrollY > 300) { -// setShowScrollTop(true); -// } else { -// setShowScrollTop(false); -// } -// }; - -// window.addEventListener("scroll", handleScroll); -// return () => window.removeEventListener("scroll", handleScroll); -// }, []); - -// const scrollToTop = () => { -// window.scrollTo({ top: 0, behavior: "smooth" }); -// }; - -// const containerVariants = { -// hidden: { opacity: 0 }, -// visible: { -// opacity: 1, -// transition: { staggerChildren: 0.2 }, -// }, -// }; - -// const itemVariants = { -// hidden: { opacity: 0, y: 20 }, -// visible: { -// opacity: 1, -// y: 0, -// transition: { duration: 0.5 }, -// }, -// }; - -// function handleRedirect(value) { -// if (value === "register") { -// navigate("/register"); -// } else if (value === "login") { -// navigate("/login"); -// } else { -// navigate("/dashboard"); -// } -// } - -// return ( -//
-// {/* Top animation */} -// - -// {/* Bottom animation */} -// - -// {/* Subtle central animation effect */} -//
-// -//
- -// {/* Hero contents */} -// -// -// -// HackerBlog -// -// - -// -// Where developers share stories, insights, and code - no cap! 🔥 -// - -// {!userProfile ? ( -// -// handleRedirect("register")} -// > -// Get Started -// -// handleRedirect("login")} -// > -// Sign In -// -// -// ) : ( -// -//

-// Welcome back, {userProfile.name || "Developer"}! Ready to drop -// some fire content? 🚀 -//

-// handleRedirect("dashboard")} -// > -// Go to Dashboard -// -// -// )} - -// -// -// ↓ -// -// -// - -// {/* Scroll to Top */} -// {showScrollTop && ( -// -// )} -//
-// ); -// } - -// export default Hero; +export default Hero; \ No newline at end of file