Ads.txt Alerts - Protect your revenue

shopdowntown.org Ads.txt file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, minimal-ui"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<title>Shop Downtown - Revitalize Your Downtown</title>
<meta
name="description"
content="When you use a Shop Downtown Discount Card, you help support our neighbors and local economy. You can also get great savings on a variety of products and services every time you patronize a participating member."
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#8B4513",
secondary: "#2A6041",
accent: "#D66853",
neutral: {
100: "#F9F6F0",
200: "#EBE6DD",
300: "#D3C7B6",
800: "#4A3C31",
},
},
},
},
};
</script>

<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="../public/css/styles.css" />


<script async src="https://www.googletagmanager.com/gtag/js?id=G-1YGJM6X7M3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-1YGJM6X7M3');
</script>
</head>
<body class="font-sans bg-white">


<nav class="bg-white border-b border-neutral-200 sticky top-0 z-50 shadow-sm">
<div class="container mx-auto px-4 py-3">
<div class="flex justify-between items-center">

<div class="flex items-center">
<a href="/index.php" class="flex items-center">
<img
src="/public/images/shop-downtown-logo.png"
alt="Shop Downtown Logo"
class="h-12"
/>
</a>
</div>


<div class="hidden lg:flex space-x-6 items-center">
<div class="relative group">
<button class="px-3 py-2 text-neutral-700 hover:text-primary">
Select a State <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div
class="absolute z-10 left-0 mt-0 pt-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
>
<div
class="py-1 max-h-96 overflow-y-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Alabama</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Alaska</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Arizona</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Arkansas</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>California</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Colorado</a
>
<a
href="#"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 state-link"
>Connecticut</a
>

</div>
</div>
</div>

<div class="relative group">
<button class="px-3 py-2 text-neutral-700 hover:text-primary">
Select a City <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div
class="absolute z-10 left-0 mt-0 pt-2 w-48 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
>
<div
class="py-1 max-h-96 overflow-y-auto rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
>
<span class="block px-4 py-2 text-sm text-neutral-500 italic">Select state first</span>
</div>
</div>
</div>


<div class="relative group">
<button class="px-3 py-2 text-neutral-700 hover:text-primary">
Discount Card Program <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div
class="absolute z-10 left-0 mt-0 pt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
>
<div
class="py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
>
<a
href="/business.php"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Overview</a
>
<a
href="/business.php#business-signup"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Add Your Business</a
>
<a
href="pages/brochure.pdf"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Download Brochure</a
>
<a
href="https://fundraising.shopdowntown.org?sca_ref=9080112.ZAl4Brn9E4LxUN01"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Buy Discount Cards</a
>
<a
href="https://af.uppromote.com/v4us84-me/register"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Affiliate Program</a
>
<a
href="mailto:info@shopdowntown.org"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Get Support</a
>
</div>
</div>
</div>


<div class="relative group">
<button class="px-3 py-2 text-neutral-700 hover:text-primary">
Tutorials <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div
class="absolute z-10 left-0 mt-0 pt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
>
<div
class="py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
>
<a
href="https://www.youtube.com/watch?v=yyD3HOYsxJk"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Merchant Signup</a
>
<a
href="https://www.youtube.com/watch?v=PG2g4otYWg4&t"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Product Creation</a
>
<a
href="https://www.youtube.com/watch?v=oyKuPZQsOdo"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Virtual Car Showroom</a
>
</div>
</div>
</div>





<div class="relative group">
<button class="px-3 py-2 text-neutral-700 hover:text-primary">
3D Virtual City <i class="fas fa-chevron-down ml-1 text-xs"></i>
</button>
<div
class="absolute z-10 left-0 mt-0 pt-2 w-64 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300"
>
<div
class="py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
>
<a
href="https://www.youtube.com/watch?v=zrRHC2KkvyI"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Overview</a
>
<a
href="https://new.wondersouq.com/registration"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Login As a Citizen</a
>
<a
href="https://admin.wondersouq.com/"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Login As a Merchant</a
>
<a
href="tel:+14582188844"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>Call Our AI Agent</a
>
<a
href="https://wondersouq.com/shopdowntown/"
target="_blank"
class="block px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100"
>More Info</a
>
</div>
</div>
</div>
</div>


<div class="flex items-center">
<a
href="https://admin.wondersouq.com"
target="_blank"
class="hidden md:inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-4 py-2 rounded-lg transition duration-300"
>
Sell Your Products in Our 3D Virtual City
</a>

<button
class="lg:hidden text-neutral-700 hover:text-primary ml-4 p-2 focus:outline-none"
id="mobile-menu-button"
aria-label="Toggle mobile menu"
aria-expanded="false"
type="button"
>
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>


<div
class="lg:hidden hidden absolute top-full inset-x-0 bottom-0 bg-neutral-900 bg-opacity-50 z-40"
id="mobile-menu-overlay"
></div>


<div
class="lg:hidden hidden bg-white flex flex-col h-screen"
id="mobile-menu"
>

<div
class="px-2 pt-4 pb-2 space-y-3 overflow-y-auto flex-grow"
id="mobile-menu-scrollable"
>
<div class="py-1">
<button
class="flex justify-between w-full px-3 py-2 text-neutral-700 rounded-lg"
id="mobile-state-button"
aria-expanded="false"
aria-controls="mobile-state-dropdown"
>
<span>Select a State</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="hidden pt-2 pl-4" id="mobile-state-dropdown">

<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">Alabama</a>
<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">Alaska</a>
<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">Arizona</a>
<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">Arkansas</a>
<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">California</a>
<a href="#" class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50 state-link">Colorado</a>

</div>
</div>

<div class="py-1">
<button
class="flex justify-between w-full px-3 py-2 text-neutral-700 rounded-lg"
id="mobile-city-button"
aria-expanded="false"
aria-controls="mobile-city-dropdown"
>
<span>Select a City</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="hidden pt-2 pl-4" id="mobile-city-dropdown">
<span class="text-neutral-500 italic">Select state first</span>
</div>
</div>


<div class="py-1">
<button
class="flex justify-between w-full px-3 py-2 text-neutral-700 rounded-lg"
id="mobile-discount-card-button"
aria-expanded="false"
aria-controls="mobile-discount-card-dropdown"
>
<span>Discount Card Program</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="hidden pt-2 pl-4" id="mobile-discount-card-dropdown">
<a
href="/business.php"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Overview</a>
<a
href="/business.php#business-signup"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Add Your Business</a>
<a
href="pages/brochure.pdf"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Download Brochure</a>
<a
href="https://fundraising.shopdowntown.org?sca_ref=9080112.ZAl4Brn9E4LxUN01"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Buy Discount Cards</a>
<a
href="https://af.uppromote.com/v4us84-me/register"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Affiliate Program</a>
<a
href="mailto:info@shopdowntown.org"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Get Support</a>
</div>
</div>


<div class="py-1">
<button
class="flex justify-between w-full px-3 py-2 text-neutral-700 rounded-lg"
id="mobile-tutorials-button"
aria-expanded="false"
aria-controls="mobile-tutorials-dropdown"
>
<span>Tutorials</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="hidden pt-2 pl-4" id="mobile-tutorials-dropdown">
<a
href="https://www.youtube.com/watch?v=yyD3HOYsxJk"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Merchant Signup</a>
<a
href="https://www.youtube.com/watch?v=PG2g4otYWg4&t"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Product Creation</a>
<a
href="https://www.youtube.com/watch?v=oyKuPZQsOdo"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Virtual Car Showroom</a>
</div>
</div>


<div class="py-1">
<button
class="flex justify-between w-full px-3 py-2 text-neutral-700 rounded-lg"
id="mobile-virtual-city-button"
aria-expanded="false"
aria-controls="mobile-virtual-city-dropdown"
>
<span>3D Virtual City</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="hidden pt-2 pl-4" id="mobile-virtual-city-dropdown">
<a
href="https://www.youtube.com/watch?v=zrRHC2KkvyI"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Overview</a>
<a
href="https://new.wondersouq.com/registration"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Login As a Citizen</a>
<a
href="https://admin.wondersouq.com/"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Login As a Merchant</a>
<a
href="tel:+14582188844"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>Call Our AI Agent</a>
<a
href="https://wondersouq.com/shopdowntown/"
target="_blank"
class="block px-3 py-2 text-neutral-700 hover:text-primary rounded-lg hover:bg-neutral-50"
>More Info</a>
</div>
</div>





