feat: frontend ui refactor

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_RPC_URL=

.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

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 (
+    <section className="pt-[160px] pb-[208px] flex justify-center gap-x-[60px] items-center">
+      <div className="max-w-[435px]">
+        <h2 className="text-[40px] font-bold text-[#0F265C] mb-8 leading-[110%]">
+          Join Our Community of Book Lovers
+        </h2>
+
+        <button className="bg-[#096CFF] text-white px-8 py-4 rounded-[16px] text-sm mb-[60px] flex items-center justify-center space-x-2">
+          <span>Join Community</span>
+          <span className="inline-flex items-center">
+            <svg
+              width="18"
+              height="16"
+              viewBox="0 0 27 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-4 w-auto"
+            >
+              <path
+                d="M17.6 1.4L23.2 7H0V9H23.2L17.6 14.6L19 16L27 8L19 0L17.6 1.4Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+        </button>
+
+        <div className="flex items-center gap-x-[53px] mt-8 bg-[#D6ECFF] p-6 rounded-[8px]">
+          <div>
+            <p className="text-[#000B21] text-lg/[26px] mb-4 font-normal">
+              Our Community
+            </p>
+            <div className="flex -space-x-2 mr-4">
+              {avatarImages.map((imgSrc, index) => (
+                <div
+                  key={index}
+                  className="h-8 w-8 rounded-full bg-red-400 overflow-hidden"
+                >
+                  <Image
+                    src={imgSrc}
+                    alt={`Community member ${index + 1}`}
+                    width={32}
+                    height={32}
+                    className="h-8 w-8 rounded-full"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <p className="text-[28px] leading-[36px] mb-1 font-bold text-[#0F265C]">
+              40k+
+            </p>
+            <p className="text-[#454545] text-sm">Book lovers Joined</p>
+          </div>
+        </div>
+      </div>
+
+      <Image
+        src={Image3}
+        alt="Readers community photo"
+        className="object-cover rounded-lg w-[513px] h-[380px]"
+      />
+    </section>
+  );
+}
+
+export default JoinOurCommunity;

src/app/about-us/components/WhatIsChainLib.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const SectionCard = ({
+  title,
+  content,
+}: {
+  title: string;
+  content: string;
+}) => (
+  <div className="max-w-[616px]">
+    <h2 className="font-semibold mb-2 border-[#096CFF] border-[0.5px] py-2 px-4 text-[#000B21] text-sm/5 bg-[#096CFF3D] rounded-[8px] w-fit">
+      {title}
+    </h2>
+    <p className="text-[#5D5D5D] text-[18px]/[26px]">{content}</p>
+  </div>
+);
+
+function WhatIsChainLib() {
+  return (
+    <section className="py-[120px] px-[60px] flex justify-between md:flex-row flex-col gap-8">
+      <SectionCard
+        title="What is Chainlib?"
+        content="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."
+      />
+      <SectionCard
+        title="Why Chainlib Exists?"
+        content="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."
+      />
+    </section>
+  );
+}
+
+export default WhatIsChainLib;

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;
+}) => (
+  <div className="bg-[#F5FAFD] border-[0.5px] border-[#D6ECFF] px-4 py-2 rounded-lg flex items-center gap-x-8">
+    <Icon />
+    <div className="max-w-[255px]">
+      <h3 className="text-base font-bold text-[#000B21] mb-2">{title}</h3>
+      <p className="text-[#5D5D5D] text-sm/[18px]">{description}</p>
+    </div>
+  </div>
+);
+
+function WhatMakesUsDifferent() {
+  return (
+    <section className="py-[60px] px-6 md:px-[60px]">
+      <div className="flex flex-col md:flex-row gap-x-[110px]">
+        <h2 className="text-[40px] font-bold text-[#0F265C] max-w-[356px]">
+          What Makes Us Different
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
+          <FeatureCard
+            icon={DecentralizedIcon}
+            title="Decentralized Storage"
+            description="Books live on IPFS, never locked behind servers."
+          />
+          <FeatureCard
+            icon={NftCircleIcon}
+            title="NFT Publishing"
+            description="Every published work is a tradable asset, linked to a tokenbound account."
+          />
+          <FeatureCard
+            icon={SmartContractIcon}
+            title="Smart Contracts"
+            description="Royalties, rights, and revenue handled transparently and automatically."
+          />
+          <FeatureCard
+            icon={RewardIcon}
+            title="Reader Rewards"
+            description="Read, review, and grow your rank in our engaged reading community."
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default WhatMakesUsDifferent;