Add premium configurator with split-screen layout
- Redesigned configurator page with split-screen interface - Left: Large visual preview with sticky positioning - Right: Premium white controls container with form steps - Added complete configurator wizard (5 steps) - Updated hero CTA to "Zelf ontwerpen" - Configured Shadcn UI with Slate theme - Added layout components (Navbar, Footer) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
46
components/layout/top-bar.tsx
Normal file
46
components/layout/top-bar.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import { Star, Phone, Globe } from "lucide-react";
|
||||
|
||||
export function TopBar() {
|
||||
return (
|
||||
<div className="bg-[#E8E8E6]">
|
||||
<div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
{/* Trustpilot */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className="size-3.5 fill-yellow-400 text-yellow-400"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-xs font-bold text-gray-700">4.8/5</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="size-3.5 fill-green-600 text-green-600" />
|
||||
<span className="text-xs font-medium text-gray-600">
|
||||
Trustpilot
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact & Language */}
|
||||
<div className="flex items-center gap-4 text-xs text-gray-600">
|
||||
<a
|
||||
href="tel:0851234567"
|
||||
className="flex items-center gap-1.5 font-medium transition-colors hover:text-gray-900"
|
||||
>
|
||||
<Phone className="size-3.5" />
|
||||
<span>085 - 1234 567</span>
|
||||
</a>
|
||||
<div className="h-3.5 w-px bg-gray-400" />
|
||||
<div className="flex items-center gap-1.5 font-medium">
|
||||
<Globe className="size-3.5" />
|
||||
<span>NL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user