<div class="pt-4 pb-2">
<a
href="https://admin.wondersouq.com"
target="_blank"
class="block text-center bg-primary hover:bg-primary/90 text-white font-semibold px-4 py-2 rounded-lg transition duration-300"
>
Sell Your Products in Our 3D Virtual City
</a>
</div>
</div>
</div>
</div>
</nav>

<header
class="bg-gradient-to-b from-neutral-100 to-neutral-200 relative overflow-hidden border-b border-neutral-200"
>

<div
class="absolute bottom-0 left-0 w-full h-20 md:h-28 bg-no-repeat bg-bottom bg-cover z-10 skyline-background"
style="background-image: url('../public/images/skyscraper.png')"
></div>


<div
class="absolute inset-0 bg-gradient-to-br from-primary/[0.01] to-accent/[0.01]"
></div>

<div
class="container mx-auto px-4 pt-5 pb-10 md:pt-8 md:pb-16 relative z-20"
>
<div class="max-w-3xl mx-auto text-center">
<img
src="../public/images/shop-downtown-logo-transparent.png"
alt="Shop Downtown"
class="h-28 mx-auto mb-4"
/>
<h1
class="text-4xl md:text-5xl lg:text-6xl font-bold text-primary mb-4 fade-in"
>
Improving the Economic Vitality of Our Downtowns
</h1>

<div class="w-24 h-1 bg-accent mx-auto mb-4 slide-in"></div>

<p
class="text-lg md:text-xl text-neutral-800 mb-6 max-w-2xl mx-auto slide-up"
>
Shop Downtown connects communities with local businesses, promoting
<span class="text-secondary font-medium">economic vitality</span>
and supporting
<span class="text-secondary font-medium">downtown development</span
>.
</p>

<div
class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6"
>
<a
href="#features"
class="w-full md:w-auto inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
Learn What We Do
</a>
<a
href="#virtual-city"
class="w-full md:w-auto inline-block bg-white hover:bg-neutral-100 border-2 border-accent text-accent font-semibold px-6 py-3 rounded-lg transition duration-300"
>
See Our Virtual City
</a>
</div>
</div>
</div>
</header>


<section class="container mx-auto px-4 mb-16 pt-8">
<div class="max-w-5xl mx-auto">

<div class="relative">
<img
src="../public/images/Shop Downtown Post.jpg"
alt="Shop Downtown"
class="w-full h-auto rounded-lg shadow-lg"
/>


<div class="mt-8 flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-8">
<a
href="https://new.wondersouq.com/registration"
target="_blank"
class="w-full md:w-auto inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-8 py-4 rounded-lg transition duration-300 text-center text-lg"
>
Visit Our Virtual City
</a>
<a
href="https://admin.wondersouq.com"
target="_blank"
class="w-full md:w-auto inline-block bg-secondary hover:bg-secondary/90 text-white font-semibold px-8 py-4 rounded-lg transition duration-300 text-center text-lg"
>
Register Your Business
</a>
</div>
</div>
</div>
</section>


<section id="features" class="pt-8 pb-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl md:text-4xl font-bold text-primary text-center mb-4"
>
What We Offer
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>

<p class="text-lg text-center text-neutral-800 max-w-3xl mx-auto mb-8">
We solve the downtown urban redevelopment puzzle by turning your
downtown into a virtual city, expanding your reach and bringing local
businesses into the 21st century.
</p>


<div class="hidden lg:grid lg:grid-cols-3 gap-8 mb-4 max-w-6xl mx-auto">
<div
class="border border-neutral-300/30 rounded-lg bg-primary/10 py-3 text-center shadow-sm"
>
<div
class="w-12 h-12 rounded-lg bg-primary flex items-center justify-center text-white font-bold text-2xl shadow-md mx-auto mb-2"
>
1
</div>
<h4 class="text-primary font-medium">For Shoppers</h4>
</div>
<div
class="border border-neutral-300/30 rounded-lg bg-secondary/10 py-3 text-center shadow-sm"
>
<div
class="w-12 h-12 rounded-lg bg-secondary flex items-center justify-center text-white font-bold text-2xl shadow-md mx-auto mb-2"
>
2
</div>
<h4 class="text-secondary font-medium">For Merchants</h4>
</div>
<div
class="border border-neutral-300/30 rounded-lg bg-accent/10 py-3 text-center shadow-sm"
>
<div
class="w-12 h-12 rounded-lg bg-accent flex items-center justify-center text-white font-bold text-2xl shadow-md mx-auto mb-2"
>
3
</div>
<h4 class="text-accent font-medium">For Community</h4>
</div>
</div>


<div class="flex flex-col items-center mb-6">
<div
class="bg-neutral-100 border border-neutral-300/30 rounded-lg p-1 inline-flex shadow-sm mb-2 relative overflow-hidden"
style="
--tab-transition-duration: 500ms;
--tab-transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
"
>

<div
id="tab-slider"
class="absolute h-full bg-white rounded-md shadow-sm"
style="
transition-property: transform, width, left;
will-change: transform, width, left;
"
></div>
<button
class="px-4 py-2 rounded-md font-medium text-primary tab-btn active focus:outline-none relative z-10 transition-colors duration-500"
data-tab="tab-1"
>
Core Features
</button>
<button
class="px-4 py-2 rounded-md font-medium text-secondary tab-btn mx-1 focus:outline-none relative z-10 transition-colors duration-500"
data-tab="tab-2"
>
Platform & Tools
</button>
<button
class="px-4 py-2 rounded-md font-medium text-accent tab-btn focus:outline-none relative z-10 transition-colors duration-500"
data-tab="tab-3"
>
Community & Perks
</button>
</div>


<div class="flex items-center justify-center space-x-3">
<div class="relative w-8 h-8 hidden md:block">
<svg class="w-8 h-8" viewBox="0 0 36 36">
<circle
cx="18"
cy="18"
r="16"
fill="none"
stroke="#EBE6DD"
stroke-width="2"
></circle>
<circle
id="timer-circle"
cx="18"
cy="18"
r="16"
fill="none"
stroke="#8B4513"
stroke-width="2"
stroke-dasharray="100"
stroke-dashoffset="0"
transform="rotate(-90 18 18)"
></circle>
</svg>
<button
id="play-pause-btn"
class="absolute inset-0 flex items-center justify-center text-primary focus:outline-none"
aria-label="Pause rotation"
>
<i class="fas fa-pause text-xs"></i>
</button>
</div>
</div>
</div>


<div class="tab-content active" id="tab-1">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto min-h-[20rem]"
>

<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-store text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-primary text-center mb-4">
Discover Local Shops
</h3>
<p class="text-neutral-800 text-center flex-grow">
Browse through a curated selection of local businesses in your
community. Filter by category, location, or special offers.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-secondary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-shopping-bag text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-secondary text-center mb-4">
Easy Online Shopping
</h3>
<p class="text-neutral-800 text-center flex-grow">
Purchase products from multiple local shops in a single
transaction. Schedule delivery or pickup based on your
preferences.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-accent flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-heart text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-accent text-center mb-4">
Support Your Community
</h3>
<p class="text-neutral-800 text-center flex-grow">
Every purchase helps local businesses thrive and contributes to
community health initiatives through our donation program.
</p>
</div>
</div>
</div>


<div class="tab-content hidden" id="tab-2">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto min-h-[20rem]"
>

