Hugging Face's logo

Spaces:
marzool009
/
marzool-tech-odyssey
Running

App Files Community
marzool-tech-odyssey
File size: 4,376 Bytes
a7e05b2
 
8e9f0f3
a7e05b2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8e9f0f3
 
a7e05b2
 
 
 
 
 
 
 
 
 
 
 
8e9f0f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

// Enhanced GSAP animations
document.addEventListener('DOMContentLoaded', () => {
    // Register GSAP plugins
    gsap.registerPlugin(ScrollTrigger);
    
    // Animate all elements with gsap-fade-in class
    gsap.utils.toArray('.gsap-fade-in').forEach(el => {
        gsap.from(el, {
            scrollTrigger: {
                trigger: el,
                start: "top 80%",
                toggleActions: "play none none none"
            },
            opacity: 0,
            y: 30,
            duration: 0.8,
            ease: "power3.out"
        });
    });

    // Animate all elements with gsap-scale-in class
    gsap.utils.toArray('.gsap-scale-in').forEach(el => {
        gsap.from(el, {
            scrollTrigger: {
                trigger: el,
                start: "top 80%",
                toggleActions: "play none none none"
            },
            opacity: 0,
            scale: 0.95,
            duration: 0.6,
            ease: "back.out(1.7)"
        });
    });

    // Hero section typing animation
    const heroText = "Marzool Technologies";
    const heroElement = document.querySelector('.hero-text-animate');
    if (heroElement) {
        let i = 0;
        const typing = setInterval(() => {
            heroElement.textContent += heroText[i];
            i++;
            if (i >= heroText.length) clearInterval(typing);
        }, 100);
    }
// Animate service cards on scroll
    gsap.utils.toArray('.portfolio-item').forEach((item, i) => {
        gsap.from(item, {
            scrollTrigger: {
                trigger: item,
                start: "top 80%",
                toggleActions: "play none none none"
            },
            opacity: 0,
            y: 50,
            duration: 0.8,
            delay: i * 0.1
        });
    });

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                window.scrollTo({
                    top: target.offsetTop - 80,
                    behavior: 'smooth'
                });
            }
        });
    });
});

// Simple testimonial slider
let currentTestimonial = 0;
const testimonials = [
    {
        name: "Sarah Johnson",
        role: "CEO, TechCorp",
        quote: "Marzool transformed our online presence with their innovative web solutions. Their team's expertise in AI integration was particularly impressive.",
        image: "https://static.photos/people/200x200/1"
    },
    {
        name: "Michael Chen",
        role: "CTO, FinTech Solutions",
        quote: "The AI-powered dashboard they developed has revolutionized our data analysis process. Highly recommend their services.",
        image: "https://static.photos/people/200x200/2"
    },
    {
        name: "Emma Rodriguez",
        role: "Marketing Director, RetailPlus",
        quote: "From concept to launch, Marzool exceeded our expectations at every stage. Their mobile app has significantly boosted our customer engagement.",
        image: "https://static.photos/people/200x200/3"
    }
];

function updateTestimonial() {
    const testimonial = testimonials[currentTestimonial];
    const slider = document.querySelector('.testimonial-slider');
    
    if (slider) {
        slider.innerHTML = `
            <div class="testimonial bg-gray-800 rounded-xl p-8 text-center">
                <div class="w-20 h-20 mx-auto mb-6 rounded-full overflow-hidden border-2 border-blue-500">
                    <img src="${testimonial.image}" alt="Client" class="w-full h-full object-cover">
                </div>
                <p class="text-lg italic mb-6">"${testimonial.quote}"</p>
                <h4 class="font-bold">${testimonial.name}</h4>
                <p class="text-gray-400">${testimonial.role}</p>
            </div>
        `;
        
        // Animate the new testimonial
        gsap.from('.testimonial', {
            opacity: 0,
            y: 20,
            duration: 0.8
        });
    }
}

// Rotate testimonials every 5 seconds
setInterval(() => {
    currentTestimonial = (currentTestimonial + 1) % testimonials.length;
    updateTestimonial();
}, 5000);

// Initialize first testimonial
updateTestimonial();