Skip to content

Commit 142609d

Browse files
1kevgriffclaude
1kevgriff
and
claude
committed
Add testimonials section to homepage
Implement testimonials section between Speakers and Scholarship sections featuring: - Quote icon and styled testimonial cards with teal/cyan gradient - Circular headshots with white border and shadow - Social media links with icons (LinkedIn, Twitter, Bluesky) - Responsive layout (stacked mobile, side-by-side desktop) - Navigation link and scroll tracking for testimonials section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 73701fb commit 142609d

File tree

1 file changed

+90
-1
lines changed

1 file changed

+90
-1
lines changed

‎src/pages/index.astro‎

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import headerImage from "../assets/header-image.png";
55
import cfsponsors from "../assets/sponsorship.png";
66
import { speakers } from "../data/speakers";
77
import { sponsors } from "../data/sponsors";
8+
import { testimonials } from "../data/testimonials";
89
import lionelSappImage from "../assets/speakers/lionel-sapp.jpeg";
910
import ryanCastilloImage from "../assets/speakers/ryan-castillo.jpeg";
11+
import paulChinJrImage from "../assets/testimonials/paul-chin-jr.jpeg";
1012
import issuetrakLogo from "../assets/sponsors/issuetrak.png";
1113
import marathonLogo from "../assets/sponsors/marathon.png";
1214
import opensearchLogo from "../assets/sponsors/opensearch.png";
@@ -27,6 +29,10 @@ const speakerImages: Record<string, any> = {
2729
"ryan-castillo.jpeg": ryanCastilloImage,
2830
};
2931
32+
const testimonialImages: Record<string, any> = {
33+
"paul-chin-jr.jpeg": paulChinJrImage,
34+
};
35+
3036
const sponsorLogos: Record<string, any> = {
3137
"issuetrak.png": issuetrakLogo,
3238
"marathon.png": marathonLogo,
@@ -181,7 +187,7 @@ const sponsorsByTier = {
181187
<script>
182188
// Handle active section highlighting
183189
function updateActiveSection() {
184-
const sections = document.querySelectorAll('section[id], div[id="about"], div[id="2024-highlights"], div[id="tickets"], div[id="venue"], div[id="speakers"], div[id="sponsors"]');
190+
const sections = document.querySelectorAll('section[id], div[id="about"], div[id="2024-highlights"], div[id="tickets"], div[id="venue"], div[id="speakers"], div[id="testimonials"], div[id="sponsors"]');
185191
const navLinks = document.querySelectorAll('.nav-link');
186192
const scrollPosition = window.scrollY + 100;
187193

@@ -214,6 +220,7 @@ const sponsorsByTier = {
214220
<a class="nav-link hover:text-teal-400 transition-colors duration-200 font-medium" href="#about">About</a>
215221
<a class="nav-link hover:text-teal-400 transition-colors duration-200 font-medium" href="#venue">Venue</a>
216222
<a class="nav-link hover:text-teal-400 transition-colors duration-200 font-medium" href="#speakers">Speakers</a>
223+
<a class="nav-link hover:text-teal-400 transition-colors duration-200 font-medium" href="#testimonials">Testimonials</a>
217224
<a class="nav-link hover:text-teal-400 transition-colors duration-200 font-medium" href="#2024-highlights">2024</a>
218225
</nav>
219226
</div>
@@ -525,6 +532,88 @@ const sponsorsByTier = {
525532

526533
<div class="section-divider"></div>
527534

535+
<!-- Testimonials Section -->
536+
<section id="testimonials">
537+
<h2 class="text-3xl font-bold text-gray-800 mb-4 text-center">What People Say</h2>
538+
<div class="bg-white rounded-lg p-6 card-shadow mb-6">
539+
<p class="text-center text-gray-700 mb-2">
540+
Hear from members of our community about their DevFest experience.
541+
</p>
542+
</div>
543+
544+
<div class="grid grid-cols-1 gap-6">
545+
{testimonials.map((testimonial) => (
546+
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-lg p-8 card-shadow border-2 border-teal-100">
547+
<div class="flex flex-col md:flex-row gap-6 items-center md:items-start">
548+
<div class="flex-shrink-0">
549+
<Image
550+
src={testimonialImages[testimonial.image]}
551+
alt={testimonial.name}
552+
class="w-24 h-24 rounded-full object-cover border-4 border-white shadow-md"
553+
width={96}
554+
height={96}
555+
/>
556+
</div>
557+
<div class="flex-1 text-center md:text-left">
558+
<svg class="w-8 h-8 text-teal-600 mb-3 mx-auto md:mx-0" fill="currentColor" viewBox="0 0 24 24">
559+
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
560+
</svg>
561+
<p class="text-lg md:text-xl text-gray-800 italic mb-4 leading-relaxed">
562+
"{testimonial.quote}"
563+
</p>
564+
<div class="flex flex-col items-center md:items-start gap-3">
565+
<p class="font-bold text-gray-900 text-lg">{testimonial.name}</p>
566+
<div class="flex flex-wrap items-center justify-center md:justify-start gap-3">
567+
{testimonial.linkedin && (
568+
<a
569+
href={testimonial.linkedin}
570+
target="_blank"
571+
rel="noopener noreferrer"
572+
class="inline-flex items-center gap-2 text-teal-600 hover:text-teal-800 font-medium transition-colors duration-200"
573+
>
574+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
575+
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
576+
</svg>
577+
LinkedIn
578+
</a>
579+
)}
580+
{testimonial.twitter && (
581+
<a
582+
href={testimonial.twitter}
583+
target="_blank"
584+
rel="noopener noreferrer"
585+
class="inline-flex items-center gap-2 text-cyan-500 hover:text-cyan-700 font-medium transition-colors duration-200"
586+
>
587+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
588+
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
589+
</svg>
590+
Twitter
591+
</a>
592+
)}
593+
{testimonial.bluesky && (
594+
<a
595+
href={testimonial.bluesky}
596+
target="_blank"
597+
rel="noopener noreferrer"
598+
class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-medium transition-colors duration-200"
599+
>
600+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
601+
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.055-.265.2-.532.34-.796.531-2.32 1.673-2.788 2.927-1.706 4.649 1.082 1.723 4.883 1.08 5.67-.542.364-.75.28-1.68.28-2.722 0 1.042-.084 1.972.28 2.722.787 1.622 4.588 2.265 5.67.542 1.082-1.722.614-2.976-1.706-4.649-.264-.191-.531-.331-.796-.531.14.017.279.035.415.055 2.67.296 5.568-.628 6.383-3.364.246-.829.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z"/>
602+
</svg>
603+
Bluesky
604+
</a>
605+
)}
606+
</div>
607+
</div>
608+
</div>
609+
</div>
610+
</div>
611+
))}
612+
</div>
613+
</section>
614+
615+
<div class="section-divider"></div>
616+
528617
<!-- Scholarship Section (Moved Below Speakers) -->
529618
<section class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-6 card-shadow border-2 border-green-200">
530619
<h3 class="text-2xl md:text-3xl font-bold text-center mb-3 text-gray-800">

0 commit comments

Comments
 (0)