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
Merged

Refine layout and wording on page #63

Show file tree
Hide file tree
Changes from all 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
34 changes: 34 additions & 0 deletions packages/nextjs/components/batches/BatchCta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { formatDate } from "../../utils/batches/formatDate";
import TrackedLink from "~~/components/TrackedLink";

interface BatchCtaProps {
openBatchNumber: number | null;
openBatchStartDate: number | null;
}

export const BatchCta = ({ openBatchNumber, openBatchStartDate }: BatchCtaProps) => {
return (
<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>
);
};
16 changes: 16 additions & 0 deletions packages/nextjs/components/batches/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
interface CardProps {
icon: string;
title: string;
description: string;
}

export const Card = ({ icon, title, description }: CardProps) => {
return (
<div className="bg-white/60 rounded-lg p-4 shadow-sm transition-shadow">
<h3 className="font-bold mb-2 mt-2 leading-relaxed">
{icon} {title}
</h3>
<p className="text-gray-700 mb-0">{description}</p>
</div>
);
};
182 changes: 128 additions & 54 deletions packages/nextjs/pages/batches/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { BatchCta } from "../../components/batches/BatchCta";
import { Card } from "../../components/batches/Card";
import { formatDate } from "../../utils/batches/formatDate";
import type { GetStaticProps } from "next";
import { Footer } from "~~/components/Footer";
import { MetaHeader } from "~~/components/MetaHeader";
Expand Down Expand Up @@ -31,14 +34,6 @@ interface PageProps {
openBatchStartDate: number | null;
}

const formatDate = (timestamp: number): string => {
return new Date(timestamp).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
};

// Custom header for the batches page since the "Go to app" button is different
const BatchesHeader = () => {
return (
Expand Down Expand Up @@ -98,7 +93,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>
Expand All @@ -108,23 +103,34 @@ 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 ">What are BuidlGuidl Batches?</h2>
<div className="space-y-4 text-gray-700">
<p>
<p className="text-lg mb-10">
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.
</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.
the next step in your journey as a web3 developer! 🚀
</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-10">
<Card
icon="🌐"
title="Open-Source in Web3"
description="Take your first steps into web3 open-source development."
/>
<Card
icon="🔧"
title="GitHub Contributions"
description="Learn to submit PRs, manage issues, and review code effectively."
/>
<Card
icon="✨"
title="Build Apps"
description="Create a web3 app collaboratively with other builders."
/>
<Card
icon="🛠️"
title="Solidity Skills"
description="Refine and practice your Solidity skills with further challenges."
/>
</div>
</div>
</div>
<div className="lg:w-1/2">
Expand All @@ -137,24 +143,113 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
/>
</div>
</div>

{/* Next Batch CTA */}
<BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />
</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="grid grid-cols-1 gap-4">
<div className="space-y-4 p-4">
<h3 className="text-xl font-semibold">🚀 GitHub Mastery</h3>
<ul className="space-y-2">
<li className="flex">
<span className="mr-2">•</span>
<span>Submit your first PR the right way</span>
</li>
<li className="flex">
<span className="mr-2">•</span>
<span>Create and manage issues effectively</span>
</li>
<li className="flex">
<span className="mr-2">•</span>
<span>Review code from fellow participants</span>
</li>
<li className="flex">
<span className="mr-2">•</span>
<span>Open-source etiquette and best practices</span>
</li>
</ul>
</div>

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

{/* <div className="grid grid-cols-1 md:grid-cols-2 gap-10"> */}

{/* 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-10">
<Card
icon="📚"
title="GitHub Repository"
description="Each batch has its own dedicated repository for collaboration"
/>
<Card
icon="💬"
title="Community Support"
description="Connect with peers and mentors in a dedicated Telegram group"
/>
<Card
icon="🎯"
title="Learning Journey"
description="Complete challenges and contribute to open source projects"
/>
<Card
icon="🚀"
title="Final Project"
description="Build your project and get a chance to receive a grant!"
/>
</div>
</div>
</div>

<div className="lg:w-1/2">
<Image
src="/assets/bg-batches-how-batches-work.png"
Expand All @@ -169,31 +264,10 @@ const Batches = ({ batchData, openBatchNumber, openBatchStartDate }: PageProps)
</div>

{/* CTA and the batch table */}
<div className="bg-[#EDEFFF] pt-16 lg:pt-24 pb-16">
<div className="bg-[#EDEFFF] pt-16 lg:pt-8 pb-16">
<div className="container max-w-[90%] lg:max-w-6xl mx-auto px-4 lg:px-12">
{/* Next Batch CTA */}
Pabl0cks marked this conversation as resolved.
Show resolved Hide resolved
<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">
Batch #{openBatchNumber}
</h3>
<p className="text-white pr-2">
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 lg:mr-10"
>
Go SpeedRunEthereum
</TrackedLink>
</div>
</div>
</div>
<BatchCta openBatchNumber={openBatchNumber} openBatchStartDate={openBatchStartDate} />

<div className="flex justify-center items-center mb-8">
<Image src={"/assets/bg-batches-winners.svg"} alt={"Winners"} width={50} height={50} className="mr-3" />
Expand Down
7 changes: 7 additions & 0 deletions packages/nextjs/utils/batches/formatDate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const formatDate = (timestamp: number): string => {
return new Date(timestamp).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
};
Loading