From 206aee7918213ee8eebf99bc9e676ec7eabc40e0 Mon Sep 17 00:00:00 2001 From: Chanotai Krajeam Date: Fri, 4 Oct 2024 14:06:06 +0700 Subject: [PATCH] feat: improve community page (#13) * refactor: community * feat: responsive * feat: responsive * refactor: extract const --- src/app/community/page.tsx | 18 ++- src/components/Community/Benefits.tsx | 107 +++----------- src/components/Community/CommunityHeader.tsx | 52 ++++--- src/components/Community/MemberBox.tsx | 138 ------------------- src/components/Community/OurMembers.tsx | 84 +++++++---- src/components/Home/MapInfo.tsx | 21 --- src/components/Home/Partner.tsx | 48 +------ src/components/Home/Sponsors.tsx | 7 - src/constants/benefits.tsx | 47 +++++++ src/constants/members.ts | 115 ++++++++++++++++ src/constants/partners.ts | 40 ++++++ 11 files changed, 317 insertions(+), 360 deletions(-) delete mode 100644 src/components/Community/MemberBox.tsx delete mode 100644 src/components/Home/MapInfo.tsx delete mode 100644 src/components/Home/Sponsors.tsx create mode 100644 src/constants/benefits.tsx create mode 100644 src/constants/members.ts create mode 100644 src/constants/partners.ts diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 15e980d..0c7cfb2 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -1,15 +1,13 @@ import Benefits from "@/components/Community/Benefits"; import CommunityHeader from "@/components/Community/CommunityHeader"; -import MemberBox from "@/components/Community/MemberBox"; import OurMembers from "@/components/Community/OurMembers"; export default function CommunityPage() { - return ( -
- - - - -
- ) -} \ No newline at end of file + return ( +
+ + + +
+ ); +} diff --git a/src/components/Community/Benefits.tsx b/src/components/Community/Benefits.tsx index fc6b571..c652996 100644 --- a/src/components/Community/Benefits.tsx +++ b/src/components/Community/Benefits.tsx @@ -1,100 +1,37 @@ -"use client"; - import React from "react"; import FlareComponent from "../Home/FlareComponent"; -import Connection from "./Logo/Connection"; -import Coupon from "./Logo/Coupon"; -import Internship from "./Logo/Internship"; -import Experience from "./Logo/Experience"; -import Idea from "./Logo/Idea"; -import Expert from "./Logo/Expert"; +import Container from "../Common/Container"; +import { benefits } from "@/constants/benefits"; const Benefits = () => { return ( -
-
-

- Benefits -

+
+ +
+

+ Benefits +

+
-

+

When you join our club, you'll gain unique experiences, build valuable connections, and much more. -

-
-
- -

Connection

-

- Our partners provide valuable connections that can help broaden - your professional network. By collaborating with us. -

-
+

-
- -

Coupon

-

- As part of our collaboration, you will receive exclusive coupons - that offer special privileges to join the event or special - discount. -

-
- -
- -

Internship

-

- We offer opportunities for internships with leading blockchain - companies. -

-
- -
- -

Experience

-

- Working with blockchain followers provides a unique experience in - Community Engagement. -

-
-
- -

- Idea to Impact -

-

- Collaborating with us gives you the chance to create and develop - new projects. -

-
-
- -

- Expert Insight -

-

- Benefit from the opportunity to receive valuable advice from - industry experts and speakers. -

-
+
+ {benefits.map(({ title, description, icon }, index) => ( +
+
{icon}
+
+

{title}

+

{description}

+
+
+ ))}
-
- +
); }; diff --git a/src/components/Community/CommunityHeader.tsx b/src/components/Community/CommunityHeader.tsx index 80f9146..730dbac 100644 --- a/src/components/Community/CommunityHeader.tsx +++ b/src/components/Community/CommunityHeader.tsx @@ -1,39 +1,33 @@ -"use client" - -import React from 'react'; +import React from "react"; +import Container from "../Common/Container"; const CommunityHeader: React.FC = () => { return ( -
- -
-

- COMMUNITY -

-

- Be part of something amazing! -

-
-
-
-
+
+ +
+

+ COMMUINITY +

+ +
+

+ Be part of something amazing! +

+
+
+
+
+
+
-
-
-

+ +

Explore new interests, make friends, and enjoy exciting activities. -

-

There's always something happening at our club. Be part of the blockchain adventure! -

-
+

+
); }; diff --git a/src/components/Community/MemberBox.tsx b/src/components/Community/MemberBox.tsx deleted file mode 100644 index 0033193..0000000 --- a/src/components/Community/MemberBox.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import Image from 'next/image'; -import Aim from "@/assets/members/Aim.jpeg"; -import Memee from "@/assets/members/Memee.jpeg"; -import Wawa from "@/assets/members/Wawa.jpeg"; -import Leo from "@/assets/members/ลีโอ.jpeg"; -import Amy from "@/assets/members/Amy.png"; -import Neiy from "@/assets/members/Neiy.jpeg"; -import Yeekheng from "@/assets/members/Yeekheng.jpeg"; -import Sky from "@/assets/members/สกาย.jpeg"; -import Big from "@/assets/members/Big.jpeg"; -import Noon from "@/assets/members/Noon.jpeg"; -import Thi from "@/assets/members/ธิ.jpeg"; -import Ford from "@/assets/members/ฟอร์ด.jpeg"; -import Bonus from "@/assets/members/Bonus.jpeg"; -import Ohm from "@/assets/members/Ohm.jpeg"; -import B from "@/assets/members/บี.jpeg"; -import Snow from "@/assets/members/สโนว์.jpeg"; -import Boss from "@/assets/members/Boss.jpeg"; -import Paeng from "@/assets/members/Paeng.jpeg"; -import Plon from "@/assets/members/พล.jpg"; -import Tata from "@/assets/members/ตาต้า.jpg"; -import Brunei from "@/assets/members/Brunei.jpeg"; -import Pim from "@/assets/members/Pim.jpeg"; -import V from "@/assets/members/วี.jpg"; -import Watermelon from "@/assets/members/แตงโม.jpg"; -import Chega from "@/assets/members/Chega.jpeg"; -import Putter from "@/assets/members/Putter.jpeg"; -import New from "@/assets/members/นิว.jpeg"; -import Femmy from "@/assets/members/เฟมมี่.jpeg"; -import Earth from "@/assets/members/Earth.jpeg"; -import Rada from "@/assets/members/Rada.jpeg"; -import Beam from "@/assets/members/บีม.jpeg"; -import Stang from "@/assets/members/สตางค์.jpg"; -import Float from "@/assets/members/Float.jpeg"; -import Saint from "@/assets/members/Saint.jpeg"; -import Boom from "@/assets/members/บูม.jpeg"; -import BaJang from "@/assets/members/บ๊ะจ่าง.jpeg"; -import Green from "@/assets/members/Green.jpeg"; -import Sand from "@/assets/members/Sand.jpeg"; -import Pat from "@/assets/members/ปัท.jpeg"; -import Party from "@/assets/members/ปาร์ตี้.jpeg"; -import Gundum from "@/assets/members/Gundum.jpeg"; -import Scott from "@/assets/members/Scott.jpg"; -import Om from "@/assets/members/ออม.jpeg"; -import KungTen from "@/assets/members/กุ้งเต้น.jpeg"; -import Jame from "@/assets/members/Jame.jpeg"; -import Sharp from "@/assets/members/Sharp.jpeg"; -import Pat2 from "@/assets/members/แพท.png"; -import Jukjan from "@/assets/members/จั๊กจั่น.jpeg"; -import Lin from "@/assets/members/Lin.jpeg"; -import Stamp from "@/assets/members/Stamp.jpg"; -import Juer from "@/assets/members/จื้อ.jpeg"; -import Winter from "@/assets/members/วินเทอร์.jpeg"; -import Meen from "@/assets/members/Meen.jpeg"; -import Titan from "@/assets/members/Titan.jpeg"; -import Min from "@/assets/members/มิ้น.jpeg"; - -export default function MemberBox() { - const members = [ - { name: "Aim", image: Aim }, - { name: "Memee", image: Memee }, - { name: "Wawa", image: Wawa }, - { name: "ลีโอ", image: Leo }, - { name: "Amy", image: Amy }, - { name: "Neiy", image: Neiy }, - { name: "Yeekheng", image: Yeekheng }, - { name: "สกาย", image: Sky }, - { name: "Big", image: Big }, - { name: "Noon", image: Noon }, - { name: "ธิ", image: Thi }, - { name: "ฟอร์ด", image: Ford }, - { name: "Bonus", image: Bonus }, - { name: "Ohm", image: Ohm }, - { name: "บี", image: B }, - { name: "สโนว์", image: Snow }, - { name: "Boss", image: Boss }, - { name: "Paeng", image: Paeng }, - { name: "พล", image: Plon }, - { name: "ตาต้า", image: Tata }, - { name: "Brunei", image: Brunei }, - { name: "Pim", image: Pim }, - { name: "วี", image: V }, - { name: "แตงโม", image: Watermelon }, - { name: "Chega", image: Chega }, - { name: "Putter", image: Putter }, - { name: "นิว", image: New }, - { name: "เฟมมี่", image: Femmy }, - { name: "Earth", image: Earth }, - { name: "Rada", image: Rada }, - { name: "บีม", image: Beam }, - { name: "สตางค์", image: Stang }, - { name: "Float", image: Float }, - { name: "Saint", image: Saint }, - { name: "บูม", image: Boom }, - { name: "บ๊ะจ่าง", image: BaJang }, - { name: "Green", image: Green }, - { name: "Sand", image: Sand }, - { name: "ปัท", image: Pat }, - { name: "ปาร์ตี้", image: Party }, - { name: "Gundum", image: Gundum }, - { name: "Scott", image: Scott }, - { name: "ออม", image: Om }, - { name: "กุ้งเต้น", image: KungTen }, - { name: "Jame", image: Jame }, - { name: "Sharp", image: Sharp }, - { name: "แพท", image: Pat2 }, - { name: "จั๊กจั่น", image: Jukjan }, - { name: "Lin", image: Lin }, - { name: "Stamp", image: Stamp }, - { name: "จื้อ", image: Juer }, - { name: "วินเทอร์", image: Winter }, - { name: "Meen", image: Meen }, - { name: "Titan", image: Titan }, - { name: "มิ้น", image: Min }, - ]; - - return ( -
-
- {members.map((member, index) => ( -
- {member.name} -

{member.name}

-
- ))} -
-
- ); -} \ No newline at end of file diff --git a/src/components/Community/OurMembers.tsx b/src/components/Community/OurMembers.tsx index 75850d1..2a63356 100644 --- a/src/components/Community/OurMembers.tsx +++ b/src/components/Community/OurMembers.tsx @@ -1,36 +1,66 @@ -"use client" +import React from "react"; +import Container from "../Common/Container"; -import React from 'react'; +import Image from "next/image"; +import { members } from "@/constants/members"; const OurMembers: React.FC = () => { - return ( -
- -
-

- Members -

-

- Our Members -

-
-
-
-
-
+ return ( +
+ +
+
+

+ MEMBERS +

+ +
+

+ Our Members +

+
+
+
+
+
-
-

CUBS is a community consisting of more than 55 members, bringing together individuals

-

who share a keen interest in blockchain technology.

+
+ +
+

+ CUBS is a community consisting of more than{" "} + {members.length} members, + bringing together individuals +
+ who share a keen interest in blockchain technology. +

+
+
+ +
+ {members.map((member, index) => ( +
+
+ {member.name} +
+

+ {member.name} +

+ ))}
- ); + +
+ ); }; export default OurMembers; diff --git a/src/components/Home/MapInfo.tsx b/src/components/Home/MapInfo.tsx deleted file mode 100644 index 56b2c27..0000000 --- a/src/components/Home/MapInfo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -const MapInfo: React.FC = () => { - return ( - - ); -}; - -export default MapInfo; diff --git a/src/components/Home/Partner.tsx b/src/components/Home/Partner.tsx index 7367444..e7f0713 100644 --- a/src/components/Home/Partner.tsx +++ b/src/components/Home/Partner.tsx @@ -1,58 +1,20 @@ +import { partners } from "@/constants/partners"; import Container from "../Common/Container"; import Image from "next/image"; -import SCBX from "@/assets/partners/scb-x.png"; -import BitkubExchange from "@/assets/partners/bitkub-exchange.png"; -import ETHPadThai from "@/assets/partners/ethpadthai.png"; -import CryptoMind from "@/assets/partners/cryptomind.png"; -import IC from "@/assets/partners/ic.png"; -import Velo from "@/assets/partners/velo.png"; -import BinanceTH from "@/assets/partners/binance-th.png"; - const Partner = () => { - const partners = [ - { - name: "SCBx", - image: SCBX, - }, - { - name: "Bitkub Exchange", - image: BitkubExchange, - }, - { - name: "ETHPadThai", - image: ETHPadThai, - }, - { - name: "CryptoMind", - image: CryptoMind, - }, - { - name: "IC", - image: IC, - }, - { - name: "Velo", - image: Velo, - }, - { - name: "Binance TH", - image: BinanceTH, - }, - ]; - return (

Trusted by 100+ Companies across the globe!

- {partners.map((partner) => ( -
+ {partners.map(({ name, image }) => ( +
{partner.name} diff --git a/src/components/Home/Sponsors.tsx b/src/components/Home/Sponsors.tsx deleted file mode 100644 index 4eab1f7..0000000 --- a/src/components/Home/Sponsors.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Sponsors() { - return ( -
- SPONSORS -
- ) -} \ No newline at end of file diff --git a/src/constants/benefits.tsx b/src/constants/benefits.tsx new file mode 100644 index 0000000..3548bd1 --- /dev/null +++ b/src/constants/benefits.tsx @@ -0,0 +1,47 @@ +import Connection from "@/components/Community/Logo/Connection"; +import Coupon from "@/components/Community/Logo/Coupon"; +import Internship from "@/components/Community/Logo/Internship"; +import Experience from "@/components/Community/Logo/Experience"; +import Idea from "@/components/Community/Logo/Idea"; +import Expert from "@/components/Community/Logo/Expert"; + +const benefits = [ + { + title: "Connection", + description: + "Our partners provide valuable connections that can help broaden your professional network. By collaborating with us.", + icon: , + }, + { + title: "Coupon", + description: + "As part of our collaboration, you will receive exclusive coupons that offer special privileges to join the event or special discount.", + icon: , + }, + { + title: "Internship", + description: + "We offer opportunities for internships with leading blockchain companies.", + icon: , + }, + { + title: "Experience", + description: + "Working with blockchain followers provides a unique experience in Community Engagement.", + icon: , + }, + { + title: "Idea to Impact", + description: + "Collaborating with us gives you the chance to create and develop new projects.", + icon: , + }, + { + title: "Expert Insight", + description: + "Benefit from the opportunity to receive valuable advice from industry experts and speakers.", + icon: , + }, +]; + +export { benefits }; diff --git a/src/constants/members.ts b/src/constants/members.ts new file mode 100644 index 0000000..086ead8 --- /dev/null +++ b/src/constants/members.ts @@ -0,0 +1,115 @@ +import Aim from "@/assets/members/Aim.jpeg"; +import Memee from "@/assets/members/Memee.jpeg"; +import Wawa from "@/assets/members/Wawa.jpeg"; +import Leo from "@/assets/members/ลีโอ.jpeg"; +import Amy from "@/assets/members/Amy.png"; +import Neiy from "@/assets/members/Neiy.jpeg"; +import Yeekheng from "@/assets/members/Yeekheng.jpeg"; +import Sky from "@/assets/members/สกาย.jpeg"; +import Big from "@/assets/members/Big.jpeg"; +import Noon from "@/assets/members/Noon.jpeg"; +import Thi from "@/assets/members/ธิ.jpeg"; +import Ford from "@/assets/members/ฟอร์ด.jpeg"; +import Bonus from "@/assets/members/Bonus.jpeg"; +import Ohm from "@/assets/members/Ohm.jpeg"; +import B from "@/assets/members/บี.jpeg"; +import Snow from "@/assets/members/สโนว์.jpeg"; +import Boss from "@/assets/members/Boss.jpeg"; +import Paeng from "@/assets/members/Paeng.jpeg"; +import Plon from "@/assets/members/พล.jpg"; +import Tata from "@/assets/members/ตาต้า.jpg"; +import Brunei from "@/assets/members/Brunei.jpeg"; +import Pim from "@/assets/members/Pim.jpeg"; +import V from "@/assets/members/วี.jpg"; +import Watermelon from "@/assets/members/แตงโม.jpg"; +import Chega from "@/assets/members/Chega.jpeg"; +import Putter from "@/assets/members/Putter.jpeg"; +import New from "@/assets/members/นิว.jpeg"; +import Femmy from "@/assets/members/เฟมมี่.jpeg"; +import Earth from "@/assets/members/Earth.jpeg"; +import Rada from "@/assets/members/Rada.jpeg"; +import Beam from "@/assets/members/บีม.jpeg"; +import Stang from "@/assets/members/สตางค์.jpg"; +import Float from "@/assets/members/Float.jpeg"; +import Saint from "@/assets/members/Saint.jpeg"; +import Boom from "@/assets/members/บูม.jpeg"; +import BaJang from "@/assets/members/บ๊ะจ่าง.jpeg"; +import Green from "@/assets/members/Green.jpeg"; +import Sand from "@/assets/members/Sand.jpeg"; +import Pat from "@/assets/members/ปัท.jpeg"; +import Party from "@/assets/members/ปาร์ตี้.jpeg"; +import Gundum from "@/assets/members/Gundum.jpeg"; +import Scott from "@/assets/members/Scott.jpg"; +import Om from "@/assets/members/ออม.jpeg"; +import KungTen from "@/assets/members/กุ้งเต้น.jpeg"; +import Jame from "@/assets/members/Jame.jpeg"; +import Sharp from "@/assets/members/Sharp.jpeg"; +import Pat2 from "@/assets/members/แพท.png"; +import Jukjan from "@/assets/members/จั๊กจั่น.jpeg"; +import Lin from "@/assets/members/Lin.jpeg"; +import Stamp from "@/assets/members/Stamp.jpg"; +import Juer from "@/assets/members/จื้อ.jpeg"; +import Winter from "@/assets/members/วินเทอร์.jpeg"; +import Meen from "@/assets/members/Meen.jpeg"; +import Titan from "@/assets/members/Titan.jpeg"; +import Min from "@/assets/members/มิ้น.jpeg"; + +const members = [ + { name: "Aim", image: Aim }, + { name: "Memee", image: Memee }, + { name: "Wawa", image: Wawa }, + { name: "ลีโอ", image: Leo }, + { name: "Amy", image: Amy }, + { name: "Neiy", image: Neiy }, + { name: "Yeekheng", image: Yeekheng }, + { name: "สกาย", image: Sky }, + { name: "Big", image: Big }, + { name: "Noon", image: Noon }, + { name: "ธิ", image: Thi }, + { name: "ฟอร์ด", image: Ford }, + { name: "Bonus", image: Bonus }, + { name: "Ohm", image: Ohm }, + { name: "บี", image: B }, + { name: "สโนว์", image: Snow }, + { name: "Boss", image: Boss }, + { name: "Paeng", image: Paeng }, + { name: "พล", image: Plon }, + { name: "ตาต้า", image: Tata }, + { name: "Brunei", image: Brunei }, + { name: "Pim", image: Pim }, + { name: "วี", image: V }, + { name: "แตงโม", image: Watermelon }, + { name: "Chega", image: Chega }, + { name: "Putter", image: Putter }, + { name: "นิว", image: New }, + { name: "เฟมมี่", image: Femmy }, + { name: "Earth", image: Earth }, + { name: "Rada", image: Rada }, + { name: "บีม", image: Beam }, + { name: "สตางค์", image: Stang }, + { name: "Float", image: Float }, + { name: "Saint", image: Saint }, + { name: "บูม", image: Boom }, + { name: "บ๊ะจ่าง", image: BaJang }, + { name: "Green", image: Green }, + { name: "Sand", image: Sand }, + { name: "ปัท", image: Pat }, + { name: "ปาร์ตี้", image: Party }, + { name: "Gundum", image: Gundum }, + { name: "Scott", image: Scott }, + { name: "ออม", image: Om }, + { name: "กุ้งเต้น", image: KungTen }, + { name: "Jame", image: Jame }, + { name: "Sharp", image: Sharp }, + { name: "แพท", image: Pat2 }, + { name: "จั๊กจั่น", image: Jukjan }, + { name: "Lin", image: Lin }, + { name: "Stamp", image: Stamp }, + { name: "จื้อ", image: Juer }, + { name: "วินเทอร์", image: Winter }, + { name: "Meen", image: Meen }, + { name: "Titan", image: Titan }, + { name: "มิ้น", image: Min }, +]; + +export { members }; diff --git a/src/constants/partners.ts b/src/constants/partners.ts new file mode 100644 index 0000000..59ed194 --- /dev/null +++ b/src/constants/partners.ts @@ -0,0 +1,40 @@ +import SCBX from "@/assets/partners/scb-x.png"; +import BitkubExchange from "@/assets/partners/bitkub-exchange.png"; +import ETHPadThai from "@/assets/partners/ethpadthai.png"; +import CryptoMind from "@/assets/partners/cryptomind.png"; +import IC from "@/assets/partners/ic.png"; +import Velo from "@/assets/partners/velo.png"; +import BinanceTH from "@/assets/partners/binance-th.png"; + +const partners = [ + { + name: "SCBx", + image: SCBX, + }, + { + name: "Bitkub Exchange", + image: BitkubExchange, + }, + { + name: "ETHPadThai", + image: ETHPadThai, + }, + { + name: "CryptoMind", + image: CryptoMind, + }, + { + name: "IC", + image: IC, + }, + { + name: "Velo", + image: Velo, + }, + { + name: "Binance TH", + image: BinanceTH, + }, +]; + +export { partners };