Skip to content

Commit

Permalink
feat(home): update sponsors section layout and styles
Browse files Browse the repository at this point in the history 
Revamped the sponsors section with a fresh layout and improved styling. Added background decorative elements for visual appeal, adjusted text sizes, and enhanced hover effects on sponsor logos. Consolidated bronze and wood sponsors into a grid format for better organisation. Updated call-to-action button with new iconography and shadow effects to boost interactivity.
  • Loading branch information
@Vheissu
Vheissu committed Dec 17, 2024
1 parent 9dcde7b commit bf894d3
Showing 1 changed file with 104 additions and 45 deletions.
149 changes: 104 additions & 45 deletions themes/aurelia-theme/layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,82 +258,141 @@ <h3 class="text-xl font-bold text-gray-900">Real-time Clock</h3>
</section> -->

<!-- Sponsors Section -->
<section class="py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<section class="relative py-24 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
<!-- Background decorative elements -->
<div class="absolute inset-0">
<div class="absolute inset-0 opacity-[0.03]">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(237,43,136,0.1),transparent_50%)]"></div>
<div class="absolute -inset-[100%] bg-[radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.1),transparent_50%)]"></div>
</div>
<div class="absolute inset-0">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(237,43,136,0.03)_1px,transparent_1px)] bg-[size:40px_40px]"></div>
</div>
</div>

<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
<span class="inline-block px-4 py-1 rounded-full bg-aurelia/10 text-aurelia text-sm font-medium mb-4">
Our Sponsors
</span>
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-aurelia to-aurelia-light bg-clip-text text-transparent">
{{ .Site.Params.sponsors.title }}
</h2>
<p class="text-xl text-gray-400">{{ .Site.Params.sponsors.subtitle }}</p>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">{{ .Site.Params.sponsors.subtitle }}</p>
</div>

<!-- Gold Sponsors -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-center mb-8 text-orange-300">Gold Sponsors</h3>
<div class="flex flex-wrap justify-center gap-8">
<div class="mb-20">
<h3 class="text-2xl font-bold text-center mb-8">
<span class="bg-gradient-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
Gold Sponsors
</span>
</h3>
<div class="flex flex-wrap justify-center gap-12">
{{ range .Site.Params.sponsors.gold }}
<a href="{{ .url }}"
title="{{ .name }}"
class="transition-transform hover:-translate-y-1">
<img src="{{ .logo | relURL }}"
alt="{{ .alt }}"
style="height: 128px"
width="{{ .width }}"
height="{{ .height }}"
loading="lazy" />
class="group relative">
<!-- Spotlight effect -->
<div class="absolute inset-0 rounded-xl bg-gradient-to-r from-yellow-500/20 to-yellow-300/20 opacity-0 group-hover:opacity-100 blur-xl transition-opacity"></div>
<!-- Logo -->
<div class="relative p-8 rounded-xl bg-white shadow-sm group-hover:shadow-xl group-hover:shadow-yellow-500/10 border border-yellow-500/10 group-hover:border-yellow-500/20 transition-all duration-300 group-hover:-translate-y-1">
<img src="{{ .logo | relURL }}"
alt="{{ .alt }}"
style="height: 96px"
width="{{ .width }}"
height="{{ .height }}"
loading="lazy"
class="transition-transform duration-300 group-hover:scale-105" />
</div>
</a>
{{ end }}
</div>
</div>

<!-- Silver Sponsors -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-center mb-8 text-gray-400">Silver Sponsors</h3>
<div class="mb-20">
<h3 class="text-2xl font-bold text-center mb-8">
<span class="bg-gradient-to-r from-gray-400 to-gray-300 bg-clip-text text-transparent">
Silver Sponsors
</span>
</h3>
<div class="flex flex-wrap justify-center gap-8">
{{ range .Site.Params.sponsors.silver }}
<a href="{{ .url }}"
title="{{ .name }}"
class="transition-transform hover:-translate-y-1">
<img src="{{ .logo | relURL }}"
alt="{{ .alt }}"
style="height: 128px"
width="{{ .width }}"
height="{{ .height }}"
loading="lazy" />
class="group relative">
<div class="absolute inset-0 rounded-xl bg-gradient-to-r from-gray-400/20 to-gray-300/20 opacity-0 group-hover:opacity-100 blur-xl transition-opacity"></div>
<div class="relative p-6 rounded-xl bg-white shadow-sm group-hover:shadow-xl group-hover:shadow-gray-400/10 border border-gray-400/10 group-hover:border-gray-400/20 transition-all duration-300 group-hover:-translate-y-1">
<img src="{{ .logo | relURL }}"
alt="{{ .alt }}"
style="height: 80px"
width="{{ .width }}"
height="{{ .height }}"
loading="lazy"
class="transition-transform duration-300 group-hover:scale-105" />
</div>
</a>
{{ end }}
</div>
</div>

