Skip to content
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

Refine layout and wording on page #63

Merged
merged 10 commits into from
Jan 7, 2025
+185 −54
Merged

Refine layout and wording on page #63

Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0592d33
change - what are batches
phipsae Jan 4, 2025
0a5ca72
add what you will learn section
phipsae Jan 4, 2025
6dfa026
change how do batches work section
phipsae Jan 4, 2025
5fab271
add batchCta component to reduce code repetition
phipsae Jan 6, 2025
a863b21
fix of what are BG batches section, more spacing and took out nowrap …
phipsae Jan 6, 2025
c8ebcd6
align bullet point text so that letters are always on some level
phipsae Jan 6, 2025
f7ab695
add card component and some spacing for how do batches work section
phipsae Jan 6, 2025
6491689
add line spacing to card
phipsae Jan 6, 2025
c2325f1
move batches component und util into nextjs/components folder
phipsae Jan 7, 2025
61c7ab8
decrease spacing inbetween how do batches work section and cta
phipsae Jan 7, 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
173 changes: 143 additions & 30 deletions packages/nextjs/pages/batches/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -98,7 +98,7 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
<Image src="/assets/bg-batches-train.png" alt="BG Train" width={600} height={500} priority />
</div>
</div>
<h3 className="pt-2 text-xl">From beginner to expert in dApp development</h3>
<h3 className="pt-2 text-xl">From beginner to expert in open source dApp development</h3>
</div>
</div>
</div>
@@ -108,23 +108,36 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
<div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
<div className="text-center md:text-left lg:w-1/2 space-y-6">
<h2 className="text-3xl lg:text-5xl font-bold">What are BuidlGuidl Batches?</h2>
<h2 className="text-2xl sm:text-3xl lg:text-5xl font-bold whitespace-nowrap">
What are BuidlGuidl Batches?
</h2>
<div className="space-y-4 text-gray-700">
<p>
<p className="text-lg">
BuidlGuidl Batches is a program designed for builders who have completed Speedrun Ethereum. It&apos;s
the next step in your journey as a web3 developer, offering additional challenges and skills to
enhance your abilities.
the next step in your journey as a web3 developer! 🚀
</p>
<p>
After completing the program, you&apos;ll be equipped with both technical and social skills that will
help you collaborate more effectively in the web3 ecosystem.
</p>
<ul className="text-left list-disc list-inside">
<li>Complimentary challenges to Speedrun Ethereum</li>
<li>Mentorship on contributing to open source projects on GitHub</li>
<li>Open source etiquette and best practices</li>
<li>Real-world building Experience</li>
</ul>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">🌐 Open-Source in Web3</h3>
<p>Take your first steps into web3 open-source development.</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">🔧 GitHub Contributions</h3>
<p>Learn to submit PRs, manage issues, and review code effectively.</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">✨ Build Apps</h3>
<p>Create a web3 app collaboratively with other builders.</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">🛠️ Solidity Skills</h3>
<p>Refine and practice your Solidity skills with further challenges.</p>
</div>
</div>
</div>
</div>
<div className="lg:w-1/2">
@@ -137,24 +150,124 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
/>
</div>
</div>

{/* Next Batch CTA - call to action */}
<div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
Batch #{openBatchNumber}
</h3>
<p className="text-white">
Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
</p>
</div>
<div className="flex justify-center lg:justify-end w-full lg:w-auto">
<TrackedLink
id="apply-next-batch"
href="https://speedrunethereum.com/"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
>
Go SpeedRunEthereum
</TrackedLink>
</div>
</div>
</div>
</div>
</div>

<div className="-mt-12 bg-[url(/assets/sre-path.png)] bg-repeat-x h-20 bg-[center_top]"></div>

{/* What you'll learn */}
<div className="base-200 py-16 lg:py-24">
<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
<div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
<div className="lg:w-1/2">
<Image
src="/assets/funding.png"
alt="How Batches Work Illustration"
width={600}
height={600}
className="w-full h-auto object-contain max-w-[300px] lg:max-w-full"
/>
</div>
<div className="lg:w-1/2 space-y-6">
<h2 className="text-center md:text-left text-3xl lg:text-5xl font-bold">What you&apos;ll learn?</h2>
<div className="space-y-6 text-gray-700">
<div className="grid grid-cols-1 gap-4">
<div className="space-y-4 p-4">
<h3 className="text-xl font-semibold">🚀 GitHub Mastery</h3>
<ul className="list-disc list-inside space-y-2">
<li>Submit your first PR the right way</li>
<li>Create and manage issues effectively</li>
<li>Review code from fellow participants</li>
<li>Open-source etiquette and best practices</li>
</ul>
</div>

