Merge pull request #1 from julianabal/structure

Structure

src/App.js

@@ -1,5 +1,8 @@
 import Header from "./Header";
-import Section from "./Section";
+import Hero from "./Hero";
+import Decentralized from "./Decentralized";
+import Timelock from "./Timelock";
+import Privacy from "./Privacy";
 import Footer from "./Footer";
 import "./styles/App.sass";
 
@@ -8,25 +11,10 @@ function App() {
     <div className="App">
       <Header />
       <main>
-        <Section title="Decentralized">
-          The Ideal Network is a blockchain that uses a novel consensus
-          mechanism. It produces publicly verifiable secret keys in each block
-          header.
-        </Section>
-        <Section title="Onchain Randomness">
-          Onchain randomness is refreshed with each new block and can be used in
-          smart contracts and runtime modules for random number generation.
-        </Section>
-        <Section title="Timelock Encryption">
-          The ETF Network enables timelock encryption, allowing you to
-          effortlessly send messages into the future and unlock them right from
-          your browser!
-        </Section>
-        <Section title="Programmable Privacy">
-          Encrypt once, decrypt many. The Ideal network enables programmable,
-          zero-knowledge data encryption mechanisms using practical witness
-          encryption.
-        </Section>
+        <Hero />
+        <Decentralized />
+        <Timelock />
+        <Privacy />
       </main>
       <Footer />
     </div>

src/Decentralized.js

@@ -0,0 +1,18 @@
+import "./styles/Decentralized.sass";
+
+function Decentralized() {
+  return (
+    <section id="decentralized" className="overflow-hidden relative min-h-screen bg-left bg-no-repeat bg-cover bg-black flex flex-col-reverse md:flex-row">
+      <div className="container flex items-center">
+        <div className="textContainer flex flex-col justify-center items-start gap-10 relative">
+          <h1 className="text-4xl xl:text-6xl font-bold">Decentralized</h1>
+          <p>The Ideal Network is a blockchain that uses a novel consensus mechanism. It produces publicly verifiable secret keys in each block header.</p>
+          <button className="cta">Decentralize the universe</button>
+        </div>
+      </div>
+      <img src="/images/Decentralized.png" className="decentralized" />
+    </section>
+  );
+}
+
+export default Decentralized;

src/Footer.js

@@ -1,48 +1,31 @@
+import "./styles/Footer.sass";
+
 function Footer() {
   return (
-    <footer className="bg-gray-800 text-white px-8 py-4">
-      <div className="container mx-auto grid grid-cols-3 gap-4">
-        <div>
-          <h3 className="font-bold mb-2">Docs</h3>
-          <ul>
-            <li>
-              <a href="https://etf.idealabs.network/docs/intro">Tutorial</a>
-            </li>
+    <footer className="bg-black">
+      <div className="container flex flex-col gap-20">
+        <div className="upper flex flex-col md:flex-row gap-10 md:gap-20">
+          <ul className="w-full md:w-80">
+            <p className="category uppercase mb-4">Docs</p>
+            <li><a href="#">Tutorial</a></li>
           </ul>
-        </div>
-        <div>
-          <h3 className="font-bold mb-2">Community</h3>
-          <ul>
-            <li>
-              <a href="https://discord.gg/TheXVBdbbu">Discord</a>
-            </li>
-            <li>
-              <a href="https://matrix.to/#/#ideal-labs:matrix.org">Matrix</a>
-            </li>
-            <li>
-              <a href="https://ideallabs.substack.com/">Substack</a>
-            </li>
-            <li>
-              <a href="https://x.com/Ideallabs0">Twitter</a>
-            </li>
+          <ul className="w-full md:w-80">
+            <p className="category uppercase mb-4">Company</p>
+            <li><a href="#">Discord</a></li>
+            <li><a href="#">Matrix</a></li>
+            <li><a href="#">Substacks</a></li>
           </ul>
-        </div>
-        <div>
-          <h3 className="font-bold mb-2">More</h3>
-          <ul>
-            <li>
-              <a href="https://medium.com/@ideal_labs">Medium</a>
-            </li>
-            <li>
-              <a href="https://github.com/ideal-lab5">GitHub</a>
-            </li>
-            <li>
-              <a href="https://idealabs.network/">Ideal Labs</a>
-            </li>
+          <ul className="w-full md:w-80">
+            <p className="category uppercase mb-4">More</p>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Github</a></li>
           </ul>
         </div>
+        <div className="lower">
+          <p>@ 2024 Ideal Network</p>
+          <p><a href="">Terms of Service</a>&nbsp;&nbsp;&nbsp;<a href="">Terms of Service</a></p>
+        </div>
       </div>
-      <p className="text-center mt-4">Copyright &copy; 2024 Ideal Labs, LLC</p>
     </footer>
   );
 }

src/Header.js

@@ -1,24 +1,17 @@
+import "./styles/Header.sass";
+
 function Header() {
   return (
-    <header>
-      <nav>
-        <ul>
-          <li>
-            <a href="/docs">Docs</a>
-          </li>
-          <li>
-            <a href="/blog">Blog</a>
-          </li>
-          <li>
-            <a href="https://github.com/">GitHub</a>
-          </li>
-        </ul>
-      </nav>
-      <h1>Ideal Network</h1>
-      <strong>Encryption to the Future</strong>
-      <a href="https://etf.idealabs.network/docs/intro">Learn more</a>
+    <header className="fixed w-full bg-black bg-opacity-70 z-30">
+      <div className="container">
+        <nav>
+          <a href="/" className="brand py-4">
+            <img src="/images/onecolor-white-logo.svg" />
+          </a>
+        </nav>
+      </div>
     </header>
   );
 }
 
-export default Header;
+export default Header;

src/Hero.js

@@ -0,0 +1,17 @@
+import "./styles/Hero.sass";
+
+function Hero() {
+  return (
+    <section id="hero" className="min-h-screen bg-center bg-no-repeat bg-cover">
+      <div className="container flex items-center">
+        <div className="textContainer flex flex-col justify-center items-start gap-10">
+          <h1 className="text-4xl xl:text-6xl font-bold">Proper on-chain randomness</h1>
+          <p>Our cutting-edge advanced algorithm enhances security, fairness, and unpredictability, essential for decentralized applications, smart contracts, and more.</p>
+          <button className="cta">Roll the dice</button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;