styled homepage

emmanueposu · Apr 28, 2024 · 9744e46 · 9744e46
1 parent a0a40df
commit 9744e46
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 8 deletions.
diff --git a/trivia-forge/frontend/src/App.css b/trivia-forge/frontend/src/App.css
@@ -1,3 +1,35 @@
+@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");
+
+
+
+
+/* Header Animation */
+.header-animation {
+	font-family: "Russo One", sans-serif;
+	width: 100%; height: 100%;
+}
+.header-animation text {
+	animation: stroke 5s infinite alternate;
+	stroke-width: 2;
+	stroke: #365FA0;
+	font-size: 100px;
+}
+@keyframes stroke {
+	0%   {
+		fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1);
+		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
+	}
+	70%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); }
+	80%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
+	100% {
+		fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0);
+		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
+	}
+}
+
+.wrapper {background-color: #FFFFFF};
+/* End Header Animation  */
+
 .App {
   text-align: center;
   background-color: #dee2ff;
@@ -58,8 +90,30 @@ footer{
 
 .homepage-container .col {
   margin: 10px;
+  flex: 0 0 auto;
+  text-align: center;
 }
 
-.homepage-container .button {
-  background-color: #e0d6b7;
-}
+.homepage-container .btn-primary {
+  padding: 20px;
+  background: linear-gradient(to bottom, #ff8c00, #ff6700);
+  color: white;
+  font-weight: bold;
+  border: 3px solid #ee7600;
+  font-family: 'Fredoka One', cursive;
+  font-size: 40px;
+  border-radius: 70px; /* Rounded corners */
+  box-shadow: 0 8px #999;
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.1); */
+  width: 40%;
+  text-shadow: 1px 1px 2px black;
+  transition: all 0.3s ease;
+}
+
+.homepage-container .btn-primary:hover,
+.homepage-container .btn-primary:focus {
+  transform: translateY(-2px);
+  background: linear-gradient(to bottom, #ff6700, #ff8c00);
+  border: 3px solid #ee7600;
+  outline: none;
+}
diff --git a/trivia-forge/frontend/src/Pages/HomePage.jsx b/trivia-forge/frontend/src/Pages/HomePage.jsx
@@ -1,24 +1,41 @@
 import React from "react";
 import { Button, Container, Row, Col} from 'react-bootstrap';
 import '../App.css';
-import { FaRegFolderOpen } from "react-icons/fa";
+import { FaRegFolderOpen, FaPlusCircle, FaUserCircle, FaUserPlus } from "react-icons/fa";
+import { useNavigate } from 'react-router-dom';
 
 function Home() {
+    const navigate = useNavigate();
+
     return (
         <Container className="homepage-container">
             <Row>
                 <Col>
-                    <h1>Trivia Forge</h1>
-                </Col>
+                    <svg class="header-animation">
+                        <text x="50%" y="50%" dy=".35em" text-anchor="middle">
+			                Trivia Forge
+		                </text>
+                    </svg>
+                </Col >
             </Row>
-            <Row >
+            <Row>
                 <Col>
                     <Button variant="primary"> <FaRegFolderOpen /> My Trivia Games </Button>
                 </Col>
             </Row>
             <Row>
                 <Col>
-                    <Button variant="primary">Create New Game </Button>
+                    <Button variant="primary" onClick={() => navigate('/triviagen')}> <FaPlusCircle /> Create New Game </Button>
+                </Col>
+            </Row>
+            <Row>
+                <Col>
+                    <Button variant="primary"> <FaUserCircle /> Login </Button>
+                </Col>
+            </Row>
+            <Row>
+                <Col>
+                    <Button variant="primary"> <FaUserPlus /> Sign Up </Button>
                 </Col>
             </Row>
         </Container>