From d5f63a613bfeb1cd899bd287b06f35b60c7a2de5 Mon Sep 17 00:00:00 2001 From: Oshioke-Salaki Date: Tue, 1 Jul 2025 00:16:26 +0100 Subject: [PATCH 1/5] feat: frontend ui refactor --- .env.example | 1 + .gitignore | 3 +- public/heroPeopleImage.svg | 124 ++++ .../about-us/components/JoinOurCommunity.tsx | 84 +++ .../about-us/components/WhatIsChainLib.tsx | 33 + .../components/WhatMakesUsDifferent.tsx | 60 ++ src/app/about-us/page.tsx | 653 +----------------- src/app/author-profile/[authorId]/page.tsx | 13 +- src/app/author/layout.tsx | 10 +- src/app/author/page.tsx | 274 +++++--- src/app/books/read/[bookId]/page.tsx | 13 +- src/app/community/page.tsx | 15 +- src/app/how-it-works/page.tsx | 50 +- src/app/landing-page/page.tsx | 6 +- src/app/layout.tsx | 4 +- src/app/page.tsx | 10 +- src/app/svg/DecentralizedIcon.tsx | 28 + src/app/svg/Linkedin.tsx | 20 + src/app/svg/NftCircleIcon.tsx | 23 + src/app/svg/RewardIcon.tsx | 31 + src/app/svg/SmartContractIcon.tsx | 158 +++++ src/app/svg/Telegram.tsx | 22 + src/app/svg/X.tsx | 47 ++ src/app/svg/x.svg | 15 + src/components/blockchain/Providers.tsx | 58 +- .../blockchain/Wallet-connect-modal.tsx | 88 ++- src/components/blockchain/WalletProvider.tsx | 5 +- src/components/landingpage/Authors.tsx | 82 ++- src/components/landingpage/Banner.tsx | 79 +-- src/components/landingpage/Footer.tsx | 125 ++-- src/components/landingpage/Hero.tsx | 42 +- src/components/landingpage/NavBar.tsx | 84 +-- src/components/landingpage/Nft.tsx | 160 ++++- src/components/landingpage/Partener.tsx | 35 +- src/components/landingpage/Tagline.tsx | 81 ++- 35 files changed, 1380 insertions(+), 1156 deletions(-) create mode 100644 .env.example create mode 100644 public/heroPeopleImage.svg create mode 100644 src/app/about-us/components/JoinOurCommunity.tsx create mode 100644 src/app/about-us/components/WhatIsChainLib.tsx create mode 100644 src/app/about-us/components/WhatMakesUsDifferent.tsx create mode 100644 src/app/svg/DecentralizedIcon.tsx create mode 100644 src/app/svg/Linkedin.tsx create mode 100644 src/app/svg/NftCircleIcon.tsx create mode 100644 src/app/svg/RewardIcon.tsx create mode 100644 src/app/svg/SmartContractIcon.tsx create mode 100644 src/app/svg/Telegram.tsx create mode 100644 src/app/svg/X.tsx create mode 100644 src/app/svg/x.svg diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..c0a8aa8 --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +NEXT_PUBLIC_RPC_URL= \ No newline at end of file diff --git a/.gitignore b/.gitignore index 1839fd8..305fa9b 100644 --- a/.gitignore +++ b/.gitignore @@ -31,7 +31,8 @@ yarn-error.log* .pnpm-debug.log* # env files (can opt-in for committing if needed) -.env* +.env +.env.local # vercel .vercel diff --git a/public/heroPeopleImage.svg b/public/heroPeopleImage.svg new file mode 100644 index 0000000..6032231 --- /dev/null +++ b/public/heroPeopleImage.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/about-us/components/JoinOurCommunity.tsx b/src/app/about-us/components/JoinOurCommunity.tsx new file mode 100644 index 0000000..14cbfa9 --- /dev/null +++ b/src/app/about-us/components/JoinOurCommunity.tsx @@ -0,0 +1,84 @@ +import Image from "next/image"; +import React from "react"; +import Imagetiny1 from "@/assets/Images/1.png"; +import Imagetiny2 from "@/assets/Images/2.png"; +import Imagetiny4 from "@/assets/Images/4.png"; +import Imagetiny5 from "@/assets/Images/5.png"; +import Image3 from "@/assets/Images/footerimage.png"; + +const avatarImages = [ + Imagetiny5, + Imagetiny1, + Imagetiny2, + Imagetiny4, + Imagetiny1, +]; + +function JoinOurCommunity() { + return ( +
+
+

+ Join Our Community of Book Lovers +

+ + + +
+
+

+ Our Community +