<div className="space-y-4 p-4">
<h3 className="text-xl font-semibold">⚡ Technical Growth</h3>
<ul className="list-disc list-inside space-y-2">
<li>Complementary challenges to Speedrun Ethereum</li>
<li>Real-world building experience</li>
<li>Mentorship on contributing to open-source projects</li>
<li>Technical and social skills for web3 collaboration</li>
</ul>
</div>
</div>

<div className="bg-white/50 p-4 rounded-lg space-y-3">
<p className="text-sm italic">
👩‍💻 It&apos;s like MIT&apos;s &quot;The Missing Semester of Your CS Education&quot;, but tailored for
on-chain developers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

{/* How Batches Work */}
<div className="bg-[#EBFFA9] py-16 lg:py-24">
<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
<div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
<div className="lg:w-1/2 space-y-6">
<div className="lg:w-1/2 space-y-8">
<h2 className="text-center md:text-left text-3xl lg:text-5xl font-bold">How do Batches work?</h2>
<div className="space-y-4 text-gray-700">
<ul className="list-disc list-inside">
<li>Each batch has its own GitHub repository</li>
<li>Collaborate with peers and mentors in a dedicated Telegram group</li>
<li>Complete challenges and contribute to open source projects</li>
<li>Build a final project and apply for a grant!</li>
</ul>
<div className="space-y-4">
<div className="grid gap-4">
<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">
<span className="text-primary">📚</span> GitHub Repository
</h3>
<p className="text-gray-700 mb-0">Each batch has its own dedicated repository for collaboration</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">
<span className="text-primary">💬</span> Community Support
</h3>
<p className="text-gray-700 mb-0">Connect with peers and mentors in a dedicated Telegram group</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">
<span className="text-primary">🎯</span> Learning Journey
</h3>
<p className="text-gray-700 mb-0">Complete challenges and contribute to open source projects</p>
</div>

<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2">
<span className="text-primary">🚀</span> Final Project
</h3>
<p className="text-gray-700 mb-0">Build your project and get a chance to receive a grant!</p>
</div>
</div>
</div>
</div>

<div className="lg:w-1/2">
<Image
src="/assets/bg-batches-how-batches-work.png"
@@ -172,22 +285,22 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
<div className="bg-[#EDEFFF] pt-16 lg:pt-24 pb-16">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe with pt-2 lg:pt-8 is enough spacing?

Suggested change
<div className="bg-[#EDEFFF] pt-16 lg:pt-24 pb-16">
<div className="bg-[#EDEFFF] pt-2 lg:pt-8 pb-16">

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed

<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
{/* Next Batch CTA */}
<div className="mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-6 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between">
<div className="mb-4 lg:mb-0 max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-2 justify-center lg:justify-start">
<div className="mt-16 mb-16 card bg-gradient-to-r from-primary to-secondary px-6 lg:pl-6 py-8 max-w-full xs:max-w-[90%] md:max-w-[75%] xl:max-w-[60%] mx-auto">
<div className="card-body py-0 px-0 lg:py-0 lg:px-10 flex flex-col lg:flex-row items-center justify-between gap-6">
<div className="max-w-full lg:max-w-[55%] text-center lg:text-left">
<h3 className="card-title text-2xl text-white mb-3 justify-center lg:justify-start">
Batch #{openBatchNumber}
</h3>
<p className="text-white pr-2">
<p className="text-white">
Complete SpeedRunEthereum and join BuidlGuidl to be part of the next batch starting
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : "soon"}!</strong>
<strong>{openBatchStartDate ? ` on ${formatDate(openBatchStartDate)}` : " soon"}!</strong>
</p>
</div>
<div className="flex justify-center lg:justify-end w-full lg:w-auto">
<TrackedLink
id="apply-next-batch"
href="https://speedrunethereum.com/"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap lg:mr-10"
className="btn btn-sm bg-white text-primary hover:bg-gray-100 transition-colors duration-300 inline-flex items-center justify-center whitespace-nowrap"
>
Go SpeedRunEthereum
</TrackedLink>
Loading