0% found this document useful (0 votes)

1 views62 pages

code website

The document is an HTML template for a website titled 'ElectroTech Solutions - Premium Electrical Components'. It includes various CSS styles for layout, animations, and effects, focusing on a dark theme with red accents. The navigation bar and logo are designed to be visually appealing with hover effects and responsive features.

Uploaded by

avayakumarbeurastay

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

1 views62 pages

code website

Uploaded by

avayakumarbeurastay

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ElectroTech Solutions - Premium Electrical Components</title>

<script src="[Link]

<style>

body {

box-sizing: border-box;

font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;

font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif !important;

/* Text alignment - Justify all text */

p, .text-content, .editable, li, span, div {

text-align: justify;

line-height: 1.6;

/* Center alignment for specific elements */

.text-center, .text-center p, .text-center .editable {

text-align: center !important;

}
/* Center alignment for headings and titles */

h1, h2, h3, h4, h5, h6 {

text-align: center;

/* Justify product descriptions and content */

.card-hover p, .dark-card p, .testimonial-slide p {

text-align: justify;

/* Red, black and grey theme */

.gradient-bg {

background: linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #4a4a4a 50%, #dc2626 75%,
#000000 100%);

/* Animated gradient backgrounds */

.animated-gradient {

background: linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #4a4a4a 50%, #dc2626 75%,
#000000 100%);

background-size: 400% 400%;

animation: gradientShift 8s ease infinite;

@keyframes gradientShift {

0% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

100% { background-position: 0% 50%; }

/* Multiple gradient overlays with animation */

.multi-gradient {

background:

radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.4) 0%, transparent 50%),

radial-gradient(circle at 80% 20%, rgba(75, 85, 99, 0.3) 0%, transparent 50%),

linear-gradient(135deg, #000000 0%, #1a1a1a 25%, #4a4a4a 50%, #dc2626 75%, #000000
100%);

background-size: 400% 400%;

animation: gradientShift 10s ease infinite;

/* Animated glow effects */

.super-glow {

box-shadow:

0 0 20px rgba(220, 38, 38, 0.6),

0 0 40px rgba(220, 38, 38, 0.4),

0 0 60px rgba(220, 38, 38, 0.2);

animation: pulseGlow 3s ease-in-out infinite alternate;

@keyframes pulseGlow {

0% {

box-shadow:

0 0 20px rgba(220, 38, 38, 0.6),

0 0 40px rgba(220, 38, 38, 0.4),

0 0 60px rgba(220, 38, 38, 0.2);

100% {

box-shadow:

0 0 30px rgba(220, 38, 38, 0.8),

0 0 60px rgba(220, 38, 38, 0.6),

0 0 90px rgba(220, 38, 38, 0.4);

/* Professional card effects with animations */

.card-hover {

background: linear-gradient(145deg, #000000, #1a1a1a, #2d2d2d);

border: 1px solid #4a4a4a;

transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

transform: translateY(0);

.card-hover:hover {

border-color: #dc2626;

background: linear-gradient(145deg, #0a0a0a, #1f1f1f, #333333);

transform: translateY(-8px) scale(1.02);

box-shadow:

0 20px 40px rgba(0, 0, 0, 0.4),

0 0 20px rgba(220, 38, 38, 0.3);

}
/* Refined glow effects */

.red-glow {

transition: all 0.4s ease;

.red-glow:hover {

box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), 0 0 40px rgba(220, 38, 38, 0.2);

/* Professional navigation */

.nav-link {

padding: 8px 16px;

border-radius: 8px;

.nav-link:hover {

color: #dc2626;

background: rgba(220, 38, 38, 0.05);

/* Premium dark cards */

.dark-card {

background: linear-gradient(145deg, #000000, #1a1a1a, #4b5563);

border: 1px solid #4a4a4a;

backdrop-filter: blur(10px);

}
.dark-card:hover {

border-color: #dc2626;

box-shadow: 0 15px 30px rgba(220, 38, 38, 0.1);

/* Professional button effects with enhanced animations */

.modern-btn {

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

overflow: hidden;

.modern-btn::before {

content: '';

position: absolute;

top: 0;

left: -100%;

width: 100%;

height: 100%;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

transition: left 0.5s;

.modern-btn:hover::before {

left: 100%;

}
.modern-btn:hover {

transform: translateY(-3px) scale(1.05);

box-shadow:

0 10px 25px rgba(0, 0, 0, 0.4),

0 0 20px rgba(220, 38, 38, 0.3);

.modern-btn:active {

transform: translateY(-1px) scale(1.02);

/* Smooth carousel transitions with scale effect */

.carousel-slide {

display: none;

opacity: 0;

transform: scale(0.95);

transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

.[Link] {

display: block;

opacity: 1;

transform: scale(1);

.carousel-slide img {

transition: transform 0.3s ease;

}

.carousel-slide:hover img {

transform: scale(1.05);

/* Enhanced scroll reveal animations */

.reveal {

opacity: 0;

transform: translateY(30px) scale(0.95);

transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

.[Link] {

opacity: 1;

transform: translateY(0) scale(1);

.reveal:nth-child(even) {

transform: translateY(30px) translateX(-20px) scale(0.95);

.reveal:nth-child(even).active {

transform: translateY(0) translateX(0) scale(1);

.reveal:nth-child(odd) {
transform: translateY(30px) translateX(20px) scale(0.95);

.reveal:nth-child(odd).active {

transform: translateY(0) translateX(0) scale(1);

/* Premium form styling */

.modern-input {

transition: all 0.3s ease;

.modern-input:focus {

border-color: #dc2626;

box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);

/* Professional logo effects with rotation */

.logo-hover {

transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

position: relative;

.logo-hover:hover {

transform: scale(1.1) rotate(5deg);

box-shadow:

0 10px 25px rgba(220, 38, 38, 0.4),

0 0 30px rgba(220, 38, 38, 0.2);

.logo-hover::before {

content: '';

position: absolute;

top: -2px;

left: -2px;

right: -2px;

bottom: -2px;

background: linear-gradient(45deg, #dc2626, #ef4444, #dc2626);

border-radius: inherit;

z-index: -1;

opacity: 0;

transition: opacity 0.3s ease;

.logo-hover:hover::before {

opacity: 1;

/* Mesmerizing title effect with animation */

.mesmerizing-title {

background: linear-gradient(-45deg, #dc2626, #ef4444, #f87171, #fca5a5, #dc2626, #b91c1c,

#991b1b);

background-size: 400% 400%;

-webkit-background-clip: text;

background-clip: text;
-webkit-text-fill-color: transparent;

animation: titleShimmer 4s ease-in-out infinite;

position: relative;

@keyframes titleShimmer {

0%, 100% { background-position: 0% 50%; }

50% { background-position: 100% 50%; }

.mesmerizing-title::after {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);

animation: titleSweep 3s ease-in-out infinite;

pointer-events: none;

@keyframes titleSweep {

0% { transform: translateX(-100%); }

50% { transform: translateX(100%); }

100% { transform: translateX(100%); }

}
/* Testimonial carousel */

.testimonial-slide {

display: none;

opacity: 0;

transition: opacity 0.5s ease;

.[Link] {

display: block;

opacity: 1;

/* Floating particles animation */

.floating-particles {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

pointer-events: none;

.particle {

position: absolute;

background: rgba(220, 38, 38, 0.1);

border-radius: 50%;

animation: float 6s ease-in-out infinite;

}

.particle:nth-child(1) { width: 4px; height: 4px; left: 10%; animation-delay: 0s; }

.particle:nth-child(2) { width: 6px; height: 6px; left: 20%; animation-delay: 1s; }

.particle:nth-child(3) { width: 3px; height: 3px; left: 30%; animation-delay: 2s; }

.particle:nth-child(4) { width: 5px; height: 5px; left: 40%; animation-delay: 3s; }

.particle:nth-child(5) { width: 4px; height: 4px; left: 50%; animation-delay: 4s; }

.particle:nth-child(6) { width: 6px; height: 6px; left: 60%; animation-delay: 5s; }

.particle:nth-child(7) { width: 3px; height: 3px; left: 70%; animation-delay: 0.5s; }

.particle:nth-child(8) { width: 5px; height: 5px; left: 80%; animation-delay: 1.5s; }

.particle:nth-child(9) { width: 4px; height: 4px; left: 90%; animation-delay: 2.5s; }

@keyframes float {

0%, 100% {

transform: translateY(100vh) rotate(0deg);

opacity: 0;

10% {

opacity: 1;

90% {

opacity: 1;

50% {

transform: translateY(50vh) rotate(180deg);

opacity: 0.8;

}
}

/* Pulse animation for icons */

.pulse-icon {

animation: iconPulse 2s ease-in-out infinite;

@keyframes iconPulse {

0%, 100% { transform: scale(1); }

50% { transform: scale(1.1); }

/* Mobile optimizations */

@media (max-width: 768px) {

.card-hover:hover {

transform: translateY(-4px) scale(1.01);

.modern-btn:hover {

transform: translateY(-2px) scale(1.02);

.reveal {

transform: translateY(15px) scale(0.98);

.reveal:nth-child(even), .reveal:nth-child(odd) {
transform: translateY(15px) scale(0.98);

.logo-hover:hover {

transform: scale(1.05) rotate(2deg);

.particle {

display: none;

</style>

</head>

<body class="font-sans bg-black text-white overflow-x-hidden">

<nav class="bg-gradient-to-r from-black via-gray-700 to-gray-800 border-b border-red-600

shadow-2xl fixed w-full top-0 z-50">

<div class="max-w-6xl mx-auto px-4">

<div class="flex justify-between items-center py-3">

<div class="flex items-center space-x-4 reveal">

<div class="w-24 h-12 bg-gradient-to-br from-red-600 to-red-800 rounded-lg flex items-

center justify-center logo-hover shadow-lg relative overflow-hidden">

<img id="logo1-img" class="w-full h-full object-cover rounded-lg hidden" alt="RTR

Logo" onerror="[Link]='none'; [Link]('logo1-
text').[Link]='block';">

<span id="logo1-text" class="text-white font-bold text-lg">RTR</span>

</div>
<div>

<h1 class="text-2xl font-bold text-white editable hover:text-red-400">RTR x

RETERS</h1>

<p class="text-sm text-gray-400 editable mb-1">Andhere Se Ujaale Tak</p>

<div class="flex items-center space-x-3 text-xs text-gray-500">

<span class="bg-red-600/20 px-2 py-1 rounded-full border border-red-600/30

editable">MSME</span>

<span class="bg-orange-600/20 px-2 py-1 rounded-full border border-orange-600/30

editable">Make in India</span>

</div>

<div class="hidden lg:flex space-x-8">

<a href="#home" class="nav-link text-gray-300 font-medium text-lg">Home</a>

<a href="#products" class="nav-link text-gray-300 font-medium text-lg">Products</a>

<a href="#about" class="nav-link text-gray-300 font-medium text-lg">About</a>

<a href="#catalog" class="nav-link text-gray-300 font-medium text-lg">Catalog</a>

<a href="#contact" class="nav-link text-gray-300 font-medium text-lg">Contact</a>

</div>

<div class="flex items-center space-x-4 reveal">

<div class="w-24 h-12 bg-gradient-to-br from-red-800 to-red-900 rounded-lg flex items-

center justify-center logo-hover shadow-lg relative overflow-hidden">

<img id="logo2-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Secondary Logo" onerror="[Link]='none'; [Link]('logo2-
text').[Link]='block';">

<span id="logo2-text" class="text-white font-bold text-lg">LOGO</span>

</div>

<button class="lg:hidden text-white ml-4" onclick="toggleMenu()">

<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">

<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4

6h16M4 12h16M4 18h16"></path>

</svg>

</button>

</div>

<div id="mobile-menu" class="hidden lg:hidden pb-4">

<div class="flex flex-col space-y-3">

<a href="#home" class="nav-link text-gray-300 font-medium">Home</a>

<a href="#products" class="nav-link text-gray-300 font-medium">Products</a>

<a href="#about" class="nav-link text-gray-300 font-medium">About</a>

<a href="#catalog" class="nav-link text-gray-300 font-medium">Catalog</a>

<a href="#contact" class="nav-link text-gray-300 font-medium">Contact</a>

</div>

</nav>

<section id="home" class="animated-gradient min-h-screen flex items-center pt-20 pb-10 relative

overflow-hidden">

</div>

<div class="text-white reveal">

<h1 class="text-4xl md:text-5xl font-bold mb-6 editable mesmerizing-title">Design Beyond

Your Walls</h1>

<p class="text-xl mb-8 editable">RTR x RETERS - A rapidly growing brand in electrical

switches and accessories. Exceptional quality at competitive prices with 50+ years of combined
partner experience. BIS 1293:2019 and BIS 3854:2023 certified for switches and sockets, ISO
9001:2015 certified.</p>

<div class="space-x-4 flex flex-wrap gap-4">

<button onclick="handleViewCatalog()" class="modern-btn bg-gradient-to-r from-red-600

to-red-700 text-white px-6 py-3 rounded-lg font-semibold super-glow">

View Catalog

</button>

<button onclick="handleGetQuote()" class="modern-btn border-2 border-red-600 text-

red-400 px-6 py-3 rounded-lg font-semibold hover:bg-red-600 hover:text-white red-glow">

Get Quote

</button>

</div>
</div>

<div class="dark-card rounded-xl shadow-2xl p-6 reveal">

<h3 class="text-lg font-semibold mb-3 text-white editable">Product Showcase</h3>

<div class="flex justify-center space-x-4 mb-4">

<button onclick="prevCarouselPhoto()" class="modern-btn bg-red-600 text-white px-4

py-2 rounded-lg hover:bg-red-700 red-glow">‹ Previous</button>

<button onclick="nextCarouselPhoto()" class="modern-btn bg-red-600 text-white px-4

py-2 rounded-lg hover:bg-red-700 red-glow">Next ›</button>

</div>

<div class="h-64 bg-gray-900/50 backdrop-blur-sm rounded-lg border border-gray-700/50

overflow-hidden relative">

<div id="hero-carousel-container" class="w-full h-full">

<div class="carousel-slide active text-center text-gray-400 flex items-center justify-

center h-full">

<div>

<div class="text-5xl mb-3">🔌</div>

<p>RTR Product Showcase</p>

</div>

</div>
</div>

</section>

<section id="products" class="py-24 multi-gradient section-enter">

<div class="max-w-7xl mx-auto px-4">

<div class="text-center mb-20 reveal">

<h2 class="text-4xl font-bold text-white mb-4 editable mesmerizing-title">RTR Product

Range</h2>

<p class="text-xl text-gray-400 editable">Modular switches and allied accessories crafted

for maximum functionality and aesthetics</p>

</div>

<div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10">

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product1-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product1-
icon').[Link]='block';">

<span id="product1-icon" class="text-4xl pointer-events-none pulse-icon">🔌</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Modular

Switches</h3>

<p class="text-gray-400 text-center mb-4 editable">Premium modular switches with

modern designs and functionality</p>

<div class="text-center mb-4">

<p class="text-sm text-red-400 font-semibold mb-2 editable">Available Colors:</p>

<div class="flex justify-center space-x-2 mb-3">

<span class="px-2 py-1 bg-white text-black text-xs rounded editable">White</span>

<span class="px-2 py-1 bg-black text-white text-xs rounded border border-gray-600

editable">Black</span>

<span class="px-2 py-1 bg-gray-500 text-white text-xs rounded

editable">Grey</span>

</div>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Rocker Series</li>

<li class="editable">• Cherry Series</li>

<li class="editable">• Trick Series</li>

<li class="editable">• Wega Series</li>

<li class="editable">• Wega Curve Series</li>

<li class="editable">• Available in 1 Module and 2 Module configurations</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product2-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product2-
icon').[Link]='block';">

<span id="product2-icon" class="text-4xl pointer-events-none pulse-icon">🔗</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Sockets &

Outlets</h3>
<p class="text-gray-400 text-center mb-4 editable">Durable sockets for power and
connectivity needs</p>

<div class="text-center mb-4">

<p class="text-sm text-red-400 font-semibold mb-2 editable">Available Colors:</p>

<div class="flex justify-center space-x-2 mb-3">

<span class="px-2 py-1 bg-white text-black text-xs rounded editable">White</span>

<span class="px-2 py-1 bg-black text-white text-xs rounded border border-gray-600

editable">Black</span>

<span class="px-2 py-1 bg-gray-500 text-white text-xs rounded

editable">Grey</span>

</div>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• 3 Pin Sockets</li>

<li class="editable">• 16A/25A Sockets</li>

<li class="editable">• USB sockets</li>

<li class="editable">• Data sockets</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product3-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product3-
icon').[Link]='block';">

<span id="product3-icon" class="text-4xl pointer-events-none pulse-icon">⚡</span>

</div>

</div>
<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Non Modular
Switches</h3>

<p class="text-gray-400 text-center mb-4 editable">Traditional switches for standard

installations</p>

<div class="text-center mb-4">

<p class="text-sm text-red-400 font-semibold mb-2 editable">Available Color:</p>

<div class="flex justify-center space-x-2 mb-3">

<span class="px-2 py-1 bg-white text-black text-xs rounded editable">White</span>

</div>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• ASTOR Series</li>

<li class="editable">• PIANO Series</li>

<li class="editable">• SILKY Series</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product4-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product4-
icon').[Link]='block';">

<span id="product4-icon" class="text-4xl pointer-events-none pulse-icon">📦</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Mounting

Boxes</h3>
<p class="text-gray-400 text-center mb-4 editable">Durable mounting solutions for all
installations</p>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Metal boxes</li>

<li class="editable">• Gang boxes</li>

<li class="editable">• LILA surface boxes</li>

<li class="editable">• Available in 1M to 18M sizes</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product5-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product5-
icon').[Link]='block';">

<span id="product5-icon" class="text-4xl pointer-events-none pulse-icon">🔧</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Accessories</h3>

<p class="text-gray-400 text-center mb-4 editable">Essential accessories for complete

installations</p>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Spike Guards</li>

<li class="editable">• Extension Boxes</li>

<li class="editable">• LED Footlights</li>

<li class="editable">• Regulators</li>

<li class="editable">• MCB (Miniature Circuit Breaker)</li>

<li class="editable">• Motor Starter</li>

<li class="editable">• Keytag</li>

<li class="editable">• Indicators</li>

<li class="editable">• TV Socket</li>

<li class="editable">• Tele Jack</li>

<li class="editable">• Blank Plate</li>

<li class="editable">• Kitkat Switch</li>

<li class="editable">• Turtal/Niva Tops</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product6-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product6-
icon').[Link]='block';">

<span id="product6-icon" class="text-4xl pointer-events-none pulse-icon">📱</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Modular

Plates</h3>

<p class="text-gray-400 text-center mb-4 editable">Elegant plates in various

configurations and colors</p>

<div class="text-center mb-4">

<p class="text-sm text-red-400 font-semibold mb-2 editable">Multicolor Options

Available</p>

<div class="flex justify-center space-x-1 mb-3 flex-wrap gap-1">

<span class="px-2 py-1 bg-white text-black text-xs rounded editable">White</span>

<span class="px-2 py-1 bg-gradient-to-r from-red-500 via-blue-500 to-green-500
text-white text-xs rounded editable">Multicolor</span>

<span class="px-2 py-1 bg-gray-700 text-white text-xs rounded

editable">Cubic</span>

</div>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Available in 1M to 18M sizes</li>

<li class="editable">• Waiviya Series</li>

<li class="editable">• Retto Series</li>

<li class="editable">• Glaze Series</li>

<li class="editable">• Unicon Series</li>

<li class="editable">• Eota Series</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product7-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product7-
icon').[Link]='block';">

<span id="product7-icon" class="text-4xl pointer-events-none pulse-icon">🔲</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Non Modular

Plates</h3>

<p class="text-gray-400 text-center mb-4 editable">Traditional plates for standard

installations</p>
<div class="text-center mb-4">

<p class="text-sm text-red-400 font-semibold mb-2 editable">Available Colors:</p>

<div class="flex justify-center space-x-1 mb-3 flex-wrap gap-1">

<span class="px-2 py-1 bg-white text-black text-xs rounded editable">White</span>

<span class="px-2 py-1 bg-gradient-to-r from-red-500 via-blue-500 to-green-500

text-white text-xs rounded editable">Multicolor</span>

<span class="px-2 py-1 bg-gray-700 text-white text-xs rounded

editable">Cubic</span>

<span class="px-2 py-1 bg-gradient-to-r from-yellow-400 to-yellow-600 text-black

text-xs rounded editable">Glossy</span>

</div>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Available in 1M to 18M sizes</li>

<li class="editable">• Waiviya Woda Series</li>

<li class="editable">• Rera Wood Series</li>

</ul>

</div>

<div class="card-hover p-6 rounded-xl shadow-2xl reveal">

<div class="mb-4 text-center">

<div class="w-20 h-20 mx-auto bg-gray-800/50 backdrop-blur-sm rounded-lg flex

items-center justify-center overflow-hidden">

<img id="product8-img" class="w-full h-full object-cover rounded-lg hidden"

alt="Product Image" onerror="[Link]='none'; [Link]('product8-
icon').[Link]='block';">

<span id="product8-icon" class="text-4xl pointer-events-none">🔌</span>

</div>

<h3 class="text-xl font-semibold mb-3 text-center text-white editable">Holders</h3>

<p class="text-gray-400 text-center mb-4 editable">Complete range of electrical holders
and adapters</p>

<ul class="text-sm text-gray-500 space-y-1">

<li class="editable">• Sada Holder</li>

<li class="editable">• Fancy Holder</li>

<li class="editable">• Oppo Holder</li>

<li class="editable">• Ceiling Rose</li>

<li class="editable">• Pendant Holder</li>

<li class="editable">• Multi-Pendant Holder</li>

<li class="editable">• Adapter</li>

</ul>

</div>

</section>

<section id="about" class="py-24 animated-gradient section-enter">

<div class="max-w-7xl mx-auto px-4">

<div class="text-center mb-20 reveal">

<h2 class="text-4xl font-bold text-white mb-4 editable mesmerizing-title">About RTR x

RETERS - Reaching New Horizons</h2>

<p class="text-xl text-gray-400 editable">A Legacy of Expertise | Make in India | Sustainable

Innovation</p>

</div>

<div class="grid lg:grid-cols-2 gap-16 mb-20">

<div class="reveal">
<h3 class="text-2xl font-semibold mb-6 text-white editable">A Legacy of Excellence</h3>

<p class="text-gray-400 mb-4 editable">

RTR x RETERS is a rapidly growing brand in electrical switches and accessories. Our
partners team boasts 50+ years of combined experience in the electrical industry, translating to
deep understanding of your needs.

</p>

<p class="text-gray-400 mb-6 editable">

We prioritize exceptional quality at competitive prices with BIS 1293:2019 certification

for sockets and BIS 3854:2023 certification for switches, ISO 9001:2015 certified. RTR exports to
SAARC countries, embodying 'Make in India' with sustainable practices.

</p>

<div class="grid grid-cols-2 gap-4 mb-6">

<div class="text-center p-4 dark-card rounded-lg shadow-xl">

<div class="text-2xl font-bold text-red-500 editable">50+</div>

<div class="text-sm text-gray-400 editable">Years Combined Experience</div>

</div>

<div class="text-center p-4 dark-card rounded-lg shadow-xl">

<div class="text-2xl font-bold text-red-500 editable">Global</div>

<div class="text-sm text-gray-400 editable">Export Reach</div>

</div>

<div class="dark-card rounded-lg p-6 flex-grow">

<h4 class="text-lg font-semibold mb-6 text-white text-center editable">Our

Certifications</h4>

<div class="relative overflow-hidden">

<div id="cert-carousel" class="flex transition-transform duration-500 ease-in-out">

<div class="cert-slide flex-shrink-0 w-full">

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-blue-600 to-blue-800

rounded-xl flex items-center justify-center cursor-pointer hover:bg-blue-600 border-2 border-blue-
500 mb-3 shadow-lg">

<div class="text-white text-sm font-bold text-center leading-

tight">ISI<br/>BIS</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">BIS 1293:2019

(Sockets)<br/>BIS 3854:2023 (Switches)</p>

</div>

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-green-600 to-green-

800 rounded-xl flex items-center justify-center cursor-pointer hover:bg-green-600 border-2 border-
green-500 mb-3 shadow-lg">

<div class="text-white text-sm font-bold text-center leading-

tight">ISO<br/>9001</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">ISO

9001:2015<br/>Quality Management</p>

</div>

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-purple-600 to-

purple-800 rounded-xl flex items-center justify-center cursor-pointer hover:bg-purple-600 border-2
border-purple-500 mb-3 shadow-lg">

<div class="text-white text-sm font-bold text-center leading-

tight">CE<br/>★★★</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">CE

Marking<br/>European Conformity</p>

</div>

</div>
</div>

<div class="cert-slide flex-shrink-0 w-full">

<div class="grid grid-cols-3 gap-6 px-2">

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-orange-600 to-

orange-800 rounded-xl flex items-center justify-center cursor-pointer hover:bg-orange-600 border-2
border-orange-500 mb-3 shadow-lg">

<div class="text-white text-sm font-bold text-center leading-

tight">MSME<br/>🏢</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">MSME

Certified<br/>Small Enterprise</p>

</div>

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-orange-600 via-white

to-green-600 rounded-xl flex items-center justify-center cursor-pointer border-2 border-orange-500
mb-3 shadow-lg">

<div class="text-black text-sm font-bold text-center leading-

tight">MAKE<br/>INDIA</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">Make in

India<br/>Swadeshi Manufacturing</p>

</div>

<div class="w-20 h-20 mx-auto bg-gradient-to-br from-teal-600 to-teal-800

rounded-xl flex items-center justify-center cursor-pointer hover:bg-teal-600 border-2 border-teal-
500 mb-3 shadow-lg">

<div class="text-white text-sm font-bold text-center leading-

tight">EXPORT<br/>🌍</div>

</div>

<p class="text-xs text-gray-400 editable leading-relaxed">SAARC

Export<br/>International Quality</p>
</div>

</div>

<div class="flex justify-center mt-6 space-x-3">

<button onclick="prevCertSlide()" class="w-10 h-10 bg-red-600 text-white

rounded-full text-lg hover:bg-red-700 red-glow flex items-center justify-center">‹</button>

<button onclick="nextCertSlide()" class="w-10 h-10 bg-red-600 text-white

rounded-full text-lg hover:bg-red-700 red-glow flex items-center justify-center">›</button>

</div>

<h3 class="text-2xl font-semibold mb-6 text-white editable">R&D Infrastructure &

Lab</h3>

<p class="text-gray-400 mb-4 editable">

Our state-of-the-art research and development facility is equipped with advanced

testing equipment and modern laboratories. We continuously innovate to meet evolving market
demands and maintain the highest quality standards.

</p>

<p class="text-gray-400 mb-6 editable">

Our in-house testing lab ensures switches and sockets meet BIS 1293:2019 (sockets) &
BIS 3854:2023 (switches) standards before reaching customers. From material analysis to
performance testing, we maintain rigorous quality control throughout the manufacturing process.

</p>

<div class="grid grid-cols-2 gap-4 mb-6">

<div class="text-2xl font-bold text-red-500 editable">Advanced</div>

<div class="text-sm text-gray-400 editable">Testing Equipment</div>

</div>

<div class="text-center p-4 dark-card rounded-lg shadow-xl">

<div class="text-2xl font-bold text-red-500 editable">24/7</div>

<div class="text-sm text-gray-400 editable">Quality Monitoring</div>

</div>

<div class="dark-card rounded-lg p-4 mb-6">

<h4 class="text-lg font-semibold mb-4 text-white text-center editable">Lab Testing

Capabilities</h4>

<div class="space-y-3 text-sm">

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">⚡</span>

<span class="editable">High voltage dielectric strength testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">💧</span>

<span class="editable">Humidity resistance testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">🔄</span>

<span class="editable">Endurance and durability testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="editable">Impact and drop testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">🔌</span>

<span class="editable">Insulation resistance testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">🌡️</span>

<span class="editable">Temperature cycling testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">🔥</span>

<span class="editable">Fire safety and glow wire testing</span>

</div>

<div class="flex items-center text-gray-300">

<span class="text-red-500 mr-3">📏</span>

<span class="editable">Dimensional accuracy verification</span>

</div>

</section>

<div class="max-w-7xl mx-auto px-4 relative z-10">

<div class="text-center mb-20 reveal">

<h2 class="text-4xl font-bold text-white mb-4 editable mesmerizing-title">What Our Clients

Say</h2>

<p class="text-xl text-gray-400 editable">Trusted by leading companies across India and

SAARC countries</p>

</div>

<div id="testimonial-carousel" class="overflow-hidden rounded-2xl">

<div class="testimonial-track flex">

<div class="testimonial-slide active flex-shrink-0 w-full">

<div class="grid lg:grid-cols-3 gap-10">

<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-700 rounded-full

flex items-center justify-center cursor-pointer mr-4">

<span class="text-white font-bold text-xl">AK</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Amit Kumar</h4>

<p class="text-red-400 text-sm editable">Electrical Contractor, Mumbai</p>

</div>

<div class="flex mb-4">

</div>

<p class="text-gray-300 italic editable">"RTR switches have been our go-to

choice for premium projects. The quality is exceptional and BIS certification gives us complete
confidence. Our clients love the modern designs!"</p>

</div>

<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700 rounded-

full flex items-center justify-center cursor-pointer mr-4">

<span class="text-white font-bold text-xl">PS</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Priya Sharma</h4>

<p class="text-red-400 text-sm editable">Interior Designer, Delhi</p>

</div>

<div class="flex mb-4">

<span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>

</div>

<p class="text-gray-300 italic editable">"The aesthetic appeal of RTR products

perfectly complements our luxury interior projects. The variety of finishes and reliable performance
make them our preferred choice."</p>

</div>

<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-700

rounded-full flex items-center justify-center cursor-pointer mr-4">
<span class="text-white font-bold text-xl">RG</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Rajesh Gupta</h4>

<p class="text-red-400 text-sm editable">Builder, Pune</p>

</div>

<div class="flex mb-4">

<span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>

</div>

<p class="text-gray-300 italic editable">"We've used RTR products in over 200

apartments. Zero complaints from residents. The durability and competitive pricing make it perfect
for our projects."</p>

</div>

<div class="testimonial-slide flex-shrink-0 w-full">

<div class="grid lg:grid-cols-3 gap-10">

<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-700

rounded-full flex items-center justify-center cursor-pointer mr-4">

<span class="text-white font-bold text-xl">SK</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Suresh Kumar</h4>

<p class="text-red-400 text-sm editable">Electrical Engineer, Bangalore</p>

</div>

<div class="flex mb-4">

<span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>

</div>

<p class="text-gray-300 italic editable">"The technical specifications and BIS

compliance of RTR products give me confidence in recommending them for industrial applications.
Excellent build quality!"</p>

</div>

<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-700

rounded-full flex items-center justify-center cursor-pointer mr-4">

<span class="text-white font-bold text-xl">MJ</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Meera Joshi</h4>

<p class="text-red-400 text-sm editable">Architect, Chennai</p>

</div>

<div class="flex mb-4">

<span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>

</div>

<p class="text-gray-300 italic editable">"RTR's modular switch range offers the

flexibility we need for modern architectural designs. The sleek profiles and multiple configurations
are perfect."</p>

</div>
<div class="dark-card p-8 rounded-xl shadow-2xl">

<div class="flex items-center mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-teal-500 to-teal-700 rounded-

full flex items-center justify-center cursor-pointer mr-4">

<span class="text-white font-bold text-xl">VT</span>

</div>

<div>

<h4 class="text-lg font-semibold text-white editable">Vikram Thakur</h4>

<p class="text-red-400 text-sm editable">Distributor, Kolkata</p>

</div>

<div class="flex mb-4">

<span class="text-yellow-400 text-xl">⭐⭐⭐⭐⭐</span>

</div>

<p class="text-gray-300 italic editable">"As a distributor, I appreciate RTR's

consistent quality and timely delivery. Customer satisfaction is high, and repeat orders keep
coming."</p>

</div>

<div class="flex justify-center mt-8 space-x-4">

<button onclick="prevTestimonial()" class="modern-btn bg-red-600 text-white px-4 py-2

rounded-full hover:bg-red-700 red-glow">‹ Previous</button>

<button onclick="nextTestimonial()" class="modern-btn bg-red-600 text-white px-4 py-2

rounded-full hover:bg-red-700 red-glow">Next ›</button>
</div>

<div class="flex justify-center mt-4 space-x-2">

<div class="w-3 h-3 bg-red-600 rounded-full cursor-pointer"

onclick="goToTestimonial(0)"></div>

<div class="w-3 h-3 bg-gray-600 rounded-full cursor-pointer"

onclick="goToTestimonial(1)"></div>

</div>

</section>

<section id="catalog" class="py-24 bg-gradient-to-br from-gray-900 via-black to-red-900 section-

enter">

<div class="max-w-5xl mx-auto px-4">

<div class="text-center mb-20 reveal">

<h2 class="text-4xl font-bold text-white mb-4 editable mesmerizing-title">Product

Catalog</h2>

<p class="text-xl text-gray-400 editable">View our complete product catalog with all RTR
products and specifications</p>

</div>

<div class="max-w-2xl mx-auto">

<div class="card-hover p-8 rounded-xl shadow-2xl reveal text-center">

<div class="w-24 h-24 mx-auto bg-gradient-to-br from-red-600 to-red-800 rounded-xl flex

items-center justify-center mb-6">

<span class="text-white text-4xl">📋</span>

</div>

<h3 class="text-2xl font-semibold mb-4 text-white editable">RTR Complete Product

Catalog</h3>

<p class="text-gray-400 mb-8 editable">Comprehensive catalog featuring all RTR

electrical switches, sockets, and accessories with detailed specifications, pricing, and product
images</p>

<div id="catalog-display" class="hidden">

<div class="bg-gray-800/50 backdrop-blur-sm rounded-lg p-6 mb-6 border border-gray-

600">

<div class="flex items-center justify-between mb-4">

<div class="flex items-center">

<span class="text-red-500 text-2xl mr-3">📄</span>

<p id="catalog-name" class="text-white font-semibold">RTR Product

Catalog</p>

<p class="text-gray-400 text-sm">Complete product specifications and

pricing</p>

</div>

<button id="view-catalog-btn" class="modern-btn bg-gradient-to-r from-red-600

to-red-700 text-white px-8 py-3 rounded-lg font-semibold super-glow mr-4 mb-2"
onclick="viewCatalog()">

👁️View Catalog

</button>

<button id="download-catalog-btn" class="modern-btn border-2 border-red-600

text-red-400 px-8 py-3 rounded-lg font-semibold hover:bg-red-600 hover:text-white red-glow mb-2"
onclick="downloadCatalog()">
📥 Open Link

</button>

</div>

<div id="default-download" class="text-center">

<button class="modern-btn bg-gradient-to-r from-red-600 to-red-700 text-white px-8

py-4 rounded-lg font-semibold super-glow text-lg mb-4" disabled>

📥 Catalog Not Available

</button>

<p class="text-gray-500 text-sm editable">Contact us for the latest product catalog</p>

</div>

<div class="mt-16 text-center reveal">

<div class="dark-card p-6 rounded-xl shadow-2xl max-w-xl mx-auto">

<h4 class="text-lg font-semibold mb-3 text-white editable">Need More

Information?</h4>

<p class="text-gray-400 mb-4 editable">Contact us for detailed product specifications,

pricing, or custom requirements</p>

<div class="flex flex-col sm:flex-row gap-3 justify-center">

<button class="modern-btn bg-gradient-to-r from-red-600 to-red-700 text-white px-4

py-2 rounded-lg font-semibold text-sm">

📞 +91 99601 96910

</button>
<button class="modern-btn border border-red-600 text-red-400 px-4 py-2 rounded-lg
font-semibold hover:bg-red-600 hover:text-white text-sm">

✉️rtrswitches@[Link]

</button>

</div>

</section>

<section id="contact" class="py-24 animated-gradient">

<div class="max-w-6xl mx-auto px-4">

<div class="text-center mb-20 reveal">

<h2 class="text-4xl font-bold text-white mb-4 editable mesmerizing-title">Get In

Touch</h2>

<p class="text-xl text-gray-400 editable">Ready to illuminate your projects with RTR

quality?</p>

</div>

<div class="grid md:grid-cols-2 gap-12">

<h3 class="text-2xl font-semibold mb-6 text-white editable">Contact Information</h3>

<div class="flex items-start">

<span class="text-red-500 mr-4 text-xl">🏢</span>

<div>

<p class="text-white font-semibold editable">Corporate Address</p>

<p class="text-gray-400 editable">Trade World, D Wing, 4th Floor,<br/>Kamla
Mills Compound, Lower Parel,<br/>Mumbai 400013</p>

<a href="[Link] target="_blank"

rel="noopener noreferrer" class="text-red-400 hover:text-red-300 text-sm mt-1 inline-block">📍
View on Google Maps</a>

</div>

<div class="flex items-start">

<span class="text-red-500 mr-4 text-xl">🏢</span>

<div>

<p class="text-white font-semibold editable">Registered Address</p>

<p class="text-gray-400 editable">101-103 RAJAT INDUSTRIAL

ESTATE,<br/>DHUMAL NAGAR VASAI EAST 401208</p>

<a href="[Link] target="_blank"

rel="noopener noreferrer" class="text-red-400 hover:text-red-300 text-sm mt-1 inline-block">📍
View on Google Maps</a>

</div>

<div class="flex items-start">

<span class="text-red-500 mr-4 text-xl">🏭</span>

<div>

<p class="text-white font-semibold editable">Works Address</p>

<p class="text-gray-400 editable">303, TAKDER INDUSTRIAL ESTATE,<br/>OPP

AGARWAL HOSPITAL, GOLANI NAKA,<br/>VASAI E 401208</p>

<a href="[Link] target="_blank"

rel="noopener noreferrer" class="text-red-400 hover:text-red-300 text-sm mt-1 inline-block">📍
View on Google Maps</a>

</div>

<div class="flex items-center">

<span class="text-red-500 mr-4 text-xl">📞</span>

<div>

<p class="text-white font-semibold editable">Phone</p>

<p class="text-gray-400 editable">+91 99601 96910</p>

</div>

<div class="flex items-center">

<span class="text-red-500 mr-4 text-xl">✉️</span>

<div>

<p class="text-white font-semibold editable">Email</p>

<p class="text-gray-400 editable">rtrswitches@[Link]</p>

</div>

<div class="pt-4 border-t border-gray-700">

<p class="text-white font-semibold mb-3 editable">Follow Us</p>

<div class="flex space-x-4">

<a href="[Link] target="_blank" rel="noopener noreferrer"

class="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg flex items-center justify-
center hover:scale-110">

<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">

<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574

2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515
2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523
6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-
[Link] 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768
2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>

</svg>

</a>
<a href="[Link] target="_blank" rel="noopener
noreferrer" class="w-10 h-10 bg-gradient-to-br from-blue-700 to-blue-900 rounded-lg flex items-
center justify-center hover:scale-110">

<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">

<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388

10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0
2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-
2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>

</svg>

</a>

<a href="[Link] target="_blank" rel="noopener

noreferrer" class="w-10 h-10 bg-gradient-to-br from-pink-600 to-purple-700 rounded-lg flex items-
center justify-center hover:scale-110">

<svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">

<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919

4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919
4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-
4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919
1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98
6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98
1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-
1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-
1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162
6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-
2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645
1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>

</svg>

</a>

</div>

<div class="dark-card p-8 rounded-xl shadow-2xl reveal">

<h3 class="text-2xl font-semibold mb-6 text-white editable">Send Message</h3>

<form class="space-y-4" onsubmit="handleFormSubmit(event)">

<input type="text" name="name" placeholder="Your Name" required class="modern-

input w-full p-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-red-500
focus:outline-none">

<input type="email" name="email" placeholder="Your Email" required class="modern-

input w-full p-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-red-500
focus:outline-none">

<input type="tel" name="phone" placeholder="Your Phone Number" required

class="modern-input w-full p-3 bg-gray-800 border border-gray-600 rounded-lg text-white
focus:border-red-500 focus:outline-none">

<input type="text" name="subject" placeholder="Subject" required class="modern-

input w-full p-3 bg-gray-800 border border-gray-600 rounded-lg text-white focus:border-red-500
focus:outline-none">

<textarea name="message" placeholder="Your Message" rows="4" required

class="modern-input w-full p-3 bg-gray-800 border border-gray-600 rounded-lg text-white
focus:border-red-500 focus:outline-none"></textarea>

<button type="submit" class="modern-btn w-full bg-gradient-to-r from-red-600 to-red-

700 text-white py-3 rounded-lg font-semibold super-glow">

Send Message

</button>

</form>

</div>

</section>

<footer class="bg-black border-t border-red-600 py-12">

<div class="max-w-6xl mx-auto px-4 text-center">

</footer>

// GLOBAL VARIABLES

let carouselPhotos = [];

let currentCarouselIndex = 0;

let catalogUrl = null;

function updateCarouselDisplay() {

const container = [Link]('hero-carousel-container');

[Link] = '';

if ([Link] === 0) {

[Link] = `

<div class="carousel-slide active text-center text-gray-400 flex items-center justify-center

h-full">

<div>

<div class="text-5xl mb-3">🔌</div>

<p>RTR Product Showcase</p>

</div>

return;

[Link]((photo, index) => {

const slide = [Link]('div');

[Link] = `carousel-slide ${index === currentCarouselIndex ? 'active' : ''} h-full`;

[Link] = `<img src="${[Link]}" alt="${[Link]}" class="w-full h-full object-

cover rounded-lg" onerror="[Link]='<div class=\\'text-center text-gray-400
flex items-center justify-center h-full\\'>Image failed to load</div>'">`;

[Link](slide);

});

function nextCarouselPhoto() {

if ([Link] > 0) {

currentCarouselIndex = (currentCarouselIndex + 1) % [Link];

updateCarouselDisplay();

function prevCarouselPhoto() {

if ([Link] > 0) {

currentCarouselIndex = (currentCarouselIndex - 1 + [Link]) %

[Link];

updateCarouselDisplay();

function updateCatalogDisplay() {

const catalogDisplay = [Link]('catalog-display');

const defaultDownload = [Link]('default-download');

if (catalogUrl) {

[Link]('hidden');
[Link]('hidden');

} else {

[Link]('hidden');

function viewCatalog() {

if (!catalogUrl) {

return;

try {

[Link](catalogUrl, '_blank', 'noopener,noreferrer');

} catch (error) {

[Link]('View catalog error:', error);

function downloadCatalog() {

if (!catalogUrl) {

return;

try {

[Link](catalogUrl, '_blank', 'noopener,noreferrer');

} catch (error) {
[Link]('Download catalog error:', error);

// PERSISTENT DATA STORAGE (survives Canva design usage)

const PERSISTENT_DATA = {

// Logo URLs - cleared to show fallback text

logo1_url: null,

logo2_url: null,

// Product URLs - cleared to show fallback icons

product1_url: null,

product2_url: null,

product3_url: null,

product4_url: null,

product5_url: null,

product6_url: null,

product7_url: null,

product8_url: null,

// Carousel photos - cleared to show fallback display

carouselPhotos: [],

// Catalog URL - cleared to show contact message

catalogUrl: null

};
// LOAD SAVED DATA with fallback to persistent data

function loadSavedData() {

try {

// Try to load from localStorage first

const logo1Url = [Link]('logo1_url') || PERSISTENT_DATA.logo1_url;

const logo2Url = [Link]('logo2_url') || PERSISTENT_DATA.logo2_url;

if (logo1Url && logo1Url !== '[Link] updateLogoDisplay('logo1',

logo1Url);

if (logo2Url && logo2Url !== '[Link] updateLogoDisplay('logo2',

logo2Url);

// Load products with fallback

for (let i = 1; i <= 8; i++) {

const productUrl = [Link](`product${i}_url`) ||

PERSISTENT_DATA[`product${i}_url`];

if (productUrl) updateProductDisplay(`product${i}`, productUrl);

// Load carousel with fallback

let savedPhotos = [Link]('carouselPhotos');

if (!savedPhotos && PERSISTENT_DATA.[Link] > 0) {

savedPhotos = [Link](PERSISTENT_DATA.carouselPhotos);

if (savedPhotos) {

try {

carouselPhotos = [Link](savedPhotos);

updateCarouselDisplay();

} catch (error) {
[Link]('Error loading carousel photos:', error);

carouselPhotos = PERSISTENT_DATA.carouselPhotos || [];

updateCarouselDisplay();

// Load catalog with fallback

catalogUrl = [Link]('catalogUrl') || PERSISTENT_DATA.catalogUrl;

if (catalogUrl) {

updateCatalogDisplay();

[Link]('✅ Data loaded successfully with persistent fallbacks');

} catch (error) {

[Link]('Error loading saved data:', error);

// Use persistent data as complete fallback

loadPersistentData();

// Load persistent data when localStorage fails

function loadPersistentData() {

[Link]('📦 Loading persistent data as fallback...');

// Load persistent logos

if (PERSISTENT_DATA.logo1_url && PERSISTENT_DATA.logo1_url !==

'[Link] {

updateLogoDisplay('logo1', PERSISTENT_DATA.logo1_url);
}

if (PERSISTENT_DATA.logo2_url && PERSISTENT_DATA.logo2_url !==

'[Link] {

updateLogoDisplay('logo2', PERSISTENT_DATA.logo2_url);

// Load persistent products

for (let i = 1; i <= 8; i++) {

if (PERSISTENT_DATA[`product${i}_url`]) {

updateProductDisplay(`product${i}`, PERSISTENT_DATA[`product${i}_url`]);

// Load persistent carousel

if (PERSISTENT_DATA.carouselPhotos && PERSISTENT_DATA.[Link] > 0) {

carouselPhotos = [...PERSISTENT_DATA.carouselPhotos];

updateCarouselDisplay();

// Load persistent catalog

if (PERSISTENT_DATA.catalogUrl) {

catalogUrl = PERSISTENT_DATA.catalogUrl;

updateCatalogDisplay();

function updateLogoDisplay(logoId, url) {

const img = [Link](`${logoId}-img`);

const text = [Link](`${logoId}-text`);

[Link] = url;

[Link] = 'block';

[Link] = 'none';

[Link] = function() {

[Link] = 'none';

[Link] = 'block';

};

function updateProductDisplay(productId, url) {

const img = [Link](`${productId}-img`);

const icon = [Link](`${productId}-icon`);

[Link] = url;

[Link] = 'block';

[Link] = 'none';

[Link] = function() {

[Link] = 'none';

[Link] = 'block';

};

// OTHER FUNCTIONS
function revealOnScroll() {

const reveals = [Link]('.reveal');

[Link](reveal => {

const windowHeight = [Link];

const elementTop = [Link]().top;

const elementVisible = 150;

if (elementTop < windowHeight - elementVisible) {

[Link]('active');

});

function toggleMenu() {

const menu = [Link]('mobile-menu');

[Link]('hidden');

// Testimonial carousel

let currentTestimonial = 0;

const testimonialSlides = [Link]('.testimonial-slide');

const totalTestimonials = [Link];

function showTestimonial(index) {

[Link]((slide, i) => {

[Link]('active', i === index);

});
const dots = [Link]('.[Link]-4 > div');

[Link]((dot, i) => {

[Link] = i === index ? 'w-3 h-3 bg-red-600 rounded-full cursor-pointer' : 'w-3 h-3
bg-gray-600 rounded-full cursor-pointer';

});

function nextTestimonial() {

currentTestimonial = (currentTestimonial + 1) % totalTestimonials;

showTestimonial(currentTestimonial);

function prevTestimonial() {

currentTestimonial = (currentTestimonial - 1 + totalTestimonials) % totalTestimonials;

showTestimonial(currentTestimonial);

function goToTestimonial(index) {

currentTestimonial = index;

showTestimonial(currentTestimonial);

// Certification carousel

let currentCertSlide = 0;

const certSlides = [Link]('.cert-slide');

const totalCertSlides = [Link];

function showCertSlide(index) {

const carousel = [Link]('cert-carousel');

[Link] = `translateX(-${index * 100}%)`;

function nextCertSlide() {

currentCertSlide = (currentCertSlide + 1) % totalCertSlides;

showCertSlide(currentCertSlide);

function prevCertSlide() {

currentCertSlide = (currentCertSlide - 1 + totalCertSlides) % totalCertSlides;

showCertSlide(currentCertSlide);

function handleViewCatalog() {

[Link]('#catalog').scrollIntoView({

behavior: 'smooth',

block: 'start'

});

function handleGetQuote() {

[Link]('#contact').scrollIntoView({

behavior: 'smooth',

block: 'start'

});
// Focus on the form after scrolling

setTimeout(() => {

const nameField = [Link]('input[name="name"]');

if (nameField) {

[Link]();

}, 800);

function handleFormSubmit(event) {

[Link]();

const formData = new FormData([Link]);

const name = [Link]('name');

const email = [Link]('email');

const phone = [Link]('phone');

const subject = [Link]('subject');

const message = [Link]('message');

// Create email content

const emailSubject = `RTR Inquiry: ${subject}`;

const emailBody = `Name: ${name}%0D%0AEmail: ${email}%0D%0APhone: ${phone}%0D%0A

%0D%0AMessage:%0D%0A${message}%0D%0A%0D%0ASent from RTR Website`;

// Create mailto link

const mailtoLink = `[Link]

{encodeURIComponent(emailSubject)}&body=${emailBody}`;
try {

// Open email client

[Link] = mailtoLink;

alert('Opening your email client to send the message...');

// Reset form after a short delay

setTimeout(() => {

[Link]();

}, 1000);

} catch (error) {

// Fallback: copy email to clipboard

[Link]('rtrswitches@[Link]').then(() => {

alert('Email address copied to clipboard: rtrswitches@[Link]');

}).catch(() => {

alert('Please send your message to: rtrswitches@[Link]');

});

// INITIALIZATION

[Link]('DOMContentLoaded', function() {

loadSavedData();

// Smooth scrolling

[Link]('a[href^="#"]').forEach(anchor => {

[Link]('click', function (e) {

[Link]();

const target = [Link]([Link]('href'));

if (target) {

[Link]({

behavior: 'smooth',

block: 'start'

});

// Event listeners

[Link]('scroll', revealOnScroll);

setInterval(nextTestimonial, 5000);

setInterval(nextCertSlide, 4000);

// Initial reveal check

revealOnScroll();

</script>

<script>(function(){function c(){var b=[Link]||[Link];if(b){var

d=[Link]('script');[Link]="window.__CF$cv$params={r:'98b584d164154708',t:'MTc
1OTkyNTI1Ni4wMDAwMDA='};var
a=[Link]('script');[Link]='';[Link]='/cdn-cgi/challenge-platform/scripts/jsd/
[Link]';[Link]('head')
[0].appendChild(a);";[Link]('head')[0].appendChild(d)}}if([Link]){var
a=[Link]('iframe');[Link]=1;[Link]=1;[Link]='absolute';[Link]=0;
[Link]=0;[Link]='none';[Link]='hidden';[Link](a);if('loadi
ng'!==[Link])c();else
if([Link])[Link]('DOMContentLoaded',c);else{var
e=[Link]||function(){};[Link]=function(b)
{e(b);'loading'!==[Link]&&([Link]=e,c())}}}})();</script></
body>

</html>

Next-Gen Biotech for One Health
No ratings yet
Next-Gen Biotech for One Health
31 pages
LuxVPN: DDoS Protected VPN Service
No ratings yet
LuxVPN: DDoS Protected VPN Service
14 pages
Modern Creative Portfolio Design
No ratings yet
Modern Creative Portfolio Design
19 pages
Nexus Portal: Enhanced User Experience
No ratings yet
Nexus Portal: Enhanced User Experience
22 pages
Ucapan Natal & Tahun Baru 2026
No ratings yet
Ucapan Natal & Tahun Baru 2026
25 pages
Fractal.Hub: Brainrot Community Hub
No ratings yet
Fractal.Hub: Brainrot Community Hub
24 pages
Software de Gestión de Mudanzas MX
No ratings yet
Software de Gestión de Mudanzas MX
13 pages
Compatibilidad Amorosa: Descúbrela Aquí
No ratings yet
Compatibilidad Amorosa: Descúbrela Aquí
24 pages
SMK Dr. Soetomo Surabaya Overview
No ratings yet
SMK Dr. Soetomo Surabaya Overview
34 pages
Compatibilidade Amorosa: Descubra Agora
No ratings yet
Compatibilidade Amorosa: Descubra Agora
24 pages
Interactive Web Experience UI Code
No ratings yet
Interactive Web Experience UI Code
20 pages
Stylish Bootstrap Gallery Design
No ratings yet
Stylish Bootstrap Gallery Design
3 pages
Chzzios Premium Scriptable Overview
No ratings yet
Chzzios Premium Scriptable Overview
21 pages
Css Js Utilities
No ratings yet
Css Js Utilities
17 pages
Prime Properties Ethiopia Login/Register
No ratings yet
Prime Properties Ethiopia Login/Register
80 pages
Mammoth Extract Overview
No ratings yet
Mammoth Extract Overview
55 pages
E-Time Store Admin Panel Design
No ratings yet
E-Time Store Admin Panel Design
60 pages
E-Time Store Admin Panel Design
No ratings yet
E-Time Store Admin Panel Design
60 pages
E-Time Store Web Design Template
No ratings yet
E-Time Store Web Design Template
72 pages
E-Time Store Webpage Design
No ratings yet
E-Time Store Webpage Design
74 pages
Earning King Bot Overview
No ratings yet
Earning King Bot Overview
11 pages
Master Business Studies
No ratings yet
Master Business Studies
170 pages
Mobile Development Solutions Guide
No ratings yet
Mobile Development Solutions Guide
36 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
11 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
20 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
19 pages
GlitchWall Control Panel Setup
No ratings yet
GlitchWall Control Panel Setup
31 pages
HeightSync Pro: Futuristic Design Elements
No ratings yet
HeightSync Pro: Futuristic Design Elements
13 pages
Tier 0 Floor Cleaning App Guide
No ratings yet
Tier 0 Floor Cleaning App Guide
7 pages
Zeknard IPTV Kontrol Aracı
No ratings yet
Zeknard IPTV Kontrol Aracı
16 pages
Semana 12 Mejorado
No ratings yet
Semana 12 Mejorado
19 pages
NTH Diwali Wishes Design Template
No ratings yet
NTH Diwali Wishes Design Template
12 pages
Tier 0 Floor Cleaning Application
No ratings yet
Tier 0 Floor Cleaning Application
6 pages
NTH Diwali Wishes Design
No ratings yet
NTH Diwali Wishes Design
9 pages
Text Length and Parts of Speech Analyzer
No ratings yet
Text Length and Parts of Speech Analyzer
13 pages
Dark Legend Tool 2.0 Overview
No ratings yet
Dark Legend Tool 2.0 Overview
33 pages
CSS Styles for Top Rated Badges
No ratings yet
CSS Styles for Top Rated Badges
9 pages
Student Success Guidance Platform
No ratings yet
Student Success Guidance Platform
16 pages
استكشف توأم روحك: مطابقة الأرواح
No ratings yet
استكشف توأم روحك: مطابقة الأرواح
12 pages
New Year Adventure for Friends
No ratings yet
New Year Adventure for Friends
16 pages
NEPSE Predictor Dashboard Design
No ratings yet
NEPSE Predictor Dashboard Design
21 pages
Taxation (Direct & Indirect)
No ratings yet
Taxation (Direct & Indirect)
97 pages
Canva AI Prompt ALB Web Ver.1.1
No ratings yet
Canva AI Prompt ALB Web Ver.1.1
54 pages
Workafella Spin Game Design
No ratings yet
Workafella Spin Game Design
22 pages
Vietnamese Teachers' Day Celebration
No ratings yet
Vietnamese Teachers' Day Celebration
25 pages
Sistema de Serviços Online Interativo
No ratings yet
Sistema de Serviços Online Interativo
16 pages
Cost Accounting
No ratings yet
Cost Accounting
114 pages
6-Cup Coffee Subscription Service
No ratings yet
6-Cup Coffee Subscription Service
21 pages
Master Auditing With Structured Excellence
No ratings yet
Master Auditing With Structured Excellence
124 pages
Welcome PHP Sebastian
No ratings yet
Welcome PHP Sebastian
2 pages
Supra GT-R Profile Overview
No ratings yet
Supra GT-R Profile Overview
17 pages
CSS Animation Techniques and Effects
No ratings yet
CSS Animation Techniques and Effects
18 pages
Sistema de Serviços Online Interativo
No ratings yet
Sistema de Serviços Online Interativo
24 pages
Bajrang Dal Shravasti Overview
No ratings yet
Bajrang Dal Shravasti Overview
15 pages
CSS Night Sky Animation Design
No ratings yet
CSS Night Sky Animation Design
24 pages
FinPilot: Gestão Financeira Inteligente
No ratings yet
FinPilot: Gestão Financeira Inteligente
245 pages
ENSA-B System Monitor Interface
No ratings yet
ENSA-B System Monitor Interface
113 pages
2N3715/2N3716 Transistor Specifications
No ratings yet
2N3715/2N3716 Transistor Specifications
3 pages
High Voltage Impulse Generation Report
No ratings yet
High Voltage Impulse Generation Report
10 pages
Simple Continuity Tester Diagram
No ratings yet
Simple Continuity Tester Diagram
15 pages
STATCOM: Reactive Power Control Explained
No ratings yet
STATCOM: Reactive Power Control Explained
33 pages
6SL3100 0BE23 6AB0 Datasheet en
No ratings yet
6SL3100 0BE23 6AB0 Datasheet en
1 page
Smart Power Solutions for Automotive
No ratings yet
Smart Power Solutions for Automotive
26 pages
Transformer Performance Analysis and Calculations
No ratings yet
Transformer Performance Analysis and Calculations
2 pages
Physics of Bipolar Transistors
No ratings yet
Physics of Bipolar Transistors
54 pages
D-250AL Amplifier User Manual
No ratings yet
D-250AL Amplifier User Manual
8 pages
Lightning Protection Course Overview
No ratings yet
Lightning Protection Course Overview
75 pages
KAL 9511 - Basic Partial Discharge Calibrator - HAEFELY - Datasheet V2010
No ratings yet
KAL 9511 - Basic Partial Discharge Calibrator - HAEFELY - Datasheet V2010
4 pages
Electrical Engineering Final Exam ELP 111
No ratings yet
Electrical Engineering Final Exam ELP 111
3 pages
Surge Arrester Specifications Overview
No ratings yet
Surge Arrester Specifications Overview
2 pages
Stepper Motor Operation and Characteristics
No ratings yet
Stepper Motor Operation and Characteristics
105 pages
Ffs 0684 Three Phase Smart Controller Datasheet
No ratings yet
Ffs 0684 Three Phase Smart Controller Datasheet
2 pages
Machine Past Question
No ratings yet
Machine Past Question
34 pages
MCCB Specifications and Ratings Chart
No ratings yet
MCCB Specifications and Ratings Chart
16 pages
Panel Board Cost Estimation Breakdown
No ratings yet
Panel Board Cost Estimation Breakdown
3 pages
LF-GMR020YSII LED Driver Specs
No ratings yet
LF-GMR020YSII LED Driver Specs
5 pages
Solid State Device Fundamentals
No ratings yet
Solid State Device Fundamentals
17 pages
EEE302 Lab: Three-Phase Rectifiers
No ratings yet
EEE302 Lab: Three-Phase Rectifiers
18 pages
Wiring Diagrams and Installation Guide
No ratings yet
Wiring Diagrams and Installation Guide
55 pages
AH276 Hall Effect Sensor Datasheet
No ratings yet
AH276 Hall Effect Sensor Datasheet
6 pages
Assembly Features: JB JB
No ratings yet
Assembly Features: JB JB
3 pages
Water Heater Installation & Safety Guide
No ratings yet
Water Heater Installation & Safety Guide
17 pages
74F14 Hex Inverter Schmitt Trigger: General Description
No ratings yet
74F14 Hex Inverter Schmitt Trigger: General Description
5 pages
CH310 AC Drive Commissioning Guide
No ratings yet
CH310 AC Drive Commissioning Guide
20 pages
Passive vs. Active Filters Explained
100% (1)
Passive vs. Active Filters Explained
3 pages
Diode Function and Calculations in ECE Exam
No ratings yet
Diode Function and Calculations in ECE Exam
2 pages
IEC Standards for Electrical Symbols
No ratings yet
IEC Standards for Electrical Symbols
22 pages