Add our sponsor page - Githubissues

riderx commented 2 months ago

Get from https://github.com/sponsors/riderx and https://github.com/sponsors/Cap-go List of sponsor name and url. then display them in section:

<template>
  <section class="bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-6xl mx-auto">
      <h2 class="text-2xl font-bold text-white text-center mb-8">
        Our Sponsors
      </h2>

      <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 md:gap-8">
        <div 
          v-for="sponsor in sponsors" 
          :key="sponsor.id" 
          @click="navigateToSponsor(sponsor.url)"
          class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-700 cursor-pointer"
        >
          <div class="w-20 h-20 mb-3">
            <img 
              :src="sponsor.imageUrl" 
              :alt="sponsor.name" 
              class="w-full h-full object-cover rounded-full border-2 border-gray-600"
            />
          </div>
          <h3 class="text-sm font-medium text-white text-center">
            {{ sponsor.name }}
          </h3>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const sponsors = ref([
  {
    id: 1,
    name: 'Sponsor 1',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor1.com'
  },
  {
    id: 2,
    name: 'Sponsor 2',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor2.com'
  },
  {
    id: 3,
    name: 'Sponsor 3',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor3.com'
  },
  {
    id: 4,
    name: 'Sponsor 4',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor4.com'
  },
  {
    id: 5,
    name: 'Sponsor 5',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor5.com'
  },
  {
    id: 6,
    name: 'Sponsor 6',
    imageUrl: '/placeholder.svg?height=80&width=80',
    url: 'https://sponsor6.com'
  },
])

const navigateToSponsor = (url) => {
  window.open(url, '_blank')
}
</script>

on homepage bottom

riderx commented 2 months ago

/bounty 50

algora-pbc[bot] commented 2 months ago

💎 $50 bounty • Capgo

Steps to solve:

Start working: Comment /attempt #241 with your implementation plan
Submit work: Create a pull request including /claim #241 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Additional notes:

ℹ️ If something is not clear ask before working on it, otherwise your chance to rework it is high 🎥 To claim you need to provide in your PR a demo video of the change 👨‍👩‍👧‍👦 Join the Discord to get help 📏 Check all Bounty rules

Thank you for contributing to Cap-go/website!

Add a bounty • Share on socials