<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-city text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-primary text-center mb-4">
Virtual City Platform
</h3>
<p class="text-neutral-800 text-center flex-grow">
Experience your downtown as a virtual city that expands reach
and audience. We bring local downtown businesses into the 21st
Century while supporting local charities in the process.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-secondary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-store-alt text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-secondary text-center mb-4">
Merchant Support
</h3>
<p class="text-neutral-800 text-center flex-grow">
We provide downtown merchants with an enhanced online presence
as part of their local business community - delivering a virtual
downtown experience with discounts that drive both online and
foot traffic.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-accent flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-map-marked-alt text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-accent text-center mb-4">
Virtual Downtown Tours
</h3>
<p class="text-neutral-800 text-center flex-grow">
Explore downtown areas virtually with our interactive map. Get a
feel for the local shopping experience from anywhere in the
world.
</p>
</div>
</div>
</div>


<div class="tab-content hidden" id="tab-3">
<div
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto min-h-[20rem]"
>

<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-users text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-primary text-center mb-4">
Social Shopping
</h3>
<p class="text-neutral-800 text-center flex-grow">
Shop with friends and family remotely. Browse together, share
recommendations, and make purchases in a social environment.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-secondary flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-tag text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-secondary text-center mb-4">
Exclusive Local Deals
</h3>
<p class="text-neutral-800 text-center flex-grow">
Access special promotions and discounts available only to Shop
Downtown users. Save money while supporting local.
</p>
</div>


<div
class="border border-neutral-300/30 p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow bg-neutral-100 h-full flex flex-col"
>
<div
class="w-14 h-14 rounded-full bg-accent flex items-center justify-center mb-6 mx-auto"
>
<i class="fas fa-hand-holding-heart text-white text-xl"></i>
</div>
<h3 class="text-xl font-semibold text-accent text-center mb-4">
Community Health Initiatives
</h3>
<p class="text-neutral-800 text-center flex-grow">
We provide local community health charities and clinics with a
new income stream by sharing a portion of the program profits
with select qualified organizations.
</p>
</div>
</div>
</div>


<div id="community-health" class="text-center mt-12 max-w-4xl mx-auto">
<button
id="community-health-toggle"
class="inline-flex items-center justify-center space-x-2 bg-accent hover:bg-accent/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
<span>How We Support Community Health</span>
<i
class="fas fa-chevron-down transition-transform duration-300"
id="community-health-icon"
></i>
</button>

<div
id="community-health-content"
class="overflow-hidden transition-all duration-500 mt-4 text-left"
style="max-height: 0"
>
<div
class="bg-neutral-100 p-6 rounded-lg shadow-sm border border-neutral-300/30"
>
<div class="flex items-center mb-6">
<div
class="w-10 h-10 rounded-full bg-accent flex items-center justify-center mr-4"
>
<i class="fas fa-heart text-white"></i>
</div>
<h3 class="text-xl font-semibold text-accent">
Our Health Initiative
</h3>
</div>

<p class="text-neutral-800 mb-6">
Eight years after the domain was registered, founder and CEO
Daniel Wells had a close family member diagnosed with bone
cancer and he and his wife were desperate to learn more about
the condition, treatments and current research. They turned to
the American Cancer Society (ACS) for support.
</p>
<p class="text-neutral-800 mb-6">
So when it came time to partner with local merchants, take shop
local efforts nationwide and provide users with a new online
shopping option, it just made sense to include the nonprofit as
well as local cancer centers and clinics in the equation so that
others in need can continue to count on their support.
</p>
<div class="bg-white p-4 rounded-lg border-l-4 border-accent">
<p class="text-neutral-800 font-semibold">
A percentage of each sale on the platform is donated to
support community health.
</p>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="why-we-do-it" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-primary text-center mb-4">
Why We Do It
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>

<div class="max-w-3xl mx-auto mb-10">
<p class="text-xl text-center text-gray-700 mb-10">
<span class="font-semibold">Short answer: Somebody had to!</span> As
business owners ourselves, we feel the pain of our
disappearing downtowns - so we decided to do something about it.
Something big.
</p>

<h3 class="text-xl font-semibold text-primary mb-6 text-center">
Just consider the benefits:
</h3>

<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mt-1 mr-3"></i>
<span class="text-gray-700"
>Increased foot traffic and online sales for local
businesses.</span
>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mt-1 mr-3"></i>
<span class="text-gray-700"
>Drives increased tourism and attracts new businesses and
residents.</span
>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mt-1 mr-3"></i>
<span class="text-gray-700"
>Showcases your downtown to a global audience.</span
>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-secondary mt-1 mr-3"></i>
<span class="text-gray-700"
>Fosters economic growth and community pride.</span
>
</li>
</ul>
</div>

<div class="text-center">
<button
class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
<a
href="mailto:info@shopdowntown.org"
class="text-white no-underline"
>Schedule A Call</a
>
</button>
</div>
</div>
</section>


<section id="how-we-do-it" class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-10">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">
How We Do It
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>
</div>

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

<div
class="hidden md:block absolute -left-4 transform rotate-45 opacity-20"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="text-primary"
>
<path d="M12 5v14M5 12l7 7 7-7" />
</svg>
</div>

<div
class="relative p-6 md:p-8 rounded-lg shadow-lg bg-white border border-gray-100"
>

<div class="absolute -top-5 left-1/2 transform -translate-x-1/2">
<div
class="w-10 h-10 rounded-full bg-primary flex items-center justify-center shadow-md"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-white"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>

<p
class="text-gray-700 text-base md:text-lg leading-relaxed relative z-10 mb-8"
>
We bring the tried-and-true discount shopping card model into the
21st century, pair it with the latest virtual city technology that
reproduces a faithful digital representation of participating
downtowns and downtown merchants and their shops, while sharing
proceeds with community nonprofits. We deliver search engine
optimization, business consulting services, and platform
integration to participating communities and merchants.
</p>


<div
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-6 text-center"
>
<div
class="p-3 md:p-4 rounded-lg hover:bg-gray-50 transition duration-300"
>
<div
class="w-12 h-12 rounded-full bg-primary bg-opacity-10 mx-auto flex items-center justify-center mb-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
/>
</svg>
</div>
<h4 class="text-sm font-semibold text-primary">
Virtual City Technology
</h4>
</div>

<div
class="p-3 md:p-4 rounded-lg hover:bg-gray-50 transition duration-300"
>
<div
class="w-12 h-12 rounded-full bg-primary bg-opacity-10 mx-auto flex items-center justify-center mb-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<h4 class="text-sm font-semibold text-primary">
Shared Proceeds
</h4>
</div>

<div
class="p-3 md:p-4 rounded-lg hover:bg-gray-50 transition duration-300"
>
<div
class="w-12 h-12 rounded-full bg-primary bg-opacity-10 mx-auto flex items-center justify-center mb-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
</div>
<h4 class="text-sm font-semibold text-primary">
Business Services
</h4>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="about" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">

<div class="text-center mb-12 max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">
About Us
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>
<h3 class="text-xl md:text-2xl font-semibold text-primary">
Drive More Customers to Your Business
</h3>
</div>


<div
class="bg-white rounded-xl shadow-lg overflow-hidden mb-10 transform transition-all duration-300 hover:shadow-xl max-w-3xl mx-auto"
>
<div class="p-6 md:p-8">
<h4 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
What is ShopDowntown.org?
</h4>
<p class="text-gray-600 leading-relaxed mb-0">
ShopDowntown.org is a directory, virtual shopping platform, and
advertising platform designed to help local businesses thrive. We
connect businesses with customers through both digital and
in-person channels, helping to drive both online traffic, and
visits to your store.
</p>
</div>
</div>


<div class="max-w-6xl mx-auto">
<h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">
Benefits for Your Business
</h3>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">

<div
class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
>
<div class="p-6">
<div
class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-3">
1. Increase Foot Traffic
</h4>
<ul class="space-y-3">
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Get discovered by local shoppers searching for businesses
like yours.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Leverage location-based advertising to target customers
nearby.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Promote special offers, events, and discounts to draw
people into your store.</span
>
</li>
</ul>
</div>
</div>


<div
class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
>
<div class="p-6">
<div
class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
/>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-3">
2. Boost Online Traffic & Sales
</h4>
<ul class="space-y-3">
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Feature your products on our e-commerce platform to
generate additional revenue.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Benefit from SEO optimization that improves your
business's online visibility.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Tap into a shared digital audience through
cross-promotions with other merchants.</span
>
</li>
</ul>
</div>
</div>


