Skip to content

Commit 7d367a7

Browse files
dlynzdlynz
committed
update buttons to be more modern and less blocky
1 parent 3a7dc35 commit 7d367a7

File tree

4 files changed

+72
-57
lines changed

4 files changed

+72
-57
lines changed

‎frontend/src/components/About/AboutHomepage.tsx

Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
11
import Image from "next/image";
22

33
export default function AboutHomePage() {
4-
return (
5-
<section className="py-8 xl:px-24 sm:px-10 px-5" id="about">
6-
<div className="text-center my-10">
7-
<h2 className="font-bold text-6xl mb-16">ABOUT</h2>
8-
</div>
9-
<div className="flex justify-center items-center">
10-
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
11-
{/* LEFT SIDE */}
12-
{/* NOTE: there is slightly altered from about/index.tsx */}
13-
<div className="col-span-2 md:mx-5">
14-
<div className="flex items-center justify-center">
15-
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
16-
</div>
17-
<h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2>
18-
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
19-
<div className="my-4 flex gap-5">
20-
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
21-
<div>
22-
16k <span className="text-[#727B8C]">members</span> · 146{' '}
23-
<span className="text-[#727B8C]">internal members</span>
24-
</div>
25-
</div>
26-
<div className="my-4 flex gap-5">
27-
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
28-
Sydney, Australia
29-
</div>
30-
<div className="flex gap-5">
31-
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
32-
<a href="mailto:[email protected]" className="hover:underline">[email protected]</a>
33-
</div>
34-
</div>
35-
{/* RIGHT SIDE */}
36-
<div className="col-span-4 lg:mt-0 mt-10">
37-
<p className="text-2xl">
38-
We are one of the largest and most active societies at UNSW, and {" "}
39-
<span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>.
40-
<br/><br/>
41-
CSESoc comprises {" "}
42-
<span className="font-bold text-[#3977F8]">over 16k members</span>
43-
{" "}spanning across various degrees including Computer Science,
44-
Software Engineering, Bioinformatics and Computer Engineering.
45-
<br/><br/>
46-
We are here to fulfil the social, personal and professional needs of CSE students,
47-
and promote computing through a variety of forms.
48-
</p>
49-
<a href="about">
50-
<button className="mt-16 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[60%] xl:h-12 h-10 hover-animate mx-auto block">
51-
Find out more
52-
</button>
53-
</a>
4+
return (
5+
<section className="py-8 pb-16 xl:px-24 sm:px-10 px-5" id="about">
6+
<div className="text-center my-10">
7+
<h2 className="font-bold text-6xl mb-16">ABOUT</h2>
8+
</div>
9+
<div className="flex justify-center items-center">
10+
<div className="lg:grid grid-cols-6 flex-1 max-w-[90rem]">
11+
{/* LEFT SIDE */}
12+
{/* NOTE: there is slightly altered from about/index.tsx */}
13+
<div className="col-span-2 md:mx-5">
14+
<div className="flex items-center justify-center">
15+
<Image src="/assets/csesoc_icon.svg" alt="CSESoc Icon" width={150} height={150} />
16+
</div>
17+
<h2 className="mt-4 text-3xl font-extrabold">CSESoc</h2>
18+
<p className="text-[#727B8C] font-medium">unsw-computer-science-engineering-society</p>
19+
<div className="my-4 flex gap-5">
20+
<Image src="/assets/people_icon.svg" alt="People" width={20} height={20} />
21+
<div>
22+
16k <span className="text-[#727B8C]">members</span> · 146{' '}
23+
<span className="text-[#727B8C]">internal members</span>
5424
</div>
5525
</div>
26+
<div className="my-4 flex gap-5">
27+
<Image src="/assets/location_icon.svg" alt="Location" width={20} height={20} />
28+
Sydney, Australia
29+
</div>
30+
<div className="flex gap-5">
31+
<Image src="/assets/mail_icon.svg" alt="Mail" width={20} height={20} />
32+
<a href="mailto:[email protected]" className="hover:underline">[email protected]</a>
33+
</div>
34+
</div>
35+
{/* RIGHT SIDE */}
36+
<div className="col-span-4 lg:mt-0 mt-10">
37+
<p className="text-2xl">
38+
We are one of the largest and most active societies at UNSW, and {" "}
39+
<span className="font-bold text-[#3977F8]">the largest computing society in the southern hemisphere</span>.
40+
<br/><br/>
41+
CSESoc comprises {" "}
42+
<span className="font-bold text-[#3977F8]">over 16k members</span>
43+
{" "}spanning across various degrees including Computer Science,
44+
Software Engineering, Bioinformatics and Computer Engineering.
45+
<br/><br/>
46+
We are here to fulfil the social, personal and professional needs of CSE students,
47+
and promote computing through a variety of forms.
48+
</p>
49+
<div className="flex pt-8 justify-center items-center">
50+
<a href="about">
51+
<button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
52+
Find out more...
53+
</button>
54+
</a>
55+
</div>
5656
</div>
57-
</section>
58-
);
59-
}
57+
</div>
58+
</div>
59+
</section>
60+
);
61+
}

‎frontend/src/components/Event/EventsBrief.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { events } from '../../../public/data/events';
33
import EventsCarousel from './EventsCarousel';
4+
import { ChevronRight } from 'lucide-react';
45

56
const EventBrief = () => {
67
return (
@@ -16,9 +17,10 @@ const EventBrief = () => {
1617
}
1718
<div className="flex justify-center items-center">
1819
<a href="events">
19-
<button className="mt-10 bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
20-
See all events
21-
</button>
20+
<button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
21+
See all events
22+
<ChevronRight className="group-hover:animate-bounce-right" />
23+
</button>
2224
</a>
2325
</div>
2426
</section>

‎frontend/src/components/Sponsors/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import Footer from '@/components/Footer';
33
import SponsorCarousel from './SponsorCarousel';
4+
import { ChevronRight } from 'lucide-react';
45

56
const Sponsors = () => {
67
return (
@@ -18,8 +19,9 @@ const Sponsors = () => {
1819
<SponsorCarousel />
1920
<div className="flex justify-center items-center">
2021
<a href="sponsors">
21-
<button className="bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[20rem] xl:h-12 h-10 hover-animate">
22+
<button className="group flex justify-center items-center gap-2 pl-2 bg-white border text-blue-900 font-semibold border-[#A7A6E5] text-lg rounded-3xl w-[14rem] hover:opacity-60 xl:h-12 h-10 duration-300">
2223
See all sponsors
24+
<ChevronRight className="group-hover:animate-bounce-right" />
2325
</button>
2426
</a>
2527
</div>

‎frontend/tailwind.config.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ const config: Config = {
88
],
99
theme: {
1010
extend: {
11+
keyframes: {
12+
'bounce-right': {
13+
'0%, 100%': { transform: 'translateX(0)' },
14+
'50%': { transform: 'translateX(6px)' },
15+
},
16+
},
17+
animation: {
18+
'bounce-right': 'bounce-right 1.0s ease-in-out infinite',
19+
},
1120
fontFamily: {
1221
game: "'Press Start 2P', cursive"
1322
},

0 commit comments

Comments
 (0)