| <?php |
| |
| |
| |
| require_once 'db_connect.php'; |
|
|
| |
| 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'); |
|
|
| |
| $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(); |
| |
| |
| $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(); |
| |
| |
| $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_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_title = get_config($db, 'contact_title', 'Contatti'); |
| $contact_intro = get_config($db, 'contact_intro'); |
|
|
| |
| $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><?php 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 { |
| position: fixed; |
| inset: 0; |
| background: |
| 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: |
| border-right-color: |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| 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{ |
| |
| --bg: |
| --bg-secondary: |
| --panel: |
| --panel-hover: |
| --border: rgba(91, 140, 250, 0.2); |
| --border-light: rgba(255, 255, 255, 0.1); |
| |
| |
| --oft-primary: |
| --vergen-accent: |
| --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: |
| --text-muted: |
| --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%); |
| } |
|
|
| |
| .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: |
| 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 { |
| 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; |
| } |
|
|
| |
| 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); } |
|
|
| |
| .container { width: min(var(--container), 92vw); margin-inline: auto; } |
| section { padding: 120px 0; position: relative; } |
| |
| |
| 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; } |
|
|
| |
| .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; } |
| } |
|
|
| |
| .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 { |
| 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 { |
| 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-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 { |
| 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 { |
| 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-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 { |
| 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-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-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-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 { |
| 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); |
| } |
|
|
| |
| .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: |
| 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; |
| } |
|
|
| |
| .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); |
| } |
|
|
| |
| @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^=" |
| 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'); |
| } |
| }); |
| }); |
| |
| |
| window.addEventListener('scroll', () => { |
| const scrolled = window.pageYOffset; |
| const parallax = document.querySelector('.hero-content'); |
| if(parallax) { |
| parallax.style.transform = `translateY(${scrolled * 0.3}px)`; |
| } |
| }); |
| |
| |
| window.addEventListener('load', () => { |
| setTimeout(() => { |
| document.getElementById('preloader').classList.add('hidden'); |
| }, 500); |
| }); |
| |
| |
| document.querySelectorAll('img').forEach(img => { |
| img.addEventListener('error', function() { |
| if(this.src.includes('LOGO.PNG')) return; |
| 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> |
