algo-maniac · algo-maniac · Mar 12, 2023
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/client/public/index.html b/client/public/index.html
@@ -15,16 +15,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Climate+Crisis&family=Roboto&family=Tilt+Warp&display=swap" rel="stylesheet">
+    <title>Learnify</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.css b/client/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/client/src/App.js b/client/src/App.js
@@ -1,24 +1,11 @@
-import logo from './logo.svg';
+import {Route,Routes} from 'react-router-dom';
 import './App.css';
-
+import Home from './components/Home';
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <Routes>
+        <Route path="/" element={<Home/>}/>
+      </Routes>
   );
 }
 

diff --git a/client/src/App.test.js b/client/src/App.test.js
diff --git a/client/public/assets/back_img1.png → client/src/assets/back_img1.png b/client/public/assets/back_img1.png → client/src/assets/back_img1.png
diff --git a/client/public/assets/back_img2.png → client/src/assets/back_img2.png b/client/public/assets/back_img2.png → client/src/assets/back_img2.png
diff --git a/client/public/assets/back_img3.png → client/src/assets/back_img3.png b/client/public/assets/back_img3.png → client/src/assets/back_img3.png
diff --git a/client/src/assets/img1.jpg b/client/src/assets/img1.jpg
diff --git a/client/src/assets/img2.jpg b/client/src/assets/img2.jpg
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/components/About/About.css b/client/src/components/About/About.css
@@ -0,0 +1,63 @@
+.about-container{
+    position:absolute;
+    top: 65rem;
+    left: 1.5rem;
+    height:35rem;
+    width: 45rem;
+    box-shadow: 5px 10px 18px #cd7851;
+
+    border:2px solid #cd7851;
+    border-radius: 10px;
+}
+.heading{
+    padding: 15px 10px;
+    /* padding-top: 15px; */
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+    color: #3798bf;
+}
+.para{
+    padding:25px 25px ;
+    font-size: large;
+    font-family: 'Roboto', sans-serif;
+}
+.container{
+    /* border: 2px solid white; */
+    margin: 106px 80px;
+    padding: 22px;
+    border-radius: 30px;
+    width: 33%;
+    position: absolute;
+    left: 30px;
+    top:100px;
+}
+.form-group input{
+    font-family: 'Baloo Bhai 2', cursive;
+    text-align: center;
+    display: block;
+    width: 508px;
+    padding: 1px;
+    border: 2px solid black;
+    margin: 11px auto;
+    font-size: 25px;
+    border-radius: 8px;
+}
+.container h1{
+    text-align: center;
+    text-decoration: underline;
+}
+.container button{
+    display: block;
+    width: 102%;
+    margin: 19px auto;
+    font-size: 25px;
+    border: 2px solid white;
+    border-radius: 8px;
+    background-color: black;
+    color: white;
+    font-family: 'Baloo Bhai 2', cursive;
+    cursor: pointer;
+}
+.container button:hover{
+    color: skyblue;
+}
diff --git a/client/src/components/About/About.js b/client/src/components/About/About.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import './About.css'
+const About = () => {
+  return (
+    <>
+
+        <div id='about' className='about-container'>
+          <h1 className='heading'>
+              About Us
+          </h1>
+          <p className='para'>
+            <strong style={{color:'#cd7851'}}>LEARNIFY</strong> aims at providing quality content to every child. Live classes, video lectures, test series, lecturewise notes, topicwise assignment with best questions, dynamic exercise and much more.
+          </p>
+
+        <div className="container">
+          <h1>Join us Now !</h1>
+          <form action="noaction.php">
+              <div className="form-group">
+                  <input type="number" placeholder="Enter your phone number" required/>
+              </div>
+              <div className="form-group">
+                  <input type="text" placeholder="Email" required/>
+              </div>
+              <button className="btn">Submit</button>
+          </form>
+        </div>
+        </div>
+    </>
+
+  )
+}
+
+export default About
diff --git a/client/src/components/Header/Header.css b/client/src/components/Header/Header.css
@@ -0,0 +1,16 @@
+.wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+  .wrapper-img {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .wrapper-img img{
+      width: 100%;
+  }
diff --git a/client/src/components/Header/Header.js b/client/src/components/Header/Header.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import image from '../../assets/back_img3.png'
+import './Header.css'
+const Header = () => {
+  return (
+    <>
+    {/* <div className="wrapper"> </div> */}
+     <div className="wrapper-img">
+     <img src={image} alt="header_img" />
+    </div>
+    </>
+
+  )
+}
+
+export default Header
diff --git a/client/src/components/Heading/Heading.css b/client/src/components/Heading/Heading.css
@@ -0,0 +1,47 @@
+.heading-container{
+    display: flex;
+    width: 400px;
+    height: 320px;
+    line-height: 3.5rem;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    top: 40vh;
+    border: 5px solid #2A454F;
+    margin-left: 2rem;
+    padding: 20px;
+    border-radius: 20px;
+    box-shadow: 5px 10px #2A454F;
+    animation-name: bounce;
+    animation-timing-function: ease;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+
+}
+@keyframes bounce {
+    0%   { transform: translateY(0); }
+    50%  { transform: translateY(-80px); }
+    100% { transform: translateY(0); }
+}
+.heading-container h1{
+    color: #e2945e;
+    font-family: 'Roboto', sans-serif;
+}
+/* .img1{
+    position: absolute;
+    top: 0;left: 0;
+    opacity: 0.3;
+    height: 300px;
+    width: 300px;
+    border: 1px solid white;
+    border-radius: 50%;
+} */
+/* .img2{
+    position: absolute;
+    top: 0;left: 0;
+    opacity: 0.3;
+    height: 300px;
+    width: 300px;
+    border: 1px solid white;
+    border-radius: 50%;
+} */
diff --git a/client/src/components/Heading/Heading.js b/client/src/components/Heading/Heading.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import './Heading.css'
+import Img1 from '../../assets/img1.jpg';
+import Img2 from '../../assets/img2.jpg';
+const Heading = () => {
+  return (
+    <>
+    <div className='heading-container'>
+      <h1>" Education is not the learning of facts, but the training of the mind to think. " ~ Albert Einstein</h1>
+    </div>
+    {/* <div className='image-container'>
+        <img className='img1' src={Img1} alt="bg img" />
+        <img className='img2' src={Img2} alt="bg img" />
+    </div> */}
+    </>
+  )
+}
+
+export default Heading
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import About from './About/About'
+import Header from './Header/Header'
+import Heading from './Heading/Heading'
+import Navbar from './Navbar/Navbar'
+
+const Home = () => {
+  return (
+    <div>
+      <Navbar/>
+      <Header/>
+      <Heading/>
+      <About/>
+    </div>
+  )
+}
+
+export default Home