diff --git a/public/index.html b/public/index.html index fa0bc70..9fd6bf1 100644 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,6 @@ - @@ -42,7 +41,8 @@ - + + + + + + + diff --git a/src/App.js b/src/App.js index ddea5fe..7327f6e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,6 @@ + import React from "react"; -import { - BrowserRouter as Router, - Route, - Routes, - useLocation, -} from "react-router-dom"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Navbar from "./components/Navbar"; import Home from "./pages/Home"; import DashboardPage from "./pages/DashboardPage"; @@ -13,41 +9,18 @@ import ProfilePage from "./pages/ProfilePage"; import Login from "./components/Login"; import Register from "./components/Register"; import { AuthProvider } from "./context/AuthContext"; -import Support from "./components/Support"; -import Settings from "./components/Setting"; -import ImageQRCodeGenerator from "./components/ImageQRCodeGenerator"; -import SocialMedia from "./components/SocialMedia"; -import BulkQRCode from "./components/BulkQRCode"; -import Moreinfo from "./components/Moreinfo"; -import QRScanner from "./components/QRScanner"; -import PdfQRCodeGenerator from "./components/PDFToQR"; import { ThemeProvider } from "./context/ThemeContext"; import { Toaster } from "react-hot-toast"; import ProtectedRoute from "./components/ProtectedRoute"; -import NotFoundPage from "./components/Error404"; - -function BackgroundWrapper({ children }) { - const location = useLocation(); - - return ( -
- {children} -
- ); -} +import Footer from "./components/footer"; // Add Footer +import ReviewReward from "./components/ReviewReward"; // Add ReviewReward export default function App() { return ( - +
} /> @@ -77,66 +50,11 @@ export default function App() { } /> - - - - } - /> - - - - } - /> - } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - } /> + {/* Other routes */} - + {/* Add the review and reward section */} +
{/* Add the footer here */} +
diff --git a/src/components/ReviewReward.js b/src/components/ReviewReward.js new file mode 100644 index 0000000..ddb339d --- /dev/null +++ b/src/components/ReviewReward.js @@ -0,0 +1,29 @@ +import React, { useEffect } from "react"; +import './ReviewReward.css'; // Import CSS for styling + +const ReviewReward = () => { + useEffect(() => { + // JavaScript for any custom animations can go here if needed. + }, []); + + return ( +
+
Reviews & Rewards
+
+
+
+

"Amazing tool for generating QR codes!"

+

- John Doe

+
+
+

"Easy to use, highly recommend!"

+

- Jane Smith

+
+
+ +
+
+ ); +}; + +export default ReviewReward; diff --git a/src/components/footer.js b/src/components/footer.js new file mode 100644 index 0000000..fabd425 --- /dev/null +++ b/src/components/footer.js @@ -0,0 +1,32 @@ +import React from 'react'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; \ No newline at end of file diff --git a/src/css/tailwind.css b/src/css/tailwind.css index ca39a0d..9b6f78b 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -1,19 +1,104 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; -svg.scan-region-highlight-svg { - stroke: #3b82f6 !important; - animation: none !important; + + /* CSS for qrcode size slider */ + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; /* Remove default appearance */ + height: 24px; /* Height of the thumb */ + width: 24px; /* Width of the thumb */ + background: #4f46e5; /* Color of the thumb (change this to desired color) */ + border-radius: 50%; /* Make it circular */ + cursor: pointer; /* Pointer cursor on hover */ + margin-top: 0px; /* Center thumb vertically */ } -svg.code-outline-highlight { - stroke: #eea615 !important; - stroke-dasharray: 35 !important; - stroke-width: 5px !important; -} + @supports not selector(::-webkit-scrollbar) { + body { + scrollbar-color: var(--sb-thumb-color) + var(--sb-track-color); + } + } + + input:-webkit-autofill { + background-color: white !important; + color: black !important; + box-shadow: 0 0 0px 1000px white inset !important; + -webkit-text-fill-color: black !important; + transition: background-color 5000s ease-in-out 0s; + } -body { + input:-moz-autofill { + background-color: white !important; + color: black !important; + box-shadow: 0 0 0px 1000px white inset !important; + }@tailwind base; + @tailwind components; + @tailwind utilities; + + /* Custom Footer Styles */ + footer { + background-color: #232E33; /* Dark background for footer */ + } + + .footer-color { + background-color: #232E33; + } + + .footer-text { + font-size: 1.2rem; + color: white; + margin-top: 1rem; + } + + .footer-social-icons { + display: flex; + justify-content: center; + gap: 1rem; + margin-top: 1rem; + } + + .footer-social-icons a { + color: #ffffff; + font-size: 1.5rem; + transition: color 0.3s ease; + } + + .footer-social-icons a:hover { + color: #3b82f6; /* Blue color on hover for social media icons */ + } + + .footer-star { + color: #eea615; /* Gold color for the stars */ + font-size: 1.5rem; + margin-right: 0.2rem; + } + + .footer-star:hover { + color: #eea615; /* Hover color for stars */ + } + + /* Styling for dynamic floating review section */ + .footer-reviews { + display: flex; + justify-content: center; + gap: 0.5rem; + margin-top: 1rem; + animation: floating 2s infinite ease-in-out; + } + + @keyframes floating { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } + } + + /* Custom scrollbar */ + body { cursor: url("../assets/custom-pointer.png"), auto; --sb-track-color: #232E33; --sb-thumb-color: #ffffff; @@ -21,7 +106,7 @@ body { } body::-webkit-scrollbar { - width: var(--sb-size) + width: var(--sb-size); } body::-webkit-scrollbar-track { @@ -32,27 +117,27 @@ body { body::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 3px; - } - /* CSS for qrcode size slider */ - input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; /* Remove default appearance */ - height: 24px; /* Height of the thumb */ - width: 24px; /* Width of the thumb */ - background: #4f46e5; /* Color of the thumb (change this to desired color) */ - border-radius: 50%; /* Make it circular */ - cursor: pointer; /* Pointer cursor on hover */ - margin-top: 0px; /* Center thumb vertically */ -} - @supports not selector(::-webkit-scrollbar) { body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } } - + + /* Styling for the range input slider */ + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + height: 24px; + width: 24px; + background: #4f46e5; + border-radius: 50%; + cursor: pointer; + margin-top: 0px; + } + + /* Style for autofill in input fields */ input:-webkit-autofill { background-color: white !important; color: black !important; @@ -60,9 +145,10 @@ body { -webkit-text-fill-color: black !important; transition: background-color 5000s ease-in-out 0s; } - + input:-moz-autofill { background-color: white !important; color: black !important; box-shadow: 0 0 0px 1000px white inset !important; - } \ No newline at end of file + } + \ No newline at end of file