[V0_FILE]typescriptreact:file="app/page.tsx" import TestimonialsSection from "@/components/testimonials-section" import type { Metadata } from "next" export const metadata: Metadata = { title: "Testimonials | Client Success Stories", description: "Voices of trust: client stories and testimonials that illuminate our shared success.", openGraph: { title: "Testimonials | Client Success Stories", description: "Voices of trust: client stories and testimonials that illuminate our shared success.", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "Testimonials", }, ], }, } export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" "use client" import { useEffect, useRef } from "react" import Image from "next/image" import Slider from "react-slick" import { ArrowLeft, ArrowRight } from "lucide-react" import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css" // Testimonial data const testimonials = [ { id: 1, name: "Parmarth Mori", title: "CEO - PM Communications", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/parmarth-DKrjtS4UleoENgoN30cB2IB8Zh8UZ8.png", content: "Lorem ipsum dolor sit amet consectetur. Bibendum quis fringilla odio maecenas magna eu ultrices aliquam egestas. Enim phasellus eu commodo nibh vitae amet elit. Ut natoque dui.", }, { id: 2, name: "Kushal Shah", title: "CEO - Sky Cloud Consultancy", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/shah-HUhxdu91BvEeyajWeaU2KbIaHRUe4H.png", content: "Lorem ipsum dolor sit amet consectetur. Bibendum quis fringilla odio maecenas magna eu ultrices aliquam egestas. Enim phasellus eu commodo nibh vitae amet elit. Ut natoque dui.", }, { id: 3, name: "John Doe", title: "CTO - Tech Innovations", image: "/placeholder.svg?height=400&width=400", content: "Lorem ipsum dolor sit amet consectetur. Bibendum quis fringilla odio maecenas magna eu ultrices aliquam egestas. Enim phasellus eu commodo nibh vitae amet elit. Ut natoque dui.", }, { id: 4, name: "Jane Smith", title: "Director - Creative Solutions", image: "/placeholder.svg?height=400&width=400", content: "Lorem ipsum dolor sit amet consectetur. Bibendum quis fringilla odio maecenas magna eu ultrices aliquam egestas. Enim phasellus eu commodo nibh vitae amet elit. Ut natoque dui.", }, ] export default function TestimonialsSection() { const sliderRef = useRef(null) // Custom arrow components const PrevArrow = () => ( ) const NextArrow = () => ( ) // Slider settings const settings = { dots: false, infinite: true, speed: 500, slidesToShow: 2, slidesToScroll: 1, arrows: false, autoplay: true, autoplaySpeed: 5000, pauseOnHover: true, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, }, }, { breakpoint: 768, settings: { slidesToShow: 1, }, }, ], } // Smooth scroll setup useEffect(() => { document.documentElement.style.scrollBehavior = "smooth" return () => { document.documentElement.style.scrollBehavior = "auto" } }, []) return (

{/* Section header */}

Testimonials

VOICES OF TRUST: CLIENT STORIES, TESTIMONIALS THAT ILLUMINATE OUR SHARED SUCCESS.

{/* Testimonials slider */}

{testimonials.map((testimonial) => (

{testimonial.name}

{testimonial.title}

{testimonial.content}

))} {/* Custom navigation */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter, Montserrat } from "next/font/google" import "./globals.css" import "bootstrap/dist/css/bootstrap.min.css" // Font optimization const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) const montserrat = Montserrat({ subsets: ["latin"], display: "swap", variable: "--font-montserrat", }) export const metadata: Metadata = { title: "Client Testimonials", description: "Voices of trust: client stories and testimonials that illuminate our shared success.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } /* Custom Testimonial Styles */ .testimonial-card { position: relative; padding: 2rem; transition: all 0.3s ease; border-radius: 0.5rem; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Custom Slick Slider Styles */ .slick-track { display: flex !important; gap: 1rem; } .slick-slide { height: inherit !important; display: flex !important; } .slick-slide > div { display: flex; height: 100%; width: 100%; } /* Animation for testimonial cards */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .testimonial-card { animation: fadeIn 0.6s ease-out forwards; } /* Sharp edges and box shadows */ .testimonial-card img { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); border-radius: 4px; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" const defaultTheme = require("tailwindcss/defaultTheme") const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { fontFamily: { sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans], montserrat: ["var(--font-montserrat)"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, blue: { 400: "#3B82F6", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, boxShadow: { sharp: "4px 4px 0px 0px rgba(0, 0, 0, 0.2)", testimonial: "0 10px 30px rgba(0, 0, 0, 0.15)", }, animation: { "fade-in": "fadeIn 0.6s ease-out forwards", "slide-up": "slideUp 0.5s ease-out forwards", }, keyframes: { fadeIn: { "0%": { opacity: "0", transform: "translateY(20px)" }, "100%": { opacity: "1", transform: "translateY(0)" }, }, slideUp: { "0%": { transform: "translateY(20px)" }, "100%": { transform: "translateY(0)" }, }, }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]typescriptreact:file="next.config.mjs" isFixed="true" isQuickEdit="true" let userConfig = undefined try { userConfig = await import('./v0-user-next.config') } catch (e) { // ignore error } /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { domains: ['v0.blob.com'], formats: ['image/avif', 'image/webp'], unoptimized: true, }, experimental: { webpackBuildWorker: true, parallelServerBuildTraces: true, parallelServerCompiles: true, optimizeCss: true, }, } mergeConfig(nextConfig, userConfig) function mergeConfig(nextConfig, userConfig) { if (!userConfig) { return } for (const key in userConfig) { if ( typeof nextConfig[key] === 'object' && !Array.isArray(nextConfig[key]) ) { nextConfig[key] = { ...nextConfig[key], ...userConfig[key], } } else { nextConfig[key] = userConfig[key] } } } export default nextConfig [V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" "use client" import { useEffect, useState } from "react" import { ArrowUp } from "lucide-react" export default function ScrollToTop() { const [isVisible, setIsVisible] = useState(false) // Show button when page is scrolled down const toggleVisibility = () => { if (window.pageYOffset > 300) { setIsVisible(true) } else { setIsVisible(false) } } // Set up scroll event listener useEffect(() => { window.addEventListener("scroll", toggleVisibility) return () => window.removeEventListener("scroll", toggleVisibility) }, []) // Scroll to top function const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth", }) } return ( <> {isVisible && ( )} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This