<div
class="bg-white rounded-xl shadow-md overflow-hidden transform transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
>
<div class="p-6">
<div
class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
/>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-3">
3. The Power of Backlinks
</h4>
<ul class="space-y-3">
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Your listing includes a high-quality backlink to your
website, improving SEO ranking.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Gain exposure from a trusted local platform, increasing
domain authority and credibility.</span
>
</li>
<li class="flex items-start">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-green-500 mr-2 mt-0.5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span class="text-gray-600"
>Utilize featured articles, blog posts, and event pages to
expand your digital footprint.</span
>
</li>
</ul>
</div>
</div>
</div>
</div>


<div class="mt-16 max-w-4xl mx-auto">
<div class="bg-white rounded-xl shadow-md p-6 md:p-8">
<p class="text-gray-600 mb-6 leading-relaxed">
We've been working on this project since 2019, after owning a
downtown business ourselves and watching Main Streets all over the
USA suffering due to the advent of e-commerce and the spread of
'big box' stores. Our recent partnership with WonderSouq has
enabled us to take our platform to the next level and we're ready
to provide downtown merchants with the solution to this vexing
problem.
</p>
<a
href="#backgrounder"
class="inline-block bg-primary text-white font-semibold py-2 px-4 rounded shadow transition-all duration-300 hover:bg-primary/90 mb-6"
id="backgrounder-toggle"
>
Read Our Backgrounder
</a>


<div
id="backgrounder-content"
class="overflow-hidden transition-all duration-500 mt-4 mb-6 text-left"
style="max-height: 0"
>
<div
class="bg-neutral-100 p-6 rounded-lg shadow-sm border border-neutral-300/30"
>
<div class="flex items-center mb-6">
<div
class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4"
>
<i class="fas fa-building text-white"></i>
</div>
<h3 class="text-xl font-semibold text-primary">Our Journey</h3>
</div>

<p class="text-neutral-800 mb-6">
Shop Downtown began as a simple idea in 2013: What if we could
leverage the growing power of the internet to help, rather than hurt,
local downtown businesses?
</p>
<p class="text-neutral-800 mb-6">
Our founder, Daniel Wells, had owned a downtown business and witnessed
firsthand the struggles that traditional brick-and-mortar
establishments face in the digital age. The rise of e-commerce giants
and big box stores was draining the lifeblood from America's Main
Streets.
</p>
<p class="text-neutral-800 mb-6">
After years of research and development, we created a platform that
combines the convenience of online shopping with the community spirit
of local commerce. By creating virtual versions of real downtowns,
we're giving small businesses the digital presence they need without
losing their local identity.
</p>
<p class="text-neutral-800 mb-6">
Our recent partnership with WonderSouq has allowed us to enhance our
virtual city technology, creating immersive experiences that truly
capture the essence and charm of each downtown district.
</p>

<div class="bg-white p-4 rounded-lg border-l-4 border-primary">
<p class="text-neutral-800 font-semibold">
Today, we're proud to be launching in several cities across Southern
Oregon, with plans to expand nationwide in the coming years.
</p>
</div>
</div>
</div>


<div
class="border-l-4 border-primary pl-4 md:pl-6 italic text-gray-600"
>
<p class="mb-3">
"This project is not just about a single city—it's part of a
larger national and global ecosystem, creating new economic
opportunities and redefining how businesses engage with their
communities in the virtual space..."
</p>
<p class="font-semibold text-gray-700">
— Mohammed Radwan, CEO of WonderSouq
</p>
</div>
</div>
</div>
</div>
</section>


<section id="our-mission" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl md:text-4xl font-bold text-primary text-center mb-4"
>
Our Mission
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>

<div class="max-w-3xl mx-auto mb-10">
<p class="text-gray-700 mb-6">
It's simple really. We want to revitalize downtowns all across the
country by turning them into online, virtual cities; provide
mom-and-pop stores expanded reach and audience; reward consumers
with discounts and an engaging and immersive online experience that
allows them to shop local as an alternative to corporate big-box
stores; and, support local charities in the process.
</p>

<h3 class="text-2xl font-semibold text-primary mb-4 text-center">
Shop Downtown, A Platform You Can Trust.
</h3>

<p class="text-gray-700 text-center">
We've been doing this for twelve years, fine-tuning our approach and
iterating. We're excited to be moving ahead with several cities,
including the county seat, in the southern Oregon region.
</p>
</div>

<div
class="text-center flex flex-col sm:flex-row justify-center sm:space-x-4 space-y-4 sm:space-y-0"
>

<button
class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
data-popup="press-release-popup"
>
Check Out Our Press Release
</button>
</div>
</div>
</section>


<section id="virtual-city" class="py-16 bg-gray-100">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">
Virtual City
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>

<div class="max-w-4xl mx-auto mb-8">
<div class="bg-white p-4 rounded-lg shadow-md">
<img
src="../public/images/Shop Downtown is Online Post.png"
alt="Shop Downtown is Online"
class="w-full rounded mb-6"
/>

<div class="flex flex-wrap justify-center gap-4">
<a
href="https://new.wondersouq.com/registration"
class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
Enter Virtual City
</a>
</div>
</div>
</div>

<p
class="text-xl font-semibold text-primary max-w-3xl mx-auto leading-tight bg-neutral-50 py-5 px-6 rounded-lg shadow-sm border border-neutral-300/20 mb-6"
>
We are seeking partnerships with forward-thinking city officials and
business leaders to replicate their downtowns and launch immersive
virtual cities together.
</p>


</div>
</section>


<section id="testimonials" class="py-16 bg-white">
<div class="container mx-auto px-4">

<div class="text-center mb-12 max-w-3xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">
Customer Testimonials
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>
<p class="text-gray-600 mb-4">
The following testimonials are from people who have seen the full
presentation and live demo of the system and have had a discussion
on our future plans.
</p>

</div>


<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">

<div
class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl"
>
<div class="p-6 md:p-8">
<div class="flex items-start mb-6">
<div
class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mr-4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div>
<div>
<h4 class="text-xl font-bold text-gray-800">Karen Kahusi</h4>
<p class="text-gray-600">
Business Development Manager, BBSI Southern Oregon
</p>
</div>
</div>

<blockquote class="relative">

<div
class="absolute top-0 left-0 h-10 w-10 flex items-center justify-center bg-neutral-50 rounded-full -ml-2 -mt-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"
/>
</svg>
</div>
<div
class="bg-neutral-50 p-5 rounded-lg border-l-4 border-primary"
>
<p class="text-gray-600 leading-relaxed italic z-10 relative">
ShopDowntown.org is an absolute game-changer for discovering
and supporting local businesses! Whether a person is looking
for unique gifts, great dining spots, or special deals, this
platform makes it so easy to connect with amazing small
businesses in my community. Plus you can invite your friends
and have a Virtual Shop Date, and this is a perfect solution
for people with mobility challenges who can't get downtown
to walk through the stores – Simply Brilliant! I love
knowing that every purchase helps keep our downtown vibrant
and thriving. Highly recommend!
</p>
</div>
</blockquote>

<div class="mt-6 pt-6 border-t border-gray-100">
<div class="text-sm text-gray-500">
<p class="mb-1">2045 Cardinal Avenue, Suite 100</p>
<p class="mb-1">Medford, OR 97504</p>
<p class="mb-1">Phone: 541-200-2111</p>
<p class="mb-1">Mobile: 541-951-1626</p>
<p class="mb-1">Email: karen.kahusi@bbsi.com</p>
</div>
</div>
</div>
</div>


<div
class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl"
>
<div class="p-6 md:p-8">
<div class="flex items-start mb-6">
<div
class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 mr-4"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
/>
</svg>
</div>
<div>
<h4 class="text-xl font-bold text-gray-800">Priti Patel</h4>
<p class="text-gray-600">
General Manager, Rodeway Inn Medford
</p>
</div>
</div>

<blockquote class="relative">

