Skip to content
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

Fix/sponsor adjustments #241

Merged
merged 3 commits into from
Oct 8, 2024
Merged

Fix/sponsor adjustments #241

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
722f49b
fix(sponsor) - adjust title and para same as the rest
Oct 8, 2024
cb01b6f
fix(sponsor) - renamed sponsors to sponsorHighlight + adjust paddings…
Oct 8, 2024
33a20b8
fix(sponsor) - changed button design to that using on website
Oct 8, 2024
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
29 changes: 10 additions & 19 deletions ...ntendmu-nuxt/components/home/Sponsors.vue → ...nuxt/components/home/SponsorHighlight.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,40 @@ import sponsors from '../../../frontendmu-data/data/sponsors.js'
</script>

<template>
<div class="homepage-container">
<div class="homepage-container pt-20">
<div class="homepage-wrapper">
<main>
<div class="relative pb-20 z-0 h-[auto] w-full">
<div class="relative z-20 mx-auto grid grid-cols-1 gap-8 md:flex-row h-full justify-center max-w-6xl px-12">
<div class="relative z-20 mx-auto grid grid-cols-1 gap-10 md:flex-row h-full justify-center max-w-6xl px-12">
<div class="flex flex-col justify-center text-center gap-10">
<h2
class="uppercase flex flex-col text-4xl font-extrabold xl:leading-tight text-verse-500 sm:text-5xl lg:text-5xl xl:text-6xl"
>
<span class="block text-black dark:text-verse-300 xl:inline capitalize font-mono">Our
Sponsors</span>
</h2>
<BaseHeading>Our Sponsors</BaseHeading>
<!-- <flip-book class="mt-[-16%] md:mt-[-12%]" /> -->
<p class="text-md md:text-lg text-black dark:text-verse-300 font-mono font-bold">
<p class="max-w-3xl mx-auto text-xl text-verse-600 dark:text-verse-200 text-center">
We're lucky to have sponsors support our community. If you're
interested in sponsoring us, <a href="mailto:[email protected]" title="Email us"
class="underline"
>please reach out to us here</a>.
class="underline">please reach out to us here</a>.
</p>
<div class="grid place-items-center">
<a href="/sponsors"
class="text-md block w-48 rounded-md bg-yellow-500/90 dark:bg-white/10 px-4 py-4 text-center font-medium text-white md:w-64 md:px-8 md:text-xl"
>
<NuxtLink to="/sponsors"
class="bg-verse-500 hover:bg-verse-600 transition-colors duration-200 text-md block w-48 rounded-full px-4 py-4 text-center font-medium text-white md:w-52 md:px-6 md:text-lg">
View all sponsors
</a>
</NuxtLink>
</div>
</div>

<div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-4">
<template v-for="sponsorType of sponsors">
<template v-for="sponsor of sponsorType.sponsors" :key="sponsor.name">
<a :title="sponsor.description" target="_blank" :href="sponsor.sponsorUrl"
class="mt-4 h-full md:mt-0 relative rounded-xl flex justify-between items-center flex-col gap-4 group bg-white dark:bg-verse-200 dark:backdrop-blur-sm p-6 shadow-md transition-all hover:shadow-lg"
>
class="mt-4 h-full md:mt-0 relative rounded-xl flex justify-between items-center flex-col gap-4 group bg-white dark:bg-verse-200 dark:backdrop-blur-sm p-6 shadow-md transition-all hover:shadow-lg">
<div>
<span class="text-2xl font-bold text-center w-full block dark:text-verse-900">
{{ sponsor.name }}
</span>
</div>
<img :src="`/img/sponsors/${sponsor.logo}`" :alt="sponsor.description">
<div v-if="sponsor.description"
class="bg-gray-300 py-1 px-4 text-xs w-full text-center text-gray-500 dark:text-black font-medium rounded-2xl self-end"
>
class="bg-gray-300 py-1 px-4 text-xs w-full text-center text-gray-500 dark:text-black font-medium rounded-2xl self-end">
{{ sponsor.description }}
</div>
</a>
Expand Down
2 changes: 1 addition & 1 deletion packages/frontendmu-nuxt/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ defineOgImageComponent('Generic')

