84:I[903690,["/chat-static/_next/static/immutable/chunks/0anbsr6ytl7bn.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3a9zhphvqnvzm.js","/chat-static/_next/static/immutable/chunks/2ljszvh-8yzpr.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1fd55qiest67z.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1lb5wnsc7sqpv.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2c2etj27swdtd.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0ckkywnbdkyhx.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3dtebtzto2hzn.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/297a3ievwg7ti.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/118hiewbivm20.js","/chat-static/_next/static/immutable/chunks/1wnjcr8d0euv6.js","/chat-static/_next/static/immutable/chunks/1tucuwc54jwz-.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0byovcw2r0gss.js"],"ExplicitChatIdProvider"] 85:I[838238,["/chat-static/_next/static/immutable/chunks/0anbsr6ytl7bn.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3a9zhphvqnvzm.js","/chat-static/_next/static/immutable/chunks/2ljszvh-8yzpr.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1fd55qiest67z.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/1lb5wnsc7sqpv.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/2c2etj27swdtd.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0ckkywnbdkyhx.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3dtebtzto2hzn.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1dvpa8vmf1cw-.js","/chat-static/_next/static/immutable/chunks/297a3ievwg7ti.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/118hiewbivm20.js","/chat-static/_next/static/immutable/chunks/1wnjcr8d0euv6.js","/chat-static/_next/static/immutable/chunks/1tucuwc54jwz-.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/0byovcw2r0gss.js"],"SWRDataProvider"] 86:Tab41,[V0_FILE]jpg:file="public/modern-web-design-portfolio-project.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-web-design-portfolio-project-xnUYMP40vExgnDTbmjjOK3idjLLVRE.jpg" isMerged="true" [V0_FILE]jpg:file="public/product-design-interface-showcase.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/product-design-interface-showcase-gsmpWtfK9qpCDm6mjWKwF7VAZNsE9H.jpg" isMerged="true" [V0_FILE]jpg:file="public/bold-website-design-example.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bold-website-design-example-cW9JnkWKTQyYSddLf0d7gOuIXvmh5r.jpg" isMerged="true" [V0_FILE]jpg:file="public/digital-experience-design-work.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-experience-design-work-6NL1bCn2h7FZ3geXRmFElxs9mpkrVd.jpg" isMerged="true" [V0_FILE]png:file="public/images/image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-dld7ABYT9fXp2NKtju6uPThTX3ljEp.png" isMerged="true" [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.10", "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": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.23.26" }, "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]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono, Faculty_Glyphic } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) const _facultyGlyphic = Faculty_Glyphic({ subsets: ["latin"], weight: ["400"] }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; /* Added Faculty Glyphic font family for buttons */ --font-display: "Faculty Glyphic", "Geist Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { MainLayout } from "@/components/main-layout" import { PortfolioLayout } from "@/components/portfolio-layout" export default function Home() { return ( ) } [V0_FILE]typescriptreact:file="app/work/[id]/page.tsx" isEdit="true" isMerged="true" import { notFound } from "next/navigation" import { ProjectDetail } from "@/components/project-detail" import { MainLayout } from "@/components/main-layout" import { PROJECTS, getProjectById } from "@/lib/project-data" export function generateStaticParams() { return PROJECTS.map((project) => ({ id: project.id, })) } export default async function ProjectPage({ params }: { params: Promise<{ id: string }> }) { const { id } = await params const project = getProjectById(id) if (!project) { notFound() } return ( ) } [V0_FILE]typescriptreact:file="components/main-layout.tsx" isEdit="true" isMerged="true" import type React from "react" import { DesignSidebar } from "@/components/design-sidebar" interface MainLayoutProps { children: React.ReactNode } export function MainLayout({ children }: MainLayoutProps) { return (

{/* Sidebar - Fixed position: Desktop 30%, Tablet 40%, Mobile: normal flow at top */}

{/* Main Content - Offset by sidebar width on tablet/desktop */}

{children}

) } [V0_FILE]typescriptreact:file="hooks/use-mobile.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" const MOBILE_BREAKPOINT = 768 export function useIsMobile() { const [isMobile, setIsMobile] = React.useState(undefined) React.useEffect(() => { const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) const onChange = () => { setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) } mql.addEventListener("change", onChange) setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) return () => mql.removeEventListener("change", onChange) }, []) return !!isMobile } export function useMediaQuery(query: string) { const [matches, setMatches] = React.useState(false) React.useEffect(() => { const media = window.matchMedia(query) if (media.matches !== matches) { setMatches(media.matches) } const listener = () => setMatches(media.matches) media.addEventListener("change", listener) return () => media.removeEventListener("change", listener) }, [matches, query]) return matches } [V0_FILE]png:file="public/vessel-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vessel%20Logo%404x-5RyFSO5pSewqsZAhfxCHNwvgsD1BJF.png" isMerged="true" [V0_FILE]png:file="public/images/vessel-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vessel%20Logo%404x-4PzBajijlj7BpJHOsmAUgscOrxqF4Z.png" isMerged="true" [V0_FILE]typescriptreact:file="components/design-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { ArrowRightCircle } from "lucide-react" import { AboutModal } from "./about-modal" import Image from "next/image" // Constants for company logos const TRUSTED_COMPANIES = [ { name: "Euphoria", icon: "EUPH" }, { name: "Focal Point", icon: "FOCAL" }, { name: "45 Degrees", icon: "45°" }, { name: "CoreOS", icon: "CORE" }, { name: "EasyTax", icon: "TAX" }, { name: "Epicurious", icon: "EPIC" }, ] const TESTIMONIALS = [ { quote: "From early concepts to final delivery, Vessel delivered thoughtful design with real impact. The result feels modern, confident, and built to scale.", author: "Sarah L", role: "Co-Founder", }, { quote: "Working with Vessel was a breeze. They took our scattered ideas and turned them into a beautiful, modern website. Couldn't be happier with the result.", author: "Diego A", role: "Founder & CEO", }, { quote: "Vessel made the entire process feel effortless. They brought clarity, structure, and a strong sense of direction to our product and site.", author: "Alex M", role: "Product Lead", }, ] // Helper for ticker items const TickerItem = ({ item }: { item: (typeof TRUSTED_COMPANIES)[0] }) => (

