Skip to content

Rampop #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
phipsae merged 2 commits into from
May 27, 2025
Merged

Rampop #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a1c22f
Tweaked homepage layout and styling with new animations, background e…
Rampop01 May 26, 2025
efbff27
Tweaked homepage layout and styling with new animations, background e…
Rampop01 May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/nextjs/app/api/builders/profiles/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,16 @@ const BUILDER_PROFILES = [
"0x119d9A1ef0D16361284a9661727b363B04B5B0c8",
"0x167142915AD0fAADD84d9741eC253B82aB8625cd",
"0x208B2660e5F62CDca21869b389c5aF9E7f0faE89",
"0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5",
"0x2d90C8bE0Df1BA58a66282bc4Ed03b330eBD7911",
"0x2E15bB8aDF3438F66A6F786679B0bBBBF02A75d5",
"0x3BFbE4E3dCC472E9B1bdFC0c177dE3459Cf769bf",
"0x48Bf488D00FE4C83e803688ffE5532EB83E9a0ff",
"0x74370B567f5c65bef0428B9c78df5C691B632Cf7",
"0x972d1be405DcFcD32DD95743934693B673e3F2B0",
"0x9f535319FF3c093F0841427FBC68f483952017BD",
"0xb216270aFB9DfcD611AFAf785cEB38250863F2C9",
"0xB24023434c3670E100068C925A87fE8F500d909a",
"0xE00E720798803B8B83379720c42f7A9bE1cCd281",
"0xb216270aFB9DfcD611AFAf785cEB38250863F2C9",
"0xe98540d28F45830E01D237251Bfc4777E69c9A46",
];

Expand Down
225 changes: 191 additions & 34 deletions packages/nextjs/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@

import Link from "next/link";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import {
BugAntIcon,
CodeBracketIcon,
MagnifyingGlassIcon,
RocketLaunchIcon,
UserGroupIcon,
} from "@heroicons/react/24/outline";
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
Expand All @@ -12,50 +18,201 @@ const Home: NextPage = () => {
});

