Skip to content

Commit

Permalink
Merge pull request #135 from Ansh101112/dev
Browse files Browse the repository at this point in the history 
Footer Added
  • Loading branch information
@usha-madithati
usha-madithati authored May 19, 2024
2 parents 13d50e9 + b50ebfe commit 2087eaa
Show file tree
Hide file tree
Showing 9 changed files with 249 additions and 33 deletions.
2 changes: 2 additions & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import SignUp from "./pages/Signup";
import Login from "./pages/Login";
import NotificationSettings from "./pages/Notification";
import CustomerVoices from "./pages/Contact";
import Review from "./pages/Review";

const App = () => {
return (
Expand All @@ -27,6 +28,7 @@ const App = () => {
element={<NotificationSettings></NotificationSettings>}
></Route>
<Route path="/about" element={<Home></Home>}></Route>
<Route path="/user/review" element={<Review></Review>}></Route>
</Routes>
</>
);
Expand Down
203 changes: 203 additions & 0 deletions src/components/Footer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
import React from "react";
import { Link } from "react-router-dom";

const Footer = () => {
return (
<>
<footer class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<Link class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<img
src="https://i.postimg.cc/8PZbqb9Z/logo1.png"
className="h=20 w-20"
></img>{" "}
<span class="ml-3 text-xl">Smart Saver</span>
</Link>
<p class="mt-2 text-sm text-gray-500">
{" "}
Our team is here to assist you every step of the way.
</p>
</div>
<div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
Navigate here
</h2>
<nav class="list-none mb-10">
<li>
<Link to="/" class="text-gray-600 hover:text-gray-800">
Home
</Link>
</li>
<li>
<Link to="/about" class="text-gray-600 hover:text-gray-800">
About Us
</Link>
</li>
<li>
<Link to="/scanqr" class="text-gray-600 hover:text-gray-800">
Scan QR
</Link>
</li>
<li>
<Link to="/contact" class="text-gray-600 hover:text-gray-800">
Contact Us
</Link>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
Useful Links
</h2>
<nav class="list-none mb-10">
<li>
<Link class="text-gray-600 hover:text-gray-800">
Services
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Products
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Sitemap Link
</Link>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
Legal Information
</h2>
<nav class="list-none mb-10">
<li>
<Link class="text-gray-600 hover:text-gray-800">
Privacy Policy
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Terms of service
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Disclaimer
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Cookie Policy
</Link>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">
FAQ's
</h2>
<nav class="list-none mb-10">
<li>
<Link class="text-gray-600 hover:text-gray-800">
Help Center
</Link>
</li>
<li>
<Link class="text-gray-600 hover:text-gray-800">
Live Chat Link
</Link>
</li>
<li>
<Link
to="/user/review"
class="text-gray-600 hover:text-gray-800"
>
Customer Review
</Link>
</li>
</nav>
</div>
</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center sm:text-left">
© 2024 SmartSaver —
<Link
href=""
rel="noopener noreferrer"
class="text-gray-600 ml-1"
target="_blank"
>
Email Address: [email protected]
</Link>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<Link class="text-gray-500">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</Link>
<Link class="ml-3 text-gray-500">
<svg
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</Link>
<Link class="ml-3 text-gray-500">
<svg
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</Link>
<Link class="ml-3 text-gray-500">
<svg
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="0"
class="w-5 h-5"
viewBox="0 0 24 24"
>
<path
stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"
></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</Link>
</span>
</div>
</div>
</footer>
</>
);
};

export default Footer;
1 change: 1 addition & 0 deletions src/pages/Contact.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const CustomerVoices = () => {
return (
Expand Down
2 changes: 2 additions & 0 deletions src/pages/Home.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import Navbar from "../components/Navbar";
import { Link } from "react-router-dom";
import Footer from "../components/Footer";

const Home = () => {
return (
Expand Down Expand Up @@ -175,6 +176,7 @@ const Home = () => {
</section>
</main>
</div>
<Footer></Footer>
</>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/pages/Login.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const Login = () => {
return (
Expand Down
1 change: 1 addition & 0 deletions src/pages/Notification.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const NotificationSettings = () => {
return (
Expand Down
70 changes: 37 additions & 33 deletions src/pages/QR.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,46 @@
import React from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

function QRCodeVerification() {
return (
<div className="bg-white">
<Navbar></Navbar>
<section className="text-center py-12 flex flex-col items-center">
<div className="text-center justify-center mx-auto">
<h1 className="text-5xl font-bold text-center">
QR Code Verification
</h1>
<img
src="https://i.postimg.cc/PJghMmyQ/9427512-4149572-removebg-preview-1-1.jpg"
alt="Phone with QR codes"
className="h-[350px] w-[350px] md:h-auto md:w-auto flex justify-center m-2"
width="300"
height="300"
style={{ aspectRatio: "300 / 300", objectFit: "cover" }}
/>
</div>
<div className="md:w-1/2">
<p className="text-xl mb-6">
<b className="font-semibold">
Scan products easily for instant access to all the info you need.
From ingredients to eco impact, make informed choices in seconds.
</b>
</p>
<div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4">
<button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 md:w-auto">
Scan Now
</button>
<button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 bg-gray-200 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-300 md:w-auto mt-4 md:mt-0">
Browse Image
</button>
<>
<div className="bg-white">
<Navbar></Navbar>
<section className="text-center py-12 flex flex-col items-center">
<div className="text-center justify-center mx-auto">
<h1 className="text-5xl font-bold text-center">
QR Code Verification
</h1>
<img
src="https://i.postimg.cc/PJghMmyQ/9427512-4149572-removebg-preview-1-1.jpg"
alt="Phone with QR codes"
className="h-[350px] w-[350px] md:h-auto md:w-auto flex justify-center m-2"
width="300"
height="300"
style={{ aspectRatio: "300 / 300", objectFit: "cover" }}
/>
</div>
</div>
</section>
</div>
<div className="md:w-1/2">
<p className="text-xl mb-6">
<b className="font-semibold">
Scan products easily for instant access to all the info you
need. From ingredients to eco impact, make informed choices in
seconds.
</b>
</p>
<div className="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-4">
<button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 bg-green-600 text-white px-6 py-2 rounded-md hover:bg-green-700 md:w-auto">
Scan Now
</button>
<button className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 bg-gray-200 text-gray-700 px-6 py-2 rounded-md hover:bg-gray-300 md:w-auto mt-4 md:mt-0">
Browse Image
</button>
</div>
</div>
</section>
</div>
</>
);
}

Expand Down
1 change: 1 addition & 0 deletions src/pages/Review.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const Review = () => {
return (
Expand Down
1 change: 1 addition & 0 deletions src/pages/Signup.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import { Link } from "react-router-dom";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";

const SignUp = () => {
return (
Expand Down

0 comments on commit 2087eaa

Please sign in to comment.