{item.icon} {item.name}

) export const DesignSidebar = () => { const [testimonialIndex, setTestimonialIndex] = useState(0) // Auto-rotate testimonials useEffect(() => { const timer = setInterval(() => { setTestimonialIndex((prev) => (prev + 1) % TESTIMONIALS.length) }, 5000) return () => clearInterval(timer) }, []) return (

{/* Top Content */}

{/* Text + Button Section */}

Bold web & product design for the builders of tomorrow.

Vessel helps tomorrow's builders craft sharper products, smarter sites, and experiences built to lead.

{/* Bottom Content */}

{/* Ticker Section */}

Trusted By World Class Companies.

{[...TRUSTED_COMPANIES, ...TRUSTED_COMPANIES].map((company, idx) => ( ))} {/* Gradient Fades for Ticker */}

{/* Testimonial Section */}

{TESTIMONIALS[testimonialIndex].quote}

{TESTIMONIALS[testimonialIndex].author} — {TESTIMONIALS[testimonialIndex].role}

{/* Pagination dots */}

{TESTIMONIALS.map((_, i) => (

) } [V0_FILE]typescriptreact:file="components/about-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Drawer, DrawerContent } from "@/components/ui/drawer" import { useMediaQuery } from "@/hooks/use-mobile" import Image from "next/image" export const AboutModal = () => { const [open, setOpen] = useState(false) const isDesktop = useMediaQuery("(min-width: 768px)") const AboutContent = () => (

{/* Headline */}

Bold web & product design for the builders of tomorrow.

{/* Body Paragraphs */}

Vessel began with a simple idea: design should help ambitious builders move forward with clarity and confidence. Today, we partner with founders, teams, and creators to craft sharper products, smarter sites, and digital experiences built to lead.

Through thoughtful web and product design, we simplify complexity, elevate ideas, and support long-term growth.

) if (isDesktop) { return ( <> ) } return ( <> ) } [V0_FILE]png:file="public/images/vessel-20logo-404x.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Vessel%20Logo%404x-4PzBajijlj7BpJHOsmAUgscOrxqF4Z.png" isMerged="true" [V0_FILE]typescriptreact:file="components/contact-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Clock } from "lucide-react" import { motion } from "framer-motion" import { SERVICES_OPTIONS, BUDGET_OPTIONS } from "@/lib/project-data" const fadeInUp = { initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-100px" }, transition: { duration: 0.6, ease: "easeOut" }, } export function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", service: "", message: "", budget: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) alert("Thank you for your message! This is a demo form.") } return (

Contact Form

Let us build your next showstopping project.

Name setFormData({ ...formData, name: e.target.value })} required />

Email setFormData({ ...formData, email: e.target.value })} required />

Service

What help do you need?

