Merge branch 'new-website' of https://github.com/NetSepio/website int…

…o new-website

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
-  // images: { unoptimized: true },
+  images: { unoptimized: true },
 };
 
 export default nextConfig;

src/app/nodeform/page.jsx

@@ -0,0 +1,247 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+
+const Page = () => {
+  const [name, setname] = useState("");
+  const [email, setemail] = useState("");
+  const [telegram, settelegram] = useState("");
+  const [projectname, setprojectname] = useState("");
+  const [projecturl, setprojecturl] = useState("");
+  const [region, setregion] = useState("");
+  const [checked, setChecked] = useState(null);
+  const [twitter, settwitter] = useState("");
+  const [wallet, setwallet] = useState("");
+
+  const [showPopup, setShowPopup] = useState(false);
+
+  // Handler functions for checkbox click events
+  const handleYesChange = () => {
+    setChecked("yes");
+  };
+
+  const handleNoChange = () => {
+    setChecked("no");
+  };
+
+  // Handler function for form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    // Gather form data
+    const formData = {
+      name,
+      email,
+      telegram_id: telegram,
+      project_name: projectname,
+      project_id: projecturl,
+      region,
+      twitter_id: twitter,
+      ran_node_before: checked === "yes",
+      wallet_address: wallet
+    };
+
+    try {
+      // Send POST request to API
+      const response = await fetch(
+        "https://dev.gateway.erebrus.io/api/v1.0/operator/new",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      // Handle successful response
+      const result = await response.json();
+      console.log("Form submitted successfully:", result);
+      // You can add any success message or redirection here
+
+      // Reset form fields
+      setname('');
+      setemail('');
+      settelegram('');
+      setprojectname('');
+      setprojecturl('');
+      setregion('');
+      settwitter('');
+      setChecked(null);
+      setwallet('');
+
+      // Show success popup
+      setShowPopup(true);
+
+      // Hide success popup after 3 seconds
+      setTimeout(() => {
+        setShowPopup(false);
+      }, 3000);
+
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      // You can add error handling here
+    }
+  };
+
+  return (
+    <div>
+      <section
+        class="pt-40 pb-10"
+        style={{
+          backgroundImage: `url(/nodeformbg.png)`,
+          backgroundSize: "cover",
+        }}
+      >
+        <div
+          style={{ backgroundColor: "#E9E2E2" }}
+          className="w-1/2 mx-auto p-10 rounded-3xl text-black mb-20"
+        >
+          <div className="capitalize font-bold text-2xl">
+            Fill the required details
+          </div>
+
+          <form onSubmit={handleSubmit}>
+            <div className="mt-10 text-xl">Name *</div>
+            <input
+              type="text"
+              // placeholder="Game name"
+              required
+              value={name}
+              onChange={(e) => setname(e.target.value)}
+              className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+              style={{ color: "black", backgroundColor: "#0B6A604D" }}
+            />
+            <div className="flex justify-between gap-4">
+              <div className="w-1/2">
+                <div className="mt-10 text-xl">Email *</div>
+                <input
+                  type="email"
+                  // placeholder="Game name"
+                  required
+                  value={email}
+                  onChange={(e) => setemail(e.target.value)}
+                  className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+                  style={{ color: "black", backgroundColor: "#0B6A604D" }}
+                />
+              </div>
+              <div className="w-1/2">
+                <div className="mt-10 text-xl">Telegram</div>
+                <input
+                  type="text"
+                  // placeholder="Game name"
+                  value={telegram}
+                  onChange={(e) => settelegram(e.target.value)}
+                  className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+                  style={{ color: "black", backgroundColor: "#0B6A604D" }}
+                />
+              </div>
+            </div>
+
+            <div className="mt-10 text-xl">Have you ran a node before</div>
+
+            <div className="flex flex-col text-lg">
+              <label>
+                <input
+                  type="checkbox"
+                  style={{ width: "16px", height: "16px" }}
+                  checked={checked === "yes"}
+                  onChange={handleYesChange}
+                />{" "}
+                Yes
+              </label>
+
+              <label>
+                <input
+                  type="checkbox"
+                  style={{ width: "16px", height: "16px" }}
+                  checked={checked === "no"}
+                  onChange={handleNoChange}
+                />{" "}
+                No
+              </label>
+            </div>
+
+            <div className="mt-10 text-xl">Tell us your project name</div>
+            <input
+              type="text"
+              // placeholder="Game name"
+              value={projectname}
+              onChange={(e) => setprojectname(e.target.value)}
+              className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+              style={{ color: "black", backgroundColor: "#0B6A604D" }}
+            />
+
+            <div className="mt-10 text-xl">Project URL</div>
+            <input
+              type="url"
+              // placeholder="Game name"
+              value={projecturl}
+              onChange={(e) => setprojecturl(e.target.value)}
+              className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+              style={{ color: "black", backgroundColor: "#0B6A604D" }}
+            />
+
+            <div className="flex justify-between gap-4">
+              <div className="w-1/2">
+                <div className="mt-10 text-xl">Node Region</div>
+                <input
+                  type="text"
+                  // placeholder="Game name"
+                  value={region}
+                  onChange={(e) => setregion(e.target.value)}
+                  className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+                  style={{ color: "black", backgroundColor: "#0B6A604D" }}
+                />
+              </div>
+              <div className="w-1/2">
+                <div className="mt-10 text-xl">Twitter ID</div>
+                <input
+                  type="text"
+                  // placeholder="Game name"
+                  value={twitter}
+                  onChange={(e) => settwitter(e.target.value)}
+                  className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+                  style={{ color: "black", backgroundColor: "#0B6A604D" }}
+                />
+              </div>
+            </div>
+
+            <div className="mt-10 text-xl">Wallet Address</div>
+                <input
+                  type="text"
+                  // placeholder="Game name"
+                  value={wallet}
+                  onChange={(e) => setwallet(e.target.value)}
+                  className="mt-2 shadow border appearance-none rounded-xl w-full py-4 px-6 text-gray-200 leading-tight focus:outline-none focus:shadow-outline"
+                  style={{ color: "black", backgroundColor: "#0B6A604D" }}
+                />
+
+            <button
+              style={{ backgroundColor: "#263238" }}
+              className="mt-10 py-3 rounded-xl w-1/2 text-white"
+            >
+              Submit
+            </button>
+          </form>
+        </div>
+      </section>
+
+      {showPopup && (
+        <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 text-black">
+          <div className="bg-white p-8 rounded-xl shadow-lg text-center">
+            <h2 className="text-2xl font-bold mb-4">Success!</h2>
+            <p>Your form has been submitted successfully.</p>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+};
+
+export default Page;

src/app/page.jsx

@@ -9,9 +9,28 @@ import Socials from "@/components/Socials";
 import WinSection from "@/components/WinSection";
 import { cardDetails } from "@/utils/data";
 import Image from "next/image";
+import Link from 'next/link';
 
 export default function Home() {
+
+  const banner = {
+    backgroundImage: 'radial-gradient(circle, #B7990D59 50%, #050B21B2, #050B21B2)',
+    width: '180vh',
+  };
+
   return (
+    <>
+    <main className="flex flex-col items-center justify-between">
+      <Link href="/nodeform">
+                    <div style={banner} className="py-3 text-gray-300 text-center">Become a Node Runner and Earn Triple Rewards,&nbsp;
+                    <span className='text-bold'
+                    style={{ border: "none", textDecoration: "none", position: "relative" , color:'#11D9C5'}}>
+                    Join waitlist
+                    &nbsp;&#10138;
+                    </span> 
+                    </div>
+                    </Link>
+                    </main>
     <main className='flex min-h-screen bg-primary flex-col items-center justify-between'>
       <Hero />
       <Mission />
@@ -26,5 +45,6 @@ export default function Home() {
       <Socials />
       <Newsletter />
     </main>
+    </>
   );
 }

src/components/DarkBtn.jsx

@@ -4,7 +4,7 @@ import React from "react";
 const DarkBtn = ({ title, width = "w-[80px] lg:w-[170px]", link = "/" }) => {
   return (
     <button
-      className={`rounded-lg border-cta border ${width} text-xs lg:text-[18px]  hover:scale-95  duration-100 text-white  bg-primary h-[55px]`}
+      className={`rounded-lg border-cta border ${width} text-xs lg:text-[18px]  hover:scale-95  duration-100 text-white h-[55px]`}
     >
       <Link target='_blank' href={link}>
         {title}