Merge version_3_1783032161066 into main #2
@@ -12,7 +12,8 @@ import AboutSection from './HomePage/sections/About';
|
||||
import PropertiesSection from './HomePage/sections/Properties';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
|
||||
<SiteBackgroundSlot />
|
||||
@@ -24,6 +25,7 @@ export default function HomePage(): React.JSX.Element {
|
||||
<AboutSection />
|
||||
|
||||
<PropertiesSection />
|
||||
<TestimonialsSection />
|
||||
|
||||
<ContactSection />
|
||||
|
||||
|
||||
70
src/pages/HomePage/sections/Testimonials.tsx
Normal file
70
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import TextAnimation from '@/components/ui/TextAnimation';
|
||||
import Tag from '@/components/ui/Tag';
|
||||
import Card from '@/components/ui/Card';
|
||||
import RatingStars from '@/components/ui/RatingStars';
|
||||
import AvatarAuthor from '@/components/ui/AvatarAuthor';
|
||||
import ScrollReveal from '@/components/ui/ScrollReveal';
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<div data-webild-section="testimonials" className="relative w-full py-24 bg-background">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="flex flex-col items-center text-center mb-16">
|
||||
<Tag text="Testimonials" className="mb-6" />
|
||||
<TextAnimation
|
||||
text="What Our Clients Say"
|
||||
variant="slide-up"
|
||||
tag="h2"
|
||||
gradientText={false}
|
||||
className="text-4xl md:text-5xl font-bold text-foreground mb-6"
|
||||
/>
|
||||
<p className="text-lg text-accent max-w-2xl">
|
||||
Discover the experiences of those who have chosen Velar Empreendimentos for their luxury real estate journey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
name: "Elena Rostova",
|
||||
role: "Homeowner",
|
||||
quote: "Velar Empreendimentos transformed our vision into reality. The attention to detail and the quality of finishes in our new villa are simply unparalleled.",
|
||||
rating: 5,
|
||||
imageSrc: "https://picsum.photos/seed/1136901551/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Marcus Sterling",
|
||||
role: "Property Investor",
|
||||
quote: "As an investor, I look for properties that stand the test of time. Velar's developments not only offer exceptional design but also incredible long-term value.",
|
||||
rating: 5,
|
||||
imageSrc: "https://picsum.photos/seed/1308587893/1200/800"
|
||||
},
|
||||
{
|
||||
name: "Sophia Laurent",
|
||||
role: "Architect",
|
||||
quote: "Collaborating with Velar is always a privilege. Their commitment to architectural excellence and sustainable luxury sets a new standard in the industry.",
|
||||
rating: 5,
|
||||
imageSrc: "https://picsum.photos/seed/1785662118/1200/800"
|
||||
}
|
||||
].map((testimonial, index) => (
|
||||
<ScrollReveal variant="fade" key={index} delay={index * 0.1}>
|
||||
<Card className="p-8 h-full flex flex-col justify-between">
|
||||
<div>
|
||||
<RatingStars rating={testimonial.rating} className="mb-6" />
|
||||
<p className="text-foreground text-lg italic mb-8">
|
||||
"{testimonial.quote}"
|
||||
</p>
|
||||
</div>
|
||||
<AvatarAuthor
|
||||
name={testimonial.name}
|
||||
role={testimonial.role}
|
||||
imageSrc={testimonial.imageSrc}
|
||||
/>
|
||||
</Card>
|
||||
</ScrollReveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user