Merge pull request #25 from 0rbit-co/staging

v1

.gitignore

@@ -27,7 +27,6 @@ yarn-error.log*
 
 # local env files
 .env*.local
-.env
 
 # vercel
 .vercel

README.md

@@ -1,8 +1,36 @@
-# 0rbit
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-[![protocol.land](https://arweave.net/eZp8gOeR8Yl_cyH9jJToaCrt2He1PHr0pR4o-mHbEcY)](https://protocol.land/#/repository/c4172351-6e21-409d-8deb-5a5483617c32)
+## Getting Started
 
-**0rbit is the first decentralized oracle network built using `ao` on Arweave.**
+First, run the development server:
 
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
 
-Learn more about 0rbit [here.](https://0rbit.co)
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/_components/ArchDiagram.tsx

@@ -0,0 +1,194 @@
+"use client";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import "../_styles/arch.css";
+
+const ArchDiagram = () => {
+  const [css, setCss] = useState(true);
+  useEffect(() => {
+    if (css) {
+      setTimeout(() => {
+        setCss(!css);
+      }, 8000);
+    } else {
+      setTimeout(() => {
+        setCss(!css);
+      }, 100);
+    }
+  }, [css]);
+
+  return (
+    <div
+      className={` flex item-center justify-center
+      xl:scale-[0.85] lg:scale-[0.66] md:scale-[0.45] scale-[0.40]
+      xl:mr-[0] lg:mr-[-90px] md:mr-[-150px]
+      md:mt-0 
+      min-w-[740px] min-h-[311px] lg:my-12 my-3`}
+    >
+      <>
+        <Image
+          src="/arch/to1234.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr1" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to1234.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr2" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to1234.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr3" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to1234.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr4" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr5" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr6" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr7" : ""
+          }`}
+        />
+        <Image
+          src="/arch/to5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "ltr8" : ""
+          }`}
+        />
+      </>
+      <>
+        <Image
+          src="/arch/from1.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl1" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from2.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl2" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from3.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl3" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from4.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl4" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl5" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl6" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl7" : ""
+          }`}
+        />
+        <Image
+          src="/arch/from5678.svg"
+          alt="req"
+          width={30}
+          height={30}
+          className={`w-[30px] h-[30px] absolute opacity-0 z-10 ${
+            css ? "rtl8" : ""
+          }`}
+        />
+      </>
+      <Image
+        src="/arch/arch.svg"
+        alt="architechture"
+        height={420}
+        width={990}
+        className={`absolute w-[738px]`}
+      />
+      <Image
+        alt="logo"
+        height={90}
+        width={90}
+        className=""
+        src="/logos/sqLight.svg"
+      />
+    </div>
+  );
+};
+
+export default ArchDiagram;

app/_components/_landingContainer/AbyssBtn.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { brandLightText, brandSecondaryText } from "../../_utils/colors";
+
+const AbyssBtn = () => {
+  return (
+    <a
+      href="https://docs.0rbit.co/"
+      target="_blank"
+      className={`scaleScroll sm:mx-20 mx-[9px] px-2 py-[6px] bg-[#25291c1e] hover:bg-[#25291c39] rounded-3xl ${brandLightText} text-[15px] scale-125`}
+    >
+      <div
+        className={`px-2 py-[6px] bg-[#25291c39] hover:bg-[#25291c53] rounded-3xl`}
+      >
+        <div
+          className={`px-2 py-[6px] bg-[#25291c53] hover:bg-[#25291c7e] rounded-3xl`}
+        >
+          <div
+            className={`px-2 py-[6px] bg-[#25291c7e] hover:bg-[#25291c9c] rounded-3xl`}
+          >
+            <div
+              className={`px-2 py-[6px] bg-[#25291c9c] hover:bg-[#25291cba] rounded-3xl`}
+            >
+              <div
+                className={`px-2 py-[6px] bg-[#25291cba] hover:bg-[#1b1f14ec] rounded-3xl`}
+              >
+                <div
+                  className={`w-fit px-3 py-[6px] bg-[#1b1f14ec] hover:bg-[#0e100a] rounded-3xl text-center`}
+                >
+                  Want to dive deeper? 
+                  <a
+                    className={`${brandSecondaryText} hover:underline block sm:inline`}
+                  >
+                    Check the Docs!
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default AbyssBtn;