setFormData({ ...formData, message: e.target.value })}
            required
          />
        </div>

<div className="flex flex-col gap-2">
          <label className="text-[13px] font-normal text-black">What is your budget?</label>
          <div className="relative">
            <select
              className="w-full h-10 px-4 pr-10 bg-[#bbbbbb26] rounded-full border-none text-sm appearance-none focus:outline-none text-[#999999]"
              value={formData.budget}
              onChange={(e) => setFormData({ ...formData, budget: e.target.value })}
              required
            >
              <option value="" disabled>
                Select...
              </option>
              {BUDGET_OPTIONS.map((opt) => (
                <option key={opt} value={opt} className="text-black">
                  {opt}
                </option>
              ))}
            </select>
            <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
                stroke="#999999"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M3.5 6L 8 10.5L 12.5 6" />
              </svg>
            </div>
          </div>
        </div>

<div className="flex flex-wrap items-center justify-between gap-5 mt-8">
          <div className="flex items-center gap-2.5">
            <Clock className="w-5 h-5 text-[#595959]" />
            <span className="text-sm text-[#595959]">12 hours typical response</span>
          </div>
          <button
            type="submit"
            className="w-full md:w-[240px] h-10 bg-[#0f0f12] text-white rounded-full font-semibold text-sm hover:bg-[#1a1a21] transition-colors cursor-pointer"
          >
            Submit
          </button>
        </div>
      </form>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/portfolio-layout.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { ArrowUpRight } from "lucide-react"
import { motion } from "framer-motion"
import { PROJECTS } from "@/lib/project-data"
import { ContactForm } from "./contact-form"

