faq page commited

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.54.8",
     "web-vitals": "^2.1.0"
   },
   "scripts": {

public/index.html

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <!--
       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/

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);
-  }
-}

src/App.js

@@ -1,24 +1,14 @@
-import logo from './logo.svg';
+
 import './App.css';
+import Faq from "./pages/Landing"
 
 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>
+<>
+
+ <Faq/>
+
+</>
   );
 }
 

src/component/Last.css

@@ -0,0 +1,60 @@
+.accordion {
+  width: 45rem;
+}
+
+.heading {
+  width: 140px;
+  height: 72px;
+  font-family: "GilroyGilroy-ExtraBold";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 60px;
+  line-height: 72px;
+  letter-spacing: -0.02em;
+  color: #333333;
+}
+
+.accordion-body {
+  font-family: "Gilroy-Light";
+}
+
+.img-f {
+  width: 400px;
+  height: 500px;
+}
+
+.txt {
+  margin-top: 7rem;
+}
+
+.img {
+  margin-top: 7rem;
+  margin-left: 10rem;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  width: 100%;
+  height: 100vh;
+}
+
+@media (max-width: 1400px) {
+  .container {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+  }
+}
+@media (max-width: 800px) {
+  .img-f {
+    display: none;
+  }
+  .accordion {
+    width: 100vw;
+  }
+  .container {
+    margin-left: 0px;
+    margin-top: -80px;
+  }
+}/*# sourceMappingURL=Last.css.map */

src/component/Last.js

@@ -0,0 +1,92 @@
+import React from 'react'
+import "./Last.scss"
+import logo from "../Assests/2.png";
+
+function Last() {
+  return (
+    <>
+      <div className="container">
+      <div className="txt">
+        <h1 className='heading'>
+          FAQs
+        </h1>
+          <div className="aacord">
+          <div className="accordion" id="accordionExample">
+            <div className="accordion-item">
+              <h2 className="accordion-header" id="headingOne">
+                <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                  Why Zairza?
+                </button>
+              </h2>
+              <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                <div className="accordion-body">
+                  For people persuing careers in computers and/or robotics, writing code, developing software, and creating exceptional things. That's what we do here. We do things and we help people who are really interested in them.
+                </div>
+              </div>
+            </div>
+            <div className="accordion-item">
+              <h2 className="accordion-header" id="headingTwo">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                  How can I join?
+                </button>
+              </h2>
+              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                <div className="accordion-body">
+                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                </div>
+              </div>
+            </div>
+            <div className="accordion-item">
+              <h2 className="accordion-header" id="headingThree">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                  What is the Scope of Zairza?
+                </button>
+              </h2>
+              <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                <div className="accordion-body">
+                  <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                </div>
+              </div>
+            </div>
+            <div className="accordion-item">
+              <h2 className="accordion-header" id="headingFour">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                  I have a Tech project. How can Zairza help me?
+                </button>
+              </h2>
+              <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
+                <div className="accordion-body">
+                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                </div>
+              </div>
+            </div>
+            <div className="accordion-item">
+              <h2 className="accordion-header" id="headingFive">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+                  What are the club timings?
+                </button>
+              </h2>
+              <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
+                <div className="accordion-body">
+                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        </div>
+
+        <div className="img">
+          <img  className='img-f' src={logo} alt="" />
+        </div>
+
+        </div>
+
+
+</>
+
+
+      )
+}
+
+      export default Last

src/component/Last.scss

@@ -0,0 +1,80 @@
+.accordion{
+    width: 45rem;
+
+
+}
+
+.heading{
+    width: 140px;
+    height: 72px;
+
+    font-family: 'GilroyGilroy-ExtraBold';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 60px;
+    line-height: 72px;
+
+    letter-spacing: -0.02em;
+
+    color: #333333;
+
+
+}
+.accordion-body{
+    font-family: 'Gilroy-Light';
+}
+
+.img-f{
+    width: 400px;
+    height: 500px;
+}
+
+.txt{
+    margin-top: 7rem;
+}
+
+.img{
+    margin-top: 7rem;
+    margin-left: 10rem;
+}
+
+
+.container{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    width: 100%;
+    height: 100vh;
+}
+
+@media(max-width:1400px){
+    .container{
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        // flex-wrap: wrap;
+        // flex-direction: column;
+        // width: 400px;
+        // height: 500px;
+        // margin-top: -50%;
+        // margin-left: 50%;
+        // display: none;
+    }
+}
+
+@media(max-width:800px){
+    .img-f{
+        display: none;
+
+    }
+    .accordion{
+        width: 100vw;
+
+    }
+    .container{
+        margin-left: 0px;
+        margin-top: -80px;
+
+
+    }
+}
+

src/index.css

@@ -11,3 +11,13 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@font-face {
+	font-family: "Gilroy-Light";
+	src: url("./Assests//Fonts/Gilroy-Light.otf");
+}
+
+@font-face {
+	font-family: "Gilroy-ExtraBold";
+	src: url("./Assests/Fonts/Gilroy-ExtraBold.otf");
+}

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import "./Assests/Fonts/Gilroy-Light.otf";
+import "./Assests/Fonts/Gilroy-ExtraBold.otf";
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

src/pages/Landing.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import Last from "../component/Last.js"
+
+function Landing() {
+  return (
+    <>
+        <Last/>
+
+    </>
+  )
+}
+
+export default Landing