Skip to content

Commit 5a9695d

Browse files
siennangsiennang
committed
Added a testimonial section
1 parent 45a0fd6 commit 5a9695d

File tree

5 files changed

+115
-2
lines changed

5 files changed

+115
-2
lines changed

‎public/video thumbnails/testimonial_kristin.png‎

695 KB
Loading

‎public/videos/Kent - FHA Loan revised.mp4‎

9.67 MB
Binary file not shown.

‎public/videos/Testimonial video.mp4‎

14.5 MB
Binary file not shown.

‎src/components/TestimonialSection.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React, { useState } from 'react';
2+
import { Link } from 'react-router-dom';
3+
import VideoModal from '../components/VideoModal';
4+
5+
type TestimonialVideo = {
6+
title: string;
7+
videoSrc: string;
8+
thumbnail: string;
9+
};
10+
11+
const testimonialVideo: TestimonialVideo = {
12+
title: 'Client Testimonial',
13+
videoSrc: '/videos/Testimonial video.mp4',
14+
thumbnail: '/video thumbnails/testimonial_kristin.png',
15+
};
16+
17+
export default function TestimonialSection() {
18+
const [activeVideo, setActiveVideo] = useState<TestimonialVideo | null>(null);
19+
20+
return (
21+
<>
22+
<section className="bg-white px-8 py-20">
23+
<div className="max-w-7xl mx-auto">
24+
<div className="grid gap-12 md:grid-cols-2 md:items-center">
25+
<div className="flex justify-center md:justify-end">
26+
<button
27+
type="button"
28+
onClick={() => setActiveVideo(testimonialVideo)}
29+
className="group w-full max-w-[280px] sm:max-w-[320px] md:max-w-[340px] text-left "
30+
aria-label="Play client testimonial video"
31+
>
32+
<div className="relative aspect-[9/16] overflow-hidden rounded-2xl bg-white shadow-2xl transition-shadow group-hover:shadow-xl">
33+
<img
34+
src={testimonialVideo.thumbnail}
35+
alt="Watch client testimonial"
36+
className="h-full w-full object-cover"
37+
loading="lazy"
38+
/>
39+
{/* Play button overlay */}
40+
<div className="absolute inset-0 flex items-center justify-center">
41+
<div className="w-14 h-14 rounded-full bg-black/60 flex items-center justify-center">
42+
<svg viewBox="0 0 24 24" fill="white" className="w-6 h-6 ml-1">
43+
<path d="M8 5v14l11-7z" />
44+
</svg>
45+
</div>
46+
</div>
47+
</div>
48+
</button>
49+
</div>
50+
51+
<div className="text-center md:text-left">
52+
<p className="text-lg font-bold tracking-wide text-gold uppercase">
53+
Client Testimonial
54+
</p>
55+
56+
<h2 className="mt-2 text-4xl md:text-5xl font-extrabold leading-tight">
57+
A real homeowner’s experience with Lock It Lending
58+
</h2>
59+
60+
<p className="mt-4 text-xl text-gray-700 font-semibold">
61+
Hear directly from a client about what it was like working with our team—from first
62+
questions to closing day.
63+
</p>
64+
65+
<ul className="mt-6 space-y-3 text-lg text-gray-700">
66+
<li className="flex gap-3 justify-center md:justify-start">
67+
<span className="text-gold font-bold">•</span> Clear communication and guidance
68+
</li>
69+
<li className="flex gap-3 justify-center md:justify-start">
70+
<span className="text-gold font-bold">•</span> Simple, transparent process
71+
</li>
72+
<li className="flex gap-3 justify-center md:justify-start">
73+
<span className="text-gold font-bold">•</span> Fast answers and confident next
74+
steps
75+
</li>
76+
</ul>
77+
78+
<div className="mt-8 flex flex-wrap gap-4 justify-center md:justify-start">
79+
<Link
80+
to="/purchase"
81+
className="inline-block bg-gold text-white text-lg px-8 py-3 rounded-full font-semibold shadow hover:opacity-90"
82+
>
83+
Get Started
84+
</Link>
85+
86+
{/*<a
87+
href="https://www.google.com/search?q=lock+it+lending+houston#lrd=0x8640c35d2a7a4eab:0xb5736063dbda6db6,1"
88+
target="_blank"
89+
rel="noopener noreferrer"
90+
className="inline-block border border-gold text-gold text-lg px-8 py-3 rounded-full font-semibold shadow hover:bg-gold hover:text-white transition-colors"
91+
>
92+
See All Reviews
93+
</a>*/}
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</section>
99+
100+
{activeVideo && (
101+
<VideoModal
102+
video={{ title: activeVideo.title, videoSrc: activeVideo.videoSrc }}
103+
onClose={() => setActiveVideo(null)}
104+
/>
105+
)}
106+
</>
107+
);
108+
}

‎src/pages/Home.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import HeroSection from '../components/HeroSection';
88
import { motion, AnimatePresence } from 'framer-motion';
99
import { getShuffledReviews } from '../data/reviewData';
1010
import HomepageVideoTeaser from '../components/HomepageVideoTeaser';
11+
import TestimonialSection from '../components/TestimonialSection';
1112

1213
declare global {
1314
interface Window {
@@ -118,8 +119,8 @@ const Home: React.FC = () => {
118119
</section>
119120

120121
{/* Updates That Move You Section */}
121-
<section className="py-4 bg-[#f7fbfd] px-8">
122-
<div className="max-w-7xl mx-auto text-center pt-20">
122+
<section className="py-20 bg-[#f7fbfd] px-8">
123+
<div className="max-w-7xl mx-auto text-center">
123124
<h2 className="text-5xl font-extrabold mb-6">Updates That Move You—Literally 🏡</h2>
124125
<p className="text-2xl text-gray-600 mb-12 font-semibold">
125126
Learn about products, events, and many other great offerings from Lock It Lending
@@ -172,6 +173,10 @@ const Home: React.FC = () => {
172173
</div>
173174
</section>
174175

176+
{/* Testimonials Section */}
177+
<section className="py-4 bg-white px-8">
178+
<TestimonialSection />
179+
</section>
175180
{/* Reviews Section */}
176181
<section className="bg-gray-50 px-4 sm:px-6 md:px-8 pt-20 pb-28 text-center">
177182
<div className="max-w-7xl mx-auto w-full">

0 commit comments

Comments
 (0)