Merge pull request #46 from FrankiePower/main_page

Main page

packages/nextjs/app/_components/CounterDisplay.tsx

@@ -1,7 +1,7 @@
 export async function CounterDisplay({ data: counter, error }: { data?: bigint; error: Error | null }) {
   return (
     <div className="text-lg flex gap-2 justify-center items-center">
-      <span className="font-bold">Checked in builders count:</span>
+      <span className="font-bold">Checked in builders:</span>
 
       {error && <span className="text-error">Error!</span>}
 

packages/nextjs/app/layout.tsx

@@ -5,8 +5,8 @@ import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({
-  title: "Batch 12",
-  description: " Get to Know the BuildGuidl Batch 12 Members",
+  title: "Scaffold-ETH 2 App",
+  description: "Built with 🏗 Scaffold-ETH 2",
 });
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {

packages/nextjs/app/page.tsx

@@ -1,44 +1,53 @@
+import Image from "next/image";
 import Link from "next/link";
 import BuildersCheckInCount from "./_components/BuildersCheckInCount";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
 
 const Home: NextPage = () => {
   return (
     <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Batch 12</span>
-          </h1>
-          <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
-          <BuildersCheckInCount />
-        </div>
-
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contracts
-                </Link>{" "}
-                tab.
-              </p>
+      <div className="relative container mx-auto px-12 sm:px-6 lg:px-8">
+        <Image src="/background.jpg" alt="Website Background Image" priority fill className="opacity-5 object-cover" />
+        <div className="relative z-10 flex flex-col lg:flex-row items-center justify-around py-20 gap-2">
+          {/* Left Content Section */}
+          <section className="text-center lg:text-left space-y-8 order-2 lg:order-1">
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight">
+              Seizing the right time
+              <span className="block text-emerald-400">to build.</span>
+            </h1>
+            <p className="mt-6 text-lg max-w-2xl mx-auto lg:mx-0">
+              We are a team of passionate blockchain developers crafting the future of decentralized technology. Join us
+              in building the next generation of Web3 solutions.
+            </p>
+            <div className="flex justify-center lg:justify-start">
+              <BuildersCheckInCount />
             </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
+
+            <Link href={"/builders"} passHref>
+              <button
+                className="mt-8 px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg font-semibold
+          flex items-center justify-center gap-2 mx-auto lg:mx-0 transition-all duration-300 transform hover:scale-105"
+              >
+                Meet the Builders
+                <ChevronRightIcon className="h-5 w-5" />
+              </button>
+            </Link>
+          </section>
+
+          {/* Right Content Section */}
+          <section className="flex justify-center items-center order-1 lg:order-2">
+            <div className="relative w-full max-w-[300px] sm:max-w-[350px] lg:max-w-[450px]">
+              <div className="absolute -inset-1 bg-emerald-500/30 rounded-full blur-3xl"></div>
+              <Image
+                src="/Network.png"
+                alt="Blockchain Network"
+                width={450}
+                height={450}
+                className="relative rounded-lg w-full h-auto"
+              />
             </div>
-          </div>
+          </section>
         </div>
       </div>
     </>

packages/nextjs/components/SwitchTheme.tsx

@@ -13,9 +13,9 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
   const handleToggle = () => {
     if (isDarkMode) {
       setTheme("light");
-    } else {
-      setTheme("dark");
+      return;
     }
+    setTheme("dark");
   };
 
   useEffect(() => {

packages/nextjs/components/ThemeProvider.tsx

@@ -1,33 +1,9 @@
 "use client";
 
 import * as React from "react";
-import { useEffect } from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 
 export const ThemeProvider = ({ children, ...props }: ThemeProviderProps) => {
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const observer = new MutationObserver(mutations => {
-        mutations.forEach(mutation => {
-          if (mutation.attributeName === "class") {
-            const isDark = document.documentElement.classList.contains("dark");
-            const iconLink = document.querySelector('link[rel="icon"]');
-            if (iconLink) {
-              iconLink.setAttribute("href", isDark ? "/batch-logo-white.png" : "/batch-logo-black.svg");
-            }
-          }
-        });
-      });
-
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["class"],
-      });
-
-      return () => observer.disconnect();
-    }
-  }, []);
-
   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 };

packages/nextjs/utils/scaffold-eth/getMetadata.ts

@@ -44,20 +44,7 @@ export const getMetadata = ({
       images: [imageUrl],
     },
     icons: {
-      icon: [
-        {
-          url: "/batch-logo-black.svg",
-          media: "(prefers-color-scheme: light)",
-          sizes: "64x64",
-          type: "image/svg+xml",
-        },
-        {
-          url: "/batch-logo-white.png",
-          media: "(prefers-color-scheme: dark)",
-          sizes: "64x64",
-          type: "image/png",
-        },
-      ],
+      icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
     },
   };
-};
+};