From 0a5a0d28676f20cdb0cf1626b0a604b780743c68 Mon Sep 17 00:00:00 2001 From: Stephanie Egbuonu <100955511+stephanniegb@users.noreply.github.com> Date: Sun, 15 Jun 2025 22:12:43 +0100 Subject: [PATCH] chore: learn page --- app/learn/components/EasySteps.tsx | 38 +++++----- .../components/HowToStartHeroSection .tsx | 65 +++++++----------- app/learn/components/StepBlock.tsx | 35 ++++++---- app/learn/layout.tsx | 6 +- public/how-to-start.png | Bin 0 -> 213443 bytes 5 files changed, 71 insertions(+), 73 deletions(-) create mode 100644 public/how-to-start.png diff --git a/app/learn/components/EasySteps.tsx b/app/learn/components/EasySteps.tsx index 631688b..d4d69d7 100644 --- a/app/learn/components/EasySteps.tsx +++ b/app/learn/components/EasySteps.tsx @@ -14,55 +14,55 @@ function EasySteps() { ); }; return ( -
-
-

- Easy Steps You Can't - Miss -

-

- TokenGiver makes fundraising and donating a seamless experience with +

+
+

+ Easy Steps{" "} + You Can't Miss +

+

+ Token Giver makes fundraising and donating a seamless experience with cutting-edge blockchain technology.

Donations Fundraisers
-
-

+
+

{currentTab === "donations" ? "For Donors" : "For Fundraisers"}

-
+
{currentTab === "donations" ? donorSteps.map((step) => ) : fundraiserSteps.map((step) => ( diff --git a/app/learn/components/HowToStartHeroSection .tsx b/app/learn/components/HowToStartHeroSection .tsx index 0349baf..2031b31 100644 --- a/app/learn/components/HowToStartHeroSection .tsx +++ b/app/learn/components/HowToStartHeroSection .tsx @@ -1,49 +1,34 @@ function HowToStartHeroSection() { return ( -
-

- How to Start TokenGiver -

-

- Start Fundraising with +
+

How to get started on token giver

+

+ Start Fundraising With
- TokenGiver Today + + Token Giver Today +

-
- -
-

- Start Your - - {" "} - Fundraising -
{" "} - - Journey Today -

-

- Join TokenGiver and turn your vision into reality. Together, we can - make a difference one donation at a time. -

-
-
-
-

- At TokenGiver, our mission is to revolutionize the world of - fundraising by merging the best of blockchain technology with the - spirit of giving. We aim to create a world where every donation is not - only impactful but also secure, transparent, and accountable. -

-
- +
+
+ How to start with TokenGiver
+ +

+ At TokenGiver, our mission is to revolutionize the world of fundraising + by merging the best of blockchain technology with the spirit of giving. + We aim to create a world where every donation is not only impactful but + also secure, transparent, and accountable. +

+ +
); } diff --git a/app/learn/components/StepBlock.tsx b/app/learn/components/StepBlock.tsx index 415a090..6ac49a0 100644 --- a/app/learn/components/StepBlock.tsx +++ b/app/learn/components/StepBlock.tsx @@ -11,31 +11,40 @@ import React from "react"; function StepBlock({ step }: { step: Step }) { return (
-
- +
+ -
-

+ +
+

+ Step{" "} + + {step.id + 1} + +

+

{step.title} -

-

{step.subtext}

-
    +

+

{step.subtext}

+