Skip to content

Commit

Permalink
added Find Your Group Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@ravikumawat7716
ravikumawat7716 committed Feb 21, 2024
1 parent 3b481ec commit e86384e
Showing 1 changed file with 40 additions and 21 deletions.
61 changes: 40 additions & 21 deletions src/components/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
<section class="bg-white dark:bg-black">
<div class="container px-6 py-16 mx-auto text-center">
<div class="max-w-lg mx-auto">
<h1 class="text-3xl font-semibold text-gray-800 dark:text-[#eab308] lg:text-4xl">
<h1
class="text-3xl font-semibold text-gray-800 dark:text-[#eab308] lg:text-4xl"
>
Welcome to Sundarbans House, IIT Madras!
</h1>
<p class="mt-6 text-gray-500 dark:text-gray-300">
Expand All @@ -25,13 +27,20 @@
Participate in {{ upcomingEvents[0].title }}
</button>
</router-link>
<button
v-else
class="px-5 py-2 mt-6 text-sm font-medium leading-5 text-center text-white dark:text-black capitalize dark:bg-white bg-black rounded-lg hover:bg-blue-500 lg:mx-0 lg:w-auto focus:outline-none"
@click="$router.push('/user')"
>
Find Your Group
</button>
</div>

<div class="flex justify-center mt-10">
<img
class="object-cover w-full h-96 rounded-xl lg:w-4/5"
src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
>
/>
</div>
</div>
</section>
Expand All @@ -40,7 +49,9 @@
<section class="bg-white dark:bg-black">
<div class="container px-6 py-10 mx-auto">
<div class="text-center">
<h1 class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
<h1
class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white"
>
Upcoming Events
</h1>
<p class="max-w-lg mx-auto mt-4 text-gray-500">
Expand All @@ -49,29 +60,32 @@
</div>

<div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-2">
<div
v-for="event in upcomingEvents"
:key="event.slug"
>
<div v-for="event in upcomingEvents" :key="event.slug">
<img
class="relative z-10 object-cover w-full rounded-md h-96"
:src="prependBackendLink(event.image)"
alt="Event Image"
/>
<div
class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black"
>
<div class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black">
<a
:href="event.form_url"
class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
>
{{ event.title }}
</a>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
<p
class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm"
>
{{ truncateDescription(event.desc) }}
</p>
<p class="mt-3 text-sm text-[#eab308]">
{{ event.timestamp }}
</p>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
<p
class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm"
>
Deadline: {{ event.deadline }}
</p>
</div>
Expand All @@ -84,7 +98,9 @@
<section class="bg-white py-10 dark:bg-black">
<div class="container px-6 py-10 mx-auto">
<div class="text-center">
<h1 class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
<h1
class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white"
>
From Youtube
</h1>

Expand Down Expand Up @@ -175,7 +191,9 @@
<!-- latest events -->
<section class="bg-white dark:bg-black">
<div class="container px-6 py-10 mx-auto">
<h1 class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white">
<h1
class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white"
>
Latest Events
</h1>

Expand All @@ -184,17 +202,18 @@
latest happenings and exciting activities within our community.
</p>

<div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
<div
v-for="event in latestEvents"
:key="event.slug"
>
<div
class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3"
>
<div v-for="event in latestEvents" :key="event.slug">
<img
class="relative z-10 object-cover w-full rounded-md h-96"
:src="prependBackendLink(event.image)"
alt="Event Image"
/>
<div
class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black"
>
<div class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black">
<a
:href="event.form_url"
class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
Expand Down Expand Up @@ -243,7 +262,9 @@ export default {
},
async fetchEvents() {
try {
const response = await fetch("https://sundarbans.camlio.shop/events", { mode: "cors" });
const response = await fetch("https://sundarbans.camlio.shop/events", {
mode: "cors",
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
Expand Down Expand Up @@ -271,5 +292,3 @@ export default {
},
};
</script>


1 comment on commit e86384e

@vercel
Copy link

@vercel vercel bot commented on e86384e Feb 21, 2024

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

sundarbans – ./

sundarbans-git-main-sundarbans-projects.vercel.app
sundarbans-sundarbans-projects.vercel.app

Please sign in to comment.