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;