<div
class="absolute top-0 left-0 h-10 w-10 flex items-center justify-center bg-neutral-50 rounded-full -ml-2 -mt-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-primary"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"
/>
</svg>
</div>
<div
class="bg-neutral-50 p-5 rounded-lg border-l-4 border-primary"
>
<p
class="text-gray-600 leading-relaxed italic z-10 relative mb-4"
>
It was truly a pleasure meeting with you and getting the
chance to explore the demo version of ShopDowntown.org. I
was literally amazed by how immersive the experience was—it
felt like I was actually walking through downtown Medford,
entering the shops, and interacting with everything.
</p>
<p class="text-gray-600 leading-relaxed italic z-10 relative">
ShopDowntown.org has truly redefined the way we experience
local shopping with its cutting-edge virtual city platform.
The ability to explore a downtown district in an
interactive, immersive environment makes it feel as if you
are physically walking through the streets, visiting stores,
and discovering businesses in real time. This seamless
integration of technology and commerce offers an engaging
and convenient shopping experience while maintaining the
charm and uniqueness of local storefronts.
</p>
</div>
</blockquote>

<div class="mt-6 pt-6 border-t border-gray-100">
<div class="text-sm text-gray-500">
<p class="mb-1">901 S. Riverside Ave</p>
<p class="mb-1">Medford, OR 97501</p>
<p class="mb-1">Phone: 541-776-9194</p>
<p class="mb-1">Fax: 541-776-9908</p>
<p class="mb-1">Website: www.medfordrodewayinn.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section id="contact" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl md:text-4xl font-bold text-primary text-center mb-4"
>
What's New?
</h2>
<div class="w-20 h-1 bg-primary mx-auto mb-6 rounded-full"></div>

<div class="max-w-xl mx-auto text-center mb-12">
<p class="text-lg text-gray-700 mb-6">
Well, we're glad you asked. To keep up with what we're doing, please
sign-up for our email newsletter.
</p>


<form
class="bg-gray-50 p-6 rounded-lg shadow-md"
id="newsletter-form"
action="https://shopdowntown.us6.list-manage.com/subscribe/post?u=e9e983cfd1&id=5794ef90f5&f_id=002c25e3f0"
method="post"
name="mc-embedded-subscribe-form"
target="_blank"
>
<div class="mb-4" id="form-response"></div>
<div class="mb-4">
<label
for="mce-EMAIL"
class="block text-left text-gray-700 font-medium mb-2"
>Email Address <span class="text-red-500">*</span></label
>
<input
type="email"
id="mce-EMAIL"
name="EMAIL"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
required
/>
</div>
<div class="mb-4">
<label
for="mce-FNAME"
class="block text-left text-gray-700 font-medium mb-2"
>First Name</label
>
<input
type="text"
id="mce-FNAME"
name="FNAME"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
<div class="mb-6">
<label
for="mce-LNAME"
class="block text-left text-gray-700 font-medium mb-2"
>Last Name</label
>
<input
type="text"
id="mce-LNAME"
name="LNAME"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>
<div class="mb-6">
<label
for="mce-MMERGE3"
class="block text-left text-gray-700 font-medium mb-2"
>Phone Number</label
>
<input
type="tel"
id="mce-MMERGE3"
name="MMERGE3"
class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
/>
</div>

<div id="mce-responses" class="clear">
<div
class="response"
id="mce-error-response"
style="display: none"
></div>
<div
class="response"
id="mce-success-response"
style="display: none"
></div>
</div>

<div style="position: absolute; left: -5000px" aria-hidden="true">
<input
type="text"
name="b_e9e983cfd1_5794ef90f5"
tabindex="-1"
value=""
/>
</div>
<div class="mt-4">
<button
type="submit"
name="subscribe"
id="mc-embedded-subscribe"
class="bg-primary hover:bg-primary/90 text-white font-semibold px-4 py-2 rounded-lg transition duration-300 w-full"
>
Subscribe
</button>
</div>
</form>
</div>

<div class="text-center">
<p class="text-gray-700 mb-4">
Contact Us, email Daniel at:
<a
href="mailto:daniel@cmxi.org"
class="text-primary hover:underline"
>daniel@cmxi.org</a
>
or hit the button below.
</p>

<a
href="mailto:info@shopdowntown.org"
class="inline-block bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
Schedule A Call
</a>
</div>
</div>
</section>


<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4 text-center">
<a
href="https://donate.cancer.org/?campaign=shopdowntown"
class="inline-block mb-8"
>
<img
src="../public/images/bottom-cancer-banner.png"
alt="Cancer Banner"
class="max-w-full h-auto rounded-lg shadow-md"
/>
</a>

<div
class="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0 mb-6 justify-center"
>
<a
href="https://shopdowntown.org/Research-Dollars-at-Work-Near-You-Oregon.pdf"
class="w-full sm:w-auto text-center bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
Research Dollars at Work
</a>
<a
href="https://shopdowntown.org/Online-Patient-Programs.pdf"
class="w-full sm:w-auto text-center bg-primary hover:bg-primary/90 text-white font-semibold px-6 py-3 rounded-lg transition duration-300"
>
Online Patient Programs
</a>
</div>

<p class="text-gray-700 mb-8">
The American Cancer Society does not endorse any product or service.
</p>
</div>
</section>



<footer class="bg-neutral-800 text-neutral-200 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

<div class="mb-8 md:mb-0">
<img src="/public/images/shop-downtown-logo-transparent.png" alt="Shop Downtown Logo" class="h-16 mb-4">
<p class="text-neutral-300 max-w-md">Connecting communities with local businesses to promote economic vitality and support downtown development.</p>

</div>


<div>
<h3 class="text-lg font-semibold text-white mb-4">Quick Links</h3>
<ul class="space-y-2">

<li><a href="#top" class="text-neutral-300 hover:text-accent transition-colors">Home</a></li>
<li><a href="#features" class="text-neutral-300 hover:text-accent transition-colors">What We Offer</a></li>
<li><a href="#why-we-do-it" class="text-neutral-300 hover:text-accent transition-colors">Why We Do It</a></li>
<li><a href="#how-we-do-it" class="text-neutral-300 hover:text-accent transition-colors">How We Do It</a></li>
<li><a href="#our-mission" class="text-neutral-300 hover:text-accent transition-colors">Our Mission</a></li>
<li><a href="#virtual-city" class="text-neutral-300 hover:text-accent transition-colors">Virtual City</a></li>
<li><a href="#testimonials" class="text-neutral-300 hover:text-accent transition-colors">Testimonials</a></li>
<li><a href="#contact" class="text-neutral-300 hover:text-accent transition-colors">Contact</a></li>
</ul>
</div>


<div>
<h3 class="text-lg font-semibold text-white mb-4">Resources & Contact</h3>
<ul class="space-y-2">
<li><a href="/#testimonials" class="text-neutral-300 hover:text-accent transition-colors">Testimonials</a></li>
<li><a href="https://new.wondersouq.com/registration" class="text-neutral-300 hover:text-accent transition-colors">Virtual City</a></li>
<li><a href="/public/images/Brochure V1.1.pdf" class="text-neutral-300 hover:text-accent transition-colors">Distribute Our Flyer</a></li>
<li><a href="https://fundraising.shopdowntown.org/pages/career-opportunity-affiliate-sales-representative" class="text-neutral-300 hover:text-accent transition-colors">Careers</a></li>
<li class="pt-4"><a href="/templates/pages/privacy-policy.php" class="text-neutral-300 hover:text-accent transition-colors">Privacy Policy</a></li>
<li><a href="/templates/pages/terms-of-service.php" class="text-neutral-300 hover:text-accent transition-colors">Terms of Service</a></li>
<li><a href="/templates/pages/cookie-policy.php" class="text-neutral-300 hover:text-accent transition-colors">Cookie Policy</a></li>
<li class="pt-4 flex items-center">
<i class="fas fa-envelope text-accent mr-3"></i>
<a href="mailto:info@shopdowntown.org" class="text-neutral-300 hover:text-accent transition-colors">info@shopdowntown.org</a>
</li>
</ul>
</div>


