Skip to content

Commit 2d10d22

Browse files
IwueseiterIwueseiter
authored
Nft publishing (#31)
* feat: implemented publish nft edition page * fix: styling and responsiveness * refac:about chainlib and landing page * refac:landing page * feat:added Navbar component
1 parent 234e888 commit 2d10d22

File tree

4 files changed

+73
-209
lines changed

4 files changed

+73
-209
lines changed

‎src/app/about-us/page.tsx‎

Lines changed: 4 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -2,153 +2,22 @@
22

33
import Image from "next/image";
44
import Link from "next/link";
5-
import { useState } from "react";
65
import Image2 from "@/assets/Images/image.png";
76
import Image3 from "@/assets/Images/footerimage.png";
87
import Image4 from "@/assets/Images/ImageLogo.png";
98
import Imagetiny1 from "@/assets/Images/1.png";
109
import Imagetiny2 from "@/assets/Images/2.png";
11-
// import Imagetiny3 from "@/assets/Images/5.png";
1210
import Imagetiny4 from "@/assets/Images/4.png";
1311
import Imagetiny5 from "@/assets/Images/5.png";
1412

15-
export default function About() {
16-
const [isMenuOpen, setIsMenuOpen] = useState(false);
17-
18-
const toggleMenu = () => {
19-
setIsMenuOpen(!isMenuOpen);
20-
};
21-
13+
export default function About() {
2214
return (
2315
<div className="min-h-screen flex flex-col">
24-
{/* Navigation */}
25-
<header className="bg-white shadow-sm">
26-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
27-
<div className="flex justify-between h-16 items-center">
28-
<div className="flex items-center">
29-
<Link href="/">
30-
<span className="flex items-center cursor-pointer">
31-
<Image
32-
src={Image4}
33-
alt="Logo"
34-
width={24}
35-
height={24}
36-
className="h-9 w-9"
37-
/>
38-
{/* </div> */}
39-
<span className="ml-2 text-[#0F265C] text-lg font-medium">
40-
ChainLib
41-
</span>
42-
</span>
43-
</Link>
44-
</div>
45-
46-
{/* Desktop Navigation */}
47-
<nav className="hidden md:flex space-x-8">
48-
<Link href="/" className="text-gray-500 hover:text-gray-900">
49-
Home
50-
</Link>
51-
<Link href="/books" className="text-blue-600 font-medium">
52-
Books
53-
</Link>
54-
<Link href="/how-it-works" className="text-blue-600 font-medium">
55-
How It Works
56-
</Link>
57-
<Link
58-
href="/about-us"
59-
className="bg-blue-100 px-3 py-1 rounded-full text-gray-500 hover:text-gray-900"
60-
>
61-
About ChainLib
62-
</Link>
63-
</nav>
64-
65-
<div className="hidden md:flex items-center space-x-4">
66-
<button className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">
67-
Log In
68-
</button>
69-
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
70-
Sign Up
71-
</button>
72-
</div>
73-
74-
{/* Mobile menu button */}
75-
<div className="md:hidden">
76-
<button
77-
onClick={toggleMenu}
78-
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
79-
>
80-
<span className="sr-only">Open main menu</span>
81-
<svg
82-
className="h-6 w-6"
83-
fill="none"
84-
viewBox="0 0 24 24"
85-
stroke="currentColor"
86-
>
87-
<path
88-
strokeLinecap="round"
89-
strokeLinejoin="round"
90-
strokeWidth={2}
91-
d="M4 6h16M4 12h16M4 18h16"
92-
/>
93-
</svg>
94-
</button>
95-
</div>
96-
</div>
97-
</div>
98-
99-
{/* Mobile menu */}
100-
{isMenuOpen && (
101-
<div className="md:hidden">
102-
<div className="pt-2 pb-3 space-y-1">
103-
<Link
104-
href="/"
105-
className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50"
106-
>
107-
Home
108-
</Link>
109-
<Link
110-
href="/about-us"
111-
className="block px-3 py-2 text-base font-medium text-blue-600 bg-blue-50"
112-
>
113-
About Check.io
114-
</Link>
115-
<Link
116-
href="/books"
117-
className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50"
118-
>
119-
Books
120-
</Link>
121-
<Link
122-
href="/contact"
123-
className="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50"
124-
>
125-
Contact
126-
</Link>
127-
</div>
128-
<div className="pt-4 pb-3 border-t border-gray-200">
129-
<div className="flex items-center px-4 space-x-3">
130-
<button className="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">
131-
Log In
132-
</button>
133-
<button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
134-
Sign Up
135-
</button>
136-
</div>
137-
</div>
138-
</div>
139-
)}
140-
</header>
141-
14216
<main className="flex-grow">
14317
{/* Hero Section */}
14418
<div className="bg-white overflow-hidden">
14519
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
14620
<div className="text-center py-16 md:py-20">
147-
{/* <h1 className="text-3xl md:text-4xl font-bold">
148-
<span className="text-blue-600">Empowering</span> Stories,<br />
149-
<span className="text-blue-900">Decentralized</span> Freedom.
150-
</h1> */}
151-
15221
<h1 className="text-3xl md:text-4xl font-bold text-[#0F265C]">
15322
<span className="text-[#0061FF]">Empowering</span> Stories,
15423
<br />
@@ -158,7 +27,6 @@ export default function About() {
15827
</div>
15928
</div>
16029

161-
{/* People Banner */}
16230
<div className="bg-white">
16331
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
16432
<div className="relative h-24 md:h-32">
@@ -179,7 +47,6 @@ export default function About() {
17947
<div>
18048
<h2 className="text-lg font-semibold text-[#096CFF] mb-2">
18149
<span className="bg-gray-100 px-2 py-1 rounded">
182-
{/* {" "} */}
18350
What is Chainlib?
18451
</span>
18552
</h2>
@@ -195,7 +62,6 @@ export default function About() {
19562
<div>
19663
<h2 className="text-lg font-semibold text-blue-600 mb-2">
19764
<span className="bg-gray-100 px-2 py-1 rounded">
198-
{/* {" "} */}
19965
Why Chainlib Exists?
20066
</span>
20167
</h2>
@@ -294,7 +160,6 @@ export default function About() {
294160
</div>
295161
</div>
296162

297-
{/* Smart Contracts Feature */}
298163
<div className="bg-gray-50 p-6 rounded-lg flex items-start">
299164
<div className="flex-shrink-0 mr-4">
300165
<div className="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
@@ -305,7 +170,6 @@ export default function About() {
305170
fill="none"
306171
xmlns="http://www.w3.org/2000/svg"
307172
>
308-
{/* <g clip-path="url(#clip0_67_2264)"> */}
309173
<g clipPath="url(#clip0_67_2264)">
310174
<g opacity="0.7">
311175
<path
@@ -519,21 +383,19 @@ export default function About() {
519383
</h2>
520384
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md text-sm font-medium mb-4 flex items-center justify-center space-x-2">
521385
<span>Become a Member</span>{" "}
522-
{/* Optional: wrap text in span for clarity */}
523386
<span className="inline-flex items-center">
524387
{" "}
525-
{/* Ensure span aligns well */}
526388
<svg
527-
width="18" // Adjusted width slightly for better proportion with h-4
389+
width="18"
528390
height="16"
529391
viewBox="0 0 27 16"
530392
fill="none"
531393
xmlns="http://www.w3.org/2000/svg"
532-
className="h-4 w-auto" // Use Tailwind for size, aligns with text-sm
394+
className="h-4 w-auto"
533395
>
534396
<path
535397
d="M17.6 1.4L23.2 7H0V9H23.2L17.6 14.6L19 16L27 8L19 0L17.6 1.4Z"
536-
fill="currentColor" // Inherit text color (white)
398+
fill="currentColor"
537399
/>
538400
</svg>
539401
</span>
@@ -628,7 +490,6 @@ export default function About() {
628490
height={24}
629491
className="h-6 w-6"
630492
/>
631-
{/* </div> */}
632493
</div>
633494
<span className="font-bold text-gray-900">ChainLib</span>
634495
</div>
@@ -674,7 +535,6 @@ export default function About() {
674535
<circle cx="4" cy="4" r="2"></circle>
675536
</svg>
676537
</a>
677-
{/* Add more social icons as needed */}
678538
<a
679539
href="#"
680540
aria-label="ChainLib on LinkedIn"
@@ -699,7 +559,6 @@ export default function About() {
699559
</div>
700560
</div>
701561

702-
{/* Navigation Links */}
703562
<div className="grid grid-cols-2 gap-8 md:gap-16">
704563
<div>
705564
<h3 className="text-sm font-semibold text-gray-700 mb-3">
@@ -722,7 +581,6 @@ export default function About() {
722581
Books
723582
</Link>
724583
</li>
725-
{/* Ensure these links point to the correct pages */}
726584
<li>
727585
<Link
728586
href="/how-it-works"
@@ -767,7 +625,6 @@ export default function About() {
767625
</div>
768626
</div>
769627

770-
{/* Copyright */}
771628
<div className="mt-8 pt-6 border-t border-gray-200 text-center md:text-left">
772629
<p className="text-xs text-gray-500">
773630
© {new Date().getFullYear()} ChainLib. All rights reserved.

‎src/app/landing-page/page.tsx‎

Lines changed: 9 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,21 @@
1-
import Image from "next/image";
2-
import Link from "next/link";
3-
import Image4 from "@/assets/Images/ImageLogo.png";
41
import Hero from "@/components/landingpage/Hero";
52
import Tagline from "@/components/landingpage/Tagline";
63
import Nft from "@/components/landingpage/Nft";
74
import Authors from "@/components/landingpage/Authors";
85
import Banner from "@/components/landingpage/Banner";
96
import Community from "@/components/landingpage/Community";
107
import Partener from "@/components/landingpage/Partener";
11-
import Footer from "@/components/landingpage/Footer";
128

139
export default function landing() {
1410
return (
15-
<>
16-
<div className="flex justify-between h-16 items-center">
17-
<div className="flex items-center">
18-
<Link href="/">
19-
<span className="flex items-center cursor-pointer">
20-
<Image
21-
src={Image4}
22-
alt="Logo"
23-
width={24}
24-
height={24}
25-
className="h-9 w-9"
26-
/>
27-
{/* </div> */}
28-
<span className="ml-2 text-[#0F265C] text-lg font-medium">
29-
ChainLib
30-
</span>
31-
</span>
32-
</Link>
33-
</div>
34-
35-
{/* Desktop Navigation */}
36-
<nav className="hidden md:flex space-x-8">
37-
<Link href="/" className="text-gray-500 hover:text-gray-900">
38-
Home
39-
</Link>
40-
<Link href="/books" className="text-gray-500 font-medium hover:text-gray-900">
41-
Books
42-
</Link>
43-
<Link href="/how-it-works" className="text-gray-500 font-medium hover:text-gray-900">
44-
How It Works
45-
</Link>
46-
<Link
47-
href="/about-us"
48-
className="text-gray-500 hover:text-gray-900"
49-
>
50-
About ChainLib
51-
</Link>
52-
</nav>
53-
54-
<div className="hidden md:flex items-center space-x-4">
55-
<button className="bg-gray-100 hover:bg-gray-200 text-gray-800 px-4 py-2 rounded-md text-sm font-medium">
56-
Log In
57-
</button>
58-
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
59-
Sign Up
60-
</button>
61-
</div>
62-
</div>
63-
64-
<Hero />
65-
<Tagline />
66-
<Nft />
67-
<Banner />
68-
<Authors />
69-
<Community />
70-
<Partener />
71-
<Footer />
72-
</>
11+
<>
12+
<Hero />
13+
<Tagline />
14+
<Nft />
15+
<Banner />
16+
<Authors />
17+
<Community />
18+
<Partener />
19+
</>
7320
);
7421
}

‎src/app/layout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { Metadata } from "next";
22
import "./globals.css";
3+
import NavBar from "@/components/landingpage/NavBar";
34
import { Providers } from "@/components/blockchain/Providers";
5+
import Footer from "@/components/landingpage/Footer";
46

57
export const metadata: Metadata = {
68
title: "ChainLib",
@@ -15,7 +17,9 @@ export default function RootLayout({
1517
return (
1618
<html lang="en">
1719
<body>
20+
<NavBar />
1821
<Providers>{children}</Providers>
22+
<Footer />
1923
</body>
2024
</html>
2125
);

0 commit comments

Comments
 (0)