merged homepage

src/components/Header.jsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 const Header = () => {
+<<<<<<< HEAD
   return (
     <header>
       <h1>
@@ -22,5 +23,14 @@ const Header = () => {
     </header>
   );
 };
+=======
+  
+    return (
+        <header>
+            <h1><a href="#0"></a></h1>
+        </header>
+    );
+}
+>>>>>>> homepage
 
 export default Header;

src/components/Hero.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import '../scss/components/Hero.scss';
+
+function Hero() {
+  return (
+    <section className="hero">
+      <div className="hero-text">
+        <p className="intro">Welcome to BattleSnake!!!</p>
+        <h1>Play for Fun!</h1>
+        <p className="desc">
+        A competitive game where your code is the controller. All you need is a web server that responds to the Battlesnake API.
+        </p>
+        <button className="cta">Start Battle</button>
+      </div>
+      <div className="hero-image">
+        <div className="hex-bg">
+          <img src="https://static.battlesnake.com/play/releases/2.1.4/ui/img/game.gif" alt="battle snake game" />
+        </div>
+            {/* <div className="tag name-tag">Battle</div>
+            <div className="icon top-left">📈</div>
+            <div className="icon bottom-right">👁️</div>
+            <div className="freelance-tag">Available for Freelance</div> */}
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

src/components/Navbar.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import '../scss/styles.scss'
+import '../scss/components/_navbar.scss'
+
+const Navbar = () => {
+  return (
+    <nav className="navbar">
+      <div className="navbar__logo">MyApp</div>
+      <ul className="navbar__links">
+        <li><a href="/" className="navbar__link">Home</a></li>
+        <li><a href="/notebook" className="navbar__link">NoteBook</a></li>
+        <li><a href="/assignment" className="navbar__link">Assignment</a></li>
+        <li><a href="/editor" className="navbar__link">Editor</a></li>
+      </ul>
+    </nav>
+  )
+}
+
+export default Navbar

src/components/Services.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import '../scss/components/Services.scss';
+import ServiceCard from '../components/ServicesCard.jsx';
+
+function Services() {
+  return (
+    <section className="services">
+      <h2>Develop your own algorithm to find food, stay alive, and eliminate others. Battlesnakes are controlled by a web server you deploy, running the code you write.</h2>
+      <div className="cards">
+        <ServiceCard
+          icon="🖥️"
+          title="What is Battlesnake?"
+          desc="Battlesnake is a competitive game where your code is the controller. All you need is a web server that responds to the Battlesnake API."
+          cta="What how it works"
+        />
+        <ServiceCard
+          icon="🏆"
+          title="Leaderboard"
+          desc="Choose your tech stack, deploy your Battlesnake, and see how your code ranks against other developers."
+          cta="Check the leaderboard"
+        />
+        <ServiceCard
+          icon="💡"
+          title="Try new languages and technologies in a high-stakes environment."
+          desc="Battlesnake is a great outlet to learn something new and mess around with that platform, language, or library you've been meaning to try"
+          cta="Learn more"
+        />
+      </div>
+    </section>
+  );
+}
+
+export default Services;

src/components/ServicesCard.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../scss/components/ServicesCard.scss';
+
+function ServiceCard({ icon, title, desc, cta }) {
+  return (
+    <div className="service-card">
+      <div className="icon">{icon}</div>
+      <h3>{title}</h3>
+      <p>{desc}</p>
+      <a href="#" className="link">{cta} →</a>
+    </div>
+  );
+}
+
+export default ServiceCard;

src/main.jsx

@@ -2,9 +2,16 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import AppRouter from "./routers/AppRouter";
 import "./scss/styles.scss";
+import Navbar from "./components/Navbar";
+import Hero from "./components/Hero";
+import Services from "./components/Services";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
+    <Navbar />
+    <Hero />
+    <Services />
     <AppRouter />
+    
   </StrictMode>
 );

src/scss/components/Hero.scss

@@ -0,0 +1,100 @@
+.hero {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4rem 3rem;
+    background-color: #f9f5f2;
+  
+    .hero-text {
+      max-width: 50%;
+    //   font-family: "Limelight", sans-serif;
+  
+      .intro {
+        font-size: 1rem;
+      }
+  
+      h1 {
+        font-size: 4rem;
+        font-weight: 900;
+        margin: 1rem 0;
+      }
+  
+      .desc {
+        font-size: 1.125rem;
+        margin-bottom: 2rem;
+      }
+  
+      .cta {
+        background-color: #ffcc3a;
+        border: none;
+        padding: 1rem 2rem;
+        font-size: 1rem;
+        font-weight: bold;
+        border-radius: 12px;
+        cursor: pointer;
+        box-shadow: 3px 3px 0 #000;
+      }
+    }
+  
+    .hero-image {
+      position: relative;
+  
+    //   .hex-bg {
+    //     width: 500px;
+    //     height: auto;
+    //     background-color: #2900F5;
+    //     padding: 3rem;
+    //     clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+    //     box-shadow: 6px 6px 0 #000;
+  
+        img {
+          width: 70%;
+          border-radius: 6px;
+        }
+      }
+  
+      .tag {
+        position: absolute;
+        top: -2rem;
+        right: 0;
+        background: #b1b9f9;
+        padding: 0.3rem 0.8rem;
+        border-radius: 999px;
+        font-weight: 700;
+        font-size: 0.9rem;
+      }
+  
+      .icon {
+        position: absolute;
+        font-size: 2rem;
+  
+        &.top-left {
+          top: -2rem;
+          left: -2rem;
+          background: #00c2a8;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+        }
+  
+        &.bottom-right {
+          bottom: -2rem;
+          right: -2rem;
+          background: #ffdf4f;
+          padding: 0.5rem;
+          border-radius: 50%;
+        }
+      }
+  
+      .freelance-tag {
+        position: absolute;
+        bottom: -1.5rem;
+        left: 0;
+        background: #00d18c;
+        padding: 0.5rem 1rem;
+        font-size: 0.9rem;
+        border-radius: 999px;
+        font-weight: 600;
+      }
+    }
+
+  

src/scss/components/Services.scss

@@ -0,0 +1,18 @@
+.services {
+    padding: 5rem 3rem;
+    background-color: #fdfaf6;
+  
+    h2 {
+      font-size: 2.5rem;
+      font-weight: 900;
+      text-align: center;
+      margin-bottom: 3rem;
+    }
+  
+    .cards {
+      display: flex;
+      justify-content: space-between;
+      gap: 2rem;
+    }
+  }
+  

src/scss/components/ServicesCard.scss

@@ -0,0 +1,32 @@
+.service-card {
+    background-color: #fff;
+    border: 2px solid #000;
+    border-radius: 1rem;
+    padding: 2rem;
+    box-shadow: 6px 6px 0 #000;
+    flex: 1;
+  
+    .icon {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
+  
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+  
+    p {
+      font-size: 1rem;
+      line-height: 1.6;
+      margin-bottom: 1.5rem;
+    }
+  
+    .link {
+      font-weight: bold;
+      text-decoration: none;
+      color: #202020;
+    }
+  }
+  

src/scss/components/_header.scss

@@ -3,43 +3,31 @@
 @use "../base/settings" as *;
 @use "../utilities/mixins" as *;
 
-header {
-  padding: $section-padding;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid $grey;
-
-  h1 {
-    @include flatten;
-
-    a {
-      text-decoration: none;
-      color: $dark;
-
-      &:hover {
-        color: $yellow;
-      }
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem 3rem;
+  
+    .logo {
+      font-weight: bold;
+      font-size: 1.25rem;
+      color: #3a3a3a;
     }
-  }
-
-  nav {
-    ul {
-      @include flatten(true);
-      display: flex;
-      gap: 1rem;
-
-      li {
-        a {
-          text-decoration: none;
-          color: $dark;
-          font-weight: bold;
-
-          &:hover {
-            color: $yellow;
-          }
+  
+    .nav {
+      a {
+        margin-left: 2rem;
+        text-decoration: none;
+        color: #202020;
+        font-weight: 500;
+  
+        &:last-child::before {
+          content: '● ';
+          color: #ce9a76;
+          margin-right: 0.4rem;
         }
       }
     }
   }
-}
+  

src/scss/components/_navbar.scss

@@ -0,0 +1,39 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f9f5f2;
+    padding: 1rem 2rem;
+    color: white;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  
+    &__logo {
+      font-size: 1.5rem;
+      font-weight: bold;
+      color: #91a8ed;
+    }
+  
+    &__links {
+      list-style: none;
+      display: flex;
+      gap: 2rem;
+      margin: 0;
+  
+      @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 1rem;
+      }
+    }
+  
+    &__link {
+      text-decoration: none;
+      color: #91a8ed;
+      font-weight: 500;
+      transition: color 0.2s;
+  
+      &:hover {
+        color: #6888E9;
+      }
+    }
+  }
+