chore: update homepage faqs & testimonials sections
This commit is contained in:
javayhu
parent
033ff64139
commit
4ef52c2c02
@ -712,8 +712,8 @@
|
||||
"description": "Choose the plan that works best for you"
|
||||
},
|
||||
"faqs": {
|
||||
"title": "Frequently Asked Questions",
|
||||
"description": "Please feel free to contact us if you have any questions",
|
||||
"title": "FAQ",
|
||||
"subtitle": "Frequently Asked Questions",
|
||||
"items": {
|
||||
"item-1": {
|
||||
"question": "Do you offer a free trial?",
|
||||
@ -739,7 +739,7 @@
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "Testimonials",
|
||||
"description": "What our customers say about us",
|
||||
"subtitle": "What our customers are saying",
|
||||
"items": {
|
||||
"item-1": {
|
||||
"name": "Jonathan Yombo",
|
||||
|
||||
@ -714,7 +714,7 @@
|
||||
},
|
||||
"faqs": {
|
||||
"title": "常见问题",
|
||||
"description": "如果您有任何问题，请随时联系我们",
|
||||
"subtitle": "如果您有任何问题，请随时联系我们",
|
||||
"items": {
|
||||
"item-1": {
|
||||
"question": "你们提供免费试用吗？",
|
||||
@ -740,7 +740,7 @@
|
||||
},
|
||||
"testimonials": {
|
||||
"title": "客户评价",
|
||||
"description": "我们的客户对我们的评价",
|
||||
"subtitle": "我们的客户对我们的评价",
|
||||
"items": {
|
||||
"item-1": {
|
||||
"name": "Jonathan Yombo",
|
||||
|
||||
@ -6,13 +6,13 @@ export default function CallToActionSection() {
|
||||
const t = useTranslations('HomePage.calltoaction');
|
||||
|
||||
return (
|
||||
<section className="py-24 w-full bg-muted">
|
||||
<section id="call-to-action" className="px-4 py-16 bg-background">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-balance text-4xl font-semibold lg:text-5xl">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<p className="mt-4">{t('description')}</p>
|
||||
<p className="mt-4 text-muted-foreground">{t('description')}</p>
|
||||
|
||||
<div className="mt-12 flex flex-wrap justify-center gap-4">
|
||||
<Button asChild size="lg">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { HeaderSection } from '@/components/layout/header-section';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
@ -54,22 +55,20 @@ export default function FaqSection() {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-16">
|
||||
<div className="mx-auto max-w-4xl px-4 md:px-6">
|
||||
<div className="mx-auto max-w-xl text-center">
|
||||
<h2 className="text-balance text-3xl font-bold tracking-tight">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<p className="text-muted-foreground mt-4 text-balance text-lg">
|
||||
{t('description')}
|
||||
</p>
|
||||
</div>
|
||||
<section id="faqs" className="px-4 py-16">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<HeaderSection
|
||||
title={t('title')}
|
||||
titleAs="h2"
|
||||
subtitle={t('subtitle')}
|
||||
subtitleAs="p"
|
||||
/>
|
||||
|
||||
<div className="mx-auto max-w-4xl mt-12">
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="bg-card ring-muted w-full rounded-2xl border px-8 py-3 shadow-sm ring-4 dark:ring-0"
|
||||
className="ring-muted w-full rounded-2xl border px-8 py-3 shadow-sm ring-4 dark:ring-0"
|
||||
>
|
||||
{faqItems.map((item) => (
|
||||
<AccordionItem
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { HeaderSection } from '@/components/layout/header-section';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { useTranslations } from 'next-intl';
|
||||
@ -104,51 +105,50 @@ export default function TestimonialsSection() {
|
||||
);
|
||||
|
||||
return (
|
||||
<section>
|
||||
<div className="py-16">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="text-center">
|
||||
<h2 className="text-title text-4xl lg:text-5xl font-semibold">
|
||||
{t('title')}
|
||||
</h2>
|
||||
<p className="text-body mt-6">{t('description')}</p>
|
||||
</div>
|
||||
<div className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
|
||||
{testimonialChunks.map((chunk, chunkIndex) => (
|
||||
<div key={chunkIndex} className="space-y-3">
|
||||
{chunk.map(({ name, role, quote, image }, index) => (
|
||||
<Card key={index} className="shadow-none">
|
||||
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-4">
|
||||
<Avatar className="size-9 border-2 border-gray-200">
|
||||
<AvatarImage
|
||||
alt={name}
|
||||
src={image}
|
||||
loading="lazy"
|
||||
width="120"
|
||||
height="120"
|
||||
/>
|
||||
<AvatarFallback />
|
||||
</Avatar>
|
||||
<section id="testimonials" className="px-4 py-16">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<HeaderSection
|
||||
title={t('title')}
|
||||
titleAs="h2"
|
||||
subtitle={t('subtitle')}
|
||||
subtitleAs="p"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h3 className="font-medium">{name}</h3>
|
||||
<div className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-12 lg:grid-cols-3">
|
||||
{testimonialChunks.map((chunk, chunkIndex) => (
|
||||
<div key={chunkIndex} className="space-y-3">
|
||||
{chunk.map(({ name, role, quote, image }, index) => (
|
||||
<Card key={index} className="shadow-none">
|
||||
<CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-4">
|
||||
<Avatar className="size-9 border-2 border-gray-200">
|
||||
<AvatarImage
|
||||
alt={name}
|
||||
src={image}
|
||||
loading="lazy"
|
||||
width="120"
|
||||
height="120"
|
||||
/>
|
||||
<AvatarFallback />
|
||||
</Avatar>
|
||||
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">
|
||||
{role}
|
||||
</span>
|
||||
<div>
|
||||
<h3 className="font-medium">{name}</h3>
|
||||
|
||||
<blockquote className="mt-3">
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{quote}
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-muted-foreground block text-sm tracking-wide">
|
||||
{role}
|
||||
</span>
|
||||
|
||||
<blockquote className="mt-3">
|
||||
<p className="text-gray-700 dark:text-gray-300">
|
||||
{quote}
|
||||
</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user