Upload files to "src"

src/About.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+function About() {
+  return (
+    <>
+      <div className="content fadeSlideIn">
+        <Container>
+          <Row>
+            <Col>
+              <h3>TANH was born in D.C.</h3>
+              <p>His childhood was spent between Germany and Texas. Currently, he’s somewhere in the south and manages to still blossom around the poplar trees.</p>
+            </Col>
+            <Col>
+              <h3>TANH’s music</h3>
+              <p>A blend of pop, R&B, and electronic influences, creating a unique sound that is both catchy and emotionally resonant.</p>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <h3>TANH can often be quoted</h3>
+              <p>He makes music for himself and he’s just giving us the choice to join on his journey or not and that feels like; watching someone be the life of their own party dancing alone while you watch from afar through a kaleidoscope wineglass.</p>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </>
+  );
+}
+export default About

src/App.jsx

@@ -0,0 +1,82 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/display-name */
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import Container from 'react-bootstrap/Container';
+import Dropdown from 'react-bootstrap/Dropdown';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Home from './Home';
+import Music from './Music';
+import About from './About';
+import Videos from './Videos';
+
+
+function App() {
+  const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
+    <a
+      href=""
+      ref={ref}
+      onClick={e => {
+        e.preventDefault();
+        onClick(e);
+      }}
+    >
+      {/* Render custom icon here */}
+      <img className="menu_button"></img>
+      {children}
+    </a>
+  ));
+
+  const CustomMenu = React.forwardRef(
+    ({ children, className, 'aria-labelledby': labeledBy }, ref) => {
+      const [value] = useState('');
+      return (
+        <div ref={ref} className={className} aria-labelledby={labeledBy}>
+          <ul className="list-unstyled">
+            { React.Children.toArray(children).filter((child) => !value || child.props.children.toLowerCase().startsWith(value),) }
+          </ul>
+        </div>
+      );
+    },
+  );
+
+  return (
+    <>
+      <Router>
+        <Container>
+          <Row>
+            <Col>
+            <Dropdown>
+              <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components"></Dropdown.Toggle>
+              <Dropdown.Menu as={CustomMenu}>
+                <Dropdown.Item as={Link} to="/">Home</Dropdown.Item>
+                <Dropdown.Item as={Link} to="/about">TANH</Dropdown.Item>
+                <Dropdown.Item as={Link} to="/music">Music</Dropdown.Item>
+                <Dropdown.Item as={Link} to="/videos">Videos</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+            </Col>
+            <Col xs={10}>
+              <img className="logo" alt="Neinhills Logo"></img>
+            </Col>
+            <Col></Col>
+          </Row>
+          <Row>
+            <Col>
+              <Routes>
+                <Route exact path="/" element={<Home />} />
+                <Route path="/music" element={<Music />} />
+                <Route path="/about" element={<About />} />
+                <Route path="/videos" element={<Videos />} />
+              </Routes>
+            </Col>
+          </Row>
+        </Container>
+      </Router>
+      <div className="footer"></div>
+    </>
+  )
+}
+
+export default App

src/Home.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect }  from "react";
+
+function Home() {
+  const [quote, setQuote] = useState("");
+  const [author, setAuthor] = useState("");
+
+  const getQuote = async () => {
+    try {
+      const response = await fetch("https://api.realinspire.live/v1/quotes/random");
+      const json = await response.json();
+      const quote = await json.map(quote => quote.content);
+      const author = await json.map(author => author.author);
+      setQuote(quote);
+      setAuthor(author);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    getQuote();
+  }, []);
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      <img className="tanh fadeSlideIn" alt="There Are No Hills"></img>
+      <div className="content fadeSlideIn">
+        <blockquote>
+          <p>
+            {quote}
+          </p>
+          <cite>
+            {author}
+          </cite>
+        </blockquote> 
+      </div>
+      <div className="socials fadeSlideIn">
+        <a href="https://www.instagram.com/there.are.no.hills" target="_blank"><img className="social-icon instagram" alt="Instagram" /></a>
+        <a href="https://www.tiktok.com/@there.are.no.hills" target="_blank>"><img className="social-icon tiktok" alt="TikTok" /></a>
+        <a href="https://open.spotify.com/artist/4X6aBpcY6Ol0p07sxNHgwG" target="_blank"><img className="social-icon spotify" alt="Spotify" /></a>
+        <a href="https://soundcloud.com/terrano-hills" target="_blank"><img className="social-icon soundcloud" alt="SoundCloud" /></a>
+        <a href="https://music.apple.com/de/artist/there-are-no-hills/1482447081" target="_blank"><img className="social-icon applemusic" alt="Apple Music" /></a>
+        <a href="https://www.youtube.com/@therearenohills3171" target="_blank"><img className="social-icon youtube" alt="YouTube" /></a>
+      </div>
+    </div>
+  );
+}
+export default Home

src/Music.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Image from "react-bootstrap/Image";
+
+function Music() {
+  return (
+    <div className="content fadeSlideIn">
+      <iframe width="100%" height="300" scrolling="no" frameBorder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/1285622575&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
+    </div>
+  );
+}
+export default Music

src/main.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)