<div>
<h3 class="text-lg font-semibold text-white mb-4">Stay Updated</h3>
<p class="mb-4 text-neutral-300">Subscribe to our newsletter for the latest updates and offers.</p>
<form action="https://shopdowntown.us6.list-manage.com/subscribe/post?u=e9e983cfd1&id=5794ef90f5&f_id=002c25e3f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="flex flex-col space-y-4" target="_blank">
<div class="mb-0">
<input type="email" name="EMAIL" placeholder="Your Email Address" class="required email px-4 py-2 rounded-lg bg-white border border-gray-300 focus:outline-none focus:border-primary text-gray-800 w-full" id="mce-EMAIL" required />
</div>
<div class="mb-0">
<input type="text" name="FNAME" placeholder="First Name" class="px-4 py-2 rounded-lg bg-white border border-gray-300 focus:outline-none focus:border-primary text-gray-800 w-full" id="mce-FNAME" />
</div>
<div class="mb-0">
<input type="text" name="LNAME" placeholder="Last Name" class="px-4 py-2 rounded-lg bg-white border border-gray-300 focus:outline-none focus:border-primary text-gray-800 w-full" id="mce-LNAME" />
</div>
<div class="mb-0">
<input type="text" name="MMERGE3" placeholder="Phone Number" class="px-4 py-2 rounded-lg bg-white border border-gray-300 focus:outline-none focus:border-primary text-gray-800 w-full" id="mce-MMERGE3" />
</div>

<div style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_e9e983cfd1_5794ef90f5" tabindex="-1" value="" />
</div>
<div class="mt-4">
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="bg-primary hover:bg-primary/90 text-white font-semibold px-4 py-2 rounded-lg transition duration-300 w-full">
Subscribe
</button>
</div>

<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none"></div>
<div class="response" id="mce-success-response" style="display: none"></div>
</div>
</form>
</div>
</div>

<div class="text-center pt-8 mt-8 border-t border-neutral-700">

<p class="text-neutral-500 mt-4">Copyright © <span id="current-year">2025</span>, ShopDowntown.org, Inc. All rights reserved.</p>
<div class="mt-2 space-x-4">
<a href="/templates/pages/privacy-policy.php" class="text-neutral-400 hover:text-accent transition-colors">Privacy Policy</a>
<a href="/templates/pages/terms-of-service.php" class="text-neutral-400 hover:text-accent transition-colors">Terms of Service</a>
<a href="/templates/pages/cookie-policy.php" class="text-neutral-400 hover:text-accent transition-colors">Cookie Policy</a>
</div>
</div>
</div>
</footer>


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script>
<script type="text/javascript">
(function ($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = "EMAIL";
ftypes[0] = "email";
fnames[1] = "FNAME";
ftypes[1] = "text";
fnames[2] = "LNAME";
ftypes[2] = "text";
fnames[3] = "MMERGE3";
ftypes[3] = "phone";
})(jQuery);
var $mcj = jQuery.noConflict(true);

// Set current year in footer
document.addEventListener("DOMContentLoaded", function() {
if (document.getElementById("current-year")) {
document.getElementById("current-year").textContent = new Date().getFullYear();
}
});
</script>
<style type="text/css">
/* Custom MailChimp response styling */
#mce-success-response {
color: #4caf50;
background-color: rgba(76, 175, 80, 0.1);
border: 1px solid #4caf50;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
#mce-error-response {
color: #f44336;
background-color: rgba(244, 67, 54, 0.1);
border: 1px solid #f44336;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
</style>


<div class="hidden" id="backgrounder-popup">
<h2 class="text-2xl font-bold text-primary mb-6">Our Backgrounder</h2>

<div
class="bg-neutral-100 p-6 rounded-lg shadow-sm border border-neutral-300/30 mb-6"
>
<div class="flex items-center mb-6">
<div
class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4"
>
<i class="fas fa-building text-white"></i>
</div>
<h3 class="text-xl font-semibold text-primary">Our Journey</h3>
</div>

<p class="text-neutral-800 mb-6">
Shop Downtown began as a simple idea in 2013: What if we could
leverage the growing power of the internet to help, rather than hurt,
local downtown businesses?
</p>
<p class="text-neutral-800 mb-6">
Our founder, Daniel Wells, had owned a downtown business and witnessed
firsthand the struggles that traditional brick-and-mortar
establishments face in the digital age. The rise of e-commerce giants
and big box stores was draining the lifeblood from America's Main
Streets.
</p>
<p class="text-neutral-800 mb-6">
After years of research and development, we created a platform that
combines the convenience of online shopping with the community spirit
of local commerce. By creating virtual versions of real downtowns,
we're giving small businesses the digital presence they need without
losing their local identity.
</p>
<p class="text-neutral-800 mb-6">
Our recent partnership with WonderSouq has allowed us to enhance our
virtual city technology, creating immersive experiences that truly
capture the essence and charm of each downtown district.
</p>

<div class="bg-white p-4 rounded-lg border-l-4 border-primary">
<p class="text-neutral-800 font-semibold">
Today, we're proud to be launching in several cities across Southern
Oregon, with plans to expand nationwide in the coming years.
</p>
</div>
</div>
</div>

<div class="hidden" id="press-release-popup">
<h2 class="text-2xl font-bold text-primary mb-6">Press Release</h2>
<p class="italic text-sm text-gray-500 mb-6">For Immediate Release</p>
<h3 class="text-xl font-bold text-primary mb-4">
ShopDowntown.org Partners with WonderSouq to Revitalize America's
Downtown Districts
</h3>
<p class="text-gray-700 mb-4">
MEDFORD, OR - Shop Downtown, Inc. today announced a groundbreaking
partnership with virtual reality platform WonderSouq to transform how
consumers interact with local downtown businesses across America.
</p>
<p class="text-gray-700 mb-4">
The collaboration will leverage WonderSouq's cutting-edge technology to
create virtual replicas of downtown districts, allowing shoppers to
explore local stores from anywhere in the world through an immersive
online experience.
</p>
<p class="text-gray-700 mb-4">
"This project is not just about a single city—it is part of a larger
national and global ecosystem, creating new economic opportunities and
redefining how businesses engage with their communities in the virtual
space," said Mohammed Badran, CEO of WonderSouq.
</p>
<p class="text-gray-700 mb-4">
The initiative will begin with several cities in Southern Oregon before
expanding nationwide. A portion of all sales made through the platform
will be donated to local community health organizations, including
cancer treatment centers.
</p>
<p class="text-gray-700 mb-4">
For more information, visit shopdowntown.org or contact daniel@cmxi.org.
</p>
<p class="italic text-sm text-gray-500 mt-6">###</p>
</div>