export const PortfolioLayout = () => {
  return (
    <div className="flex-1 overflow-y-auto p-6 md:p-8 bg-[#fafafa]">
      <div className="max-w-[1200px] mx-auto space-y-6">
        {PROJECTS.map((project) => (
          <Link
            key={project.id}
            href={`/work/${project.id}`}
            className="group block bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow relative"
          >
            <div className="relative overflow-hidden">
              <img
                src={project.heroImage || "/placeholder.svg"}
                alt={project.title}
                className="w-full aspect-[4/3] object-cover transition-transform duration-700 ease-out group-hover:scale-105"
              />

<div className="absolute bottom-0 left-0 right-0 p-6 md:p-8 flex items-end justify-between opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                <div className="flex items-center gap-2 text-white">
                  <span className="text-xl md:text-2xl font-medium">{project.title}</span>
                  <ArrowUpRight className="w-5 h-5 md:w-6 md:h-6 transition-transform duration-300 group-hover:-rotate-45" />
                </div>
                <span className="text-xl md:text-2xl text-white font-light">{project.year}</span>
              </div>
            </div>
          </Link>
        ))}

interface ProjectData {
  id: string
  title: string
  year: string
  services: string[]
  linkText: string
  linkUrl: string
  overview: { title: string; content: string }
  direction: { title: string; content: string }
  outcome: { title: string; content: string }
  heroImage: string
  galleryImages: string[]
  nextProject: string
}

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-100px" },
  transition: { duration: 0.6, ease: "easeOut" },
}

export function ProjectDetail({ project }: { project: ProjectData }) {
  const nextProject = getNextProject(project.id)

return (
    <div className="bg-white">
      <div className="max-w-[800px] mx-auto px-6 py-12">
        <Link
          href="/"
          className="inline-flex items-center gap-2 mb-8 text-sm text-[#595959] hover:text-black transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          Back to home
        </Link>

{/* Back Link */}
        <Link
          href="/"
          className="fixed bottom-6 right-6 z-50 w-12 h-12 bg-[#0f0f12] text-white rounded-full flex items-center justify-center shadow-lg hover:bg-[#1a1a21] transition-colors"
          aria-label="Back to home"
        >
          <Home className="w-5 h-5" />
        </Link>

{/* Header Section */}
        <motion.header className="mb-12" {...fadeInUp}>
          <h1 className="text-[32px] font-semibold text-black mb-6">{project.title}</h1>

<div className="flex flex-wrap gap-x-12 gap-y-4 text-sm">
            <div>
              <span className="text-[#999999] block mb-1">Year</span>
              <span className="text-black">{project.year}</span>
            </div>

<div>
              <span className="text-[#999999] block mb-1">Services</span>
              <div className="flex gap-2">
                {project.services.map((service) => (
                  <span key={service} className="text-black">
                    {service}
                  </span>
                ))}
              </div>
            </div>

<div className="ml-auto">
              <span className="text-[#999999] block mb-1">Link</span>
              <a href={project.linkUrl} className="text-black hover:underline">
                {project.linkText}
              </a>
            </div>
          </div>
        </motion.header>

{/* Hero Image */}
        <motion.div className="mb-12 rounded-2xl overflow-hidden" {...fadeInUp}>
          <img
            src={project.heroImage || "/placeholder.svg"}
            alt={`${project.title} hero`}
            className="w-full aspect-[4/3] object-cover"
          />
        </motion.div>

{/* Overview Text */}
        <motion.section className="mb-12 max-w-[500px]" {...fadeInUp}>
          <h2 className="text-lg font-semibold text-black mb-3">{project.overview.title}</h2>
          <p className="text-sm text-[#595959] leading-relaxed">{project.overview.content}</p>
        </motion.section>

{/* Gallery Images */}
        <div className="space-y-6 mb-12">
          {project.galleryImages.map((src, index) => (
            <motion.div key={index} className="rounded-2xl overflow-hidden" {...fadeInUp}>
              <img
                src={src || "/placeholder.svg"}
                alt={`${project.title} gallery ${index + 1}`}
                className="w-full aspect-[4/3] object-cover"
              />
            </motion.div>
          ))}
        </div>

{/* Direction Text */}
        <motion.section className="mb-12 max-w-[500px]" {...fadeInUp}>
          <h2 className="text-lg font-semibold text-black mb-3">{project.direction.title}</h2>
          <p className="text-sm text-[#595959] leading-relaxed">{project.direction.content}</p>
        </motion.section>

{/* Outcome Text */}
        <motion.section className="mb-16 max-w-[500px]" {...fadeInUp}>
          <h2 className="text-lg font-semibold text-black mb-3">{project.outcome.title}</h2>
          <p className="text-sm text-[#595959] leading-relaxed">{project.outcome.content}</p>
        </motion.section>

{/* Navigation Section */}
        <motion.div className="flex justify-center mb-24" {...fadeInUp}>
          <Link
            href={`/work/${nextProject.id}`}
            className="inline-flex items-center gap-2 px-6 py-3 bg-[#0a0a20] text-white rounded-full text-sm font-medium hover:bg-[#1a1a30] transition-colors"
          >
            {nextProject.title}
            <ArrowRight className="w-4 h-4" />
          </Link>
        </motion.div>

{/* Contact Section */}
        <ContactForm />

{/* Footer Logo Section */}
        <motion.div
          className="w-full pt-24 pb-12 flex justify-center items-center"
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 0.1 }}
          transition={{ duration: 1 }}
        >
          <div className="text-[120px] font-bold text-black tracking-tighter select-none">VESSEL</div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/project-data.ts" isEdit="true" isQuickEdit="true"
export const PROJECTS = [
  {
    id: "baseline",
    title: "Baseline",
    year: "2025",
    services: ["Branding", "Web Design"],
    linkText: "Visit Site",
    linkUrl: "#",
    overview: {
      title: "Overview",
      content:
        "Baseline is a modern tennis brand concept built around balance, discipline, and quiet confidence. The project explores how performance-led sports branding can feel premium and lifestyle-focused without leaning on aggressive visuals.",
    },
    direction: {
      title: "Direction",
      content:
        "Neutral tones establish a calm, understated foundation, while natural light adds warmth and authenticity to the scene. An editorial approach to composition introduces structure and flow, guiding the eye with intention and creating a sense of visual clarity and rhythm throughout.",
    },
    outcome: {
      title: "Outcome",
      content:
        "A refined brand foundation built for longevity and flexibility, crafted to translate seamlessly across digital platforms and physical touchpoints while maintaining consistency, clarity, and recognition as the brand grows.",
    },
    heroImage: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=900&fit=crop",
    galleryImages: [
      "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=1200&h=900&fit=crop",
    ],
    nextProject: "elan",
  },
  {
    id: "elan",
    title: "Élan No. 7",
    year: "2024",
    services: ["Visual Design", "Web Design"],
    linkText: "Visit Site",
    linkUrl: "#",
    overview: {
      title: "Overview",
      content:
        "Élan No. 7 is a luxury fragrance brand identity designed to evoke elegance and sophistication. The project balances minimalist aesthetics with rich, sensory-driven storytelling.",
    },
    direction: {
      title: "Direction",
      content:
        "Soft gradients and muted tones create an atmosphere of understated luxury. Typography choices emphasize refinement while maintaining readability across all touchpoints.",
    },
    outcome: {
      title: "Outcome",
      content:
        "A cohesive brand system that translates beautifully from digital experiences to physical packaging, establishing a memorable presence in the competitive luxury market.",
    },
    heroImage: "https://images.unsplash.com/photo-1567016432779-094069958ea5?w=1200&h=900&fit=crop",
    galleryImages: [
      "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&h=900&fit=crop",
    ],
    nextProject: "nexus",
  },
  {
    id: "nexus",
    title: "Nexus",
    year: "2024",
    services: ["Framer Dev", "Web Design"],
    linkText: "Visit Site",
    linkUrl: "#",
    overview: {
      title: "Overview",
      content:
        "Nexus is a SaaS platform interface designed for modern teams. The focus was on creating an intuitive, powerful dashboard that feels approachable yet professional.",
    },
    direction: {
      title: "Direction",
      content:
        "Clean lines and purposeful whitespace guide users through complex workflows. The color system supports hierarchy while maintaining visual harmony across all states.",
    },
    outcome: {
      title: "Outcome",
      content:
        "A scalable design system that improved user engagement by 40% and reduced onboarding time significantly through intuitive navigation patterns.",
    },
    heroImage: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=900&fit=crop",
    galleryImages: [
      "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=1200&h=900&fit=crop",
    ],
    nextProject: "aurora",
  },
  {
    id: "aurora",
    title: "Aurora",
    year: "2024",
    services: ["Branding", "Visual Design"],
    linkText: "Visit Site",
    linkUrl: "#",
    overview: {
      title: "Overview",
      content:
        "Aurora is a wellness and meditation app brand that brings calm and clarity to daily life. The design language reflects tranquility while remaining engaging and modern.",
    },
    direction: {
      title: "Direction",
      content:
        "Soft, organic shapes combined with a serene color palette create an immersive experience. Every interaction was designed to feel gentle and intentional.",
    },
    outcome: {
      title: "Outcome",
      content:
        "A brand identity that resonates deeply with users seeking mindfulness, resulting in strong community growth and positive user sentiment.",
    },
    heroImage: "https://images.unsplash.com/photo-1541643600914-78b084683601?w=1200&h=900&fit=crop",
    galleryImages: [
      "https://images.unsplash.com/photo-1588405748880-12d1d2a59d75?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1563170351-be82bc888aa4?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?w=1200&h=900&fit=crop",
    ],
    nextProject: "forge",
  },
  {
    id: "forge",
    title: "Forge",
    year: "2023",
    services: ["Web Design", "Framer Dev"],
    linkText: "Visit Site",
    linkUrl: "#",
    overview: {
      title: "Overview",
      content:
        "Forge is a creative agency portfolio that showcases bold work through an equally bold digital presence. The site itself became a statement of capability.",
    },
    direction: {
      title: "Direction",
      content:
        "High contrast and dynamic layouts create energy and movement. Micro-interactions reward exploration while maintaining focus on the work itself.",
    },
    outcome: {
      title: "Outcome",
      content:
        "A portfolio that doubled client inquiries and established Forge as a leader in innovative digital experiences within their market.",
    },
    heroImage: "https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=1200&h=900&fit=crop",
    galleryImages: [
      "https://images.unsplash.com/photo-1581092162384-8987c1d64718?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1200&h=900&fit=crop",
      "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=1200&h=900&fit=crop",
    ],
    nextProject: "baseline",
  },
]

export const SERVICES_OPTIONS = ["Web Design", "Framer Dev", "Visual Design", "Branding", "Other"]
export const BUDGET_OPTIONS = ["$1-$5k", "$5-$10k", "$10-$20k", "$20-$50k", "$50k+"]

export function getProjectById(id: string) {
  return PROJECTS.find((p) => p.id === id)
}

export function getNextProject(currentId: string) {
  const current = getProjectById(currentId)
  if (!current) return PROJECTS[0]
  return getProjectById(current.nextProject) || PROJECTS[0]
}7a:["$","$L84",null,{"chatId":"uhPuGJOBDdn","children":["$","$L85",null,{"data":{"@\"active-block\",\"uhPuGJOBDdn\",":{"id":"b_4t6mJa6I9qr","messageId":"e3DFQ0XesWlwZVUkuAJSibWYwvFyzDS8","source":"$86","language":"typescriptreact","type":"code-project","closed":true,"meta":{"type":"code-project","project":"Code","taskNameActive":"Updating project images with themes","taskNameComplete":"Updated project images with themes"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"uhPuGJOBDdn\",":false,"":null},"children":"$L87"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from mikeyi2a

More Templates Like This