return (
<>
<div className="flex items-center flex-col 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 16</span>
</h1>
<p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
<p className="text-lg flex gap-2 justify-center">
<span className="font-bold">Checked in builders count:</span>
{isLoading ? (
<span className="loading loading-spinner loading-sm"></span>
) : (
<span>{checkedInCount?.toString()}</span>
)}
</p>
<div className="flex flex-col bg-gradient-to-b dark:from-black dark:to-gray-900 from-gray-100 to-gray-200 min-h-screen">
{/* Hero Section */}
<div className="bg-hero py-20 px-4 text-center relative overflow-hidden flex items-center justify-center">
<div className="max-w-4xl mx-auto relative z-10 animate-fadeIn">
<div className="relative">
<div className="flex flex-col items-center justify-center gap-2">
<div className="relative text-center">
<h1 className="text-6xl sm:text-7xl font-black text-white mb-2 animate-slide-up tracking-tight">
<span className="drop-shadow-md">Welcome to Batch</span>
</h1>

{/* 16 with lightning circle */}
<div className="relative inline-block my-4">
<div className="circle-lightning inline-flex items-center justify-center w-[200px] h-[200px] sm:w-[300px] sm:h-[300px] bg-black/30 dark:bg-white/5 backdrop-blur-sm shadow-md dark:shadow-md">
<span className="text-[8rem] sm:text-[10rem] font-black bg-gradient-to-r from-primary via-secondary to-primary text-transparent bg-clip-text bg-[length:200%_100%] animate-gradient-x leading-none drop-shadow-md">
16
</span>
</div>
</div>
</div>

<p className="text-xl max-w-2xl mx-auto text-white font-medium mb-10 animate-slide-up animation-delay-700 drop-shadow-md bg-black/20 backdrop-blur-sm px-6 py-3 rounded-xl">
Join a community of innovators creating the future of web3. Learn, build, and collaborate with
like-minded developers pushing the boundaries of what&apos;s possible.
</p>

{/* Builder Counter Card */}
<div className="card-lightning inline-block dark:bg-gray-900/70 bg-gray-800/70 px-8 py-5 rounded-xl backdrop-blur-sm animate-slide-up animation-delay-1000 shadow-md">
<div className="flex items-center gap-4">
<div className="p-3 bg-gradient-to-br from-secondary/50 to-primary/40 dark:from-secondary/30 dark:to-primary/30 rounded-full shadow-glow-md transition-all duration-300">
<UserGroupIcon className="h-8 w-8 text-white dark:text-secondary transition-colors duration-300" />
</div>
<div className="flex flex-col items-start">
<span className="text-sm font-medium text-secondary dark:text-secondary text-white">
Builder Community
</span>
<div className="flex items-center gap-2">
<span className="font-bold text-2xl text-white dark:text-white">
{isLoading ? (
<span className="loading loading-spinner loading-sm"></span>
) : (
<span>{checkedInCount?.toString()}</span>
)}
</span>
<span className="text-gray-200 dark:text-gray-300">builders checked in</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div className="grow bg-base-300 w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col md: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" />
{/* About Section */}
<div className="w-full py-12 px-4 sm:px-8 dark:bg-black dark:bg-[linear-gradient(180deg,rgba(0,0,0,0)_0%,rgba(30,30,30,0.3)_100%)] bg-[linear-gradient(180deg,rgba(255,255,255,0)_0%,rgba(240,240,240,0.5)_100%)]">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-10">What is Batch 16?</h2>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="dark:bg-gray-900/80 bg-white p-6 rounded-2xl shadow-md dark:hover:shadow-[0_0_25px_rgba(79,70,229,0.35)] hover:shadow-[0_0_25px_rgba(79,70,229,0.15)] transition-all duration-300 dark:border-gray-800 border-gray-200 hover:border-secondary backdrop-blur-sm">
<div className="icon-container p-3 bg-gradient-to-br from-secondary/30 to-primary/30 dark:from-secondary/20 dark:to-primary/20 rounded-xl w-fit mb-4 shadow-glow-sm dark:shadow-glow-lg">
<RocketLaunchIcon className="h-10 w-10 text-primary dark:text-secondary transition-colors duration-300" />
</div>
<h3 className="text-xl font-bold mb-2">Learning Expedition</h3>
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" passHref className="link">
Debug Contracts
</Link>{" "}
tab.
An immersive journey into Ethereum development. Perfect for developers looking to level up their web3
skills.
</p>
</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" />

<div className="dark:bg-gray-900/80 bg-white p-6 rounded-2xl shadow-md dark:hover:shadow-[0_0_25px_rgba(79,70,229,0.35)] hover:shadow-[0_0_25px_rgba(79,70,229,0.15)] transition-all duration-300 dark:border-gray-800 border-gray-200 hover:border-secondary backdrop-blur-sm">
<div className="icon-container p-3 bg-gradient-to-br from-secondary/30 to-primary/30 dark:from-secondary/20 dark:to-primary/20 rounded-xl w-fit mb-4 shadow-glow-sm dark:shadow-glow-lg">
<UserGroupIcon className="h-10 w-10 text-primary dark:text-secondary transition-colors duration-300" />
</div>
<h3 className="text-xl font-bold mb-2">Community Driven</h3>
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" passHref className="link">
Block Explorer
</Link>{" "}
tab.
Join a supportive network of builders, mentors, and experts who are passionate about web3 technology.
</p>
</div>

<div className="dark:bg-gray-900/80 bg-white p-6 rounded-2xl shadow-md dark:hover:shadow-[0_0_25px_rgba(79,70,229,0.35)] hover:shadow-[0_0_25px_rgba(79,70,229,0.15)] transition-all duration-300 dark:border-gray-800 border-gray-200 hover:border-secondary backdrop-blur-sm">
<div className="icon-container p-3 bg-gradient-to-br from-secondary/30 to-primary/30 dark:from-secondary/20 dark:to-primary/20 rounded-xl w-fit mb-4 shadow-glow-sm dark:shadow-glow-lg">
<CodeBracketIcon className="h-10 w-10 text-primary dark:text-secondary transition-colors duration-300" />
</div>
<h3 className="text-xl font-bold mb-2">Hands-on Building</h3>
<p>
Create real projects using Ethereum, Solidity, and modern front-end frameworks to build your portfolio.
</p>
</div>
</div>
</div>
</div>
</>

{/* Tools Section */}
<div className="w-full py-12 px-4 sm:px-8 dark:bg-[#101010] dark:bg-[linear-gradient(to_right,rgba(20,20,20,0.8),rgba(0,0,0,0.8),rgba(20,20,20,0.8))] bg-[linear-gradient(to_right,rgba(240,240,240,0.8),rgba(255,255,255,0.8),rgba(240,240,240,0.8))] relative overflow-hidden">
<div className="absolute inset-0 opacity-5 dark:opacity-10 pointer-events-none">
<div className="absolute inset-0 bg-grid-pattern"></div>
</div>
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-10">Explore Our Tools</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-gradient-to-br dark:from-gray-900 dark:to-gray-800 from-white to-gray-100 p-8 rounded-2xl shadow-md dark:hover:shadow-[0_0_30px_rgba(79,70,229,0.5)] hover:shadow-[0_0_30px_rgba(79,70,229,0.2)] transition-all duration-300 dark:border-gray-700 border-gray-200 hover:scale-105">
<div className="flex items-center gap-4 mb-4">
<div className="p-3 bg-gradient-to-br from-secondary/30 to-primary/30 dark:from-secondary/20 dark:to-primary/20 rounded-full shadow-glow-sm dark:shadow-glow-lg transition-all duration-300">
<BugAntIcon className="h-8 w-8 text-primary dark:text-secondary transition-colors duration-300" />
</div>
<h3 className="text-2xl font-bold">Debug Contracts</h3>
</div>
<p className="mb-6">
Interact with your smart contracts directly from the UI. Test functions, monitor events, and debug with
ease.
</p>
<Link
href="/debug"
passHref
className="btn btn-secondary hover:scale-105 transition-transform duration-300 shadow-glow-sm dark:shadow-glow-md"
>
Open Debug Console
</Link>
</div>

<div className="bg-gradient-to-br dark:from-gray-900 dark:to-gray-800 from-white to-gray-100 p-8 rounded-2xl shadow-md dark:hover:shadow-[0_0_30px_rgba(79,70,229,0.5)] hover:shadow-[0_0_30px_rgba(79,70,229,0.2)] transition-all duration-300 dark:border-gray-700 border-gray-200 hover:scale-105">
<div className="flex items-center gap-4 mb-4">
<div className="p-3 bg-gradient-to-br from-secondary/30 to-primary/30 dark:from-secondary/20 dark:to-primary/20 rounded-full shadow-glow-sm dark:shadow-glow-lg transition-all duration-300">
<MagnifyingGlassIcon className="h-8 w-8 text-primary dark:text-secondary transition-colors duration-300" />
</div>
<h3 className="text-2xl font-bold">Block Explorer</h3>
</div>
<p className="mb-6">
Examine transactions, blocks, and contract interactions on your local blockchain environment.
</p>
<Link
href="/blockexplorer"
passHref
className="btn btn-secondary hover:scale-105 transition-transform duration-300 shadow-glow-sm dark:shadow-glow-md"
>
Explore Blockchain
</Link>
</div>
</div>
</div>
</div>

{/* Builders Section */}
<div className="w-full py-12 px-4 sm:px-8 dark:bg-gradient-to-b dark:from-black dark:to-gray-900 bg-gradient-to-b from-gray-100 to-white">
<div className="max-w-6xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-6">Meet Our Builders</h2>
<p className="text-xl mb-8">Discover the talented developers who are part of Batch 16</p>

<Link
href="/builders"
passHref
className="btn btn-primary btn-lg hover:scale-105 transition-transform duration-300 shadow-glow-sm dark:shadow-glow-md group"
>
<span>View Builder Profiles</span>
<UserGroupIcon className="h-5 w-5 ml-2 group-hover:animate-pulse text-white dark:text-primary-content transition-colors duration-300" />
</Link>
</div>
</div>

{/* Footer */}
<footer className="w-full py-8 px-4 sm:px-8 dark:bg-black/90 bg-gray-100/90 backdrop-blur-sm border-t dark:border-gray-800 border-gray-200">
<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 className="text-xl font-bold mb-4 text-primary dark:text-secondary">Batch 16 BuidlGuidl</h3>
<p className="dark:text-gray-300 text-gray-600">
Join a community of innovators creating the future of web3.
</p>
</div>
<div className="flex flex-col md:items-end">
<h3 className="text-xl font-bold mb-4 text-primary dark:text-secondary">Resources</h3>
<div className="flex gap-6">
<a
href="https://scaffoldeth.io"
target="_blank"
rel="noopener noreferrer"
className="dark:text-gray-300 text-gray-600 hover:text-primary dark:hover:text-secondary transition-colors"
>
Scaffold-ETH 2
</a>
<a
href="https://buidlguidl.com"
target="_blank"
rel="noopener noreferrer"
className="dark:text-gray-300 text-gray-600 hover:text-primary dark:hover:text-secondary transition-colors"
>
BuidlGuidl
</a>
</div>
</div>
</div>
</footer>
</div>
);
};

Expand Down
Loading