[V0_FILE]vue:file="petrotec-terminal.vue" type="vue" project="Petrotec Terminal" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" export default function PetrotecTerminal() { const [selectedFuel, setSelectedFuel] = useState(null) const selectFuel = (fuelType: string) => { setSelectedFuel(fuelType) console.log(`Selected fuel: ${fuelType}`) } const startFueling = () => { console.log("Starting fueling process...") } const insertCard = () => { console.log("Insert card action triggered") } return (

{/* Header Section */}

Petrotec

{/* Price Display Section */}

47.04 €

14.568 Gallons

{/* Promotional Banner Section */}

{/* Background with car image */}

{/* Content Overlay */}

{/* Brand Logo */}

galp evologic

{/* Promotional Badges */}

{/* +65km Badge */}

+65

Até

EXTRA

por depósito

{/* Extra Protection Badge */}

EXTRA

proteção

do motor

{/* Extra Savings Badge */}

EXTRA

poupança

{/* Touch to Start Button */}

{/* Fuel Selection Cards */}

{/* Top/Diesel Card - Orange */}

selectFuel("diesel")} className={`bg-orange-500 rounded-3xl p-6 flex flex-col text-center cursor-pointer hover:scale-105 hover:shadow-2xl transition-all duration-300 ${ selectedFuel === "diesel" ? "ring-4 ring-orange-300 scale-105" : "" }`} >

WHITELABEL

Top

4.599

SPRICE PER GALLON

ALL TAXES INCLUDED

DIESEL

{/* Regular/87 Card - Gray */}

selectFuel("regular")} className={`bg-slate-500 rounded-3xl p-6 flex flex-col text-center cursor-pointer hover:scale-105 hover:shadow-2xl transition-all duration-300 ${ selectedFuel === "regular" ? "ring-4 ring-slate-300 scale-105" : "" }`} >

WHITELABEL

Regular

3.899

SPRICE PER GALLON

ALL TAXES INCLUDED

{/* Premium/89 Card - Green */}

selectFuel("premium")} className={`bg-emerald-500 rounded-3xl p-6 flex flex-col text-center cursor-pointer hover:scale-105 hover:shadow-2xl transition-all duration-300 ${ selectedFuel === "premium" ? "ring-4 ring-emerald-300 scale-105" : "" }`} >

WHITELABEL

Premium

4.049

SPRICE PER GALLON

ALL TAXES INCLUDED

{/* Supreme/93 Card - Blue */}

selectFuel("supreme")} className={`bg-blue-500 rounded-3xl p-6 flex flex-col text-center cursor-pointer hover:scale-105 hover:shadow-2xl transition-all duration-300 ${ selectedFuel === "supreme" ? "ring-4 ring-blue-300 scale-105" : "" }`} >

WHITELABEL

Supreme

4.349

SPRICE PER GALLON

ALL TAXES INCLUDED

{/* Footer Section */}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isQuickEdit="true" import type { Config } from "tailwindcss" import defaultConfig from "shadcn/ui/tailwind.config" const config: Config = { ...defaultConfig, 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: { ...defaultConfig.theme, extend: { ...defaultConfig.theme.extend, fontFamily: { sans: ["Inter", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"], }, colors: { ...defaultConfig.theme.extend.colors, // Cores exatas do design "petrotec-orange": "#FF6B35", "petrotec-gray": "#718096", "petrotec-green": "#48BB78", "petrotec-blue": "#4299E1", "petrotec-bg": "#2D3748", }, fontSize: { "10xl": "10rem", "11xl": "12rem", }, fontWeight: { thin: "100", extralight: "200", light: "300", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [...defaultConfig.plugins, require("tailwindcss-animate")], } export default config