<!-- Bronze Sponsors -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-center mb-8 text-orange-700">Bronze Sponsors</h3>
<div class="flex justify-center">
<iframe
class="w-full max-w-[1024px] h-64 border-0"
src="{{ .Site.Params.sponsors.bronze.iframe_url }}"
title="Bronze Sponsors">
</iframe>
<!-- Bronze & Wood Sponsors -->
<div class="grid md:grid-cols-2 gap-12 mb-20">
<!-- Bronze Sponsors -->
<div class="relative">
<h3 class="text-2xl font-bold text-center mb-8">
<span class="bg-gradient-to-r from-orange-700 to-orange-500 bg-clip-text text-transparent">
Bronze Sponsors
</span>
</h3>
<div class="relative rounded-xl bg-white shadow-sm border border-orange-700/10 overflow-hidden group hover:shadow-xl hover:shadow-orange-700/10 hover:border-orange-700/20 transition-all duration-300">
<!-- Background pattern -->
<div class="absolute inset-0 bg-gradient-to-br from-orange-700/5 to-transparent"></div>
<div class="relative p-6">
<iframe
class="w-full border-0"
src="{{ .Site.Params.sponsors.bronze.iframe_url }}"
title="Bronze Sponsors">
</iframe>
</div>
</div>
</div>
</div>

<!-- Wood Sponsors -->
<div class="mb-16">
<h3 class="text-2xl font-bold text-center mb-8 text-amber-800">Wood Sponsors</h3>
<div class="flex justify-center">
<iframe
class="w-full max-w-[512px] h-32 border-0"
src="{{ .Site.Params.sponsors.wood.iframe_url }}"
title="Wood Sponsors">
</iframe>
<!-- Wood Sponsors -->
<div class="relative">
<h3 class="text-2xl font-bold text-center mb-8">
<span class="bg-gradient-to-r from-amber-800 to-amber-600 bg-clip-text text-transparent">
Wood Sponsors
</span>
</h3>
<div class="relative rounded-xl bg-white shadow-sm border border-amber-800/10 overflow-hidden group hover:shadow-xl hover:shadow-amber-800/10 hover:border-amber-800/20 transition-all duration-300">
<!-- Background pattern -->
<div class="absolute inset-0 bg-gradient-to-br from-amber-800/5 to-transparent"></div>
<!-- Content container with scrollbar styling -->
<div class="relative p-6">
<iframe
class="w-full border-0"
src="{{ .Site.Params.sponsors.wood.iframe_url }}"
title="Wood Sponsors">
</iframe>
</div>
</div>
</div>
</div>

<!-- CTA -->
<div class="flex justify-center mt-12">
<div class="flex justify-center mt-16">
<a href="{{ .Site.Params.sponsors.cta.url }}"
class="inline-flex items-center justify-center px-8 py-3 rounded-full font-semibold bg-gradient-to-r from-aurelia to-aurelia-light text-white hover:opacity-90 transform hover:-translate-y-0.5 transition-all">
{{ .Site.Params.sponsors.cta.text }}
class="group inline-flex items-center justify-center px-8 py-3 rounded-full text-white bg-gradient-to-r from-aurelia to-aurelia-light hover:opacity-90 transform hover:-translate-y-0.5 transition-all shadow-lg shadow-aurelia/20 hover:shadow-aurelia/30">
<span class="relative flex items-center gap-2">
<i class="fa-solid fa-heart text-pink-300"></i>
<span>{{ .Site.Params.sponsors.cta.text }}</span>
<svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</span>
</a>
</div>
</div>
Expand Down

0 comments on commit bf894d3

Please sign in to comment.