Merge branch 'main' into show-pixels

packages/nextjs/app/api/builders/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+import { readdir } from "fs/promises";
+import path from "path";
+
+export async function GET() {
+  const buildersPath = path.join(process.cwd(), "app/builders");
+
+  try {
+    const directories = await readdir(buildersPath, { withFileTypes: true });
+    const addresses = directories
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name)
+      .filter(name => name.startsWith("0x"));
+
+    return NextResponse.json(addresses);
+  } catch {
+    return NextResponse.json([], { status: 500 });
+  }
+}

packages/nextjs/app/builders/0x21dfd1CfD1d45801f46B0F40Aed056b064045aA2/page.tsx

@@ -0,0 +1,116 @@
+import Link from "next/link";
+import type { NextPage } from "next";
+
+const RoheemahBuilderPage: NextPage = () => {
+  return (
+    <div className="min-h-screen flex flex-col md:flex-row items-start justify-start gap-16 px-4 md:px-20">
+      <div className="flex-1">
+        <div className="flex flex-col-reverse lg:flex-row items-center lg:items-start justify-start gap-14 mt-20">
+          <div className="relative">
+            <div className="absolute top-0 left-0 w-full h-full bg-[#9BF9F3] rounded-tl-[100px] rounded-br-[100px] -z-10 transform -translate-x-[4px] -translate-y-[4px]"></div>
+            <div className="leaf-shaped py-8 px-6 md:px-10 border-2 flex flex-col items-center justify-start bg-[#0D1117] rounded-tl-[100px] rounded-br-[100px] relative z-10">
+              <div className="flex flex-col items-center justify-start">
+                <div className="w-24 h-24 rounded-full bg-cover bg-center bg-no-repeat border-2 border-[#6EF4E6] text-[20px] font-bold text-white flex items-center justify-center">
+                  A.R.A
+                </div>
+                <p className="text-[24px] font-normal">Roheemah</p>
+                <p className="text-md text-[#9B9EA1]">Frontend & Blockchain Dev</p>
+              </div>
+              <div className="mt-6 text-[#9B9EA1]">
+                {[
+                  { icon: "link", text: "[email protected]", href: "mailto:[email protected]" },
+                  {
+                    icon: "link",
+                    text: "www.github.com/AbolareRoheemah",
+                    href: "https://www.github.com/AbolareRoheemah",
+                  },
+                  { icon: "link", text: "https://rhorheeymarh.vercel.app", href: "https://rhorheeymarh.vercel.app" },
+                ].map(({ text, href }) => (
+                  <div key={text} className="flex items-center justify-start gap-4 mb-4">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth="1.5"
+                      stroke="#6AECD9"
+                      className="size-6"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+                      />
+                    </svg>
+                    {href ? <Link href={href}>{text}</Link> : <span>{text}</span>}
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center justify-between flex-wrap gap-2">
+                {["HTML/CSS", "JS", "REACT", "NEXT", "VUE", "NUXT", "SOLIDITY", "RUST"].map(skill => (
+                  <p
+                    key={skill}
+                    className="bg-[#9BF9F3] text-[#000] text-center text-sm px-2 py-[1px] basis-2/12 rounded-full"
+                  >
+                    {skill}
+                  </p>
+                ))}
+              </div>
+              <a
+                href="https://docs.google.com/document/d/1iLtYWAaMytZ2K9NEQ3f8LVEUUOVBfcGFhkmYYE1tPdI/edit?usp=sharing"
+                download="Abolare_Roheemah_CV.pdf"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center gap-4 bg-white px-8 text-[#000] rounded-full font-medium mt-4 cursor-pointer"
+              >
+                <p>Click to view CV</p>
+              </a>
+            </div>
+          </div>
+          <div className="flex flex-col md:flex-row md:items-start md:justify-start gap-10 pt-10">
+            <div className="">
+              <div>
+                <p className="text-sm text-[#6AECD9]">&lt;h1&gt;</p>
+                <p className="text-[34px] lg:text-[46px] pl-4 leading-[50px] font-medium">Hey👋</p>
+                <p className="text-[34px] lg:text-[46px] pl-4 leading-[50px] font-medium">
+                  I&apos;m <span className="text-[#6AECD9]">Roheemah</span>,
+                </p>
+                <p className="text-[34px] lg:text-[46px] leading-[50px] font-medium ml-[1rem]">
+                  Frontend & Blockchain Developer
+                </p>
+                <p>
+                  {" "}
+                  <span className="text-sm text-[#6AECD9]">&lt;/h1&gt;</span>
+                </p>
+              </div>
+              <div className="mt-8">
+                <p className="text-sm text-[#6AECD9]">&lt;p&gt;</p>
+                <p className="pl-4 text-md font-bold text-[#9B9EA1]">
+                  I build user-friendly and visually appealing web applications. I also design, implement and maintain
+                  blockchain based applications. I love meeting people and having meaningful conversations :)
+                </p>
+                <p className="text-sm text-[#6AECD9]">&lt;/p&gt;</p>
+              </div>
+            </div>
+            <div className="py-10 px-8 bg-[#1A1E23] rounded-lg md:rounded-full">
+              {[
+                { number: "4", text: "Programming Languages" },
+                { number: "6", text: "Development Tools" },
+                { number: "3+", text: "Years of Experience" },
+              ].map(item => (
+                <div
+                  key={item.text}
+                  className="flex items-center justify-start md:items-center md:justify-center gap-4 mt-8"
+                >
+                  <p className="text-[#6AECD9] text-[50px] font-medium">{item.number}</p>
+                  <p className="text-md font-bold text-[#9B9EA1]">{item.text}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoheemahBuilderPage;

packages/nextjs/app/builders/0x2Bc096A12C5b37F035180aDeF70EB2B88351e5B8/_components/SocialLinks.tsx

@@ -0,0 +1,64 @@
+interface SocialLinksProps {
+  className?: string;
+}
+
+interface LinkIconProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+const LinkIcon: React.FC<LinkIconProps> = ({ href, children }) => {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group hover:scale-110 transition-all duration-300"
+    >
+      {children}
+    </a>
+  );
+};
+
+const SocialLinks: React.FC<SocialLinksProps> = ({ className }) => {
+  return (
+    <div className={`flex gap-6 ${className}`}>
+      <LinkIcon href="https://github.com/melanke">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 512" className="w-12 h-12">
+          <path
+            className="fill-primary-content group-hover:fill-accent transition-all duration-300"
+            d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
+          />
+        </svg>
+      </LinkIcon>
+      <LinkIcon href="https://www.linkedin.com/in/gilbueno/">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" className="w-12 h-12">
+          <path
+            className="fill-primary-content group-hover:fill-accent transition-all duration-300"
+            d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+          />
+        </svg>
+      </LinkIcon>
+      <LinkIcon href="https://t.me/+5511970629099">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" className="w-12 h-12">
+          <path
+            className="fill-primary-content group-hover:fill-accent transition-all duration-300"
+            d="M248 8C111 8 0 119 0 256S111 504 248 504 496 393 496 256 385 8 248 8zM363 176.7c-3.7 39.2-19.9 134.4-28.1 178.3-3.5 18.6-10.3 24.8-16.9 25.4-14.4 1.3-25.3-9.5-39.3-18.7-21.8-14.3-34.2-23.2-55.3-37.2-24.5-16.1-8.6-25 5.3-39.5 3.7-3.8 67.1-61.5 68.3-66.7 .2-.7 .3-3.1-1.2-4.4s-3.6-.8-5.1-.5q-3.3 .7-104.6 69.1-14.8 10.2-26.9 9.9c-8.9-.2-25.9-5-38.6-9.1-15.5-5-27.9-7.7-26.8-16.3q.8-6.7 18.5-13.7 108.4-47.2 144.6-62.3c68.9-28.6 83.2-33.6 92.5-33.8 2.1 0 6.6 .5 9.6 2.9a10.5 10.5 0 0 1 3.5 6.7A43.8 43.8 0 0 1 363 176.7z"
+          />
+        </svg>
+      </LinkIcon>
+      <LinkIcon href="https://app.buidlguidl.com/builders/0x2Bc096A12C5b37F035180aDeF70EB2B88351e5B8">
+        <svg viewBox="0 0 53 72" xmlns="http://www.w3.org/2000/svg" className="w-12 h-12">
+          <path
+            className="fill-primary-content group-hover:fill-accent transition-all duration-300"
+            fillRule="evenodd"
+            d="M25.9 17.434v15.638h3.927v9.04h9.718v-9.04h6.745v18.08l-10.607 19.88-12.11-.182-12.11.183L.856 51.152v-18.08h6.713v9.04h9.75v-9.04h4.329V2.46a2.126 2.126 0 0 1 4.047-.914c1.074.412 2.157 1.5 3.276 2.626 1.33 1.337 2.711 2.726 4.193 3.095 1.496.373 2.605-.026 3.855-.475 1.31-.47 2.776-.997 5.005-.747 1.67.197 2.557 1.289 3.548 2.509 1.317 1.623 2.82 3.473 6.599 3.752l-.024.017c-2.42 1.709-5.726 4.043-10.86 3.587-1.605-.139-2.736-.656-3.82-1.153-1.546-.707-2.997-1.37-5.59-.832-2.809.563-4.227 1.892-5.306 2.903-.236.221-.456.427-.67.606Z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </LinkIcon>
+    </div>
+  );
+};
+
+export default SocialLinks;

packages/nextjs/app/builders/0x2Bc096A12C5b37F035180aDeF70EB2B88351e5B8/page.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+import SocialLinks from "./_components/SocialLinks";
+import { NextPage } from "next";
+
+const GilBuilderPage: NextPage = () => {
+  return (
+    <div className="w-full max-w-7xl mx-auto flex flex-col px-6 lg:px-10 py-8 lg:py-12">
+      <div className="flex gap-4 flex-col md:flex-row items-center md:items-start">
+        <Image
+          src="https://gravatar.com/avatar/357be387c9eacb2a78896388cdafbf8d?size=256"
+          className="rounded-full"
+          alt="Gil Profile Picture"
+          width={256}
+          height={256}
+        />
+        <div className="flex flex-col p-8">
+          <h1 className="text-2xl font-bold mb-4">
+            Hi my name is <span className="text-primary bg-primary-content px-1 rounded-md">Gil</span>!
+          </h1>
+          <p>
+            Hi everyone! I&apos;m Gil, a Brazilian software engineer with professional{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">experience since 2007</span>. I&apos;ve
+            been developing for{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">Blockchain since 2018</span>, having
+            worked on ecosystems like{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">Neo and Flow</span>. Recently, I&apos;ve
+            been diving deep into{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">Ethereum and Solana</span>, expanding my
+            expertise in building decentralized solutions.
+          </p>
+          <p>
+            My main goal is to bring blockchain technology closer to{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">mass adoption</span>. I&apos;m currently
+            working on a wallet that leverages Abstract Account and WebAuthn concepts to simplify onboarding while
+            encouraging dapps to support sponsored transactions. I&apos;m also deeply interested in{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">real-world applications</span>, such as{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">DAOs</span> and mechanisms that enable new
+            economic models to benefit{" "}
+            <span className="text-primary bg-primary-content px-1 rounded-md">underserved communities</span>.
+          </p>
+          <h2 className="text-xl font-bold mt-8">Let&apos;s Connect</h2>
+          <SocialLinks className="mt-4" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GilBuilderPage;

packages/nextjs/app/builders/0x5cc8Be96B1C9A68F57a73b5bEa60cF5D890055A1/page.tsx

@@ -0,0 +1,144 @@
+import { NextPage } from "next";
+import { EnvelopeIcon, GlobeAltIcon } from "@heroicons/react/24/outline";
+import { Address } from "~~/components/scaffold-eth";
+
+const GitHubIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="w-6 h-6"
+  >
+    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+  </svg>
+);
+
+const BuidlGuidlLogo = () => (
+  <svg viewBox="0 0 32 32" className="w-8 h-8">
+    <path
+      fill="currentColor"
+      d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2zm-.5 5l-8 4v10l8 4 8-4V11l-8-4zm0 2.236L21.5 12l-6 3-6-3 6-2.764zm-6 9.428v-7l5.5 2.75v7l-5.5-2.75zm7.5 2.75v-7l5.5-2.75v7l-5.5 2.75z"
+    />
+  </svg>
+);
+
+const styles = {
+  container: "min-h-screen p-8 bg-gradient-to-b from-base-200 to-base-300 dark:from-base-300 dark:to-base-200",
+  card: "max-w-4xl mx-auto p-12 bg-base-100 rounded-2xl shadow-xl border border-base-300 dark:bg-base-200 dark:border-base-400",
+  profileSection: "flex flex-col md:flex-row items-center md:items-start gap-8",
+  avatarContainer: "relative group",
+  avatar: "w-40 h-40 md:w-48 md:h-48 rounded-2xl shadow-lg transition-transform duration-300 group-hover:scale-105",
+  nameSection: "flex-1 text-center md:text-left space-y-2",
+  name: "text-4xl font-extrabold text-base-content dark:text-white bg-gradient-to-r from-primary to-secondary bg-clip-text",
+  section: "mt-10",
+  sectionTitle: "text-2xl font-extrabold mb-6 text-base-content dark:text-white flex items-center gap-2",
+  titleIcon: "w-6 h-6 text-primary",
+  bio: "text-base-content dark:text-white font-semibold leading-relaxed text-lg",
+  highlight:
+    "inline-block bg-primary/20 dark:bg-primary/30 text-primary dark:text-primary-content px-3 py-1 rounded-md font-bold",
+  socialLinks: "flex gap-6 items-center justify-center md:justify-start mt-8",
+  socialIcon:
+    "p-3 hover:bg-base-200 dark:hover:bg-base-300 rounded-xl transition-all duration-200 hover:scale-110 hover:shadow-md text-base-content dark:text-white",
+  divider: "my-8 border-t border-base-300 dark:border-base-400",
+  addressContainer:
+    "mt-2 bg-base-200 dark:bg-base-300 py-2 px-4 rounded-lg inline-block text-base-content dark:text-white",
+  buidlGuidlLink:
+    "flex items-center gap-2 text-base-content dark:text-white hover:text-primary dark:hover:text-primary transition-colors duration-200",
+};
+
+const builderDetails = {
+  name: "Gbolahan Akande",
+  address: "0x5cc8Be96B1C9A68F57a73b5bEa60cF5D890055A1",
+  bio: (
+    <>
+      A passionate <span className={styles.highlight}>Web3 developer</span> with experience in{" "}
+      <span className={styles.highlight}>Solidity</span> and{" "}
+      <span className={styles.highlight}>full-stack development</span>. Currently building{" "}
+      <span className={styles.highlight}>decentralized applications</span> and contributing to{" "}
+      <span className={styles.highlight}>BuidlGuidl projects</span>. Excited about the future of{" "}
+      <span className={styles.highlight}>blockchain technology</span> and its potential to reshape the digital world.
+    </>
+  ),
+  avatar: "https://1.gravatar.com/userimage/206352262/e4937825bd2f70cf0335dce4e8792eda?size=256",
+  links: {
+    github: "gboigwe",
+    website: "https://agedevs.netlify.app",
+    email: "[email protected]",
+    buidlGuidl: "0x5cc8Be96B1C9A68F57a73b5bEa60cF5D890055A1",
+  },
+};
+
+const GbolahanAkandeBuilderPage: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.profileSection}>
+          <div className={styles.avatarContainer}>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={builderDetails.avatar} alt="Profile" className={styles.avatar} />
+          </div>
+          <div className={styles.nameSection}>
+            <h1 className={styles.name}>{builderDetails.name}</h1>
+            <div className={styles.addressContainer}>
+              <Address address={builderDetails.address} />
+            </div>
+
+            <div className={styles.socialLinks}>
+              {builderDetails.links.buidlGuidl && (
+                <a
+                  href={`https://app.buidlguidl.com/builders/${builderDetails.links.buidlGuidl}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.buidlGuidlLink}
+                  aria-label="BuidlGuidl Profile"
+                >
+                  <BuidlGuidlLogo />
+                  {/* <span className="font-semibold">BuidlGuidl Profile</span> */}
+                </a>
+              )}
+              {builderDetails.links.github && (
+                <a
+                  href={`https://github.com/${builderDetails.links.github}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.socialIcon}
+                  aria-label="GitHub"
+                >
+                  <GitHubIcon />
+                </a>
+              )}
+              {builderDetails.links.website && (
+                <a
+                  href={builderDetails.links.website}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={styles.socialIcon}
+                  aria-label="Website"
+                >
+                  <GlobeAltIcon className="w-6 h-6" />
+                </a>
+              )}
+              {builderDetails.links.email && (
+                <a href={`mailto:${builderDetails.links.email}`} className={styles.socialIcon} aria-label="Email">
+                  <EnvelopeIcon className="w-6 h-6" />
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.divider} />
+
+        <div className={styles.section}>
+          <h2 className={styles.sectionTitle}>About Me</h2>
+          <p className={styles.bio}>{builderDetails.bio}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GbolahanAkandeBuilderPage;