Frequently Asked Questions (FAQ)

<body>

body {
font-family: 'Courier New', monospace;
background: var(--matrix);
color: #fff;
line-height: 1.6;
margin: 0;
padding: 2rem;
position: relative;
overflow-x: hidden;
}

#webgl-canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

.container {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
background: rgba(0, 10, 22, 0.9);
padding: 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
}

.floating-header {
text-align: center;
margin: 3rem 0;
animation: float 3s ease-in-out infinite;
text-shadow: 0 0 15px rgba(255,107,53,0.4);
user-select: none;
}

.hacker-notification {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: #00ff00;
font-size: 1.5rem;
text-shadow: 0 0 10px #00ff00;
background: rgba(0, 0, 0, 0.9);
padding: 1rem 2rem;
border: 2px solid #00ff00;
border-radius: 5px;
display: none;
animation: fadeOut 3s forwards;
z-index: 10000;
}

.matrix-rain {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s;
z-index: 999;
}

.hacker-active .matrix-rain {
opacity: 1;
}

.qa-system {
margin: 2rem 0;
}

.question-list {
display: grid;
gap: 1rem;
}

.question-item {
padding: 1rem;
border: 1px solid var(--neon-orange);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
}

.question-item:hover {
background: rgba(255,95,31,0.1);
transform: translateX(10px);
}

.answer-display {
margin-top: 2rem;
padding: 2rem;
background: rgba(0,0,0,0.7);
border-left: 3px solid var(--hacker-green);
min-height: 200px;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

@keyframes fadeOut {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; display: none; }
}
</style>

<canvas id="webgl-canvas"></canvas>
<canvas class="matrix-rain"></canvas>
<div class="hacker-notification" id="hackerNotification">HACKER MODE ACTIVATED</div>

<div class="container">
<h1 class="floating-header">🚀 Vista Support System</h1>

const geometry = new THREE.BufferGeometry();
const vertices = [];
for(let i = 0; i < 5000; i++) {
vertices.push(
Math.random() * 2000 - 1000,
Math.random() * 2000 - 1000,
Math.random() * 2000 - 1000
);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

const material = new THREE.PointsMaterial({
size: 2,
color: 0xff5f1f,
transparent: true,
opacity: 0.5
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);
camera.position.z = 1000;

const animate = () => {
requestAnimationFrame(animate);
particles.rotation.x += 0.0001;
particles.rotation.y += 0.0001;
renderer.render(scene, camera);
};
animate();
};

// Matrix Rain Effect
class MatrixRain {
constructor(canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()';
this.drops = [];
this.resize();
window.addEventListener('resize', () => this.resize());
}

resize() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.columns = this.canvas.width / 20;
this.drops = Array(Math.floor(this.columns)).fill(0);
}

draw() {
this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = '#0F0';
this.ctx.font = '20px monospace';

this.drops.forEach((drop, i) => {
const char = this.chars[Math.floor(Math.random() * this.chars.length)];
this.ctx.fillText(char, i * 20, drop * 20);
if(drop * 20 > this.canvas.height && Math.random() > 0.975) {
this.drops[i] = 0;
}
this.drops[i]++;
});
}
}

// Hacker Mode System
let hackerMode = false;
let matrixAnimation;
const matrixCanvas = document.querySelector('.matrix-rain');
const matrixRain = new MatrixRain(matrixCanvas);

document.addEventListener('click', (e) => {
if(e.detail === 3) toggleHackerMode();
});

function toggleHackerMode() {
hackerMode = !hackerMode;
document.body.classList.toggle('hacker-active', hackerMode);
const notification = document.getElementById('hackerNotification');

notification.style.display = 'block';
notification.style.animation = 'none';
void notification.offsetWidth;
notification.style.animation = 'fadeOut 3s forwards';

if(hackerMode) {
const animate = () => {
if(!hackerMode) return;
matrixRain.draw();
matrixAnimation = requestAnimationFrame(animate);
};
animate();
} else {
cancelAnimationFrame(matrixAnimation);
matrixRain.ctx.clearRect(0, 0, matrixCanvas.width, matrixCanvas.height);
}
}

// Q&A System
const faqs = [
{
question: "How do I request a wholesale discount?",
answer: "Learn more here: <a href='https://itechvista.com/pages/wholesale' target='_blank'>Wholesale Information</a>"
},
{
question: "What payment methods do you accept?",
answer: `We accept:
<ul>
<li><strong>Credit/Debit Cards:</strong> Visa, Mastercard, American Express, Diner's club, Discover</li>
<li><strong>Digital Wallets:</strong> PayPal, Apple Pay, Shop Pay, Google Pay, Amazon Pay</li>
<li><strong>Other Methods:</strong> Bancontact, iDeal, Shop Pay Installments</li>
</ul>`
},
{
question: "How long does shipping take?",
answer: "Learn more here: <a href='https://itechvista.com/pages/shipping-and-warehouses' target='_blank'>Shipping Information</a>"
},
{
question: "What’s the return policy?",
answer: "Learn more here: <a href='https://itechvista.com/pages/returns-and-replacements' target='_blank'>Returns & Replacements</a>"
},
{
question: "Where can I track my order?",
answer: "Track your order here: <a href='https://itechvista.com/apps/track123' target='_blank'>Order Tracking</a>"
},
{
question: "Why is my order shipped without a tracking number?",
answer: "Your order has been sent from our warehouse to our shipping facility. Tracking information will be available once it arrives at the shipping facility."
},
{
question: "How can I contact customer support?",
answer: `Contact options:
<ul>
<li>Email: <a href="mailto:iTechHubStore@gmail.com">iTechHubStore@gmail.com</a></li>
<li>WhatsApp: <a href="https://wa.me/+17042907619">+1 704-290-7619</a></li>
<li><a href='https://itechvista.com/pages/contact' target='_blank'>Help & Contact Page</a></li>
</ul>`
},
{
question: "Are your products tested for quality?",
answer: `Quality assurance process:
<ol>
<li><strong>Thorough Testing:</strong> All products undergo rigorous performance and durability testing</li>
<li><strong>Supplier Partnerships:</strong> Work with reputable manufacturers</li>
<li><strong>Customer Feedback:</strong> Continuous improvement based on user experiences</li>
</ol>`
},
{
question: "Why are the prices so cheap?",
answer: `We maintain low prices through:
<ul>
<li>Constant price comparison with major retailers</li>
<li>Efficient supply chain management</li>
<li>Focus on wholesale/bulk orders</li>
</ul>
Learn more about our pricing: <a href='https://itechvista.com/pages/wholesale' target='_blank'>Wholesale Discounts</a>`
}
];

// Initialize Systems
window.addEventListener('DOMContentLoaded', () => {
initWebGL();
initQASystem();
});
</script>

</body>

Language

Currency