Merge pull request #858 from Akanksha-202/play

Added Play button

src/Homepage/Homepage/Homepage.css

@@ -478,20 +478,15 @@ input.search-input:hover {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 1rem 1rem;
   margin-bottom: 3rem;
-  background: #cfcfcf;
-  color: #000;
-  border-radius: 20px;
-  text-decoration: none;
-  font-weight: 400;
+  border-radius: 50px;
+  margin-top: -1rem;
   font-family: "Press Start 2P", cursive;
   box-shadow: 2px 2px 10px rgb(149, 149, 149);
   transition: background-color 0.3s ease;
 }
 
 .container_card .card .content a:hover {
-  background-color: gold;
   box-shadow: 2px 2px 10px gold;
   color: #000;
 }

src/Homepage/Homepage/Homepage.js

@@ -9,6 +9,7 @@ import { useState } from "react";
 import DarkMode from "./DarkModeToggle";
 import Instagram from "./instagram.png"
 import Github from "./github.png"
+import Play from "./Play";
 
 
 function Homepage() {
@@ -31,9 +32,9 @@ function Homepage() {
     <React.Fragment>
       <GoToTop />
       <MusicButton />
-       <DarkMode/>
+      <DarkMode />
       {/* Pacman Landing Container */}
-      
+
       <div className="container_landing">
         <div className="pacman"></div>
         <div className="ghost"></div>
@@ -43,12 +44,12 @@ function Homepage() {
         <div className="text"></div>
       </div>
       <div class="page-bg"></div>
-<div class="animation-wrapper">
-  <div class="particle particle-1"></div>
-  <div class="particle particle-2"></div>
-  <div class="particle particle-3"></div>
-  <div class="particle particle-4"></div>
-</div>
+      <div class="animation-wrapper">
+        <div class="particle particle-1"></div>
+        <div class="particle particle-2"></div>
+        <div class="particle particle-3"></div>
+        <div class="particle particle-4"></div>
+      </div>
       <div className="about-section">
         <h2>About</h2>
         <p>Games-And-Go is a website that offers a diverse collection of online games to entertain and engage users of all ages. With a user-friendly interface, the website provides easy access to a wide range of games, including puzzles, arcade classics, strategy games, and more. Users can explore different game categories, choose their favorites, and start playing instantly without the need for downloads or installations. The website aims to provide a fun and immersive gaming experience, allowing players to relax, challenge themselves, and enjoy their leisure time. Whether you're a casual gamer or a dedicated gaming enthusiast, Games-And-Go has something to offer for everyone.</p>
@@ -66,44 +67,44 @@ function Homepage() {
         placeholder="🔍 Search for your favourite game..."
       />
       <div className="body_card">
-        
+
         <div className="container_card">
           {filteredData.map((row) => (
             <div className="card" key={row.serial_number}>
-            <div className="content">
-              {/* Addition of Flip card feature */}
-              <div class="flip-card">
-                <div class="flip-card-inner">
-                  <div class="flip-card-front">
-                    <div>
-                      <h2>{row.serial_number}</h2>
-                      <h3>{row.main_heading}</h3>
-
+              <div className="content">
+                {/* Addition of Flip card feature */}
+                <div class="flip-card">
+                  <div class="flip-card-inner">
+                    <div class="flip-card-front">
+                      <div>
+                        <h2>{row.serial_number}</h2>
+                        <h3>{row.main_heading}</h3>
+
+                      </div>
+
+                    </div>
+                    <div class="flip-card-back">
+                      <div class="rule_heading">{row.rule_heading}</div>
+                      <div class="step">{row.step1}</div>
+                      <div class="step">{row.step2}</div>
+                      <div class="step">{row.step3}</div>
                     </div>
-
-                  </div>
-                  <div class="flip-card-back">
-                    <div class="rule_heading">{row.rule_heading}</div>
-                    <div class="step">{row.step1}</div>
-                    <div class="step">{row.step2}</div>
-                    <div class="step">{row.step3}</div>
                   </div>
                 </div>
+                {/* Flip card feature ends here. */}
+                <p>{row.about} </p>
+                {/* Create a route for your game and add it in AllRoutes.js in Routes folder then add the link in data1 in Data Folder */}
+                <Link to={row.link_game}><Play /></Link>
               </div>
-              {/* Flip card feature ends here. */}
-              <p>{row.about} </p>
-              {/* Create a route for your game and add it in AllRoutes.js in Routes folder then add the link in data1 in Data Folder */}
-              <Link to={row.link_game}>Play now !!!</Link>
             </div>
-          </div>
           ))}
         </div>
       </div>
-      
+
       <div className="copyright">
         <div className="social-icons">
-        <a href="https://www.instagram.com/ieeessit/"><img classNmae="icons" src={Instagram}/></a>
-        <a href="https://github.com/ssitvit/Games-and-Go"><img classNmae="icons" src={Github}/></a>
+          <a href="https://www.instagram.com/ieeessit/"><img classNmae="icons" src={Instagram} /></a>
+          <a href="https://github.com/ssitvit/Games-and-Go"><img classNmae="icons" src={Github} /></a>
         </div>
         <h3>&copy;Copyright IEEE-SSIT {new Date().getFullYear()}</h3>
       </div>

src/Homepage/Homepage/Play.js

@@ -0,0 +1,25 @@
+import React from "react";
+
+const TrianglePlayLogo = () => {
+  return (
+    <svg
+      width="50px"
+      height="50px"
+      viewBox="0 0 130 120"
+      fill="none"
+      stroke="black"
+      stroke-width="5"
+    >
+      <path
+        d="M20,50 L50,0 L80,50 Z"
+        transform="rotate(90, 50, 50)"
+      />
+      <path
+        d="M20,50 L50,0 L80,50 Z"
+        transform="rotate(90, 38, 38)"
+      />
+    </svg>
+  );
+};
+
+export default TrianglePlayLogo;