<slot />

<HomeSponsors />
<HomeSponsorHighlight />
mahima98 marked this conversation as resolved.
Show resolved Hide resolved

<SiteFooter />
</LayoutBackdrop>
Expand Down
2 changes: 1 addition & 1 deletion packages/frontendmu-nuxt/pages/community.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<BaseHeading :level="1">
Community
</BaseHeading>
<div class="text-verse-600 dark:text-verse-300 pt-4 pb-16 text-center md:text-left flex flex-col gap-6">
<div class="text-verse-600 dark:text-verse-300 pt-4 text-center md:text-left flex flex-col gap-6">
<div class="text-xl font-bold mt-8">
Featured Github Issues
</div>
Expand Down
16 changes: 5 additions & 11 deletions packages/frontendmu-nuxt/pages/meetups.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const nextMeetupId = nextMeetup.value.id
<template>
<div>
<MiscContentBlock>
<div class="past-events-container pb-4 md:pb-16">
<div class="past-events-container pb-4">
<div class="flex flex-col gap-2">
<BaseHeading :level="1">
All meetups
Expand All @@ -22,24 +22,18 @@ const nextMeetupId = nextMeetup.value.id
</div>

<template v-for="year in Object.keys(meetupsGroupedByYear).reverse()" :key="year">
<div class="grid pb-16 sm:pb-40 relative group is-page">
<div class="grid pb-16 sm:pb-40 last:pb-0 relative group is-page">
<div class="text-lg font-bold text-verse-900 uppercase md:hidden">
{{ year }}
</div>
<div
class="absolute origin-bottom-lef left-[-150px] top-[50px] opacity-10 -rotate-90 text-[100px] font-bold text-verse-900 dark:text-verse-100 group-hover-[.is-page]:left-[-170px] transition-all duration-300 hidden md:block"
>
class="absolute origin-bottom-lef left-[-150px] top-[50px] opacity-10 -rotate-90 text-[100px] font-bold text-verse-900 dark:text-verse-100 group-hover-[.is-page]:left-[-170px] transition-all duration-300 hidden md:block">
{{ year }}
</div>
<div class="grid grid-cols-2 gap-8 relative z-10">
<CardsEventCard
v-for="event in meetupsGroupedByYear[year]"
:key="event.id"
:event="event"
<CardsEventCard v-for="event in meetupsGroupedByYear[year]" :key="event.id" :event="event"
:is-next-meetup="event.id === nextMeetupId"
:is-meetup-today="todaysMeetups.some(meetup => meetup.id === event.id)"
class="card-entrance"
/>
:is-meetup-today="todaysMeetups.some(meetup => meetup.id === event.id)" class="card-entrance" />
</div>
</div>
</template>
Expand Down
31 changes: 11 additions & 20 deletions packages/frontendmu-nuxt/pages/sponsors.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@ const description = ''
<BaseHeading>Sponsors</BaseHeading>
<p class="text-xl text-verse-600 dark:text-verse-200">
We're lucky to have sponsors support our community. If you're
interested in sponsoring us,<a
href="mailto:[email protected]" class="underline hover:bg-verse-50 dark:bg-verse-950"
title="Please reach out to us via email"
> please reach out to the organizers
interested in sponsoring us,<a href="mailto:[email protected]"
class="underline hover:bg-verse-50 dark:bg-verse-950" title="Please reach out to us via email"> please reach
out to the organizers
here</a>.
</p>
</div>
Expand All @@ -25,28 +24,21 @@ const description = ''
<div class="flex flex-col">
<div class="space-y-5 sm:mx-auto sm:space-y-2">
<h3
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200"
>
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200">
{{ sponsorType.title }}
</h3>
<p class="max-w-2xl text-xl text-verse-600 dark:text-verse-200">
{{ sponsorType.description }}
</p>
</div>
<ul
role="list"
class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12"
>
<ul role="list"
class="grid grid-cols-1 sm:ml-0 sm:mr-auto mx-auto mt-6 gap-x-4 gap-y-2 sm:grid-cols-2 md:gap-x-6 lg:gap-x-8 lg:gap-y-12">
<template v-for="(sponsor, index) in sponsorType.sponsors" :key="index">
<li class="pt-4">
<a
target="_blank" :href="sponsor.sponsorUrl"
class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg h-full"
>
<img
v-if="sponsor.logo" class="w-48 h-52 object-contain" :src="`/img/sponsors/${sponsor.logo}`"
:style="vTransitionName('sponsor-name', sponsor.name)"
>
<a target="_blank" :href="sponsor.sponsorUrl"
class="relative flex flex-col items-center justify-center gap-2 p-6 mt-4 transition-all bg-white border-t-8 border-verse-500 border-solid shadow-md md:mt-0 rounded-xl group hover:shadow-lg h-full">
<img v-if="sponsor.logo" class="w-48 h-52 object-contain" :src="`/img/sponsors/${sponsor.logo}`"
:style="vTransitionName('sponsor-name', sponsor.name)">
<div v-else>
<span class="text-2xl font-bold">{{ sponsor.name }}</span>
</div>
Expand All @@ -63,8 +55,7 @@ const description = ''
<div>
<div class="space-y-5 sm:mx-auto sm:space-y-2 py-4">
<h3
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200"
>
class="text-3xl font-bold tracking-tight text-center md:text-left sm:text-4xl sm:tracking-tight text-verse-500 dark:text-verse-200">
Past meetup sponsors
</h3>
<p class="max-w-2xl text-xl text-verse-600 dark:text-verse-200">
Expand Down
15 changes: 5 additions & 10 deletions packages/frontendmu-nuxt/pages/team.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ const NuxtLink = resolveComponent('NuxtLink')

