diff --git a/package-lock.json b/package-lock.json
index 7e9cd2f..b1d6b59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,6 +40,7 @@
"react-tsparticles": "^2.12.2",
"react-use": "^17.5.0",
"slick-carousel": "^1.8.1",
+ "styled-components": "^6.1.11",
"three": "^0.163.0",
"tsparticles": "^3.3.0",
"typescript": "^5.4.5"
@@ -441,6 +442,24 @@
"node": ">=14.0.0"
}
},
+ "node_modules/@emotion/is-prop-valid": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+ "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+ "dependencies": {
+ "@emotion/memoize": "^0.8.1"
+ }
+ },
+ "node_modules/@emotion/memoize": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+ },
+ "node_modules/@emotion/unitless": {
+ "version": "0.8.1",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+ "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+ },
"node_modules/@esbuild/aix-ppc64": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -3181,6 +3200,11 @@
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
},
+ "node_modules/@types/stylis": {
+ "version": "4.2.5",
+ "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+ "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+ },
"node_modules/@types/three": {
"version": "0.165.0",
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.165.0.tgz",
@@ -3722,6 +3746,14 @@
"node": ">= 6"
}
},
+ "node_modules/camelize": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+ "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/camera-controls": {
"version": "2.8.3",
"resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.8.3.tgz",
@@ -3918,6 +3950,14 @@
"node": ">= 8"
}
},
+ "node_modules/css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+ "engines": {
+ "node": ">=4"
+ }
+ },
"node_modules/css-in-js-utils": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
@@ -3926,6 +3966,16 @@
"hyphenate-style-name": "^1.0.3"
}
},
+ "node_modules/css-to-react-native": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+ "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+ "dependencies": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
"node_modules/css-tree": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -6094,7 +6144,6 @@
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -6385,8 +6434,7 @@
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
- "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
- "dev": true
+ "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"node_modules/picomatch": {
"version": "2.3.1",
@@ -6431,7 +6479,6 @@
"version": "8.4.38",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
- "dev": true,
"funding": [
{
"type": "opencollective",
@@ -6590,8 +6637,7 @@
"node_modules/postcss-value-parser": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
- "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
- "dev": true
+ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
},
"node_modules/potpack": {
"version": "1.0.2",
@@ -6772,7 +6818,6 @@
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
"integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
- "license": "MIT",
"peerDependencies": {
"react": "*"
}
@@ -7291,6 +7336,11 @@
"node": ">=6.9"
}
},
+ "node_modules/shallowequal": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+ },
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -7360,7 +7410,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -7628,6 +7677,33 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/styled-components": {
+ "version": "6.1.11",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz",
+ "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==",
+ "dependencies": {
+ "@emotion/is-prop-valid": "1.2.2",
+ "@emotion/unitless": "0.8.1",
+ "@types/stylis": "4.2.5",
+ "css-to-react-native": "3.2.0",
+ "csstype": "3.1.3",
+ "postcss": "8.4.38",
+ "shallowequal": "1.1.0",
+ "stylis": "4.3.2",
+ "tslib": "2.6.2"
+ },
+ "engines": {
+ "node": ">= 16"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/styled-components"
+ },
+ "peerDependencies": {
+ "react": ">= 16.8.0",
+ "react-dom": ">= 16.8.0"
+ }
+ },
"node_modules/stylis": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
diff --git a/package.json b/package.json
index 5d80355..4589335 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"react-tsparticles": "^2.12.2",
"react-use": "^17.5.0",
"slick-carousel": "^1.8.1",
+ "styled-components": "^6.1.11",
"three": "^0.163.0",
"tsparticles": "^3.3.0",
"typescript": "^5.4.5"
diff --git a/src/App.jsx b/src/App.jsx
index 1eba9fc..5a81f61 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import DemoSection from './components/DemoSection';
import ContactUs from './components/ContactUs';
import Models from './components/Models';
import Preloader from './components/Preloader';
+import GoToTop from './components/BottomToTop';
const App = () => {
const [loading, setLoading] = useState(true);
@@ -22,6 +23,7 @@ const App = () => {
<>
+
diff --git a/src/components/BottomToTop.css b/src/components/BottomToTop.css
deleted file mode 100644
index 0739efe..0000000
--- a/src/components/BottomToTop.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.scroll-to-top-button {
- display: none;
- position: fixed;
- bottom: 20px;
- right: 20px;
- background-color: #007bff;
- color: #fff;
- border: none;
- border-radius: 50%;
- width: 50px;
- height: 50px;
- font-size: 24px;
- cursor: pointer;
- z-index: 99;
- transition: opacity 0.3s, visibility 0.3s;
-}
-
-.scroll-to-top-button.visible {
- display: block;
-}
-
-.scroll-to-top-button i {
- line-height: 50px;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 99;
-
-}
-
-.scroll-to-top-button:hover {
- background-color: #0056b3;
-}
\ No newline at end of file
diff --git a/src/components/BottomToTop.jsx b/src/components/BottomToTop.jsx
index 10fb1e5..fd5c0d8 100644
--- a/src/components/BottomToTop.jsx
+++ b/src/components/BottomToTop.jsx
@@ -1,49 +1,58 @@
-import React from 'react'
-import "./BottomToTop.css"
-import {
- useState,
- useEffect
-} from 'react';
-import { animateScroll as scroll } from 'react-scroll';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import { FaArrowUp } from "react-icons/fa";
-const BackToTop = () => {
- const [isVisible, setIsVisible] = useState(false);
+const GoToTop = () => {
+ const [isVisible, setIsVisible] = useState(false);
+ useEffect(() => {
const handleScroll = () => {
- if (window.scrollY > 100) {
- setIsVisible(true);
- } else {
- setIsVisible(false);
- }
+ const currentScrollY = window.scrollY;
+ setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
};
- useEffect(() => {
- window.addEventListener('scroll', handleScroll);
- return () => {
- window.removeEventListener('scroll', handleScroll);
- };
- }, []);
-
- const backToTop = () => {
- // window.scrollTo({
- // top: 0,
- // behavior: 'smooth',
- // });
- scroll.scrollToTop({
- duration: 500,
- smooth: "easeInOutQuad",
- });
+ window.addEventListener("scroll", handleScroll);
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll);
};
+ }, []);
+
+ const goToTop = () => {
+ window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+ };
+
+ return (
+ <>
+ {isVisible && (
+
+
+
+ )}
+
+ );
+};
+
+const Wrapper = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ bottom: 17px;
+ right: 10px;
+ color: white;
+ background-color: rgb(59 130 246);
+ width: 48px;
+ height: 48px;
+ z-index: 9999;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform 0.3s ease, background-color 0.3s ease;
+
+ &:hover {
+ background-color: #003a79;
+ transform: translateY(-5px);
+ }
+`;
- return (<
- div className={
- `scroll-to-top-button ${isVisible ? 'visible' : ''}`
- }
- onClick={
- backToTop
- } >
-
- )
-}
-
-export default BackToTop
\ No newline at end of file
+export default GoToTop;