VerdeTech - Orto Botanico | Piante by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<embed>Tag per l'incorporamento di contenuti multimediali
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<video>Integra e controlla video in una pagina HTML
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server

Users

Log in to search for users

Explore

Find inspiration

Navbar Example 5

spese universitarie

Simple Calculator(2)

esercitazione 5

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VerdeTech - Orto Botanico | Piante Esotiche, Bonsai e Fioriere di Design</title>
    <meta name="description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design. VerdeTech unisce natura e tecnologia per creare spazi verdi unici.">
    <meta name="keywords" content="orto botanico, piante esotiche, bonsai, fioriere design, giardinaggio urbano, piante rare, verde tecnologico, decorazione naturale">
    <meta name="author" content="VerdeTech Orto Botanico">
    <meta property="og:title" content="VerdeTech - Orto Botanico | Piante Esotiche, Bonsai e Fioriere di Design">
    <meta property="og:description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design.">
    <meta property="og:image" content="https://picsum.photos/seed/verdetch-og/1200/630.jpg">
    <meta property="og:url" content="https://www.verdetch.it">
    <meta name="twitter:card" content="summary_large_image">
    
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="VerdeTech - Orto Botanico">
    <meta itemprop="description" content="Scopri la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di design.">
    <meta itemprop="image" content="https://picsum.photos/seed/verdetch-social/1200/630.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://picsum.photos/seed/verdetch-favicon/32/32.jpg">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary-color: #2ecc71;
            --secondary-color: #27ae60;
            --accent-color: #16a085;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --text-color: #333;
            --gradient-1: linear-gradient(135deg, #2ecc71, #27ae60);
            --gradient-2: linear-gradient(135deg, #16a085, #2c3e50);
            --gradient-3: linear-gradient(135deg, #3498db, #2ecc71);
            --gradient-4: linear-gradient(135deg, #e74c3c, #f39c12);
            --gradient-5: linear-gradient(135deg, #8e44ad, #3498db);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.05);
            --shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 30px 60px rgba(0, 0, 0, 0.15);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: #f8f9fa;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            margin-bottom: 20px;
        }
        
        a {
            text-decoration: none;
            color: var(--primary-color);
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--secondary-color);
        }
        
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Header & Navigation */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            transition: var(--transition);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
        }
        
        header.scrolled {
            padding: 10px 0;
            background: rgba(255, 255, 255, 0.98);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
            color: var(--dark-color);
        }
        
        .logo i {
            font-size: 30px;
            margin-right: 10px;
            color: var(--primary-color);
        }
        
        .main-nav {
            display: flex;
            list-style: none;
        }
        
        .main-nav li {
            margin-left: 30px;
        }
        
        .main-nav a {
            color: var(--dark-color);
            font-weight: 500;
            position: relative;
            padding: 5px 0;
        }
        
        .main-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: var(--transition);
        }
        
        .main-nav a:hover::after {
            width: 100%;
        }
        
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            color: var(--dark-color);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1545823812-046670c74194?') center/cover no-repeat;/*sfondo-wallpaper-sostituuita*/
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-1);
            opacity: 0.3;
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            padding: 0 20px;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background: var(--primary-color);
            color: white;
            border-radius: 30px;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--secondary-color);
            z-index: -1;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .btn:hover::before {
            transform: translateY(0);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(-1px);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid white;
        }
        
        .btn-outline::before {
            background: white;
        }
        
        .btn-outline:hover {
            color: var(--primary-color);
        }
        
        /* Scroll Indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }
        
        .scroll-indicator i {
            font-size: 30px;
            color: white;
            animation: bounce 2s infinite;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
            background: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            color: var(--dark-color);
            position: relative;
            display: inline-block;
        }
        
        .section-title h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gradient-1);
        }
        
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }
        
        .about-text h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 20px;
        }
        
        .about-text p {
            margin-bottom: 20px;
        }
        
        .about-image {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: var(--shadow-medium);
        }
        
        .about-image img {
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        /* Features Section */
        .features {
            padding: 100px 0;
            background: var(--light-color);
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            text-align: center;
            padding: 40px 30px;
            border-radius: 15px;
            background: white;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-1);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: var(--gradient-1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            transition: var(--transition);
        }
        
        .feature-card:hover .feature-icon {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        /* Product of the Month Section */
        .product-month {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(22, 160, 133, 0.05));
            position: relative;
        }
        
        .product-month-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
        }
        
        .product-month-image {
            position: relative;
            height: 100%;
            min-height: 400px;
        }
        
        .product-month-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-month-badge {
            position: absolute;
            top: 30px;
            left: 30px;
            background: var(--gradient-4);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            box-shadow: var(--shadow-medium);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
            }
        }
        
        .product-month-info {
            padding: 50px;
        }
        
        .product-month-info h3 {
            font-size: 1.5rem;
            color: #777;
            margin-bottom: 10px;
        }
        
        .product-month-info h2 {
            font-size: 2.2rem;
            color: var(--dark-color);
            margin-bottom: 20px;
        }
        
        .product-month-info p {
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .product-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 30px;
        }
        
        .product-price .old-price {
            font-size: 1.2rem;
            color: #999;
            text-decoration: line-through;
            margin-left: 10px;
        }
        
        /* Weekly Deal Section */
        .weekly-deal {
            padding: 100px 0;
            background: var(--gradient-4);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .weekly-deal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://plus.unsplash.com/premium_photo-1661963124920-b2f627cf5ae7?') center/cover;
            opacity: 0.1;
            z-index: 0;
        }
        
        .weekly-deal .container {
            position: relative;
            z-index: 1;
        }
        
        .weekly-deal .section-title h2 {
            color: white;
        }
        
        .weekly-deal .section-title h2::after {
            background: white;
        }
        
        .weekly-deal-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-heavy);
        }
        
        .weekly-deal-info {
            padding: 50px;
        }
        
        .weekly-deal-info h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        
        .weekly-deal-info h2 {
            font-size: 2.2rem;
            margin-bottom: 20px;
        }
        
        .weekly-deal-info p {
            margin-bottom: 30px;
            font-size: 1.1rem;
        }
        
        .scarcity {
            background: rgba(255, 255, 255, 0.2);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .scarcity i {
            font-size: 24px;
            margin-right: 15px;
            color: #ffcc00;
        }
        
        .scarcity-text {
            font-weight: 500;
        }
        
        .countdown {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }
        
        .countdown-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            min-width: 80px;
        }
        
        .countdown-value {
            font-size: 2rem;
            font-weight: 700;
            display: block;
        }
        
        .countdown-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .weekly-deal-image {
            position: relative;
            height: 100%;
            min-height: 400px;
        }
        
        .weekly-deal-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .weekly-deal-badge {
            position: absolute;
            top: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 600;
            box-shadow: var(--shadow-medium);
        }
        
        /* Products Section */
        .products {
            padding: 100px 0;
            background: white;
        }
        
        .product-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }
        
        .tab-btn {
            background: none;
            border: none;
            padding: 12px 25px;
            margin: 5px;
            font-size: 16px;
            font-weight: 500;
            color: var(--dark-color);
            cursor: pointer;
            border-bottom: 3px solid transparent;
            transition: var(--transition);
            border-radius: 30px 30px 0 0;
        }
        
        .tab-btn.active {
            color: var(--primary-color);
            background: rgba(46, 204, 113, 0.1);
            border-bottom-color: var(--primary-color);
        }
        
        .tab-btn:hover {
            color: var(--primary-color);
            background: rgba(46, 204, 113, 0.05);
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .product-image {
            height: 220px;
            overflow: hidden;
            position: relative;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.1);
        }
        
        .product-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .product-card:hover .product-overlay {
            opacity: 1;
        }
        
        .product-info {
            padding: 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .product-info h3 {
            font-size: 1.3rem;
            color: var(--dark-color);
            margin-bottom: 10px;
        }
        
        .product-info p {
            margin-bottom: 20px;
            color: #666;
            flex-grow: 1;
        }
        
        .product-price {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        
        /* Benefits Section */
        .benefits {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.1), rgba(22, 160, 133, 0.1));
        }
        
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .benefit-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: var(--shadow-light);
            text-align: center;
            transition: var(--transition);
            height: 100%;
        }
        
        .benefit-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-heavy);
        }
        
        .benefit-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: var(--gradient-2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 30px;
            transition: var(--transition);
        }
        
        .benefit-card:hover .benefit-icon {
            transform: scale(1.1);
            box-shadow: 0 10px 20px rgba(22, 160, 133, 0.3);
        }
        
        .benefit-card h3 {
            font-size: 1.3rem;
            color: var(--dark-color);
            margin-bottom: 15px;
        }
        
        /* Testimonials Section */
        .testimonials {
            padding: 100px 0;
            background: white;
        }
        
        .testimonials-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial {
            text-align: center;
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .testimonial-text {
            font-size: 1.1rem;
            font-style: italic;
            margin-bottom: 30px;
            position: relative;
        }
        
        .testimonial-text::before {
            content: '"';
            font-size: 60px;
            color: var(--primary-color);
            opacity: 0.3;
            position: absolute;
            top: -20px;
            left: -20px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .author-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .author-info h4 {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: #666;
            font-size: 0.9rem;
        }
        
        .slider-controls {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .slider-dot.active {
            background: var(--primary-color);
            transform: scale(1.2);
        }
        
        /* FAQ Section */
        .faq {
            padding: 100px 0;
            background: var(--light-color);
        }
        
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .faq-item {
            background: white;
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .faq-question {
            padding: 20px;
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--dark-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
        
        .faq-question:hover {
            background: rgba(46, 204, 113, 0.05);
        }
        
        .faq-question i {
            transition: var(--transition);
        }
        
        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 20px 20px;
        }
        
        /* CTA Section */
        .cta {
            padding: 100px 0;
            background: var(--gradient-1);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1470058869958-2a77ade41c02?') center/cover;
            opacity: 0.1;
            z-index: 0;
        }
        
        .cta .container {
            position: relative;
            z-index: 1;
        }
        
        .cta h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        .cta p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 30px;
        }
        
        .cta-buttons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .btn-cta {
            background: white;
            color: var(--primary-color);
            margin: 5px;
        }
        
        .btn-cta::before {
            background: var(--dark-color);
        }
        
        .btn-cta:hover {
            color: white;
        }
        
        /* Contact Section */
        .contact {
            padding: 100px 0;
            background: white;
        }
        
        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
        }
        
        .contact-info {
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .contact-info h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 30px;
        }
        
        .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 25px;
        }
        
        .contact-item i {
            font-size: 20px;
            color: var(--primary-color);
            margin-right: 15px;
            margin-top: 5px;
            width: 30px;
        }
        
        .contact-form {
            padding: 40px;
            background: var(--light-color);
            border-radius: 15px;
            box-shadow: var(--shadow-light);
        }
        
        .contact-form h3 {
            font-size: 1.8rem;
            color: var(--dark-color);
            margin-bottom: 30px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: var(--transition);
            background: white;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.1);
        }
        
        select.form-control {
            cursor: pointer;
        }
        
        textarea.form-control {
            resize: vertical;
            min-height: 120px;
        }
        
        /* Footer */
        footer {
            background: var(--dark-color);
            color: white;
            padding: 60px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary-color);
        }
        
        .footer-column p {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 12px;
        }
        
        .footer-links a {
            color: #bbb;
            transition: var(--transition);
        }
        
        .footer-links a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            margin-top: 25px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-right: 15px;
            color: white;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .newsletter-form {
            display: flex;
            margin-top: 25px;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: var(--shadow-light);
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 12px 20px;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }
        
        .newsletter-form input::placeholder {
            color: #bbb;
        }
        
        .newsletter-form button {
            padding: 12px 20px;
            background: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .newsletter-form button:hover {
            background: var(--secondary-color);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #bbb;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .about-content,
            .contact-content,
            .product-month-content,
            .weekly-deal-content {
                grid-template-columns: 1fr;
            }
            
            .about-image,
            .product-month-image,
            .weekly-deal-image {
                order: -1;
                min-height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .main-nav {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                background: white;
                flex-direction: column;
                padding: 20px;
                box-shadow: var(--shadow-medium);
                transform: translateY(-100%);
                opacity: 0;
                visibility: hidden;
                transition: var(--transition);
            }
            
            .main-nav.active {
                transform: translateY(0);
                opacity: 1;
                visibility: visible;
            }
            
            .main-nav li {
                margin: 10px 0;
            }
            
            .menu-toggle {
                display: block;
            }
            
            .hero h1 {
                font-size: 2rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .cta h2 {
                font-size: 2rem;
            }

            .product-month-info, .weekly-deal-info {
                padding: 30px;
            }

            .countdown {
                gap: 10px;
            }

            .countdown-item {
                min-width: 70px;
                padding: 10px;
            }
        }
        
        /* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Loading Animation */
        .loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loader.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .loader-circle {
            width: 50px;
            height: 50px;
            border: 5px solid var(--light-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- Loader -->
    <div class="loader" id="loader">
        <div class="loader-circle"></div>
    </div>
    
    <!-- Header -->
    <header id="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-leaf"></i>
                    <span>VerdeTech</span>
                </div>
                <nav>
                    <ul class="main-nav" id="mainNav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#product-month">Offerte</a></li>
                        <li><a href="#products">Prodotti</a></li>
                        <li><a href="#benefits">Benefici</a></li>
                        <li><a href="#testimonials">Testimonianze</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                    <button class="menu-toggle" id="menuToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                </nav>
            </div>
        </div>
    </header>
    
    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>Natura e Tecnologia per Spazi Unici immersi verde</h1>
            <p>Esplora la nostra collezione esclusiva di piante esotiche, bonsai artistici e fioriere di <b>green design</b> che trasformano ogni ambiente in un'oasi di benessere.</p>
            <div class="hero-buttons">
                <a href="#products" class="btn">Catalogo Piante</a>
                <a href="#contact" class="btn btn-outline">Contattaci</a>
            </div>
        </div>
        <div class="scroll-indicator">
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>
    
    <!-- About Section -->
    <section class="about" id="about">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Chi Siamo</h2>
            </div>
            <div class="about-content">
                <div class="about-text fade-in">
                    <h3>VerdeTech: Dove la Natura Incontra l'Innovazione</h3>
                    <p>Siamo un team di appassionati botanici e designer che uniscono la bellezza della natura con le più moderne tecnologie per creare soluzioni verdi uniche. La nostra missione è portare la natura in ogni spazio, migliorando la qualità della vita e promuovendo il benessere attraverso il potere delle piante.</p>
                    <p>Con oltre 20 anni di esperienza nel settore, abbiamo sviluppato tecniche colturali innovative che garantiscono piante sane, resistenti e di straordinaria bellezza, adatte sia per ambienti domestici che professionali.</p>
                    <a href="#contact" class="btn">Scopri di più</a>
                </div>
                <div class="about-image fade-in">
                    <img src="https://images.unsplash.com/photo-1602953589577-a7e91286f5ac?" alt="VerdeTech Team">
                </div>
            </div>
        </div>
    </section>
    
    <!-- Features Section -->
    <section class="features">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Perché Scegliere VerdeTech</h2>
            </div>
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-seedling"></i>
                    </div>
                    <h3>Qualità Superiore</h3>
                    <p>Piante selezionate con cura, coltivate con tecniche innovative che garantiscono salute e longevità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>Consegna Rapida</h3>
                    <p>Spedizioni veloci e sicure in tutta Italia, con imballaggi speciali per proteggere ogni pianta.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3>Consulenza Esperta</h3>
                    <p>Il nostro team di botanici è sempre a disposizione per consigli personalizzati e assistenza.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-leaf"></i>
                    </div>
                    <h3>Sostenibilità</h3>
                    <p>Coltiviamo le nostre piante con metodi ecologici, rispettando l'ambiente e promuovendo la biodiversità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h3>Garanzia VerdeTech</h3>
                    <p>Tutte le nostre piante sono coperte da una garanzia di 30 giorni per la tua tranquillità.</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">
                        <i class="fas fa-microscope"></i>
                    </div>
                    <h3>Ricerca e Innovazione</h3>
                    <p>Investiamo costantemente in ricerca per sviluppare nuove varietà e tecniche colturali all'avanguardia.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Product of the Month Section -->
    <section class="product-month" id="product-month">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Prodotto del Mese</h2>
            </div>
            <div class="product-month-content fade-in">
                <div class="product-month-image">
                    <img src="https://images.unsplash.com/photo-1677784029379-6d083a9af3a7?" alt="Monstera Deliciosa">
                    <div class="product-month-badge">Prodotto del Mese</div>
                </div>
                <div class="product-month-info">
                    <h3>Esclusività Limitata</h3>
                    <h2>Monstera Deliciosa Variegata</h2>
                    <p>Un capolavoro della natura. Questa rara varietà di Monstera presenta splendide variegature bianche su ogni foglia, rendendola un pezzo unico e ricercato per ogni collezionista. Perfetta come punto focale in qualsiasi ambiente moderno.</p>
                    <div class="product-price">
                        €189,00 <span class="old-price">€249,00</span>
                    </div>
                    <a href="#contact" class="btn">Ordina Ora</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Weekly Deal Section -->
    <section class="weekly-deal">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Offerta Lampo della Settimana</h2>
            </div>
            <div class="weekly-deal-content fade-in">
                <div class="weekly-deal-info">
                    <h3>Super Sconto -72 Ore</h3>
                    <h2>Kit Bonsai per Principianti</h2>
                    <p>Tutto il necessario per iniziare il tuo viaggio nel mondo dei bonsai. Include un bonsai Ficus Ginseng di 3 anni, vaso ceramico, concime, forbici professionali e una guida illustrata. L'offerta perfetta per chi vuole avvicinarsi a questa affascinante arte.</p>
                    <div class="scarcity">
                        <i class="fas fa-exclamation-triangle"></i>
                        <div class="scarcity-text">
                            <strong>Attenzione:</strong> Solo <span id="stockCount">7</span> kit disponibili a questo prezzo!
                        </div>
                    </div>
                    <div class="countdown" id="countdown">
                        <div class="countdown-item">
                            <span class="countdown-value" id="days">00</span>
                            <span class="countdown-label">Giorni</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="hours">00</span>
                            <span class="countdown-label">Ore</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="minutes">00</span>
                            <span class="countdown-label">Minuti</span>
                        </div>
                        <div class="countdown-item">
                            <span class="countdown-value" id="seconds">00</span>
                            <span class="countdown-label">Secondi</span>
                        </div>
                    </div>
                    <a href="#contact" class="btn">Approfitta Ora</a>
                </div>
                <div class="weekly-deal-image">
                    <img src="https://plus.unsplash.com/premium_photo-1739452120318-bd7ebd7c7616?" alt="Kit Bonsai per Principianti">
                    <div class="weekly-deal-badge">Offerta Limitata</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Products Section -->
    <section class="products" id="products">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Il Nostro Catalogo Completo</h2>
            </div>
            <div class="product-tabs fade-in">
                <button class="tab-btn active" data-tab="exotic">Piante Esotiche</button>
                <button class="tab-btn" data-tab="bonsai">Bonsai</button>
                <button class="tab-btn" data-tab="planters">Fioriere Design</button>
                <button class="tab-btn" data-tab="collections">Collezioni Speciali</button>
            </div>
            <div class="products-grid" id="productsGrid">
                <!-- Products will be loaded here via JavaScript -->
            </div>
        </div>
    </section>
    
    <!-- Benefits Section -->
    <section class="benefits" id="benefits">
        <div class="container">
            <div class="section-title fade-in">
                <h2>I Benefici del Verde nella Tua Vita</h2>
            </div>
            <div class="benefits-grid">
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-lungs"></i>
                    </div>
                    <h3>Aria Più Pulita</h3>
                    <p>Le piante purificano l'aria eliminando tossine e aumentando i livelli di ossigeno, migliorando la qualità dell'ambiente domestico e lavorativo.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3>Migliore Concentrazione</h3>
                    <p>Studi dimostrano che la presenza di piante aumenta la produttività fino al 15% e migliora la capacità di concentrazione.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3>Riduzione dello Stress</h3>
                    <p>Il contatto con la natura riduce i livelli di cortisolo, l'ormone dello stress, promuovendo un senso di calma e benessere.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-bed"></i>
                    </div>
                    <h3>Miglior Sonno</h3>
                    <p>Alcune piante rilasciano ossigeno durante la notte, migliorando la qualità del sonno e aiutando a combattere l'insonnia.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h3>Aumento dell'Energia</h3>
                    <p>Ambienti verdi stimolano i sensi e aumentano i livelli di energia, combattendo la stanchezza e l'affaticamento.</p>
                </div>
                <div class="benefit-card fade-in">
                    <div class="benefit-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Rafforzo del Sistema Immunitario</h3>
                    <p>Le piante riducono la polvere e gli allergeni nell'aria, rafforzando le difese immunitarie e prevenendo malattie respiratorie.</p>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Testimonials Section -->
    <section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Dicono di Noi</h2>
            </div>
            <div class="testimonials-slider fade-in">
                <div class="testimonial">
                    <p class="testimonial-text">Ho acquistato diverse piante esotiche da VerdeTech e sono rimasto sbalordito dalla qualità e dalla salute delle piante ricevute. Il servizio clienti è eccezionale e mi hanno fornito consigli preziosi per la cura. Assolutamente raccomandato!</p>
                    <div class="testimonial-author">
                        <div class="author-image">
                            <img src="https://picsum.photos/seed/testimonial1/60/60.jpg" alt="Marco Rossi">
                        </div>
                        <div class="author-info">
                            <h4>Marco Rossi</h4>
                            <p>Architetto d'interni</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slider-controls">
                <span class="slider-dot active"></span>
                <span class="slider-dot"></span>
                <span class="slider-dot"></span>
            </div>
        </div>
    </section>
    
    <!-- FAQ Section -->
    <section class="faq" id="faq">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Domande Frequenti</h2>
            </div>
            <div class="faq-container fade-in">
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quali sono i benefici reali delle piante esotiche per la salute?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Le piante esotiche offrono numerosi benefici per la salute: purificano l'aria rimuovendo tossine come formaldeide e benzene, aumentano i livelli di umidità riducendo problemi respiratori, migliorano l'umore e riducono lo stress, aumentano la produttività e la concentrazione, e possono anche ridurre il rumore ambientale creando un'atmosfera più tranquilla.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quanto tempo è necessario per curare un bonsai?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>La cura di un bonsai richiede impegno costante ma non necessariamente molto tempo. In media, bastano 10-15 minuti al giorno per controllare l'umidità del terreno e osservare la pianta, più circa 30-60 minuti a settimana per potature, concimazioni e trattamenti specifici. È più una questione di costanza e attenzione che di tempo effettivo.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Le vostre fioriere sono adatte anche per balconi piccoli?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo una vasta gamma di fioriere progettate specificamente per spazi ridotti. Le nostre soluzioni includono fioriere verticali, moduli componibili e sistemi sospesi che ottimizzano lo spazio verticale, permettendoti di creare un piccolo giardino anche su balconi di pochi metri quadrati.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite sconti per ordini all'ingrosso?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, abbiamo un programma dedicato per clienti professionali, negozi, architetti e paesaggisti. Offriamo sconti progressivi basati sul volume dell'ordine, consulenza personalizzata e supporto tecnico. Contatta il nostro team commerciale per ricevere un catalogo specifico e un preventivo personalizzato.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Come garantite la sopravvivenza delle piante durante la spedizione?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Utilizziamo imballaggi speciali progettati per proteggere le piante durante il trasporto. Ogni pianta viene accuratamente imballata con materiali che mantengono l'umidità e proteggono foglie e radici. Le spedizioni sono assicurate e in caso di danni durante il trasporto, provvediamo immediatamente alla sostituzione.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Quali piante sono più adatte per chi non ha il pollice verde?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Per chi è alle prime armi, raccomandiamo piante resistenti come Sansevieria, Zamioculcas, Pothos, e alcune varietà di Ficus. Queste piante richiedono poche cure, tollerano errori di irrigazione e si adattano bene a diverse condizioni di luce. Il nostro team può consigliarti la pianta perfetta in base alle tue abitudini e all'ambiente in cui vivi.</p>
                    </div>
                </div>
                <div class="faq-item">
                    <div class="faq-question">
                        <span>Offrite un servizio di manutenzione post-vendita?</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Sì, offriamo un servizio completo di manutenzione per clienti privati e aziendali. I nostri esperti possono intervenire periodicamente per potature, concimazioni, trattamenti fitosanitari e riporti. Inoltre, forniamo una guida dettagliata per ogni pianta acquistata e il nostro servizio clienti è sempre disponibile per rispondere a qualsiasi dubbio sulla cura delle tue piante.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="cta">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Pronto a Trasformare il Tuo Spazio?</h2>
            </div>
            <p>Unisciti ai migliaia di clienti che hanno già scelto VerdeTech per portare la natura nella loro vita.</p>
            <div class="cta-buttons fade-in">
                <a href="#contact" class="btn btn-cta">Richiedi una Consulenza</a>
                <a href="#products" class="btn btn-cta">Scopri il Catalogo</a>
            </div>
        </div>
    </section>
    
    <!-- Contact Section -->
    <section class="contact" id="contact">
        <div class="container">
            <div class="section-title fade-in">
                <h2>Contattaci</h2>
            </div>
            <div class="contact-content">
                <div class="contact-info fade-in">
                    <h3>Informazioni di Contatto</h3>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h4>Indirizzo</h4>
                            <p>Via della Natura, 123<br>20121 Milano, Italia</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h4>Telefono</h4>
                            <p>+39 02 12345678</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h4>Email</h4>
                            <p>info@verdetch.it</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-clock"></i>
                        <div>
                            <h4>Orari di Apertura</h4>
                            <p>Lunedì - Venerdì: 9:00 - 18:00<br>Sabato: 9:00 - 13:00<br>Domenica: Chiuso</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form fade-in">
                    <h3>Invia un Messaggio</h3>
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name">Nome e Cognome</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Telefono</label>
                            <input type="tel" id="phone" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="where">Dove ci hai conosciuto?</label>
                            <select id="where" class="form-control" required>
                                <option value="" selected disabled>Seleziona un'opzione</option>
                                <option value="google">Google / Motore di ricerca</option>
                                <option value="social">Social Media (Facebook, Instagram, etc.)</option>
                                <option value="friend">Amico / Parente</option>
                                <option value="advert">Pubblicità online</option>
                                <option value="other">Altro</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="plant-interest">Quale tipo di piante ti interessa?</label>
                            <select id="plant-interest" class="form-control" required>
                                <option value="" selected disabled>Seleziona un'opzione</option>
                                <option value="exotic">Piante Esotiche</option>
                                <option value="bonsai">Bonsai</option>
                                <option value="planters">Fioriere Design</option>
                                <option value="collections">Collezioni Speciali</option>
                                <option value="advice">Consulenza personalizzata</option>
                                <option value="not-sure">Non sono sicuro, ho bisogno di consigli</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="subject">Oggetto</label>
                            <input type="text" id="subject" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Messaggio</label>
                            <textarea id="message" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="btn">Invia Messaggio</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>VerdeTech</h3>
                    <p>Natura e tecnologia per spazi unici. Trasformiamo ogni ambiente in un'oasi di benessere attraverso il potere delle piante.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-pinterest"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Link Utili</h3>
                    <ul class="footer-links">
                        <li><a href="#about">Chi Siamo</a></li>
                        <li><a href="#product-month">Offerte</a></li>
                        <li><a href="#products">Prodotti</a></li>
                        <li><a href="#benefits">Benefici</a></li>
                        <li><a href="#testimonials">Testimonianze</a></li>
                        <li><a href="#faq">FAQ</a></li>
                        <li><a href="#contact">Contatti</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Categorie Prodotti</h3>
                    <ul class="footer-links">
                        <li><a href="#">Piante Esotiche</a></li>
                        <li><a href="#">Bonsai</a></li>
                        <li><a href="#">Fioriere Design</a></li>
                        <li><a href="#">Collezioni Speciali</a></li>
                        <li><a href="#">Kit per Principianti</a></li>
                        <li><a href="#">Accessori</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Newsletter</h3>
                    <p>Iscriviti alla nostra newsletter per ricevere consigli esclusivi, offerte speciali e rimanere aggiornato sulle novità.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="La tua email" required>
                        <button type="submit"><i class="fas fa-paper-plane"></i></button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 VerdeTech - Orto Botanico. Tutti i diritti riservati. | P.IVA 12345678901 | Privacy Policy | Termini e Condizioni</p>
            </div>
        </div>
    </footer>
    
    <script>
        // Loader
        window.addEventListener('load', function() {
            setTimeout(function() {
                document.getElementById('loader').classList.add('hidden');
            }, 1000);
        });
        
        // Sticky Header
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Mobile Menu Toggle
        const menuToggle = document.getElementById('menuToggle');
        const mainNav = document.getElementById('mainNav');
        
        menuToggle.addEventListener('click', function() {
            mainNav.classList.toggle('active');
            
            // Change icon
            const icon = this.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });
        
        // Close mobile menu when clicking on a link
        document.querySelectorAll('.main-nav a').forEach(link => {
            link.addEventListener('click', function() {
                mainNav.classList.remove('active');
                const icon = menuToggle.querySelector('i');
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            });
        });
        
        // Smooth Scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // Fade In Animation on Scroll
        const fadeElements = document.querySelectorAll('.fade-in');
        
        function checkFade() {
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('visible');
                }
            });
        }
        
        window.addEventListener('scroll', checkFade);
        window.addEventListener('load', checkFade);
        
        // Products Data
        const productsData = {
            exotic: [
                {
                    name: "Monstera Deliciosa",
                    description: "La pianta tropicale più amata per le sue foglie uniche e scenografiche.",
                    price: "€45,00",
                    image: "https://plus.unsplash.com/premium_photo-1739452120318-bd7ebd7c7616?"
                },
                {
                    name: "Ficus Lyrata",
                    description: "Con le sue grandi foglie a forma di violino, è perfetta per creare un'impatto visivo.",
                    price: "€65,00",
                    image: "https://picsum.photos/seed/ficus-lyrata/400/300.jpg"
                },
                {
                    name: "Calathea Ornata",
                    description: "Famosa per le sue foglie decorate con striature rosa e bianche.",
                    price: "€35,00",
                    image: "https://picsum.photos/seed/calathea-ornata/400/300.jpg"
                },
                {
                    name: "Bird of Paradise",
                    description: "Con i suoi fiori esotici a forma di uccello, porta un tocco tropicale in ogni ambiente.",
                    price: "€55,00",
                    image: "https://picsum.photos/seed/bird-paradise/400/300.jpg"
                },
                {
                    name: "Alocasia Polly",
                    description: "Foglie a forma di freccia con venature prominenti, un vero gioiello botanico.",
                    price: "€40,00",
                    image: "https://plus.unsplash.com/premium_photo-1663126506993-00e288b94dea?"
                },
                {
                    name: "Philodendron Pink Princess",
                    description: "Una varietà rara con splendide macchie rosa sulle foglie scure.",
                    price: "€120,00",
                    image: "https://picsum.photos/seed/philodendron-pink/400/300.jpg"
                }
            ],
            bonsai: [
                {
                    name: "Bonsai Ficus Ginseng",
                    description: "Ideale per principianti, con le sue radici aeree affascinanti.",
                    price: "€75,00",
                    image: "https://picsum.photos/seed/ficus-ginseng/400/300.jpg"
                },
                {
                    name: "Bonsai Carmona",
                    description: "Con i suoi piccoli fiori bianchi, è una vera gioia per gli occhi.",
                    price: "€85,00",
                    image: "https://picsum.photos/seed/carmona-bonsai/400/300.jpg"
                },
                {
                    name: "Bonsai Ulivo",
                    description: "Simbolo di pace e longevità, perfetto per interni ed esterni.",
                    price: "€95,00",
                    image: "https://picsum.photos/seed/olive-bonsai/400/300.jpg"
                },
                {
                    name: "Bonsai Acero Giapponese",
                    description: "Con le sue foglie che cambiano colore con le stagioni, è un'opera d'arte vivente.",
                    price: "€120,00",
                    image: "https://picsum.photos/seed/maple-bonsai/400/300.jpg"
                },
                {
                    name: "Bonsai Juniperus",
                    description: "Un classico senza tempo, con foglie aghi e un aspetto maestoso.",
                    price: "€110,00",
                    image: "https://picsum.photos/seed/juniperus-bonsai/400/300.jpg"
                },
                {
                    name: "Bonsai Ginkgo Biloba",
                    description: "Antico e affascinante, con le sue characteristiche foglie a ventaglio.",
                    price: "€130,00",
                    image: "https://picsum.photos/seed/ginkgo-bonsai/400/300.jpg"
                }
            ],
            planters: [
                {
                    name: "Fioriera Sospesa Air",
                    description: "Design minimalista e materiali sostenibili per un giardino verticale elegante.",
                    price: "€40,00",
                    image: "https://picsum.photos/seed/hanging-planter/400/300.jpg"
                },
                {
                    name: "Fioriera Modulare Geo",
                    description: "Sistema componibile che permette di creare composizioni uniche.",
                    price: "€55,00",
                    image: "https://picsum.photos/seed/geo-planter/400/300.jpg"
                },
                {
                    name: "Fioriera Smart Tech",
                    description: "Con sistema di irrigazione automatico e sensori per monitorare la salute della pianta.",
                    price: "€120,00",
                    image: "https://picsum.photos/seed/smart-planter/400/300.jpg"
                },
                {
                    name: "Fioriera Terracotta Art",
                    description: "Fatta a mano con tecniche tradizionali, ogni pezzo è unico.",
                    price: "€65,00",
                    image: "https://picsum.photos/seed/terracotta-planter/400/300.jpg"
                },
                {
                    name: "Set Fioriere da Parete",
                    description: "Crea un muro verde con questo set di 3 fioriere modulari.",
                    price: "€90,00",
                    image: "https://picsum.photos/seed/wall-planters/400/300.jpg"
                },
                {
                    name: "Fioriera Autogrigante",
                    description: "Perfetta per balconi e terrazzi, con sistema di drenaggio avanzato.",
                    price: "€75,00",
                    image: "https://picsum.photos/seed/balcony-planter/400/300.jpg"
                }
            ],
            collections: [
                {
                    name: "Kit Benessere Ufficio",
                    description: "Selezione di piante che purificano l'aria e aumentano la produttività.",
                    price: "€120,00",
                    image: "https://picsum.photos/seed/office-kit/400/300.jpg"
                },
                {
                    name: "Collezione Purificante",
                    description: "Piante selezionate per massimizzare la purificazione dell'aria in casa.",
                    price: "€95,00",
                    image: "https://picsum.photos/seed/purifying-collection/400/300.jpg"
                },
                {
                    name: "Set Relax per Camera",
                    description: "Piante che migliorano la qualità del sonno e creano un'atmosfera rilassante.",
                    price: "€85,00",
                    image: "https://picsum.photos/seed/bedroom-set/400/300.jpg"
                },
                {
                    name: "Collezione Bonsai Premium",
                    description: "Selezione esclusiva dei nostri bonsai più pregiati con accessori professionali.",
                    price: "€250,00",
                    image: "https://picsum.photos/seed/premium-bonsai/400/300.jpg"
                },
                {
                    name: "Kit Giardino Erboso",
                    description: "Tutto il necessario per coltivare le tue erbe aromatiche preferite in casa.",
                    price: "€70,00",
                    image: "https://picsum.photos/seed/herb-garden/400/300.jpg"
                },
                {
                    name: "Collezione Piante Grasse",
                    description: "Selezione di piante succulente facili da curare e di grande impatto estetico.",
                    price: "€60,00",
                    image: "https://picsum.photos/seed/succulent-collection/400/300.jpg"
                }
            ]
        };
        
        // Load Products
        function loadProducts(category) {
            const productsGrid = document.getElementById('productsGrid');
            productsGrid.innerHTML = '';
            
            productsData[category].forEach(product => {
                const productCard = document.createElement('div');
                productCard.className = 'product-card fade-in';
                productCard.innerHTML = `
                    <div class="product-image">
                        <img src="${product.image}" alt="${product.name}">
                        <div class="product-overlay"></div>
                    </div>
                    <div class="product-info">
                        <h3>${product.name}</h3>
                        <p>${product.description}</p>
                        <div class="product-price">${product.price}</div>
                        <button class="btn">Aggiungi al Carrello</button>
                    </div>
                `;
                productsGrid.appendChild(productCard);
            });
            
            // Re-check fade elements
            setTimeout(checkFade, 100);
        }
        
        // Tab Functionality
        const tabButtons = document.querySelectorAll('.tab-btn');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                // Remove active class from all buttons
                tabButtons.forEach(btn => btn.classList.remove('active'));
                
                // Add active class to clicked button
                this.classList.add('active');
                
                // Load products for the selected category
                const category = this.getAttribute('data-tab');
                loadProducts(category);
            });
        });
        
        // Load initial products
        loadProducts('exotic');
        
        // Countdown Timer
        function updateCountdown() {
            const now = new Date().getTime();
            // Set the countdown date to 3 days from now
            const countDownDate = new Date().getTime() + (3 * 24 * 60 * 60 * 1000);
            
            const distance = countDownDate - now;
            
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            document.getElementById("days").innerText = days.toString().padStart(2, '0');
            document.getElementById("hours").innerText = hours.toString().padStart(2, '0');
            document.getElementById("minutes").innerText = minutes.toString().padStart(2, '0');
            document.getElementById("seconds").innerText = seconds.toString().padStart(2, '0');
            
            if (distance < 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdown").innerHTML = "<h3>Offerta Scaduta</h3>";
            }
        }
        
        const countdownInterval = setInterval(updateCountdown, 1000);
        updateCountdown(); // Run immediately
        
        // Simulate stock decrease
        let stockCount = 7;
        setInterval(() => {
            if (stockCount > 1 && Math.random() > 0.7) {
                stockCount--;
                document.getElementById('stockCount').innerText = stockCount;
            }
        }, 15000); // Every 15 seconds, with some randomness

        // FAQ Accordion
        const faqItems = document.querySelectorAll('.faq-item');
        
        faqItems.forEach(item => {
            const question = item.querySelector('.faq-question');
            
            question.addEventListener('click', function() {
                // Close all other items
                faqItems.forEach(otherItem => {
                    if (otherItem !== item) {
                        otherItem.classList.remove('active');
                    }
                });
                
                // Toggle current item
                item.classList.toggle('active');
            });
        });
        
        // Testimonial Slider
        const testimonials = [
            {
                text: "Ho acquistato diverse piante esotiche da VerdeTech e sono rimasto sbalordito dalla qualità e dalla salute delle piante ricevute. Il servizio clienti è eccezionale e mi hanno fornito consigli preziosi per la cura. Assolutamente raccomandato!",
                author: "Marco Rossi",
                role: "Architetto d'interni",
                image: "https://picsum.photos/seed/testimonial1/60/60.jpg"
            },
            {
                text: "Come paesaggista, lavoro con molti fornitori, ma VerdeTech è senza dubbio il migliore. La qualità dei loro bonsai è impareggiabile e la loro conoscenza botanica mi ha aiutato a realizzare progetti unici per i miei clienti.",
                author: "Laura Bianchi",
                role: "Paesaggista",
                image: "https://picsum.photos/seed/testimonial2/60/60.jpg"
            },
            {
                text: "Le fioriere design di VerdeTech hanno trasformato completamente il mio balcone. Ora ho un piccolo giardino verticale che è l'invidia di tutti i miei vicini. La qualità dei materiali e il design innovativo sono fantastici!",
                author: "Giulia Conti",
                role: "Interior Designer",
                image: "https://picsum.photos/seed/testimonial3/60/60.jpg"
            }
        ];
        
        let currentTestimonial = 0;
        const testimonialElement = document.querySelector('.testimonial');
        const dots = document.querySelectorAll('.slider-dot');
        
        function showTestimonial(index) {
            const testimonial = testimonials[index];
            testimonialElement.innerHTML = `
                <p class="testimonial-text">${testimonial.text}</p>
                <div class="testimonial-author">
                    <div class="author-image">
                        <img src="${testimonial.image}" alt="${testimonial.author}">
                    </div>
                    <div class="author-info">
                        <h4>${testimonial.author}</h4>
                        <p>${testimonial.role}</p>
                    </div>
                </div>
            `;
            
            // Update dots
            dots.forEach((dot, i) => {
                if (i === index) {
                    dot.classList.add('active');
                } else {
                    dot.classList.remove('active');
                }
            });
        }
        
        // Dot click functionality
        dots.forEach((dot, index) => {
            dot.addEventListener('click', function() {
                currentTestimonial = index;
                showTestimonial(currentTestimonial);
            });
        });
        
        // Auto-rotate testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);
        
        // Contact Form
        const contactForm = document.getElementById('contactForm');
        
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const phone = document.getElementById('phone').value;
            const where = document.getElementById('where').value;
            const plantInterest = document.getElementById('plant-interest').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // Here you would normally send the data to a server
            // For this example, we'll just show a success message
            alert(`Grazie ${name}! Il tuo messaggio è stato inviato con successo. Ti risponderemo quanto prima.`);
            
            // Reset form
            contactForm.reset();
        });
        
        // Newsletter Form
        const newsletterForm = document.querySelector('.newsletter-form');
        
        newsletterForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const email = this.querySelector('input[type="email"]').value;
            
            // Here you would normally send the data to a server
            // For this example, we'll just show a success message
            alert(`Grazie per esserti iscritto alla nostra newsletter! Riceverai presto notizie e offerte esclusive a ${email}.`);
            
            // Reset form
            this.reset();
        });
    </script>
</body>
</html>