+
+ {avatarImages.map((imgSrc, index) => ( +
+ {`Community +
+ ))} +
+
+
+

+ 40k+ +

+

Book lovers Joined

+
+
+
+ + Readers community photo +
+ ); +} + +export default JoinOurCommunity; diff --git a/src/app/about-us/components/WhatIsChainLib.tsx b/src/app/about-us/components/WhatIsChainLib.tsx new file mode 100644 index 0000000..a309e66 --- /dev/null +++ b/src/app/about-us/components/WhatIsChainLib.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +const SectionCard = ({ + title, + content, +}: { + title: string; + content: string; +}) => ( +
+

+ {title} +

+

{content}

+
+); + +function WhatIsChainLib() { + return ( +
+ + +
+ ); +} + +export default WhatIsChainLib; diff --git a/src/app/about-us/components/WhatMakesUsDifferent.tsx b/src/app/about-us/components/WhatMakesUsDifferent.tsx new file mode 100644 index 0000000..29c106b --- /dev/null +++ b/src/app/about-us/components/WhatMakesUsDifferent.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import DecentralizedIcon from "@/app/svg/DecentralizedIcon"; +import NftCircleIcon from "@/app/svg/NftCircleIcon"; +import RewardIcon from "@/app/svg/RewardIcon"; +import SmartContractIcon from "@/app/svg/SmartContractIcon"; + +const FeatureCard = ({ + icon: Icon, + title, + description, +}: { + icon: React.FC; + title: string; + description: string; +}) => ( +
+ +
+

{title}

+

{description}

+
+
+); + +function WhatMakesUsDifferent() { + return ( +
+
+

+ What Makes Us Different +

+ +
+ + + + +
+
+
+ ); +} + +export default WhatMakesUsDifferent; diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx index cbc745d..9c66301 100644 --- a/src/app/about-us/page.tsx +++ b/src/app/about-us/page.tsx @@ -1,637 +1,34 @@ -"use client"; - import Image from "next/image"; -import Link from "next/link"; import Image2 from "@/assets/Images/image.png"; -import Image3 from "@/assets/Images/footerimage.png"; -import Image4 from "@/assets/Images/ImageLogo.png"; -import Imagetiny1 from "@/assets/Images/1.png"; -import Imagetiny2 from "@/assets/Images/2.png"; -import Imagetiny4 from "@/assets/Images/4.png"; -import Imagetiny5 from "@/assets/Images/5.png"; +import NavBar from "@/components/landingpage/NavBar"; +import Footer from "@/components/landingpage/Footer"; +import WhatMakesUsDifferent from "./components/WhatMakesUsDifferent"; +import JoinOurCommunity from "./components/JoinOurCommunity"; +import WhatIsChainLib from "./components/WhatIsChainLib"; -export default function About() { +export default function About() { return ( -
-
- {/* Hero Section */} -
-
-
-

- Empowering Stories, -
- Decentralized Freedom. -

-
-
-
- -
-
-
- Diverse community of readers and writers -
-
-
- - {/* What is Chainlib */} -
-
-
-
-

- - What is Chainlib? - -

- -

- Chainlib is a new marketplace built on the Polygon blockchain, - where authors can publish books and readers can support them - directly. We eliminate middlemen, ensure fair compensation, - and provide a platform where creativity thrives and readers - discover unique voices. -

-
-
-

- - Why Chainlib Exists? - -

-

- We believe creators deserve fair pay for their publications. - ChainLib empowers authors to earn more from their work and - give readers direct access to their favorite writers. By using - blockchain technology, we've created a transparent and - decentralized way of supporting literary creation and - readership. -

-
-
-
-
- - {/* What Makes Us Different Section - Updated to match image */} -
-
-
-
-

- What Makes Us Different -

-
- -
-
- {/* Decentralized Storage Feature */} -
-
-
- - - - - -
-
-
-

- Decentralized Storage -

-

- Books live on IPFS, never locked behind servers. -

-
-
- - {/* NFT Publishing Feature */} -
-
-
- - - - - -
-
-
-

- NFT Publishing -

-

- Every published work is a tradable asset, linked to a - tokenbound account.{" "} -

-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

- Smart Contracts -

-

- Royalties, rights, and revenue handled transparently and - automatically. -

-
-
- - {/* Reader Rewards Feature */} -
-
-
- - - - - - - -
-
-
-

- Reader Rewards -

-

- Read, review, and grow your rank in our engaged reading - community. -

-
-
-
-
-
-
+ <> + +
+
+

+ Empowering Stories, +
+ Decentralized Freedom. +

- {/* Join Our Community */} -
-
-
-
-

- Join Our Community of Book Lovers -

- - -
-
-
- Community of readers -
-
- Community of readers -
-
- Community of readers -
-
- Community of readers -
- -
- Community of readers -
-
-
-

- Our Community -

-

- 40k+ active members -

-
-
-
- -
- Community of readers -
-
-
-
+ Diverse community of readers and writers + + +
- - {/* Footer */} - -
-
-
- {/* Logo and social icons */} -
-
-
- Logo -
- ChainLib -
- - -
- -
-
-

- Explore -

-
    -
  • - - Home - -
    • -
  • - - Books - -
    • -
  • - - How It Works - -
    • -
  • - - About - -
    • -
-
-
-

- Legal -

-
    -
  • - - Privacy Policy - -
    • -
  • - - Terms of Service - -
    • -
-
-
-
- -
-

- © {new Date().getFullYear()} ChainLib. All rights reserved. -

-
-
-
-
+