Mr-raaz · Mr-raaz · Nov 28, 2022 · Nov 30, 2022 · Nov 30, 2022 · Nov 30, 2022
diff --git a/frank_body_clone/package-lock.json b/frank_body_clone/package-lock.json
diff --git a/frank_body_clone/package.json b/frank_body_clone/package.json
@@ -3,15 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^7.6.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
+    "react-simple-chatbot": "^0.6.1",
     "redux": "^4.2.0",
+    "swiper": "^8.4.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/frank_body_clone/public/index.html b/frank_body_clone/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://i.pinimg.com/originals/73/a5/d0/73a5d0c5b118817cc8811125f6f415a8.png" />
     <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"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="icon" href="https://i.pinimg.com/originals/73/a5/d0/73a5d0c5b118817cc8811125f6f415a8.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Frank Body</title>
+    <script src="https://kit.fontawesome.com/5fa36d54c1.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frank_body_clone/src/AllRoutes/AllRoutes.jsx b/frank_body_clone/src/AllRoutes/AllRoutes.jsx
@@ -1,13 +1,31 @@
 import React from 'react';
-import {Routes , Route} from 'react-router-dom';
+import {Routes , Route , Navigate} from 'react-router-dom';
 import LandingPage from '../Components/LandingPage/LandingPage';
+import ProductPage from '../Components/ProductPage/ProductPage';
+import About from '../Components/About/About';
+import Contact from '../Components/Contact/Contact';
+import ProductDescription from '../Components/ProductDescription/ProductDescription';
+import Login from '../Components/Login_Signup/Login';
+import Profile from '../Components/Profile/Profile';
+import Register from '../Components/Login_Signup/Register';
+import { useSelector } from 'react-redux';
 function AllRoutes() {
+
+    const isLogin = useSelector((store) => store.loginStatus);
+
     return (
         <>
 
 
                     <Routes>
                         <Route path='/' element={<LandingPage />} />
+                        <Route path='/shop' element={<ProductPage />} />
+                        <Route path='/about' element={<About />} />
+                        <Route path='/contact' element={<Contact />} />
+                        <Route path ='/Login' element={<Login />} />
+                        <Route path='/details/:id' element={<ProductDescription />} />
+                        <Route path='/profile' element={isLogin ? <Profile /> : <Navigate to='/Login' />} />
+                        <Route path = '/register' element={<Register />} />
                     </Routes>  
         </>
     );

diff --git a/frank_body_clone/src/App.jsx b/frank_body_clone/src/App.jsx
@@ -1,9 +1,73 @@
 import React from 'react';
+import "swiper/css/bundle";
 import AllRoutes from './AllRoutes/AllRoutes';
+import {AnimatePresence} from 'framer-motion';
+
+import avtar from './Components/LandingPage/Images/chatbot.png';
+import ChatBot from 'react-simple-chatbot';
+import { ThemeProvider } from 'styled-components';
+
+
+const steps = [
+    {
+        id: '0',
+        message: 'Hey!',
+        trigger: '1',
+    }, {
+        id: '1',
+        message: 'May I help You .. ?',
+        trigger: '2'
+    }, {
+        id: '2',
+        user: true,
+        trigger: '3',
+    }, {
+        id: '3',
+        message: " Ok! , May I know your name please?",
+        trigger: 4
+    }, {
+        id:'4',
+        user:true,
+        trigger:'5',
+    },{
+        id: '5',
+        message : "Ok {previousValue}, I am Looking to your problem ....",
+        trigger:'6',
+    },{
+        id:'6',
+        options: [
+            { value: 1, label: 'Ok' },
+            { value: 2, label: 'Cancel' },
+
+        ],
+        end :true
+    }
+];
+
+
+const theme = {
+    background: 'white',
+    headerBgColor: '#e76364',
+    headerFontSize: '20px',
+    botBubbleColor: '#e76364',
+    headerFontColor: 'white',
+    botFontColor: 'white',
+    userBubbleColor: '#FF5733',
+    userFontColor: 'white',
+};
+
+
+const config = {
+    botAvatar: "https://e7.pngegg.com/pngimages/498/917/png-clipart-computer-icons-desktop-chatbot-icon-blue-angle-thumbnail.png",
+    floating: true,
+};
+
+
 function App() {
     return (
+        <>
 
-
+<AnimatePresence mode='wait'>
         <AllRoutes>
 
 
@@ -12,6 +76,18 @@ function App() {
 
 
         </AllRoutes>
+        </AnimatePresence>
+
+
+        <ThemeProvider theme={theme}>
+                <ChatBot
+                    headerTitle="Chat Bot "
+                    steps={steps}
+                    {...config}
+
+                />
+            </ThemeProvider>
+        </>
     );
 }
 

diff --git a/frank_body_clone/src/Components/About/About.css b/frank_body_clone/src/Components/About/About.css
@@ -0,0 +1,129 @@
+@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+.banner_outer{
+    background-color: #e76364;
+    height: 65vh;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 5%;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 0px;
+    margin-top: 60px;
+}
+
+.banner_outer > div{
+    height: 100%;
+}
+.banner_outer > div:first-of-type{
+    width: 40%;
+}
+.banner_outer > div img{
+    width: 100%;
+    height: 100.3%;
+}
+
+.second_div_about{
+    /* border: 1px solid red ; */
+    width: 55%
+}
+
+.second_div_about > div >  h2{
+
+    color: white;
+    letter-spacing: 5px;
+    font-size: 40px;
+    border-bottom: 2px solid white;
+    display: inline;
+    padding: 0px 40px;
+    padding-top: 7%;
+}
+
+.second_div_about > div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.second_div_about p{
+    /* border: 1px solid red; */
+    margin-top: 7%;
+    color: white;
+    text-align: justify;
+    line-height: 25px;
+}
+
+.welcomeSection{
+    /* border: 1px solid red; */
+    margin-top: 3%;
+    text-align: center;
+}
+
+.welcomeSection h2 {
+    /* font-family: 'Satisfy', cursive !important; */
+
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.welcomeSection p{
+    font-family: 'Satisfy', cursive !important;
+    margin-top: 20px;
+    padding: 0px 30%;
+}
+
+.aboutMesection{
+    /* border: 1px solid red; */
+    margin-top: 60px;
+    display: flex;
+    justify-content: space-between;
+    padding: 2px 5%;
+    align-items: center;
+    text-align: center;
+}
+
+.aboutMesection > div:first-of-type{
+    width: 50%;
+}
+
+.aboutMesection > div:last-of-type{
+    width: 45%;
+
+}
+
+.aboutMesection > div img{
+    width:90%;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+    border-radius: 5px;
+}
+
+.detail_about{
+    margin-top: 60px;
+    background-color: antiquewhite;
+    /* height: 40vh; */
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 8%;
+    padding-bottom: 25px;
+}
+
+.detail_about > div{
+    display: flex;
+    flex-direction: column;
+    /* border: 1px solid red; */
+    width: 30%;
+    text-align: center;
+}
+.detail_about img{
+    height: 300px;
+    width: 100%;
+
+}
+
+.detail_about h3{
+    margin-top: -60px;
+}
diff --git a/frank_body_clone/src/Components/About/About.jsx b/frank_body_clone/src/Components/About/About.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Navbar from '../LandingPage/TopSection/Navbar/Navbar';
+import './About.css';
+import Banner from './Banner';
+import {Footer} from '../Footer/footer';
+function About() {
+    return (
+        <>
+            <Navbar />
+            <Banner />
+            <Footer />
+        </>
+    );
+}
+
+export default About;