Skip to content

Commit

Permalink
added missing jumbotron section to home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@blahkheart
blahkheart committed Oct 25, 2024
1 parent 96dda78 commit 21d80e4
Showing 1 changed file with 99 additions and 28 deletions.
127 changes: 99 additions & 28 deletions packages/nextjs/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Home: NextPage = () => {
const [isClosedModalOpen, setIsClosedModalOpen] = useState(false);
const { classData, setHackerClass, setLockAddress } = useGlobalState();

const { data: areRegistrationsOpen } = useScaffoldReadContract({
const { data: areRegistrationsOpen, isLoading } = useScaffoldReadContract({
contractName: "ETHRwandaHackathonOnboard",
functionName: "getAreRegistrationsOpen",
});
Expand Down Expand Up @@ -42,7 +42,73 @@ const Home: NextPage = () => {
<>
<div className="min-h-screen bg-green-50">
<main>
{/* Existing content */}
<div
className="relative h-screen bg-cover bg-center flex items-center justify-center"
style={{ backgroundImage: "url('/ETH-Rwanda-Banner.jpeg')" }}
>
<div className="absolute inset-0 bg-black opacity-50"></div>
<div className="relative z-10 text-center text-white">
<h1 className="text-6xl font-bold mb-4 text-gray-200">ETH RWANDA HACKATHON</h1>
<p className="mt-12 text-4xl font-extrabold ">GENESIS</p>
{/* Action Buttons */}
<div className="flex mt-32 justify-center space-x-8">
{/* Ethereum Logo */}
<svg className="w-16 h-16" viewBox="0 0 784.37 1277.39" xmlns="http://www.w3.org/2000/svg">
<g>
<polygon
fill="#ffffff"
fillRule="nonzero"
points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54 "
/>
<polygon
fill="#ffffff"
fillRule="nonzero"
points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33 "
/>
<polygon
fill="#ffffff"
fillRule="nonzero"
points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89 "
/>
<polygon fill="#ffffff" fillRule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89 " />
<polygon fill="#ffffff" fillRule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33 " />
<polygon fill="#ffffff" fillRule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33 " />
</g>
</svg>
{/* Smart Contract Icon */}
<svg
className="w-16 h-16"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
></path>
</svg>
{/* Blockchain Icon */}
<svg
className="w-16 h-16"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
></path>
</svg>
</div>
</div>
</div>

<div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
<div className="text-center">
<h2 className="text-4xl font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
Expand All @@ -55,34 +121,39 @@ const Home: NextPage = () => {
shape the future of blockchain technology.
</p>
</div>

<div className="mt-16">
<h2 className="text-3xl font-extrabold text-gray-900 text-center mb-8">Choose Your Hacker Class</h2>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{Object.entries(classData).map(([className, { description }]) => (
<div
key={className}
className="relative bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
onClick={() => openModal(className)}
>
<Image
src="/eth-rwanda-img.jpg?height=200&width=200"
alt={className}
width={200}
height={200}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<h3 className="text-lg font-medium text-gray-900">{className}</h3>
<p className="mt-1 text-sm text-gray-500">{description}</p>
</div>
<div className="absolute top-0 right-0 m-2 bg-yellow-400 text-black text-xs font-bold px-2 py-1 rounded">
NFT
{isLoading ? (
<div className="flex justify-center items-center h-screen">
<span className="loading loading-spinner loading-xs"></span>
</div>
) : (
<div className="mt-16">
<h2 className="text-3xl font-extrabold text-gray-900 text-center mb-8">Choose Your Hacker Class</h2>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{Object.entries(classData).map(([className, { description }]) => (
<div
key={className}
className="relative bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
onClick={() => openModal(className)}
>
<Image
src="/eth-rwanda-img.jpg?height=200&width=200"
alt={className}
width={200}
height={200}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<h3 className="text-lg font-medium text-gray-900">{className}</h3>
<p className="mt-1 text-sm text-gray-500">{description}</p>
</div>
<div className="absolute top-0 right-0 m-2 bg-yellow-400 text-black text-xs font-bold px-2 py-1 rounded">
NFT
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
)}
</div>
</main>

Expand Down

0 comments on commit 21d80e4

Please sign in to comment.