Skip to content

CW2-25 Create "Contact-Us" page #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 16 commits into from
Closed
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 48 additions & 44 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package.json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this change? (same with package-lock.json)

Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"axios": "^1.7.2",
"eslint-config-next": "13.4.19",
"framer-motion": "^11.1.2",
"next": "13.4.19",
"next": "13.4.12",
"postcss": "8.4.29",
"react": "18.2.0",
"react-dom": "18.2.0",
Expand Down
113 changes: 113 additions & 0 deletions frontend/src/components/Contacts/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
// import DiscordLogo from "@/public/assets/discord_logo.svg"
import Image from 'next/image';

const boxStyling =

Check warning on line 4 in frontend/src/components/Contacts/index.tsx

View workflow job for this annotation

GitHub Actions / build

'boxStyling' is assigned a value but never used
'border border-[#595F6D] rounded-lg hover:border-[#788093] hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';
const socialsBoxStyling =
'xl:col-span-1 col-span-3 flex justify-center pt-2 pb-2 border border-[#595F6D] hover:border-[#788093] rounded-lg hover:bg-[#070034] hover:bg-opacity-75 transition-all duration-300';

const Contacts = () => {
return (
<div className="md:mt-10 mt-5">
<div className="grid grid-cols-3 1 gap-x-9 gap-y-5 mb-10">
<a href="https://bit.ly/CSESocDiscord" target="_blank" className={socialsBoxStyling}>
<Image
src="assets/discord_logo.svg"
alt="discord logo"
width={25}
height={25}
className="mr-1"
/>
<p className="text-xl font-bold m-2">DISCORD</p>
</a>
<a
href="https://www.facebook.com/csesoc/"
target="_blank"
className={socialsBoxStyling}
>
<Image
src="assets/fb_logo.svg"
alt="facebook logo"
width={25}
height={25}
className="mr-1"
/>
<p className="text-xl font-bold m-2">FACEBOOK</p>
</a>
<a
href="https://www.facebook.com/groups/csesoc"
target="_blank"
className={socialsBoxStyling}
>
<Image
src="assets/group_icon.svg"
alt="facebook group"
width={25}
height={25}
className="mr-1"
/>
<p className="text-xl font-bold m-2">FACEBOOK GROUP</p>
</a>
</div>

<div className="flex 1 justify-around xl:mx-40">
<a href="https://twitter.com/csesoc?lang=en" target="_blank">
<Image
src="assets/x_twitter_icon.svg"
alt="X/Twitter"
width={35}
height={35}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
<a href="https://www.youtube.com/@CSESocUNSW" target="_blank">
<Image
src="assets/youtube_logo.svg"
alt="Youtube"
width={35}
height={35}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
<a href="https://www.instagram.com/csesoc_unsw/?hl=en" target="_blank">
<Image
src="assets/instagram_logo.svg"
alt="Instagram"
width={35}
height={35}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
<a href="https://www.tiktok.com/@csesoc?lang=en" target="_blank">
<Image
src="assets/tiktok_logo.svg"
alt="TikTok"
width={35}
height={35}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
<a href="#" target="_blank">
<Image
src="assets/wechat_logo.svg"
alt="weChat"
width={40}
height={40}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
<a href="https://www.linkedin.com/company/csesoc?originalSubdomain=au" target="_blank">
<Image
src="assets/linkedin_logo.svg"
alt="LinkedIn"
width={35}
height={35}
className="mr-1 fill-white hover:scale-105 transition-all"
/>
</a>
</div>
</div>
);
};

export default Contacts;
3 changes: 3 additions & 0 deletions frontend/src/components/Hamburger.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ export default function Hamburger() {
<li className="py-2 text-lg">
<Link href={'./sponsors'}>Sponsors</Link>
</li>
<li className="py-2 text-lg">
<Link href={'./contact-us'}>Contact Us</Link>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make it href={'./contact'} (similar to how it is called about-us but the url is just about) - will need to rename contact-us.tsx. Just so that the header text looks nicer

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done :)

</li>
</ul>
</motion.div>
)}
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/components/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const Navbar = () => {
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
<div>{'//'} sponsors</div>
</Link>
<Link href="contact-us">
<p className="text-[0.6rem] text-[#C4C5C8]">04</p>
<div>{'//'} Contact Us</div>
</Link>
</div>
<div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
<Hamburger />
Expand Down
Loading
Loading