<script>
// Add tab switching and auto-rotation JavaScript
document.addEventListener("DOMContentLoaded", function () {
// Set current year in footer
document.getElementById("current-year").textContent =
new Date().getFullYear();

const tabButtons = document.querySelectorAll(".tab-btn");
const tabContents = document.querySelectorAll(".tab-content");
const timerCircle = document.getElementById("timer-circle");
const playPauseBtn = document.getElementById("play-pause-btn");
const tabSlider = document.getElementById("tab-slider");
const tabContainer = tabSlider.parentElement;

// Check if device is mobile
const isMobile = window.matchMedia("(max-width: 768px)").matches;

// Get CSS variables for animation
const tabTransitionDuration =
getComputedStyle(tabContainer).getPropertyValue(
"--tab-transition-duration"
) || "500ms";
const tabTransitionEasing =
getComputedStyle(tabContainer).getPropertyValue(
"--tab-transition-easing"
) || "cubic-bezier(0.34, 1.56, 0.64, 1)";
const transitionDurationMs = parseInt(
tabTransitionDuration.replace("ms", "")
);

let currentTabIndex = 0;
let rotationInterval = 8000; // 8 seconds per tab
let timerId = null;
let isPaused = isMobile; // Start paused on mobile
let startTime;
let timeRemaining = rotationInterval;
let isTabSwitching = false; // Lock to prevent multiple tab switches simultaneously
let animationTimeouts = []; // Track timeout IDs for cleanup

// Initialize the tab slider position and width to match the first tab button
function initTabSlider() {
if (tabButtons.length > 0 && tabSlider) {
const activeBtn = tabButtons[0];
// Use transform instead of direct left positioning for better performance
const buttonRect = activeBtn.getBoundingClientRect();
const containerRect = tabContainer.getBoundingClientRect();
const offsetLeft = activeBtn.offsetLeft;

tabSlider.style.width = `${activeBtn.offsetWidth}px`;
tabSlider.style.height = `${activeBtn.offsetHeight}px`;
tabSlider.style.left = `${offsetLeft}px`;
tabSlider.style.top = `${activeBtn.offsetTop}px`;

// Add subtle shadow and initial scale
tabSlider.style.boxShadow = "0 2px 8px rgba(0,0,0,0.08)";
tabSlider.style.transform = "scale(1)";
}
}

// Call the init function when DOM is loaded
initTabSlider();

// Helper to clear all animation timeouts
function clearAnimationTimeouts() {
animationTimeouts.forEach((timeoutId) => clearTimeout(timeoutId));
animationTimeouts = [];
}

// Set up circle circumference (2πr where r=16)
const circumference = 2 * Math.PI * 16;
timerCircle.style.strokeDasharray = `${circumference}`;

// Function to update the visual timer
function updateTimerUI(timeLeft) {
const percentage = timeLeft / rotationInterval;
const offset = circumference - percentage * circumference;
timerCircle.style.strokeDashoffset = offset;
}

// Function to handle animation frame for smooth timer progress
function animateTimer() {
const now = Date.now();
const elapsed = now - startTime;
timeRemaining = rotationInterval - elapsed;

if (timeRemaining <= 0) {
rotateToNextTab();
} else {
updateTimerUI(timeRemaining);
if (!isPaused) {
requestAnimationFrame(animateTimer);
}
}
}

// Function to rotate to the next tab
function rotateToNextTab() {
if (isTabSwitching) return; // Prevent rotation if already switching

currentTabIndex = (currentTabIndex + 1) % tabButtons.length;
showTab(currentTabIndex);
startTimer();
}

// Function to start the timer
function startTimer() {
startTime = Date.now();
timeRemaining = rotationInterval;
requestAnimationFrame(animateTimer);
}

// Animate text colors gradually
function animateTabColors(newIndex) {
tabButtons.forEach((btn, i) => {
if (i === newIndex) {
// Color should already be set by the class
} else {
// For non-active tabs, fade text to default color
btn.style.color = "";
}
});
}

// Function to show a specific tab with animation
function showTab(index) {
// Prevent rapid tab switching
if (isTabSwitching) return;
isTabSwitching = true;

// Clear any existing animation timeouts
clearAnimationTimeouts();

// Get currently active tab content
const activeTab = document.querySelector(".tab-content.active");
const activeIndex = Array.from(tabContents).findIndex((tab) =>
tab.classList.contains("active")
);

// Animate the tab slider to move to the selected tab button
const targetBtn = tabButtons[index];
const currentBtn = tabButtons[activeIndex !== -1 ? activeIndex : 0];

// Get positions for animation
const targetLeft = targetBtn.offsetLeft;
const targetWidth = targetBtn.offsetWidth;

// Update active classes instantly
tabButtons.forEach((btn, i) => {
if (i === index) {
btn.classList.add("active");

// Set color based on tab index
if (i === 0) btn.style.color = "var(--tw-color-primary, #8B4513)";
if (i === 1)
btn.style.color = "var(--tw-color-secondary, #2A6041)";
if (i === 2) btn.style.color = "var(--tw-color-accent, #D66853)";
} else {
btn.classList.remove("active");
}
});

// PHASE 1: Animate the slider with spring physics
// Scale down slightly before moving (subtle 'preparing to move' animation)
tabSlider.style.transition = `transform 200ms ease-out, width 200ms ease-out`;
tabSlider.style.transform = "scale(0.97)";

const timeout1 = setTimeout(() => {
// PHASE 2: Move and expand/contract the slider
tabSlider.style.transition = `transform ${transitionDurationMs}ms ${tabTransitionEasing}, width ${transitionDurationMs}ms ${tabTransitionEasing}, left ${transitionDurationMs}ms ${tabTransitionEasing}`;
tabSlider.style.width = `${targetWidth}px`;
tabSlider.style.left = `${targetLeft}px`;
tabSlider.style.transform = "scale(1)";

// Animate text colors
animateTabColors(index);

// Handle the tab content transition with a slight delay
const contentDelay = transitionDurationMs * 0.2; // Start content transition at 20% of tab movement

const timeout2 = setTimeout(() => {
// Get the new tab to display
const newTab = tabContents[index];

// If there's an active tab and it's different from the new tab, animate
if (activeTab && activeIndex !== index) {
// Reset any lingering styles on all tabs that aren't involved
tabContents.forEach((tab) => {
if (tab !== activeTab && tab !== newTab) {
tab.style.transition = "";
tab.style.opacity = "";
tab.style.transform = "";
tab.classList.add("hidden");
tab.classList.remove("active");
}
});

// Set up animation for the active tab
activeTab.style.opacity = "1";
activeTab.style.transform = "translateX(0) scale(1)";
activeTab.style.transition = `opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1)`;

// Determine animation direction based on index change
const direction = index > activeIndex ? 1 : -1;

// Animate out with scale and translate
activeTab.style.opacity = "0";
activeTab.style.transform = `translateX(${
-30 * direction
}px) scale(0.98)`;

// After animation out completes
const timeout3 = setTimeout(() => {
activeTab.classList.remove("active");
activeTab.classList.add("hidden");
activeTab.style.transition = "";
activeTab.style.opacity = "";
activeTab.style.transform = "";

// Prepare new tab for animation
newTab.classList.remove("hidden");
newTab.classList.add("active");
newTab.style.opacity = "0";
newTab.style.transform = `translateX(${
30 * direction
}px) scale(0.98)`;
newTab.style.transition = `opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1)`;

// Trigger reflow
newTab.offsetHeight;

// Animate in with a slight delay
const timeout4 = setTimeout(() => {
newTab.style.opacity = "1";
newTab.style.transform = "translateX(0) scale(1)";

// Release the lock after all animations complete
const timeout5 = setTimeout(() => {
newTab.style.transition = "";
isTabSwitching = false; // Release the lock
}, 400);
animationTimeouts.push(timeout5);
}, 20);
animationTimeouts.push(timeout4);
}, 400);
animationTimeouts.push(timeout3);
} else {
// No animation needed (first load)
tabContents.forEach((content) => {
content.classList.add("hidden");
content.classList.remove("active");
content.style.transition = "";
content.style.opacity = "";
content.style.transform = "";
});
newTab.classList.remove("hidden");
newTab.classList.add("active");

// Release the lock after the tab animation completes
const timeout3 = setTimeout(() => {
isTabSwitching = false;
}, transitionDurationMs);
animationTimeouts.push(timeout3);
}

// Update current tab index
currentTabIndex = index;
}, contentDelay);
animationTimeouts.push(timeout2);
}, 100);
animationTimeouts.push(timeout1);
}

// Set up click handlers for tab buttons
tabButtons.forEach((button, index) => {
button.addEventListener("click", () => {
if (!isTabSwitching) {
// Only respond to clicks if not already switching
showTab(index);

// Reset timer when manually changing tabs
startTime = Date.now();
timeRemaining = rotationInterval;
}
});
});

// Handle window resize to adjust the tab slider position
window.addEventListener("resize", () => {
const wasMobile = isPaused;
const newIsMobile = window.matchMedia("(max-width: 768px)").matches;

// Only update if mobile status changed
if (wasMobile !== newIsMobile) {
isPaused = newIsMobile;

if (newIsMobile) {
// Switching to mobile - hide timer UI
if (timerCircle && timerCircle.parentElement) {
timerCircle.parentElement.parentElement.classList.add("hidden");
timerCircle.parentElement.parentElement.classList.remove(
"md:block"
);
}
} else {
// Switching to desktop - show timer UI and restart autoplay
if (timerCircle && timerCircle.parentElement) {
timerCircle.parentElement.parentElement.classList.remove(
"hidden"
);
timerCircle.parentElement.parentElement.classList.add(
"md:block"
);
}

if (playPauseBtn) {
playPauseBtn.innerHTML = '<i class="fas fa-pause text-xs"></i>';
playPauseBtn.setAttribute("aria-label", "Pause rotation");
}

// Restart the timer
startTime = Date.now();
requestAnimationFrame(animateTimer);
}
}

// Handle tab slider position regardless of device change
if (!isTabSwitching) {
const activeBtn = tabButtons[currentTabIndex];
tabSlider.style.transition = "none";
tabSlider.style.width = `${activeBtn.offsetWidth}px`;
tabSlider.style.left = `${activeBtn.offsetLeft}px`;
tabSlider.style.top = `${activeBtn.offsetTop}px`;
tabSlider.style.height = `${activeBtn.offsetHeight}px`;

// Force reflow to ensure transition is reset
tabSlider.offsetHeight;
}
});

// Set up play/pause button
playPauseBtn.addEventListener("click", function () {
isPaused = !isPaused;

if (isPaused) {
playPauseBtn.innerHTML = '<i class="fas fa-play text-xs"></i>';
playPauseBtn.setAttribute("aria-label", "Resume rotation");
} else {
playPauseBtn.innerHTML = '<i class="fas fa-pause text-xs"></i>';
playPauseBtn.setAttribute("aria-label", "Pause rotation");
startTime = Date.now() - (rotationInterval - timeRemaining);
requestAnimationFrame(animateTimer);
}
});

// Initialize the rotation only on desktop
if (!isMobile) {
startTimer();
}

// Community Health Collapsible Section
const communityHealthToggle = document.getElementById(
"community-health-toggle"
);
const communityHealthContent = document.getElementById(
"community-health-content"
);
const communityHealthIcon = document.getElementById(
"community-health-icon"
);

if (
communityHealthToggle &&
communityHealthContent &&
communityHealthIcon
) {
// Toggle function to reuse for direct clicks and hash links
function toggleCommunityHealth(open = true) {
if (open && communityHealthContent.style.maxHeight === "0px") {
communityHealthIcon.style.transform = "rotate(180deg)";
communityHealthContent.style.maxHeight =
communityHealthContent.scrollHeight + "px";
} else if (
!open ||
communityHealthContent.style.maxHeight !== "0px"
) {
communityHealthIcon.style.transform = "rotate(0deg)";
communityHealthContent.style.maxHeight = "0px";
}
}

// Toggle on button click
communityHealthToggle.addEventListener("click", function () {
// Toggle open/close based on current state
toggleCommunityHealth(
communityHealthContent.style.maxHeight === "0px"
);
});

// Check for hash in URL to auto-expand section
if (window.location.hash === "#community-health") {
// Scroll to section first with offset to keep button in view
const rect = communityHealthToggle.getBoundingClientRect();
window.scrollTo({
top: window.scrollY + rect.top - 100, // 100px offset from the top
behavior: "smooth",
});

// Then open it after a short delay to allow scroll animation
setTimeout(() => {
toggleCommunityHealth(true);
}, 300);
}

// Add click handler for all links to #community-health
document
.querySelectorAll('a[href="#community-health"]')
.forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();

// Scroll to section with offset to keep button in view
window.scrollTo({
top: communityHealthToggle.offsetTop - 100, // 100px offset
behavior: "smooth",
});

// Then open it after a short delay to allow scroll animation but only if it's closed
setTimeout(() => {
// Only open if currently closed
if (communityHealthContent.style.maxHeight === "0px") {
toggleCommunityHealth(true);
}
history.pushState(null, null, "#community-health");
}, 500);
});
});
}

