diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1b6986c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# Code-Innovation-Series-NMAMIT
+Finite loop club - Incubate IND - online hackathon project submission.
diff --git a/public/404.html b/public/404.html
new file mode 100644
index 0000000..829eda8
--- /dev/null
+++ b/public/404.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ Page Not Found
+
+
+
+
+
+
404
+
Page Not Found
+
The specified file was not found on this website. Please check the URL for mistakes and try again.
+
Why am I seeing this?
+
This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.
+
+
+
+
{props.text}
+
+
+
+
+ );
+}
+
+export default CardItem;
diff --git a/src/components/Cards.css b/src/components/Cards.css
new file mode 100644
index 0000000..6ac4533
--- /dev/null
+++ b/src/components/Cards.css
@@ -0,0 +1,118 @@
+.cards {
+ padding: 4rem;
+ background: #fff;
+}
+
+h1 {
+ text-align: center;
+}
+
+.cards__container {
+ display: flex;
+ flex-flow: column;
+ align-items: center;
+ max-width: 1120px;
+ width: 90%;
+ margin: 0 auto;
+}
+
+.cards__wrapper {
+ position: relative;
+ margin: 50px 0 45px;
+}
+
+.cards__items {
+ margin-bottom: 24px;
+}
+
+.cards__item {
+ display: flex;
+ flex: 1;
+ margin: 0 1rem;
+ border-radius: 10px;
+}
+
+.cards__item__link {
+ display: flex;
+ flex-flow: column;
+ width: 100%;
+ box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
+ -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+ filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
+ border-radius: 10px;
+ overflow: hidden;
+ text-decoration: none;
+}
+
+.cards__item__pic-wrap {
+ position: relative;
+ width: 100%;
+ padding-top: 67%;
+ overflow: hidden;
+}
+
+.fade-img {
+ animation-name: fade-img;
+ animation-duration: 2s;
+}
+
+.cards__item__pic-wrap::after {
+ content: attr(data-category);
+ position: absolute;
+ bottom: 0;
+ margin-left: 10px;
+ padding: 6px 8px;
+ max-width: calc((100%) - 60px);
+ font-size: 12px;
+ font-weight: 700;
+ color: #fff;
+ background-color: black;
+ box-sizing: border-box;
+}
+
+.cards__item__img {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ max-height: 100%;
+ object-fit: cover;
+ transition: all 0.2s linear;
+}
+
+.cards__item__img:hover {
+ transform: scale(1.1);
+}
+
+.cards__item__info {
+ padding: 20px 30px 30px;
+}
+
+.cards__item__text {
+ color: #252e48;
+ font-size: 18px;
+ line-height: 24px;
+}
+
+@media only screen and (min-width: 1200px) {
+ .content__blog__container {
+ width: 84%;
+ }
+}
+
+@media only screen and (min-width: 1024px) {
+ .cards__items {
+ display: flex;
+ }
+}
+
+@media only screen and (max-width: 1024px) {
+ .cards__item {
+ margin-bottom: 2rem;
+ }
+}
diff --git a/src/components/Cards.js b/src/components/Cards.js
new file mode 100644
index 0000000..0a6bdf5
--- /dev/null
+++ b/src/components/Cards.js
@@ -0,0 +1,51 @@
+import React from "react";
+import "./Cards.css";
+import CardItem from "./CardItem";
+
+function Cards() {
+ return (
+
+
Check out these Amazing reviews!
+
+
+
+
+ Join us to get a weekly newsletter and receive our best hotel deals
+
+
+ You can unsubscribe any time.
+
+
+
+
+
+
+
+
+ {/*
*/}
+
Hassle Free Orders
+
What are you waiting for?
+
+
+
+
+
+
+
{props.text}
+
+
+
+
+ );
+}
+
+export default AboutCardItem;
diff --git a/src/components/pages/AboutCards.js b/src/components/pages/AboutCards.js
new file mode 100644
index 0000000..6bb9282
--- /dev/null
+++ b/src/components/pages/AboutCards.js
@@ -0,0 +1,58 @@
+import React from "react";
+import "../Cards.css";
+import AboutCardItem from "./AboutCardItem";
+
+function AboutCards() {
+ return (
+
+ );
+}
+
+export default AboutCards;
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
new file mode 100644
index 0000000..efc0b43
--- /dev/null
+++ b/src/components/pages/Home.js
@@ -0,0 +1,16 @@
+import React from "react";
+import "../../App.css";
+import Cards from "../Cards";
+import Footer from "../Footer";
+import HeroSection from "../HeroSection";
+
+function Home() {
+ return (
+ <>
+
+
+
+
+ );
+}
+export default Home;
diff --git a/src/components/pages/Products.js b/src/components/pages/Products.js
new file mode 100644
index 0000000..23b401d
--- /dev/null
+++ b/src/components/pages/Products.js
@@ -0,0 +1,16 @@
+import React from "react";
+import "../../App.css";
+import AboutCards from "./AboutCards";
+import "../Cards.css";
+import Footer from "../Footer";
+import CardItem from "../CardItem";
+
+export default function Products() {
+ return (
+ <>
+ ABOUT US
;
+
+
+
+ );
+}
diff --git a/src/components/pages/Services.js b/src/components/pages/Services.js
new file mode 100644
index 0000000..ef0441e
--- /dev/null
+++ b/src/components/pages/Services.js
@@ -0,0 +1,14 @@
+import React from "react";
+import "../../App.css";
+import ServicesCards from "./ServicesCards";
+import "../Cards.css";
+import Footer from "../Footer";
+export default function Services() {
+ return (
+ <>
+ MENU
+
+
+
+ );
+}
diff --git a/src/components/pages/ServicesCards.js b/src/components/pages/ServicesCards.js
new file mode 100644
index 0000000..91b5966
--- /dev/null
+++ b/src/components/pages/ServicesCards.js
@@ -0,0 +1,64 @@
+import React from "react";
+import "../Cards.css";
+import AboutCardItem from "./AboutCardItem";
+
+function ServicesCards() {
+ return (
+
+ );
+}
+
+export default ServicesCards;
diff --git a/src/components/pages/SignUp.css b/src/components/pages/SignUp.css
new file mode 100644
index 0000000..797a7c8
--- /dev/null
+++ b/src/components/pages/SignUp.css
@@ -0,0 +1,92 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: rgb(248, 246, 253);
+}
+
+body,
+input,
+textarea,
+button {
+ font-family: "Inter", sans-serif;
+}
+
+.App {
+ width: 400px;
+ margin: 0 auto;
+ height: 100vh;
+}
+
+/* Contact.js */
+.form {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ padding: 4rem;
+}
+
+.form > h3 {
+ margin-bottom: 30px;
+}
+
+.form > input,
+textarea {
+ padding: 20px;
+ border-radius: 3px;
+ /* box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.137); */
+ margin-bottom: 20px;
+ border: 1px solid lightgray;
+ /* border: none; */
+ background: #fff;
+ font-size: 16px;
+ color: rgb(0, 0, 32);
+ outline: none;
+}
+
+.form > input:focus,
+textarea:focus {
+ border: 1px solid rgb(85, 0, 196);
+}
+
+.form > textarea {
+ height: 150px;
+ max-width: 400px;
+ min-height: 100px;
+}
+
+.form > label {
+ padding-bottom: 10px;
+ color: rgb(0, 0, 32);
+ font-weight: bold;
+}
+
+.form > button {
+ padding: 20px;
+ border: none;
+ background-color: rgb(85, 0, 196);
+ font-weight: 500;
+ font-size: 20px;
+ border-radius: 3px;
+ color: #fff;
+ cursor: pointer;
+ transition: 0.2s ease-in-out;
+ margin-top: 10px;
+}
+
+.form > button:hover {
+ background-color: rgb(85, 0, 196);
+}
+
+@media screen and (max-width: 960px) {
+ .signup-container > h1 {
+ font-size: 70px;
+ margin-top: -50px;
+ }
+}
diff --git a/src/components/pages/SignUp.js b/src/components/pages/SignUp.js
new file mode 100644
index 0000000..1562efb
--- /dev/null
+++ b/src/components/pages/SignUp.js
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+import "../../App.css";
+import "./SignUp.css";
+import { db } from "../../firebase";
+import Footer from "../Footer";
+const SignUp = () => {
+ const [name, setName] = useState("");
+ const [email, setEmail] = useState("");
+ const [message, setMessage] = useState("");
+
+ const [loader, setLoader] = useState(false);
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ setLoader(true);
+
+ db.collection("contacts")
+ .add({
+ name: name,
+ email: email,
+ message: message,
+ })
+ .then(() => {
+ setLoader(false);
+ alert("Your message has been submitted");
+ setLoader(false);
+ })
+ .catch((error) => {
+ alert(error.message);
+ setLoader(false);
+ });
+
+ setName("");
+ setEmail("");
+ setMessage("");
+ };
+
+ return (
+
+
CONTACT US
+
+
+
+ );
+};
+
+export default SignUp;
diff --git a/src/firebase.js b/src/firebase.js
new file mode 100644
index 0000000..a2c8c6a
--- /dev/null
+++ b/src/firebase.js
@@ -0,0 +1,14 @@
+import firebase from "firebase";
+
+var firebaseApp = firebase.initializeApp({
+ apiKey: "AIzaSyBVPviB5yWGOZZFnHVVU4_0T_G4ZXiAkf0",
+ authDomain: "waitqrcontact.firebaseapp.com",
+ databaseURL: "https://waitqrcontact.firebaseio.com",
+ projectId: "waitqrcontact",
+ storageBucket: "waitqrcontact.appspot.com",
+ messagingSenderId: "603592388623",
+ appId: "1:603592388623:web:42bafc8d9819eeecb2737a",
+});
+
+var db = firebaseApp.firestore();
+export { db };
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..2727b68
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(, document.getElementById("root"));
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
new file mode 100644
index 0000000..5253d3a
--- /dev/null
+++ b/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;