Skip to content

41 contact page #78

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.

Sign up for GitHub

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

Merged
oscar-jiang merged 3 commits into from
Feb 28, 2026
Merged

41 contact page #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7c44dac
style(contact): update button elements to links and adjust layout for…
oscar-jiang Feb 28, 2026
58bf9d6
feat(contact): create contact page layout with components
oscar-jiang Feb 28, 2026
ed7aed8
feat(contact): add contact image to the contact section
oscar-jiang Feb 28, 2026
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
Binary file added public/contact-us.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions src/components/blocks/LetsGrowSomething.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,14 @@
</div>

<!-- Image -->
<div class="contact-image size-[450px] shrink-0 rounded-[3rem] bg-gray-200">
<!-- Let's grow something great together picture -->
<div
class="contact-image h-[450px] w-[409px] shrink-0 rounded-[3rem] bg-gray-200"
>
<img
src="/contact-us.jpg"
alt="UBC Agrobot Team Contact Us"
class="h-full w-full rounded-[3rem] object-cover"
/>
</div>
</div>
</div>
25 changes: 14 additions & 11 deletions src/components/blocks/PreferAnotherWay.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,48 @@
<div class="alt-contact-section">
<!-- Section heading -->
<h1 class="alt-contact-title mb-8 text-4xl">
<h1 class="alt-contact-title mb-8 text-5xl">
Prefer another way to reach us?
</h1>

<!-- Buttons for alternative contact -->
<div class="alt-contact-buttons flex flex-wrap gap-5">
<div class="alt-contact-buttons flex flex-wrap gap-26">
<!-- Instagram button -->
<button
class="btn-instagram group flex min-w-[180px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 font-medium transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
<a
href="https://www.instagram.com/ubcagrobot"
class="btn-instagram group flex h-[80px] w-[269px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 text-[26px] transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
>
<span> Instagram </span>
<span
class="ml-4 text-xl transition-transform duration-300 group-hover:translate-x-1"
>
→
</span>
</button>
</a>

<!-- LinkedIn button -->
<button
class="btn-linkedin group flex min-w-[180px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 font-medium transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
<a
href="https://www.linkedin.com/company/ubcagrobot/"
class="btn-linkedin group flex h-[80px] w-[269px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 text-[26px] transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
>
<span> LinkedIn </span>
<span
class="ml-4 text-xl transition-transform duration-300 group-hover:translate-x-1"
>
→
</span>
</button>
</a>

<!-- Email button -->
<button
class="btn-email group flex min-w-[180px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 font-medium transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
<a
href="mailto:ubcagrobot@gmail.com"
class="btn-email group flex h-[80px] w-[269px] items-center justify-between rounded-full bg-[#d9d9d9] px-8 py-4 text-[26px] transition-all duration-300 hover:cursor-pointer hover:bg-[#cccccc]"
>
<span> Email </span>
<span
class="ml-4 text-xl transition-transform duration-300 group-hover:translate-x-1"
>
→
</span>
</button>
</a>
</div>
</div>
16 changes: 16 additions & 0 deletions src/pages/contact.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
import Layout from "../layouts/Layout.astro";
import LetsGrowSomething from "../components/blocks/LetsGrowSomething.astro";
import PreferAnotherWay from "../components/blocks/PreferAnotherWay.astro";
---

<Layout>
<main
class="flex min-h-screen w-full flex-col items-center gap-24 px-6 py-20"
>
<div class="flex w-full max-w-6xl flex-col gap-24">
<LetsGrowSomething />
<PreferAnotherWay />
</div>
</main>
</Layout>