Skip to content

make chnages in html css and js code also add some js file to create … #219

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
devki412 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

make chnages in html css and js code also add some js file to create … #219

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
40 changes: 37 additions & 3 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
Expand Down Expand Up @@ -42,7 +41,8 @@

<!-- Arrow icon for the Scroll to Top button -->
<button id="scrollToTopBtn" style="display: none;">&uarr;</button>




<script>
// Get the button
Expand All @@ -64,6 +64,40 @@
behavior: 'smooth' // Smooth scroll effect
});
};
</script>
</script><footer class="footer-color py-8 text-center">
<!-- Footer Content -->
<div class="container mx-auto px-4">
<p class="footer-text">© 2024 Your Company. All Rights Reserved.</p>

<!-- Social Media Icons -->
<div class="footer-social-icons mt-4">
<a href="#" class="hover:text-blue-500">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="hover:text-blue-500">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="hover:text-blue-500">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="hover:text-blue-500">
<i class="fab fa-linkedin-in"></i>
</a>
</div>

<!-- Floating Review Section -->
<div class="footer-reviews mt-6">
<span class="footer-star">★</span>
<span class="footer-star">★</span>
<span class="footer-star">★</span>
<span class="footer-star">★</span>
<span class="footer-star">★</span>
</div>
</div>
</footer>

<!-- Optional: Include Font Awesome CDN for social icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

</body>
</html>
100 changes: 9 additions & 91 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 (
<div
className={`min-h-screen ${
location.pathname === "/register"
? "bg-white"
: "bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800"
}`}
>
{children}
</div>
);
}
import Footer from "./components/footer"; // Add Footer
import ReviewReward from "./components/ReviewReward"; // Add ReviewReward

export default function App() {
return (
<AuthProvider>
<ThemeProvider>
<Router>
<BackgroundWrapper>
<div className="app-container">
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
Expand Down Expand Up @@ -77,66 +50,11 @@ export default function App() {
</ProtectedRoute>
}
/>
<Route
path="/support"
element={
<ProtectedRoute>
<Support />
</ProtectedRoute>
}
/>
<Route
path="/settings"
element={
<ProtectedRoute>
<Settings />
</ProtectedRoute>
}
/>
<Route path="/more-info" element={<Moreinfo />} />
<Route
path="/image-qr-code"
element={
<ProtectedRoute>
<ImageQRCodeGenerator />
</ProtectedRoute>
}
/>
<Route
path="/social-media-qr"
element={
<ProtectedRoute>
<SocialMedia />
</ProtectedRoute>
}
/>
<Route
path="/bulk-qr-code"
element={
<ProtectedRoute>
<BulkQRCode />
</ProtectedRoute>
}
/>
<Route
path="/qr-scanner"
element={
<ProtectedRoute>
<QRScanner />
</ProtectedRoute>
}
/>
<Route
path="/pdf-qr-code"
element={
<ProtectedRoute>
<PdfQRCodeGenerator />
</ProtectedRoute>
}
/>
<Route path="*" element={<NotFoundPage />} />
{/* Other routes */}
</Routes>
</BackgroundWrapper>
<ReviewReward /> {/* Add the review and reward section */}
<Footer /> {/* Add the footer here */}
</div>
<Toaster />
</Router>
</ThemeProvider>
Expand Down
29 changes: 29 additions & 0 deletions src/components/ReviewReward.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="review-reward-container">
<div className="review-reward-header">Reviews & Rewards</div>
<div className="review-reward-content">
<div className="review-reward-slider">
<div className="review-slide">
<p className="review-text">"Amazing tool for generating QR codes!"</p>
<p className="review-author">- John Doe</p>
</div>
<div className="review-slide">
<p className="review-text">"Easy to use, highly recommend!"</p>
<p className="review-author">- Jane Smith</p>
</div>
</div>
<button className="reward-button">Claim Your Reward</button>
</div>
</div>
);
};

export default ReviewReward;
32 changes: 32 additions & 0 deletions src/components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';

const Footer = () => {
return (
<footer className="bg-gray-800 text-white py-8">
<div className="container mx-auto px-4 text-center">
<div className="mb-4">
<p className="font-bold">Follow Us</p>
<div className="flex justify-center space-x-4">
<a href="https://facebook.com" target="_blank" rel="noreferrer">
<i className="fab fa-facebook fa-lg"></i>
</a>
<a href="https://twitter.com" target="_blank" rel="noreferrer">
<i className="fab fa-twitter fa-lg"></i>
</a>
<a href="https://instagram.com" target="_blank" rel="noreferrer">
<i className="fab fa-instagram fa-lg"></i>
</a>
</div>
</div>
<div className="mb-4">
<p>QR Generator - The easiest way to generate QR codes.</p>
</div>
<div>
<p>Contact us: support@qrgenerator.com</p>
</div>
</div>
</footer>
);
};

export default Footer;
Loading