// Backgrounder Collapsible Section
const backgrounderToggle = document.getElementById(
"backgrounder-toggle"
);
const backgrounderContent = document.getElementById(
"backgrounder-content"
);
const backgrounderIcon = document.getElementById(
"backgrounder-icon"
);

if (
backgrounderToggle &&
backgrounderContent &&
backgrounderIcon
) {
// Toggle function to reuse for direct clicks and hash links
function toggleBackgrounder(open = true) {
if (open && backgrounderContent.style.maxHeight === "0px") {
backgrounderIcon.style.transform = "rotate(180deg)";
backgrounderContent.style.maxHeight =
backgrounderContent.scrollHeight + "px";
} else if (
!open ||
backgrounderContent.style.maxHeight !== "0px"
) {
backgrounderIcon.style.transform = "rotate(0deg)";
backgrounderContent.style.maxHeight = "0px";
}
}

// Toggle on button click
backgrounderToggle.addEventListener("click", function () {
// Toggle open/close based on current state
toggleBackgrounder(
backgrounderContent.style.maxHeight === "0px"
);
});

// Check for hash in URL to auto-expand section
if (window.location.hash === "#backgrounder") {
// Scroll to section first with offset to keep button in view
const rect = backgrounderToggle.getBoundingClientRect();
window.scrollTo({
top: window.scrollY + rect.top - 100, // 100px offset from the top
behavior: "smooth",
});

// Then open it after a short delay to allow scroll animation
setTimeout(() => {
toggleBackgrounder(true);
}, 300);
}

// Add click handler for all links to #backgrounder
document
.querySelectorAll('a[href="#backgrounder"]')
.forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();

// Scroll to section with offset to keep button in view
window.scrollTo({
top: backgrounderToggle.offsetTop - 100, // 100px offset
behavior: "smooth",
});

// Then open it after a short delay to allow scroll animation but only if it's closed
setTimeout(() => {
// Only open if currently closed
if (backgrounderContent.style.maxHeight === "0px") {
toggleBackgrounder(true);
}
history.pushState(null, null, "#backgrounder");
}, 500);
});
});
}
});
</script>
<script src="/public/js/main.js"></script>
<script src="/public/js/location-data.js"></script>


<script>
document.addEventListener("DOMContentLoaded", function() {
const backgrounderToggle = document.getElementById("backgrounder-toggle");
const backgrounderContent = document.getElementById("backgrounder-content");

if (backgrounderToggle && backgrounderContent) {
// Toggle function to handle opening/closing
function toggleBackgrounder(open = true) {
if (open && backgrounderContent.style.maxHeight === "0px") {
backgrounderContent.style.maxHeight = backgrounderContent.scrollHeight + "px";
} else if (!open || backgrounderContent.style.maxHeight !== "0px") {
backgrounderContent.style.maxHeight = "0px";
}
}

// Toggle on button click
backgrounderToggle.addEventListener("click", function(e) {
e.preventDefault();
// Toggle open/close based on current state
toggleBackgrounder(backgrounderContent.style.maxHeight === "0px");
});

// Check for hash in URL to auto-expand section
if (window.location.hash === "#backgrounder") {
// Scroll to section first with offset
const rect = backgrounderToggle.getBoundingClientRect();
window.scrollTo({
top: window.scrollY + rect.top - 100, // 100px offset from the top
behavior: "smooth"
});

// Then open it after a short delay to allow scroll animation
setTimeout(() => {
toggleBackgrounder(true);
}, 300);
}
}
});
</script>
</body>
</html>

shopdowntown.org Ads.txt file

Ads.Txt Alerts - A trading name of Red Volcano Limited Waterloo Buildings, Second Floor Rear, 53 London Road, Southampton, Hampshire, United Kingdom, SO15 2AD Contact ⋅ Sites ⋅ Terms of Use ⋅ Privacy Policy © Red Volcano 2020. All Rights Reserved.

Ads.Txt Alerts - A trading name of Red Volcano Limited

Waterloo Buildings, Second Floor Rear, 53 London Road, Southampton, Hampshire, United Kingdom, SO15 2AD

Contact

⋅

Sites

⋅

Terms of Use

⋅

Privacy Policy

© Red Volcano 2020. All Rights Reserved.