Merge branch 'logo-title-subtitle' of https://github.com/Vedant-05/ba…

…tch11.buidlguidl.com into logo-title-subtitle

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/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;

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

@@ -0,0 +1,131 @@
+import { type NextPage } from "next";
+import { IconType } from "react-icons";
+import { FaEnvelope, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
+
+// Interfaces moved outside the component
+interface StyledIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  icon: IconType;
+  size?: number;
+  color?: string;
+}
+
+interface SocialLink {
+  href: string;
+  icon: IconType;
+  lightHoverColor: string;
+  darkHoverColor: string;
+  isEmail?: boolean;
+}
+
+// Reusable styled icon component
+const StyledIcon: React.FC<StyledIconProps> = ({ icon: Icon, className, size, color, ...props }) => (
+  <span className={`inline-block ${className}`} {...props}>
+    <Icon size={size} color={color} />
+  </span>
+);
+
+// Social links data
+const socialLinks: SocialLink[] = [
+  {
+    href: "https://github.com/Vedant-05",
+    icon: FaGithub,
+    lightHoverColor: "hover:text-gray-900",
+    darkHoverColor: "dark:hover:text-gray-200",
+  },
+  {
+    href: "https://x.com/DecodingDegen",
+    icon: FaTwitter,
+    lightHoverColor: "hover:text-blue-400",
+    darkHoverColor: "dark:hover:text-blue-300",
+  },
+  {
+    href: "https://www.linkedin.com/in/vedant-joshi-962a23191",
+    icon: FaLinkedin,
+    lightHoverColor: "hover:text-blue-600",
+    darkHoverColor: "dark:hover:text-blue-400",
+  },
+  {
+    href: "mailto:[email protected]",
+    icon: FaEnvelope,
+    lightHoverColor: "hover:text-red-500",
+    darkHoverColor: "dark:hover:text-red-400",
+    isEmail: true,
+  },
+];
+
+const DeveloperProfilePage: NextPage = () => {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-white py-16 px-4">
+      <div className="max-w-3xl mx-auto">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <div className="relative inline-block mb-8">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="https://avatars.githubusercontent.com/u/71647648?v=4"
+              alt="Profile"
+              className="rounded-full w-40 h-40 border-4 border-purple-500 shadow-xl"
+            />
+          </div>
+
+          <h1 className="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400">
+            Hi, I&apos;m Vedant!
+          </h1>
+          <div className="bg-gradient-to-r from-purple-500 to-pink-500 h-1 w-24 mx-auto mb-6"></div>
+          <p className="text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+            Finding my way back to Web3. Rooted in competitive programming (C++), growing in blockchain (Solidity).
+            Learning, building, and sharing the journey 🛠️
+          </p>
+        </div>
+
+        {/* Main Content */}
+        <div className="space-y-16">
+          {/* About Section */}
+          <section className="space-y-6 bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
+            <h2 className="text-3xl font-bold text-purple-600 dark:text-purple-400">About Me</h2>
+            <div className="space-y-4 text-gray-700 dark:text-gray-300 leading-relaxed">
+              <p className="border-l-4 border-purple-500 pl-4 bg-purple-50 dark:bg-purple-900/20 py-2">
+                A Full Stack Engineer with a deep fascination for DeFi and blockchain technology.
+              </p>
+              <p>
+                Having contributed to notable DeFi protocols like{" "}
+                <span className="font-semibold text-purple-600 dark:text-purple-400">Instadapp</span> and
+                <span className="font-semibold text-purple-600 dark:text-purple-400"> Router Protocol</span>, I&apos;ve
+                gained hands-on experience in building decentralized solutions.
+              </p>
+              <p className="border-l-4 border-pink-500 pl-4 bg-pink-50 dark:bg-pink-900/20 py-2">
+                While my journey includes significant web2 development, my passion lies in web3 security and community
+                engagement.
+              </p>
+              <p>
+                Currently focused on bridging traditional finance with DeFi innovations, while pursuing my path toward
+                becoming a smart contract auditor and developer advocate. I believe in making blockchain technology more
+                accessible and secure for everyone.
+              </p>
+            </div>
+          </section>
+
+          {/* Connect Section */}
+          <section className="text-center space-y-6 bg-white dark:bg-gray-800/50 rounded-xl p-8 shadow-lg">
+            <h2 className="text-3xl font-bold text-purple-600 dark:text-purple-400">Let&apos;s Connect</h2>
+            <div className="flex justify-center gap-6">
+              {socialLinks.map(({ href, icon: Icon, lightHoverColor, darkHoverColor }, index) => (
+                <a
+                  key={index}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={`text-gray-600 dark:text-gray-400 transition-all duration-300 transform hover:scale-110 ${lightHoverColor} ${darkHoverColor}`}
+                >
+                  <StyledIcon icon={Icon} size={24} className="transition-colors" />
+                </a>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeveloperProfilePage;