Download index.php from vergen-dev/deepsite-project-de4im: direct link, hf CLI and curl.
- Browser
- Download file 52.1 kB
-
https://huggingface.co/spaces/vergen-dev/deepsite-project-de4im/resolve/main/index.php
- Command line
-
hf download hf://spaces/vergen-dev/deepsite-project-de4im/index.php
-
curl -L -o index.php https://huggingface.co/spaces/vergen-dev/deepsite-project-de4im/resolve/main/index.php
52.1 kB
| // ========================= | |
| // Config OFT MGMT × VERGEN | |
| // ========================= | |
| require_once 'db_connect.php'; | |
| // Prevent caching | |
| header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); | |
| header("Cache-Control: post-check=0, pre-check=0", false); | |
| header("Pragma: no-cache"); | |
| function get_config($db, $key, $default = '') { | |
| try { | |
| $stmt = $db->prepare("SELECT value_text FROM config WHERE key_name = ?"); | |
| $stmt->execute([$key]); | |
| $res = $stmt->fetchColumn(); | |
| return $res !== false ? $res : $default; | |
| } catch(Exception $e) { return $default; } | |
| } | |
| $brand = get_config($db, 'brand', 'OFT MGMT'); | |
| $tagline = get_config($db, 'tagline'); | |
| $email = get_config($db, 'email'); | |
| $phone = get_config($db, 'phone'); | |
| $whatsapp = get_config($db, 'whatsapp_url'); | |
| $instagram = get_config($db, 'instagram_url'); | |
| $instagram_label = get_config($db, 'instagram_label', '@oft_mgmt'); | |
| $tiktok = get_config($db, 'tiktok_url'); | |
| $callUrl = get_config($db, 'booking_url'); | |
| $address = get_config($db, 'address'); | |
| $year = date('Y'); | |
| // Load Lists | |
| $stats_list = $db->query("SELECT * FROM stats ORDER BY sort_order ASC")->fetchAll(); | |
| $services_list = $db->query("SELECT * FROM services ORDER BY sort_order ASC")->fetchAll(); | |
| $founders_list = $db->query("SELECT * FROM founders ORDER BY sort_order ASC")->fetchAll(); | |
| $cases_list = $db->query("SELECT * FROM cases ORDER BY sort_order ASC")->fetchAll(); | |
| $pricing_list = $db->query("SELECT * FROM pricing ORDER BY sort_order ASC")->fetchAll(); | |
| $faq_list = $db->query("SELECT * FROM faq ORDER BY sort_order ASC")->fetchAll(); | |
| // Load New Lists | |
| $solutions_list = $db->query("SELECT * FROM solutions ORDER BY sort_order ASC")->fetchAll(); | |
| $goals_list = $db->query("SELECT * FROM goals ORDER BY sort_order ASC")->fetchAll(); | |
| $roadmap_list = $db->query("SELECT * FROM roadmap ORDER BY sort_order ASC")->fetchAll(); | |
| $bottom_stats_list = $db->query("SELECT * FROM bottom_stats ORDER BY sort_order ASC")->fetchAll(); | |
| $gallery_list = $db->query("SELECT * FROM about_gallery ORDER BY sort_order ASC")->fetchAll(); | |
| // Extra Configs | |
| $hero_h1 = get_config($db, 'hero_h1', 'Creatività <span class="accent">intelligente</span><br>risultati concreti'); | |
| $hero_sub = get_config($db, 'hero_sub', $tagline); | |
| $video_url = get_config($db, 'video_embed_url', 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&rel=0'); | |
| // About Text | |
| $about_title = get_config($db, 'about_title', 'Chi <span class="accent">siamo</span>'); | |
| $about_intro = get_config($db, 'about_intro'); | |
| $about_txt1 = get_config($db, 'about_text_1'); | |
| $about_txt2 = get_config($db, 'about_text_2'); | |
| // Contact Text | |
| $contact_title = get_config($db, 'contact_title', 'Contatti'); | |
| $contact_intro = get_config($db, 'contact_intro'); | |
| // SEO canonical and OG absolute URLs | |
| $scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http'; | |
| $host = $_SERVER['HTTP_HOST'] ?? 'localhost'; | |
| $path = strtok($_SERVER['REQUEST_URI'] ?? '/', '?') ?: '/'; | |
| $canonical = $scheme.'://'.$host.$path; | |
| $ogImage = $scheme.'://'.$host.'/LOGO1.png'; | |
| function e($s){ return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); } | |
| <!doctype html> | |
| <html lang="it"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title> echo e($brand); × VERGEN Tech — Agenzia Creativa & Tecnologia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | |
| <meta name="description" content="<?php echo e($tagline); ?> - In partnership con VERGEN Technology per sviluppo software, app e soluzioni digitali avanzate."> | |
| <link rel="canonical" href="<?php echo e($canonical); ?>"> | |
| <meta property="og:site_name" content="<?php echo e($brand); ?> × VERGEN"> | |
| <meta property="og:title" content="<?php echo e($brand); ?> × VERGEN Technology"> | |
| <meta property="og:description" content="<?php echo e($tagline); ?> - Creatività e Tecnologia unite"> | |
| <meta property="og:image" content="<?php echo e($ogImage); ?>"> | |
| <meta property="og:url" content="<?php echo e($canonical); ?>"> | |
| <meta property="og:type" content="website"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:title" content="<?php echo e($brand); ?> × VERGEN"> | |
| <meta name="theme-color" content="#0a0d14"> | |
| <style> | |
| /* Preloader */ | |
| .preloader { | |
| position: fixed; | |
| inset: 0; | |
| background: #0a0d14; | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .preloader.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .preloader-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid rgba(91, 140, 250, 0.1); | |
| border-top-color: #5B8CFA; | |
| border-right-color: #10b981; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Image fallbacks */ | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| </style> | |
| <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> | |
| <link rel="manifest" href="site.webmanifest"> | |
| <link rel="shortcut icon" href="favicon.ico"> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- GSAP for animations --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <style> | |
| :root{ | |
| /* OFT × VERGEN Unified Palette */ | |
| --bg: #0a0d14; | |
| --bg-secondary: #111827; | |
| --panel: #1a1f2e; | |
| --panel-hover: #243044; | |
| --border: rgba(91, 140, 250, 0.2); | |
| --border-light: rgba(255, 255, 255, 0.1); | |
| /* Dual Brand Colors */ | |
| --oft-primary: #5B8CFA; | |
| --vergen-accent: #10b981; /* Emerald tech green */ | |
| --accent-gradient: linear-gradient(135deg, #5B8CFA 0%, #10b981 100%); | |
| --accent-glow: rgba(91, 140, 250, 0.3); | |
| --vergen-glow: rgba(16, 185, 129, 0.3); | |
| --text: #ffffff; | |
| --text-muted: #94a3b8; | |
| --radius: 24px; | |
| --container: 1280px; | |
| } | |
| *{ box-sizing: border-box; margin: 0; padding: 0; } | |
| html{ scroll-behavior: smooth; } | |
| body{ | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'Inter', -apple-system, sans-serif; | |
| font-weight: 400; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| background-image: | |
| radial-gradient(circle at 20% 35%, rgba(91, 140, 250, 0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%); | |
| } | |
| /* Animated Background */ | |
| .ambient-bg { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| animation: float 20s infinite ease-in-out; | |
| } | |
| .orb-1 { | |
| width: 600px; | |
| height: 600px; | |
| background: var(--oft-primary); | |
| top: -200px; | |
| left: -200px; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: var(--vergen-accent); | |
| bottom: -150px; | |
| right: -150px; | |
| animation-delay: -5s; | |
| opacity: 0.3; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: #8b5cf6; | |
| top: 40%; | |
| left: 60%; | |
| animation-delay: -10s; | |
| opacity: 0.2; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 30px) scale(0.9); } | |
| } | |
| /* Grid Pattern */ | |
| .grid-pattern { | |
| position: fixed; | |
| inset: 0; | |
| z-index: -1; | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| mask-image: radial-gradient(circle at center, black, transparent 80%); | |
| pointer-events: none; | |
| } | |
| /* Typography */ | |
| h1, h2, h3 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| letter-spacing: -0.02em; | |
| } | |
| h1 { font-size: clamp(48px, 8vw, 96px); } | |
| h2 { font-size: clamp(36px, 5vw, 64px); } | |
| h3 { font-size: 24px; } | |
| .text-gradient { | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .text-vergen { color: var(--vergen-accent); } | |
| .text-oft { color: var(--oft-primary); } | |
| /* Layout */ | |
| .container { width: min(var(--container), 92vw); margin-inline: auto; } | |
| section { padding: 120px 0; position: relative; } | |
| /* Navigation */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| padding: 20px 0; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| border-bottom: 1px solid transparent; | |
| } | |
| header.scrolled { | |
| background: rgba(10, 13, 20, 0.8); | |
| backdrop-filter: blur(20px) saturate(180%); | |
| border-bottom-color: var(--border); | |
| padding: 16px 0; | |
| } | |
| .nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-weight: 700; | |
| font-size: 24px; | |
| } | |
| .nav-brand img { | |
| height: 40px; | |
| width: auto; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| gap: 40px; | |
| align-items: center; | |
| list-style: none; | |
| } | |
| .nav-menu a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .nav-menu a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--accent-gradient); | |
| transition: width 0.3s; | |
| } | |
| .nav-menu a:hover { | |
| color: var(--text); | |
| } | |
| .nav-menu a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-cta { | |
| display: flex; | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .brand-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 99px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| } | |
| .brand-badge span { color: var(--text); } | |
| .brand-badge .cross { color: var(--oft-primary); font-weight: 300; } | |
| /* Mobile Menu */ | |
| .hamb { | |
| display: none; | |
| width: 32px; | |
| height: 32px; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| position: relative; | |
| z-index: 1001; | |
| } | |
| .hamb span { | |
| display: block; | |
| width: 24px; | |
| height: 2px; | |
| background: var(--text); | |
| margin: 6px 0; | |
| transition: 0.3s; | |
| } | |
| .drawer { | |
| position: fixed; | |
| inset: 0; | |
| background: var(--bg); | |
| z-index: 999; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 32px; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: 0.4s; | |
| } | |
| .drawer.open { | |
| opacity: 1; | |
| pointer-events: auto; | |
| } | |
| .drawer a { | |
| font-size: 32px; | |
| font-family: 'Space Grotesk'; | |
| font-weight: 600; | |
| color: var(--text); | |
| text-decoration: none; | |
| } | |
| @media(max-width: 900px) { | |
| .nav-menu { display: none; } | |
| .hamb { display: block; } | |
| .brand-badge { display: none; } | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px 32px; | |
| border-radius: 99px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| text-decoration: none; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: none; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transform: translateX(-100%); | |
| transition: 0.6s; | |
| } | |
| .btn:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .btn-primary { | |
| background: var(--accent-gradient); | |
| color: white; | |
| box-shadow: 0 4px 20px rgba(91, 140, 250, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(91, 140, 250, 0.4); | |
| } | |
| .btn-secondary { | |
| background: var(--panel); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--oft-primary); | |
| transform: translateY(-2px); | |
| } | |
| .btn-large { | |
| padding: 20px 40px; | |
| font-size: 16px; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| position: relative; | |
| padding-top: 120px; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 900px; | |
| } | |
| .hero-subtitle { | |
| color: var(--vergen-accent); | |
| font-weight: 600; | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| } | |
| .hero-subtitle::before, | |
| .hero-subtitle::after { | |
| content: ''; | |
| width: 40px; | |
| height: 1px; | |
| background: var(--vergen-accent); | |
| } | |
| .hero h1 { | |
| margin-bottom: 24px; | |
| line-height: 1.1; | |
| } | |
| .hero-description { | |
| font-size: 20px; | |
| color: var(--text-muted); | |
| max-width: 600px; | |
| margin: 0 auto 40px; | |
| line-height: 1.6; | |
| } | |
| .hero-cta { | |
| display: flex; | |
| gap: 16px; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-bottom: 80px; | |
| } | |
| .hero-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 60px; | |
| margin-top: 60px; | |
| padding-top: 40px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .hero-stat { | |
| text-align: center; | |
| } | |
| .hero-stat-value { | |
| font-family: 'Space Grotesk'; | |
| font-size: 56px; | |
| font-weight: 700; | |
| background: var(--accent-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| line-height: 1; | |
| margin-bottom: 8px; | |
| } | |
| .hero-stat-label { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| } | |
| /* Partnership Banner */ | |
| .partnership-banner { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| padding: 16px 32px; | |
| background: rgba(26, 31, 46, 0.8); | |
| border: 1px solid var(--border); | |
| border-radius: 99px; | |
| backdrop-filter: blur(10px); | |
| z-index: 10; | |
| } | |
| .partnership-text { | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| text-align: center; | |
| } | |
| .partnership-text strong { | |
| color: var(--text); | |
| display: block; | |
| font-size: 16px; | |
| margin-bottom: 2px; | |
| } | |
| /* Section Styles */ | |
| .section-header { | |
| text-align: center; | |
| max-width: 700px; | |
| margin: 0 auto 80px; | |
| } | |
| .section-label { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| background: rgba(91, 140, 250, 0.1); | |
| border: 1px solid var(--border); | |
| border-radius: 99px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--oft-primary); | |
| margin-bottom: 24px; | |
| } | |
| .section-title { | |
| margin-bottom: 20px; | |
| } | |
| .section-subtitle { | |
| color: var(--text-muted); | |
| font-size: 18px; | |
| line-height: 1.6; | |
| } | |
| /* Services Grid */ | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 24px; | |
| } | |
| .service-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 40px; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: var(--accent-gradient); | |
| transform: scaleX(0); | |
| transition: transform 0.4s; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-8px); | |
| border-color: rgba(91, 140, 250, 0.4); | |
| box-shadow: 0 20px 40px rgba(0,0,0,0.3); | |
| } | |
| .service-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .service-icon { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 16px; | |
| background: var(--bg-secondary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 28px; | |
| margin-bottom: 24px; | |
| transition: transform 0.3s; | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .service-card h3 { | |
| margin-bottom: 12px; | |
| font-size: 24px; | |
| } | |
| .service-card p { | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| } | |
| /* Partnership Section */ | |
| .partnership-section { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 80px; | |
| position: relative; | |
| overflow: hidden; | |
| margin: 120px 0; | |
| } | |
| .partnership-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(91, 140, 250, 0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .partnership-content { | |
| position: relative; | |
| z-index: 2; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .partnership-left h2 { | |
| margin-bottom: 24px; | |
| } | |
| .partnership-left p { | |
| color: var(--text-muted); | |
| font-size: 18px; | |
| line-height: 1.7; | |
| margin-bottom: 32px; | |
| } | |
| .partnership-visual { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 40px; | |
| position: relative; | |
| } | |
| .brand-box { | |
| width: 180px; | |
| height: 180px; | |
| border-radius: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| font-family: 'Space Grotesk'; | |
| font-weight: 700; | |
| font-size: 24px; | |
| text-align: center; | |
| position: relative; | |
| transition: transform 0.3s; | |
| } | |
| .brand-box:hover { | |
| transform: scale(1.05); | |
| } | |
| .brand-box.oft { | |
| background: rgba(91, 140, 250, 0.2); | |
| border: 2px solid var(--oft-primary); | |
| color: var(--oft-primary); | |
| } | |
| .brand-box.vergen { | |
| background: rgba(16, 185, 129, 0.2); | |
| border: 2px solid var(--vergen-accent); | |
| color: var(--vergen-accent); | |
| } | |
| .brand-box small { | |
| font-size: 13px; | |
| font-weight: 500; | |
| opacity: 0.8; | |
| margin-top: 8px; | |
| } | |
| .connector { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 60px; | |
| height: 2px; | |
| background: linear-gradient(to right, var(--oft-primary), var(--vergen-accent)); | |
| z-index: 10; | |
| } | |
| .connector::before, | |
| .connector::after { | |
| content: ''; | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .connector::before { | |
| left: 0; | |
| background: var(--oft-primary); | |
| } | |
| .connector::after { | |
| right: 0; | |
| background: var(--vergen-accent); | |
| } | |
| /* Cases */ | |
| .cases-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 40px; | |
| } | |
| .case-card { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 60px; | |
| align-items: center; | |
| transition: all 0.4s; | |
| } | |
| .case-card:hover { | |
| border-color: rgba(91, 140, 250, 0.4); | |
| transform: translateY(-4px); | |
| } | |
| .case-content h3 { | |
| font-size: 36px; | |
| margin-bottom: 20px; | |
| } | |
| .case-content .stats { | |
| font-size: 18px; | |
| color: var(--oft-primary); | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .case-content .role { | |
| color: var(--text-muted); | |
| margin-bottom: 24px; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .case-image { | |
| border-radius: 16px; | |
| overflow: hidden; | |
| position: relative; | |
| background: var(--panel); | |
| min-height: 300px; | |
| } | |
| .case-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.6s; | |
| } | |
| .case-card:hover .case-image img { | |
| transform: scale(1.05); | |
| } | |
| .tags { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .tag { | |
| padding: 6px 14px; | |
| background: rgba(255,255,255,0.05); | |
| border: 1px solid var(--border-light); | |
| border-radius: 99px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| /* Timeline */ | |
| .timeline { | |
| position: relative; | |
| padding-left: 40px; | |
| } | |
| .timeline-line { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--oft-primary), transparent); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 40px; | |
| padding-left: 40px; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -44px; | |
| top: 8px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--bg); | |
| border: 2px solid var(--oft-primary); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .timeline-item h4 { | |
| font-size: 20px; | |
| margin-bottom: 8px; | |
| color: var(--text); | |
| } | |
| .timeline-item p { | |
| color: var(--text-muted); | |
| font-size: 16px; | |
| } | |
| /* Pricing */ | |
| .pricing-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 24px; | |
| } | |
| .pricing-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 40px; | |
| position: relative; | |
| transition: all 0.4s; | |
| } | |
| .pricing-card.featured { | |
| border-color: var(--oft-primary); | |
| background: linear-gradient(180deg, rgba(91,140,250,0.1) 0%, var(--panel) 100%); | |
| transform: scale(1.05); | |
| } | |
| .pricing-card:hover { | |
| transform: translateY(-8px); | |
| border-color: rgba(91, 140, 250, 0.4); | |
| } | |
| .pricing-card.featured:hover { | |
| transform: scale(1.05) translateY(-8px); | |
| } | |
| .badge { | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 6px 16px; | |
| background: var(--accent-gradient); | |
| color: white; | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| border-radius: 99px; | |
| } | |
| .pricing-header h3 { | |
| margin-bottom: 8px; | |
| } | |
| .price { | |
| font-family: 'Space Grotesk'; | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin: 24px 0; | |
| } | |
| .price span { | |
| font-size: 16px; | |
| color: var(--text-muted); | |
| font-weight: 400; | |
| } | |
| .features { | |
| list-style: none; | |
| margin: 32px 0; | |
| } | |
| .features li { | |
| padding: 12px 0; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| } | |
| .features li::before { | |
| content: '→'; | |
| color: var(--vergen-accent); | |
| font-weight: bold; | |
| } | |
| .features li:last-child { | |
| border-bottom: none; | |
| } | |
| /* FAQ */ | |
| .faq-list { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .faq-item { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| margin-bottom: 16px; | |
| overflow: hidden; | |
| transition: all 0.3s; | |
| } | |
| .faq-item:hover { | |
| border-color: rgba(91, 140, 250, 0.3); | |
| } | |
| .faq-question { | |
| padding: 24px 32px; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-weight: 600; | |
| font-size: 18px; | |
| transition: color 0.3s; | |
| } | |
| .faq-question:hover { | |
| color: var(--oft-primary); | |
| } | |
| .faq-icon { | |
| font-size: 24px; | |
| transition: transform 0.3s; | |
| color: var(--oft-primary); | |
| } | |
| .faq-item.active .faq-icon { | |
| transform: rotate(45deg); | |
| } | |
| .faq-answer { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.4s ease, padding 0.4s; | |
| } | |
| .faq-item.active .faq-answer { | |
| max-height: 300px; | |
| padding: 0 32px 24px; | |
| } | |
| .faq-answer p { | |
| color: var(--text-muted); | |
| line-height: 1.7; | |
| } | |
| /* Contact */ | |
| .contact-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1.5fr; | |
| gap: 40px; | |
| } | |
| .contact-cards { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| height: fit-content; | |
| } | |
| .contact-card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 32px; | |
| transition: all 0.3s; | |
| } | |
| .contact-card:hover { | |
| transform: translateY(-4px); | |
| border-color: var(--oft-primary); | |
| } | |
| .contact-card h4 { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-muted); | |
| margin-bottom: 12px; | |
| } | |
| .contact-card p { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .map-container { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 24px; | |
| overflow: hidden; | |
| height: 100%; | |
| min-height: 400px; | |
| } | |
| .map-container iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| filter: grayscale(100%) contrast(1.2); | |
| transition: filter 0.3s; | |
| } | |
| .map-container:hover iframe { | |
| filter: grayscale(50%) contrast(1.1); | |
| } | |
| /* Footer */ | |
| footer { | |
| border-top: 1px solid var(--border); | |
| padding: 80px 0 40px; | |
| background: var(--bg-secondary); | |
| position: relative; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr 1fr 1fr; | |
| gap: 60px; | |
| margin-bottom: 60px; | |
| } | |
| .footer-brand { | |
| max-width: 300px; | |
| } | |
| .footer-brand img { | |
| height: 50px; | |
| margin-bottom: 20px; | |
| } | |
| .footer-brand p { | |
| color: var(--text-muted); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| } | |
| .footer-links h4 { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 24px; | |
| color: var(--text); | |
| } | |
| .footer-links a { | |
| display: block; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| margin-bottom: 12px; | |
| transition: color 0.3s; | |
| font-size: 15px; | |
| } | |
| .footer-links a:hover { | |
| color: var(--oft-primary); | |
| } | |
| .footer-bottom { | |
| padding-top: 40px; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .footer-bottom p { | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| .vergen-credit { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| background: rgba(16, 185, 129, 0.1); | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| border-radius: 99px; | |
| color: var(--vergen-accent); | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.3s; | |
| } | |
| .vergen-credit:hover { | |
| background: rgba(16, 185, 129, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| /* Sticky FAB */ | |
| .fab-container { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 900; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .fab { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| background: #25D366; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| font-size: 24px; | |
| } | |
| .fab:hover { | |
| transform: scale(1.1) rotate(10deg); | |
| } | |
| .fab-secondary { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| opacity: 0; | |
| transform: translateY(20px); | |
| pointer-events: none; | |
| } | |
| .fab-container:hover .fab-secondary { | |
| opacity: 1; | |
| transform: translateY(0); | |
| pointer-events: auto; | |
| } | |
| /* Animations */ | |
| .reveal { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Responsive */ | |
| @media(max-width: 1024px) { | |
| .partnership-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| .partnership-visual { | |
| order: -1; | |
| } | |
| .case-card { | |
| grid-template-columns: 1fr; | |
| padding: 40px; | |
| } | |
| .case-image { | |
| order: -1; | |
| height: 300px; | |
| } | |
| .contact-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .footer-grid { | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| } | |
| .hero-stats { | |
| grid-template-columns: 1fr; | |
| gap: 40px; | |
| } | |
| } | |
| @media(max-width: 768px) { | |
| .services-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .pricing-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .pricing-card.featured { | |
| transform: scale(1); | |
| } | |
| .partnership-section { | |
| padding: 40px 24px; | |
| } | |
| .brand-box { | |
| width: 140px; | |
| height: 140px; | |
| font-size: 18px; | |
| } | |
| .connector { | |
| width: 40px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Preloader --> | |
| <div class="preloader" id="preloader"> | |
| <div class="preloader-spinner"></div> | |
| </div> | |
| <!-- Ambient Background --> | |
| <div class="ambient-bg"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <div class="grid-pattern"></div> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="container nav"> | |
| <a href="#top" class="nav-brand"> | |
| <img src="LOGO.PNG" alt="<?php echo e($brand); ?>" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%235B8CFA%22 stroke-width=%222%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E'; this.style.padding='8px';"> | |
| <span class="brand-badge"> | |
| <span>OFT</span> | |
| <span class="cross">×</span> | |
| <span style="color: var(--vergen-accent)">VERGEN</span> | |
| </span> | |
| </a> | |
| <nav> | |
| <ul class="nav-menu"> | |
| <li><a href="#services">Servizi</a></li> | |
| <li><a href="#partnership">Partnership</a></li> | |
| <li><a href="#cases">Casi Studio</a></li> | |
| <li><a href="#roadmap">Processo</a></li> | |
| <li><a href="#pricing">Prezzi</a></li> | |
| <li><a href="#faq">FAQ</a></li> | |
| </ul> | |
| </nav> | |
| <div class="nav-cta"> | |
| <a href="<?php echo e($callUrl); ?>" class="btn btn-primary">Prenota Call</a> | |
| <button class="hamb" id="hamb"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="drawer" id="drawer"> | |
| <a href="#services">Servizi</a> | |
| <a href="#partnership">Partnership</a> | |
| <a href="#cases">Casi Studio</a> | |
| <a href="#roadmap">Processo</a> | |
| <a href="#pricing">Prezzi</a> | |
| <a href="#faq">FAQ</a> | |
| <a href="<?php echo e($callUrl); ?>" class="btn btn-primary" style="margin-top: 20px;">Prenota Call</a> | |
| </div> | |
| </header> | |
| <main id="top"> | |
| <!-- Hero --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <div class="hero-subtitle reveal">OFT Management × Vergen Technology</div> | |
| <h1 class="reveal"> | |
| Creatività che incontra la<br> | |
| <span class="text-gradient">Tecnologia</span> | |
| </h1> | |
| <p class="hero-description reveal"> | |
| La potenza del marketing di <strong>OFT</strong> unita all'eccellenza tecnologica di <strong>VERGEN</strong>. | |
| Una sinergia completa per brand che vogliono risultati reali, non solo like. | |
| </p> | |
| <div class="hero-cta reveal"> | |
| <a href="<?php echo e($callUrl); ?>" class="btn btn-primary btn-large"> | |
| Inizia il tuo progetto | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M5 12h14M12 5l7 7-7 7"/> | |
| </svg> | |
| </a> | |
| <a href="#partnership" class="btn btn-secondary btn-large"> | |
| Scopri la Partnership | |
| </a> | |
| </div> | |
| <div class="hero-stats reveal"> | |
| <?php foreach($stats_list as $s): ?> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value"> | |
| <span data-count="<?php echo e($s['value']); ?>">0</span><?php echo e($s['unit']); ?> | |
| </div> | |
| <div class="hero-stat-label"><?php echo e($s['label']); ?></div> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </div> | |
| <div class="partnership-banner reveal"> | |
| <div class="partnership-text"> | |
| <strong style="color: var(--oft-primary)">OFT</strong> Marketing & Social | |
| </div> | |
| <span style="color: var(--text-muted); font-size: 20px;">×</span> | |
| <div class="partnership-text"> | |
| <strong style="color: var(--vergen-accent)">VERGEN</strong> Sviluppo Software | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services --> | |
| <section id="services" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label"> | |
| <span>Servizi Integrati</span> | |
| </div> | |
| <h2 class="section-title">Tutto ciò che serve,<br><span class="text-gradient">in un unico team</span></h2> | |
| <p class="section-subtitle"> | |
| Dalla strategia social allo sviluppo di app e software custom. | |
| Grazie alla partnership con VERGEN Technology, offriamo soluzioni digitali complete. | |
| </p> | |
| </div> | |
| <div class="services-grid"> | |
| <?php foreach($services_list as $i => $srv): ?> | |
| <div class="service-card reveal" style="transition-delay: <?php echo $i * 0.1; ?>s"> | |
| <div class="service-icon" aria-hidden="true"><?php echo $srv['icon']; ?></div> | |
| <h3><?php echo e($srv['title']); ?></h3> | |
| <p><?php echo e($srv['description']); ?></p> | |
| </div> | |
| <?php endforeach; ?> | |
| <!-- Development Service Added --> | |
| <div class="service-card reveal" style="background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, var(--panel) 100%); border-color: rgba(16,185,129,0.3);"> | |
| <div class="service-icon" style="background: rgba(16,185,129,0.2);" aria-hidden="true">💻</div> | |
| <h3 style="color: var(--vergen-accent);">Sviluppo Software & App</h3> | |
| <p>Applicazioni web e mobile su misura, sviluppate da VERGEN Technology. Automazione, AI e soluzioni enterprise per scalare il tuo business.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partnership Section --> | |
| <section id="partnership" class="container"> | |
| <div class="partnership-section reveal"> | |
| <div class="partnership-content"> | |
| <div class="partnership-left"> | |
| <div class="section-label">Partnership Strategica</div> | |
| <h2>Una sinergia<br><span class="text-vergen">unica</span> nel panorama</h2> | |
| <p> | |
| <strong style="color: var(--oft-primary)">OFT MGMT</strong> porta la creatività e la strategia social. | |
| <strong style="color: var(--vergen-accent)">VERGEN Technology</strong> porta l'infrastruttura tecnologica: | |
| sviluppo di piattaforme custom, app mobili, software gestionali e soluzioni AI. | |
| </p> | |
| <p> | |
| Risultato? Non solo brand awareness, ma <strong>ecosistemi digitali completi</strong> che automatizzano | |
| processi, acquisiscono clienti e generano revenue. | |
| </p> | |
| <a href="<?php echo e($callUrl); ?>" class="btn btn-primary"> | |
| Parla del tuo progetto integrato | |
| </a> | |
| </div> | |
| <div class="partnership-visual"> | |
| <div class="connector"></div> | |
| <div class="brand-box oft"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 8px;"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M12 6v6l4 2"/> | |
| </svg> | |
| OFT | |
| <small>Marketing & Creative</small> | |
| </div> | |
| <div class="brand-box vergen"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 8px;"> | |
| <rect x="6" y="4" width="12" height="16" rx="2"/> | |
| <circle cx="12" cy="10" r="2"/> | |
| <path d="M12 13v3"/> | |
| </svg> | |
| VERGEN | |
| <small>Tech & Development</small> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cases --> | |
| <section id="cases" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label">Casi Studio</div> | |
| <h2 class="section-title">Storie di <span class="text-gradient">successo</span></h2> | |
| </div> | |
| <div class="cases-grid"> | |
| <?php foreach($cases_list as $index => $c): ?> | |
| <article class="case-card reveal" style="transition-delay: <?php echo $index * 0.2; ?>s"> | |
| <div class="case-content"> | |
| <h3><?php echo e($c['title']); ?></h3> | |
| <div class="stats"><?php echo e($c['stats_text']); ?></div> | |
| <div class="role"><?php echo e($c['role_text']); ?></div> | |
| <div class="tags"> | |
| <?php foreach(explode(',', $c['tags']) as $tag): ?> | |
| <span class="tag"><?php echo e(trim($tag)); ?></span> | |
| <?php endforeach; ?> | |
| </div> | |
| </div> | |
| <div class="case-image"> | |
| <img src="<?php echo e($c['image_path']); ?>" alt="<?php echo e($c['title']); ?>" loading="lazy" onerror="this.parentElement.style.background='linear-gradient(135deg, #1a1f2e 0%, #243044 100%)'; this.parentElement.innerHTML='<div style=\'display:flex;align-items:center;justify-content:center;height:100%;color:#5B8CFA;font-family:Space Grotesk;font-weight:700;\'>OFT × VERGEN</div>';"> | |
| </div> | |
| </article> | |
| <?php endforeach; ?> | |
| </div> | |
| </section> | |
| <!-- Process/Roadmap --> | |
| <section id="roadmap" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label">Processo</div> | |
| <h2 class="section-title">6 mesi per <br><span class="text-gradient">trasformare</span> il tuo brand</h2> | |
| </div> | |
| <div class="timeline reveal"> | |
| <div class="timeline-line"></div> | |
| <?php foreach($roadmap_list as $i => $step): ?> | |
| <div class="timeline-item" style="transition-delay: <?php echo $i * 0.1; ?>s"> | |
| <h4><?php echo e($step['phase']); ?></h4> | |
| <p><?php echo e($step['detail']); ?></p> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </section> | |
| <!-- Pricing --> | |
| <section id="pricing" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label">Investimento</div> | |
| <h2 class="section-title">Pricing <span class="text-gradient">trasparente</span></h2> | |
| <p class="section-subtitle">Include tecnologia VERGEN per dashboard, automazioni e sviluppo custom.</p> | |
| </div> | |
| <div class="pricing-grid"> | |
| <?php foreach($pricing_list as $i => $p): ?> | |
| <div class="pricing-card <?php if($p['is_recommended']) echo 'featured'; ?> reveal" style="transition-delay: <?php echo $i * 0.1; ?>s"> | |
| <?php if($p['is_recommended']): ?> | |
| <div class="badge">Consigliato</div> | |
| <?php endif; ?> | |
| <div class="pricing-header"> | |
| <h3><?php echo e($p['name']); ?></h3> | |
| </div> | |
| <div class="price"><?php echo e($p['price']); ?>€<span>/mese</span></div> | |
| <ul class="features"> | |
| <?php foreach(explode('|', $p['features']) as $feat): ?> | |
| <li><?php echo e(trim($feat)); ?></li> | |
| <?php endforeach; ?> | |
| </ul> | |
| <a href="<?php echo e($callUrl); ?>" class="btn <?php if($p['is_recommended']) echo 'btn-primary'; else echo 'btn-secondary'; ?> btn-large" style="width: 100%;"> | |
| Inizia ora | |
| </a> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </section> | |
| <!-- FAQ --> | |
| <section id="faq" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label">Domande</div> | |
| <h2 class="section-title">FAQ</h2> | |
| </div> | |
| <div class="faq-list"> | |
| <?php $i = 1; foreach($faq_list as $f): ?> | |
| <div class="faq-item reveal"> | |
| <div class="faq-question"> | |
| <span><?php echo $i++.'. '.e($f['question']); ?></span> | |
| <span class="faq-icon">+</span> | |
| </div> | |
| <div class="faq-answer"> | |
| <p><?php echo e($f['answer']); ?></p> | |
| </div> | |
| </div> | |
| <?php endforeach; ?> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contact" class="container"> | |
| <div class="section-header reveal"> | |
| <div class="section-label">Contatti</div> | |
| <h2 class="section-title">Parliamo di <span class="text-gradient">te</span></h2> | |
| <p class="section-subtitle"><?php echo e($contact_intro); ?></p> | |
| </div> | |
| <div class="contact-grid reveal"> | |
| <div class="contact-cards"> | |
| <div class="contact-card"> | |
| <h4>Instagram</h4> | |
| <p><?php echo e($instagram_label); ?></p> | |
| <a href="<?php echo e($instagram); ?>" target="_blank" class="btn btn-secondary" style="margin-top: 16px; width: 100%;">Segui</a> | |
| </div> | |
| <div class="contact-card"> | |
| <h4>Email</h4> | |
| <p><?php echo e($email); ?></p> | |
| <a href="mailto:<?php echo e($email); ?>" class="btn btn-secondary" style="margin-top: 16px; width: 100%;">Scrivi</a> | |
| </div> | |
| <div class="contact-card"> | |
| <h4>Telefono</h4> | |
| <p><?php echo e($phone); ?></p> | |
| <a href="tel:<?php echo e(preg_replace('/\s+/', '', $phone)); ?>" class="btn btn-secondary" style="margin-top: 16px; width: 100%;">Chiama</a> | |
| </div> | |
| <div class="contact-card"> | |
| <h4>Indirizzo</h4> | |
| <p><?php echo e($address); ?></p> | |
| </div> | |
| </div> | |
| <div class="map-container"> | |
| <iframe src="https://www.google.com/maps?q=<?php echo urlencode($address); ?>&output=embed" loading="lazy" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-brand"> | |
| <img src="LOGO.PNG" alt="<?php echo e($brand); ?>" onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2250%22 height=%2250%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%235B8CFA%22 stroke-width=%222%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E'; this.style.padding='10px';"> | |
| <p> | |
| <strong style="color: var(--oft-primary)">OFT MGMT</strong> e | |
| <strong style="color: var(--vergen-accent)">VERGEN Technology</strong> | |
| unite per offrire soluzioni digitali complete: dal marketing allo sviluppo software. | |
| </p> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>OFT Services</h4> | |
| <a href="#services">Social Media</a> | |
| <a href="#services">Produzione Video</a> | |
| <a href="#services">Campagne Ads</a> | |
| <a href="#pricing">Pricing</a> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>VERGEN Tech</h4> | |
| <a href="#">Sviluppo App</a> | |
| <a href="#">Software Custom</a> | |
| <a href="#">Automazioni</a> | |
| <a href="#">AI Solutions</a> | |
| </div> | |
| <div class="footer-links"> | |
| <h4>Legal</h4> | |
| <a href="#">Privacy Policy</a> | |
| <a href="#">Cookie Policy</a> | |
| <a href="#">Termini e Condizioni</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© <?php echo e($year); ?> <strong>OFT MGMT</strong> × <strong>VERGEN Technology</strong> <br> | |
| <a href="https://www.vergen.it" target="_blank" rel="noopener" class="vergen-credit"> | |
| Sviluppato con ⚡ da VERGEN Developer | |
| </a></p> | |
| <div style="display: flex; gap: 16px;"> | |
| <a href="<?php echo e($instagram); ?>" target="_blank" style="color: var(--text-muted);">Instagram</a> | |
| <a href="<?php echo e($tiktok); ?>" target="_blank" style="color: var(--text-muted);">TikTok</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Action Buttons --> | |
| <div class="fab-container"> | |
| <a href="<?php echo e($whatsapp); ?>" target="_blank" class="fab" title="WhatsApp">💬</a> | |
| <button class="fab fab-secondary" onclick="window.scrollTo({top:0,behavior:'smooth'})" title="Torna su">↑</button> | |
| </div> | |
| <script> | |
| // Register ScrollTrigger | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Reveal animations | |
| const reveals = document.querySelectorAll('.reveal'); | |
| reveals.forEach((element, i) => { | |
| gsap.fromTo(element, | |
| { opacity: 0, y: 50 }, | |
| { | |
| opacity: 1, | |
| y: 0, | |
| duration: 0.8, | |
| ease: "power3.out", | |
| scrollTrigger: { | |
| trigger: element, | |
| start: "top 85%", | |
| toggleActions: "play none none reverse" | |
| }, | |
| delay: element.style.transitionDelay ? parseFloat(element.style.transitionDelay) : 0 | |
| } | |
| ); | |
| }); | |
| // Header scroll effect | |
| const header = document.getElementById('header'); | |
| window.addEventListener('scroll', () => { | |
| if(window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Counter animation | |
| const counters = document.querySelectorAll('[data-count]'); | |
| counters.forEach(counter => { | |
| const target = parseInt(counter.getAttribute('data-count')); | |
| gsap.to(counter, { | |
| innerHTML: target, | |
| duration: 2, | |
| snap: { innerHTML: 1 }, | |
| ease: "power2.out", | |
| scrollTrigger: { | |
| trigger: counter, | |
| start: "top 85%" | |
| } | |
| }); | |
| }); | |
| // Mobile menu | |
| const hamb = document.getElementById('hamb'); | |
| const drawer = document.getElementById('drawer'); | |
| hamb.addEventListener('click', () => { | |
| drawer.classList.toggle('open'); | |
| }); | |
| // FAQ Accordion | |
| const faqItems = document.querySelectorAll('.faq-item'); | |
| faqItems.forEach(item => { | |
| const question = item.querySelector('.faq-question'); | |
| question.addEventListener('click', () => { | |
| // Close others | |
| faqItems.forEach(other => { | |
| if(other !== item) other.classList.remove('active'); | |
| }); | |
| // Toggle current | |
| item.classList.toggle('active'); | |
| }); | |
| }); | |
| // Smooth scroll | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if(target) { | |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| drawer.classList.remove('open'); | |
| } | |
| }); | |
| }); | |
| // Parallax for hero | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelector('.hero-content'); | |
| if(parallax) { | |
| parallax.style.transform = `translateY(${scrolled * 0.3}px)`; | |
| } | |
| }); | |
| // Hide preloader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.getElementById('preloader').classList.add('hidden'); | |
| }, 500); | |
| }); | |
| // Image error handling | |
| document.querySelectorAll('img').forEach(img => { | |
| img.addEventListener('error', function() { | |
| if(this.src.includes('LOGO.PNG')) return; // Already handled by onerror | |
| this.src = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22300%22 viewBox=%220 0 400 300%22 fill=%22%231a1f2e%22%3E%3Crect width=%22400%22 height=%22300%22/%3E%3Ctext x=%22200%22 y=%22150%22 font-family=%22Arial%22 font-size=%2216%22 fill=%22%2394a3b8%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22%3EImmagine non disponibile%3C/text%3E%3C/svg%3E'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |