[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import type * as React from "react" import { ThemeProvider as NextThemesProvider } from "next-themes" export function ThemeProvider({ children, ...props }: React.ComponentProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { Card, CardContent } from "@/components/ui/card" import { Quote } from "lucide-react" const testimonials = [ { quote: "Snel en doeltreffend! Ik zocht een logo die mijn bedrijf perfect zou laten zien en bij MSwebdesign hebben ze mij niet teleurgesteld. :)", name: "Patrick", role: "Ondernemer", }, { quote: "Voor onze stichting wilden we onze oude website volledig vernieuwen en een heleboel handmatige taken automatiseren. MSwebdesign heeft voor ons een mooi product neergezet, volledig op maat met programmatuur waardoor we niet meer alles handmatig hoeven te doen.", name: "Mehmet", role: "Voorzitter non-profit stichting", }, { quote: "Voor mijn nieuwe bedrijf wilde ik een mooie frisse website die als visitekaartje zou functioneren. Nu heb ik een prachtige en snelle website die ook nog eens goed te vinden is op Google! Echt top.", name: "Youri", role: "Ondernemer", }, ] export function TestimonialsSection() { const scrollRef = useRef(null) useEffect(() => { const scrollContainer = scrollRef.current if (!scrollContainer) return let animationFrameId: number let scrollPosition = 0 const scrollSpeed = 0.5 const scroll = () => { scrollPosition += scrollSpeed if (scrollContainer.scrollWidth && scrollPosition >= scrollContainer.scrollWidth / 2) { scrollPosition = 0 } scrollContainer.scrollLeft = scrollPosition animationFrameId = requestAnimationFrame(scroll) } animationFrameId = requestAnimationFrame(scroll) return () => { cancelAnimationFrame(animationFrameId) } }, []) return (

Wat onze klanten over ons zeggen

Zoals we altijd doen, gaat kwaliteit bij ons voorop. Daarnaast streven we altijd naar zoveel mogelijk transparantie, zodat onze klanten weten waar ze aan toe zijn.

{/* Duplicate testimonials for seamless loop */} {[...testimonials, ...testimonials].map((testimonial, index) => (

{testimonial.quote}

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Check } from "lucide-react" import { QuoteFormDialog } from "@/components/quote-form-dialog" const pricingTiers = [ { name: "Basis Website", price: "€999", features: [ "Tot 5 pagina's", "Responsive design", "Basis SEO optimalisatie", "Contactformulier", "1 maand gratis onderhoud", ], highlighted: false, }, { name: "Pro Pakket", price: "€2.499", features: [ "Tot 15 pagina's", "Premium design", "Geavanceerde SEO", "CMS integratie", "E-commerce functionaliteit", "3 maanden gratis onderhoud", ], highlighted: true, }, { name: "Maatwerk", price: "Op aanvraag", features: [ "Onbeperkt aantal pagina's", "Custom functionaliteiten", "API integraties", "Dedicated projectmanager", "6 maanden gratis onderhoud", ], highlighted: false, }, ] export function PricingSection() { return (

Transparante Prijzen

Kies het perfecte pakket voor jouw project

Van startende ondernemers tot gevestigde bedrijven - wij hebben een passende oplossing

{pricingTiers.map((tier, index) => ( {tier.highlighted && (

⭐ Meest Gekozen

)} {tier.name}

{tier.price === "Op aanvraag" ? ( {tier.price} ) : ( <> Vanaf {tier.price} )}

{feature}

{tier.price === "Op aanvraag" ? "Neem Contact Op" : "Kies Pakket"} ))}

Alle pakketten inclusief gratis hosting setup en{" "} SSL certificaat

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { Github, Linkedin, Twitter } from "lucide-react" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ms-webdesign | Hoogwaardige Websites", description: "Moderne, resultaatgerichte webdesigns die bezoekers omzetten in klanten", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Navbar } from "@/components/navbar" import { HeroSection } from "@/components/hero-section" import { ServicesSection } from "@/components/services-section" import { AboutSection } from "@/components/about-section" import { ProcessSection } from "@/components/process-section" import { TestimonialsSection } from "@/components/testimonials-section" import { PortfolioSection } from "@/components/portfolio-section" import { PricingSection } from "@/components/pricing-section" import { ContactSection } from "@/components/contact-section" import { Footer } from "@/components/footer" export default function Home() { return (

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]png:file="public/modern-ecommerce-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-ecommerce-website-cmxUmZcGOlNDhyCnVSCNSzAbTRqfkt.png" isMerged="true" [V0_FILE]png:file="public/professional-corporate-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-corporate-website-PvkRaStFrLwEjhQPVP7NGZidMgWIp5.png" isMerged="true" [V0_FILE]png:file="public/generic-brand-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-brand-logo-T2PeNpiswPa5MRTkpAzloR6sVh06Lp.png" isMerged="true" [V0_FILE]png:file="public/restaurant-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/restaurant-website-design-FmI2ENV3BYFRH5R6mDPegVQlDVZ5Hd.png" isMerged="true" [V0_FILE]png:file="public/social-media-graphics.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social-media-graphics-nXkGPe7Il9NEiyvEquhkfx7iGhGLCW.png" isMerged="true" [V0_FILE]png:file="public/creative-portfolio-website.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/creative-portfolio-website-ARzhKyNbKWiKwKAVbb2xMDey28b2aE.png" isMerged="true" [V0_FILE]jpg:file="public/omgekeerde-stemwijzer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/omgekeerde-stemwijzer-A2a9QukvQL9wiSRuM0v2HcSiStIFgo.jpg" isMerged="true" [V0_FILE]jpg:file="public/autopoetsbedrijf-tahsin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/autopoetsbedrijf-tahsin-XufRr4sxhMAIRwVxY44wDGbetppimp.jpg" isMerged="true" [V0_FILE]jpg:file="public/smartwheels.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/smartwheels-63FFaHRNDla5xBt8GLweX1wLFrPn41.jpg" isMerged="true" [V0_FILE]jpg:file="public/murat-sahin-portfolio.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/murat-sahin-portfolio-m1MiHbUeut6lJ8EpNDMffHpThWK4e7.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/portfolio-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { ExternalLink } from "lucide-react" import { Button } from "@/components/ui/button" const projects = [ { title: "De Omgekeerde Stemwijzer", category: "AI/ML & Web Development", image: "/omgekeerdestemwijzer-banner.png", description: "AI-powered app voor de Tweede Kamerverkiezingen 2025. Gebruikers stellen vragen over partijstandpunten en krijgen 100% feitelijke antwoorden uit officiële partijprogramma's met RAG-technologie.", url: "https://de-omgekeerde-stemwijzer.onrender.com/", tags: ["Next.js", "AI/ML", "RAG", "TypeScript"], }, { title: "Autopoetsbedrijf Tahsin", category: "Web Design & Development", image: "/autopoetsbedrijf-tahsin-project.png", description: "Professionele website voor autopoetsbedrijf met meer dan 20 jaar ervaring. Complete presentatie van diensten, wasstraat en garage met modern, responsief design.", url: "https://www.autopoetsbedrijftahsin.nl/", tags: ["React", "Next.js", "Tailwind CSS"], }, { title: "CAN Uitzendbureau", category: "Web Development", image: "/can-uitzendbureau-project.png", description: "Uitzendbureau gespecialiseerd in de tuinbouw regio Den Haag met 30 jaar ervaring. Website met diensten overzicht en directe contactmogelijkheden voor werkgevers en werkzoekenden.", url: "https://canbv.nl/", tags: ["Next.js", "React", "Tailwind CSS"], }, { title: "Murat Sahin Portfolio", category: "Portfolio Website", image: "/murat-sahin-portfolio.png", description: "Professionele portfolio website voor full-stack developer. Showcase van projecten, skills en ervaring met modern, strak design en donker thema.", url: "https://murat-sahin-dev.vercel.app/", tags: ["Next.js", "TypeScript", "Tailwind CSS", ".NET Core"], }, ] export function PortfolioSection() { return (

Ons Portfolio

Bekijk een selectie van onze recente projecten en ontdek hoe wij bedrijven helpen groeien met krachtige digitale oplossingen.

{projects.map((project, index) => (

{project.category}

{project.title}

{project.description}

{project.tags.map((tag, tagIndex) => ( {tag} ))}

))}

) } [V0_FILE]png:file="public/omgekeerdestemwijzer-banner.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/omgekeerdestemwijzer-banner-Bxf2ktDlt0YWdZjaTLmwHSVHw26RoF.png" isMerged="true" [V0_FILE]png:file="public/murat-sahin-portfolio.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/MS-portfolio-DPM9mfyJ7R2egutKdT107FF0uFvdwN.png" isMerged="true" [V0_FILE]png:file="public/autopoetsbedrijf-tahsin-project.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Autopoetsbedrijftahsin-project-OiMxCrrbIXNOEOJljzWP38RvrQdoRa.png" isMerged="true" [V0_FILE]png:file="public/can-uitzendbureau-project.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Canbv-project-bIDh1vcszWv60U8LfHHukqynspLotI.png" isMerged="true" [V0_FILE]typescriptreact:file="components/quote-form-dialog.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface QuoteFormDialogProps { packageName?: string variant?: "default" | "outline" className?: string children?: React.ReactNode } export function QuoteFormDialog({ packageName, variant = "default", className, children }: QuoteFormDialogProps) { const [open, setOpen] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", phone: "", company: "", package: packageName || "", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("[v0] Quote form submitted:", formData) // Here you would typically send the form data to your backend setOpen(false) // Reset form setFormData({ name: "", email: "", phone: "", company: "", package: packageName || "", message: "", }) } return (

About

Tags

Share

About

Tags

Share

More from m-sahin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from m-sahin

More Templates Like This