<img
class="mx-auto h-20 w-20 rounded-lg border-verse-200 dark:border-verse-600 shadow-lg border p-2 lg:w-48 lg:h-48"
:src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300"
>
:src="person.imageUrl" :alt="person.name" :title="person.name" width="300" height="300">

<div class="space-y-2 py-2">
<div class="text-xs font-medium lg:text-lg text-center">
Expand Down Expand Up @@ -64,8 +63,7 @@ const NuxtLink = resolveComponent('NuxtLink')
<img
class="mx-auto h-20 w-20 rounded-full border-verse-2 shadow-lg 00 border p-2 lg:w-32 lg:h-32 profile-avatar"
:style="vTransitionName('speaker-avatar', person.name)" :src="getGithubUrl(person?.github_account || '')"
:alt="person.name" :title="person.name" width="300" height="300"
>
:alt="person.name" :title="person.name" width="300" height="300">

<div class="space-y-2">
<div class="text-xs font-medium lg:text-lg text-center">
Expand All @@ -76,8 +74,7 @@ const NuxtLink = resolveComponent('NuxtLink')
</div>
</NuxtLink>
<a v-if="person?.github_account" :href="`https://github.com/${person?.github_account}`" target="_blank"
class="flex justify-center gap-2 items-center dark:text-verse-400 text-verse-600 hover:text-verse-900 hover:dark:text-verse-100"
>
class="flex justify-center gap-2 items-center dark:text-verse-400 text-verse-600 hover:text-verse-900 hover:dark:text-verse-100">
<Icon name="carbon:logo-github" class="w-4 h-4" />
<p class="font-heading ">
{{ person?.github_account }}
Expand All @@ -97,13 +94,11 @@ const NuxtLink = resolveComponent('NuxtLink')
<ul id="team" role="list" class="mx-auto grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-4 md:gap-x-6 lg:gap-x-8">
<li v-for="person in contributors" :key="person.username">
<a :href="`https://github.com/Front-End-Coders-Mauritius/frontendmu-astro/commits?author=${person.username}`"
target="_blank" class="space-y-4"
>
target="_blank" class="space-y-4">
<img
class="mx-auto h-20 w-20 rounded-full border-verse-2 shadow-lg 00 border p-2 lg:w-48 lg:h-48 profile-avatar"
:src="getGithubUrl(person.username)" :alt="person.username" :title="person.username" width="300"
height="300"
>
height="300">

<div class="space-y-2">
<div class="text-xs font-medium lg:text-lg text-center">
Expand Down
Loading