Skip to content

Commit

Permalink
feat: improve community page (#13)
Browse files Browse the repository at this point in the history 
* refactor: community

* feat: responsive

* feat: responsive

* refactor: extract const
  • Loading branch information
@boomchanotai
boomchanotai authored Oct 4, 2024
1 parent 9ac22f4 commit 206aee7
Show file tree
Hide file tree
Showing 11 changed files with 317 additions and 360 deletions.
18 changes: 8 additions & 10 deletions src/app/community/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<CommunityHeader />
<Benefits />
<OurMembers />
<MemberBox/>
</div>
)
}
return (
<div>
<CommunityHeader />
<Benefits />
<OurMembers />
</div>
);
}
107 changes: 22 additions & 85 deletions src/components/Community/Benefits.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="w-full bg-gradient-to-b from-[#0F082C] via-black to-black py-16">
<div className="container mx-auto px-4">
<h1 className="text-7xl font-bold text-center text-gradient mt-1">
Benefits
</h1>
<div className="bg-gradient-to-b from-[#0F082C] via-black to-black py-16">
<Container>
<div className="flex flex-col justify-center items-center">
<h2 className="text-7xl font-bold text-center bg-gradient-to-r from-[#EE0099] to-[#00D4FF] bg-clip-text text-transparent">
Benefits
</h2>
</div>
<div className="flex justify-center items-center mb-10">
<FlareComponent />
</div>
<h2 className="text-lg font-md text-center mb-10">
<p className="text-lg font-md text-center mb-10">
When you join our club, you&#39;ll gain unique experiences, build
valuable connections, and much more.
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div className="flex flex-col items-center">
<Connection />
<h3 className="mt-4 text-xl font-bold text-white">Connection</h3>
<p className="text-gray-300 text-center mt-2">
Our partners provide valuable connections that can help broaden
your professional network. By collaborating with us.
</p>
</div>
</p>

<div className="flex flex-col items-center">
<Coupon />
<h3 className="mt-4 text-xl font-bold text-white">Coupon</h3>
<p className="text-gray-300 text-center mt-2">
As part of our collaboration, you will receive exclusive coupons
that offer special privileges to join the event or special
discount.
</p>
</div>

<div className="flex flex-col items-center">
<Internship />
<h3 className="mt-4 text-xl font-bold text-white">Internship</h3>
<p className="text-gray-300 text-center mt-2">
We offer opportunities for internships with leading blockchain
companies.
</p>
</div>

<div className="flex flex-col items-center">
<Experience />
<h3 className="mt-4 text-xl font-bold text-white">Experience</h3>
<p className="text-gray-300 text-center mt-2">
Working with blockchain followers provides a unique experience in
Community Engagement.
</p>
</div>
<div className="flex flex-col items-center">
<Idea />
<h3 className="mt-4 text-xl font-bold text-white">
Idea to Impact
</h3>
<p className="text-gray-300 text-center mt-2">
Collaborating with us gives you the chance to create and develop
new projects.
</p>
</div>
<div className="flex flex-col items-center">
<Expert />
<h3 className="mt-4 text-xl font-bold text-white">
Expert Insight
</h3>
<p className="text-gray-300 text-center mt-2">
Benefit from the opportunity to receive valuable advice from
industry experts and speakers.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{benefits.map(({ title, description, icon }, index) => (
<div key={index} className="flex flex-col items-center gap-4">
<div className="h-44">{icon}</div>
<div className="flex flex-col items-center">
<h3 className="mt-4 text-xl font-bold text-white">{title}</h3>
<p className="text-gray-300 text-center mt-2">{description}</p>
</div>
</div>
))}
</div>
</div>
<style jsx>{`
.text-gradient {
background: linear-gradient(
90deg,
rgba(238, 0, 153, 1) 0%,
rgba(0, 212, 255, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
`}</style>
</Container>
</div>
);
};
Expand Down
52 changes: 23 additions & 29 deletions src/components/Community/CommunityHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,33 @@
"use client"

import React from 'react';
import React from "react";
import Container from "../Common/Container";

const CommunityHeader: React.FC = () => {
return (
<div className="w-full bg-[#0F082C] from-purple-900 via-purple-800 to-purple-950 py-16 relative overflow-hidden">
<style jsx>{`
.gradientText {
background: linear-gradient(to right, #311B92, #7102C8, #F8BBD0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
`}</style>
<div className="mt-[5vh] container mx-auto text-center relative z-10">
<h1 className="text-8xl font-bold gradientText opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
COMMUNITY
</h1>
<h2 className="text-5xl font-black text-white mb-5 mt-5 relative z-20">
Be part of something amazing!
</h2>
<div className="flex justify-center items-center space-x-2">
<div className="w-2 h-2 bg-white rounded-full"></div>
<div className="w-16 h-1 bg-white rounded-full"></div>
<div className="w-2 h-2 bg-white rounded-full"></div>
<div className="bg-[#0F082C] from-purple-900 via-purple-800 to-purple-950 py-16">
<Container className="space-y-8">
<div className="relative">
<h2 className="text-5xl md:text-8xl font-bold text-center bg-gradient-to-br from-[#311B92] via-[#7102C8] to-[#F8BBD0] bg-clip-text text-transparent opacity-50">
COMMUINITY
</h2>

<div className="space-y-4 -mt-6 md:-mt-10">
<h2 className="text-3xl md:text-5xl font-bold text-white text-center relative z-20">
Be part of something amazing!
</h2>
<div className="flex justify-center items-center space-x-2">
<div className="w-2 h-2 bg-white rounded-full z-10"></div>
<div className="w-16 h-1 bg-white rounded-full z-10"></div>
<div className="w-2 h-2 bg-white rounded-full z-10"></div>
</div>
</div>
</div>
</div>
<div className='mt-[10vh]'>
<h2 className="text-2xl font-sm text-center">

<p className="text-lg font-sm text-center">
Explore new interests, make friends, and enjoy exciting activities.
</h2>
<h2 className="text-2xl font-sm text-center mb-2">
There&#39;s always something happening at our club. Be part of the
blockchain adventure!
</h2>
</div>
</p>
</Container>
</div>
);
};
Expand Down
138 changes: 0 additions & 138 deletions src/components/Community/MemberBox.tsx
View file

This file was deleted.

Loading

0 comments on commit 206aee7

Please sign in to comment.