https://inmersivos.pages.dev/app.js

1import { organizations } from './organizations.js';
2import { serviceButtons } from './services.js';
3
4window.addEventListener('DOMContentLoaded', () => {
5    const heroSection = document.querySelector('.hero');
6    if (heroSection) {
7        heroSection.style.backgroundImage = "linear-gradient(135deg, rgba(44, 62, 80, 0.7), rgba(52, 152, 219, 0.7)), url('https://ideogram.ai/assets/progressive-image/balanced/response/_zZkSG8hSrSoPsdjZr5-SA')";
8    }
9});
10
11document.addEventListener('DOMContentLoaded', () => {
12    const modal = document.getElementById('industryModal');
13    const span = document.getElementsByClassName('close')[0];
14    const categoryButtons = document.getElementById('categoryButtons');
15    const organizationsList = document.getElementById('organizationsList');
16    const industryBtns = document.querySelectorAll('.industry-btn');
17    const industryBtnsFooter = document.querySelectorAll('.industry-btn-footer');
18    
19    // Initialize categories
20    const categories = Object.keys(organizations);
21    categories.forEach(category => {
22        const button = document.createElement('button');
23        button.textContent = category;
24        button.className = 'category-btn';
25        button.dataset.category = category;
26        button.addEventListener('click', () => {
27            // Remove active class from all buttons
28            document.querySelectorAll('.category-btn').forEach(btn => 
29                btn.classList.remove('active'));
30            
31            // Add active class to clicked button
32            button.classList.add('active');
33            
34            // Show organizations for this category
35            showOrganizations(category);
36        });
37        categoryButtons.appendChild(button);
38    });
39
40    // Activate first category by default
41    if (categories.length > 0) {
42        const firstButton = categoryButtons.querySelector('.category-btn');
43        firstButton.classList.add('active');
44        showOrganizations(categories[0]);
45    }
46
47    function showOrganizations(category) {
48        organizationsList.innerHTML = '';
49        const orgs = organizations[category];
50        
51        Object.entries(orgs).forEach(([key, org]) => {
52            const link = document.createElement('a');
53            link.href = `https://tally.so/r/meAZvk?Servicio=PACK-VIDEOMARKETING&Marca=CortosVOS&Rubro=${key}`;
54            link.className = 'org-link';
55            link.textContent = org.name;
56            link.style.backgroundColor = `${org.theme.primary}15`; // Lighter background
57            link.style.color = org.theme.primary;
58            link.style.borderLeftColor = org.theme.secondary;
59            link.target = '_blank';
60            organizationsList.appendChild(link);
61        });
62    }
63    
64    // Add event listeners to industry buttons
65    industryBtns.forEach(btn => {
66        btn.addEventListener('click', () => {
67            modal.style.display = 'block';
68            const category = btn.dataset.category;
69            
70            // Activate the corresponding category button
71            document.querySelectorAll('.category-btn').forEach(btn => 
72                btn.classList.remove('active'));
73            
74            document.querySelector(`.category-btn[data-category="${category}"]`)?.classList.add('active');
75            
76            showOrganizations(category);
77        });
78    });
79
80    industryBtnsFooter.forEach(btn => {
81        btn.addEventListener('click', () => {
82            modal.style.display = 'block';
83            showOrganizations(btn.dataset.category);
84        });
85    });
86    
87    // Add parallax effect to hero images
88    window.addEventListener('scroll', function() {
89        const scrollPosition = window.pageYOffset;
90        const heroSection = document.querySelector('.hero');
91        
92        if (heroSection) {
93            heroSection.style.backgroundPositionY = -scrollPosition * 0.5 + 'px';
94        }
95    });
96
97    // Initialize accordion functionality
98    const accordionItems = document.querySelectorAll('.accordion-item');
99    accordionItems.forEach(item => {
100        const header = item.querySelector('.accordion-header');
101        header.addEventListener('click', () => {
102            // Close all other items

103            accordionItems.forEach(otherItem => {
104                if (otherItem !== item) {
105                    otherItem.classList.remove('active');
106                }
107            });
108            // Toggle current item
109            item.classList.toggle('active');
110        });
111    });
112
113    span.onclick = function() {
114        modal.style.display = 'none';
115    }
116
117    window.onclick = function(event) {
118        if (event.target == modal) {
119            modal.style.display = 'none';
120        }
121    }
122});