Scribd
Upload
0 views20 pages

Index

The document outlines the structure and styling of a digital marketplace website called Swezze, which allows creators to sell various digital products like eBooks, templates, and software. It includes a simulated product data array, meta tags for SEO, and extensive CSS styling for a visually appealing user interface. The design features a responsive layout, animations, and interactive elements to enhance user experience.

Uploaded by

rizz99433
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0 views20 pages

Index

The document outlines the structure and styling of a digital marketplace website called Swezze, which allows creators to sell various digital products like eBooks, templates, and software. It includes a simulated product data array, meta tags for SEO, and extensive CSS styling for a visually appealing user interface. The design features a responsive layout, animations, and interactive elements to enhance user experience.

Uploaded by

rizz99433
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 20

<?

php
session_start();
// Simulate dynamic product data (replace with DB query in production)
$products = [
['name' => 'eBook Guide', 'icon' => 'fas fa-book', 'description' => 'Share your
expertise with tutorials or guides.'],
['name' => 'Notion Template', 'icon' => 'fas fa-layer-group', 'description' =>
'Sell sleek templates for productivity.'],
['name' => 'Custom Fonts', 'icon' => 'fas fa-paint-brush', 'description' =>
'Offer unique fonts or graphic assets.'],
['name' => 'Audio Course', 'icon' => 'fas fa-music', 'description' => 'Create
and sell audio tracks or courses.'],
['name' => 'Software Plugin', 'icon' => 'fas fa-code', 'description' => 'Build
and sell plugins or software.'],
['name' => 'Digital Asset', 'icon' => 'fas fa-globe', 'description' => 'Sell
any digital creation, no limits.'],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-
to-fit=no">
<meta name="description" content="Swezze - The ultimate digital marketplace for
creators. Sell eBooks, templates, software, and more for just $0.25 per sale.">
<meta name="keywords" content="digital marketplace, sell digital products,
creator platform, eBooks, templates, software, creative assets">
<meta name="author" content="Swezze">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#7C3AED">
<meta property="og:title" content="Swezze - Ultimate Digital Marketplace">
<meta property="og:description" content="Explode your income with Swezze. Sell
eBooks, templates, and more for just $0.25 per sale.">
<meta property="og:image" content="https://swezze.com/assets/og-image.jpg">
<meta property="og:url" content="https://swezze.com">
<meta property="og:type" content="website">
<title>Swezze - Ultimate Digital Marketplace</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Manrope:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;900&di
splay=swap" rel="stylesheet">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg
0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:root {
--primary-purple: #7C3AED;
--dark-purple: #4C1D95;
--accent-purple: #C4B5FD;
--black: #0A0B0F;
--white: #FFFFFF;
--light-purple: #EDE9FE;
--gold: #EAB308;
--shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
--gradient: linear-gradient(135deg, var(--primary-purple) 0%, var(--
dark-purple) 100%);
--light-bg: #F3F4F6;
--light-text: #1F2937;
}

[data-theme="light"] {
--black: #F3F4F6;
--white: #1F2937;
--light-purple: #1E1435;
--gradient: linear-gradient(135deg, #A78BFA 0%, #6D28D9 100%);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}

body {
font-family: 'Manrope', sans-serif;
background: linear-gradient(180deg, var(--black) 0%, #1E1435 100%);
color: var(--white);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background 0.4s ease, color 0.4s ease;
}

/* Navbar */
.navbar {
background: rgba(10, 11, 15, 0.85);
backdrop-filter: blur(20px);
padding: 1rem 2rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: background 0.4s ease;
}

.navbar.scrolled {
background: rgba(10, 11, 15, 0.95);
box-shadow: var(--shadow);
}

.navbar-brand {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: clamp(1.6rem, 3.5vw, 1.8rem);
color: var(--gold) !important;
letter-spacing: 0.06em;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
transition: color 0.4s ease;
}

.navbar-brand:hover { color: var(--accent-purple) !important; }

.nav-link {
color: var(--light-purple) !important;
font-weight: 600;
font-size: clamp(0.9rem, 2vw, 1rem);
margin: 0 0.75rem;
position: relative;
transition: color 0.4s ease;
}

.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background: var(--gold);
transition: width 0.4s ease;
}

.nav-link:hover::after { width: 100%; }


.nav-link:hover { color: var(--gold) !important; }

/* Theme Toggle */
.theme-toggle {
background: none;
border: none;
color: var(--light-purple);
font-size: 1.3rem;
cursor: pointer;
transition: transform 0.4s ease, color 0.4s ease;
}

.theme-toggle:hover {
color: var(--gold);
transform: rotate(20deg);
}

/* Animations */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}

@keyframes pulseGlow {
0% { box-shadow: 0 0 10px var(--accent-purple); }
50% { box-shadow: 0 0 25px var(--accent-purple); }
100% { box-shadow: 0 0 10px var(--accent-purple); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}

.fade-in { opacity: 0; animation: fadeInUp 1s ease-out forwards; }


.scale-in { opacity: 0; animation: scaleIn 0.8s ease-out forwards; }
.pulse-glow { animation: pulseGlow 2.5s infinite; }

/* Hero Section */
header {
background: var(--gradient);
text-align: center;
padding: clamp(140px, 22vw, 200px) 2rem;
position: relative;
overflow: hidden;
background-image: url('https://via.placeholder.com/1920x1080?
text=Hero+Background');
background-attachment: fixed;
background-size: cover;
}

#hero-webgl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.7;
}

header h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 9vw, 5.5rem);
font-weight: 900;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
letter-spacing: -0.02em;
color: var(--white);
text-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

header p {
font-size: clamp(1.2rem, 2.8vw, 1.4rem);
max-width: 700px;
margin: 0 auto 2.5rem;
color: var(--light-purple);
font-weight: 300;
position: relative;
z-index: 2;
}

.hero-features {
max-width: 650px;
margin: 2.5rem auto;
font-size: clamp(1.05rem, 2.2vw, 1.15rem);
color: var(--light-purple);
position: relative;
z-index: 2;
}

.hero-features li {
display: flex;
align-items: center;
margin-bottom: 1rem;
}

.hero-features li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--gold);
margin-right: 1rem;
}

.cta-button {
display: inline-block;
background: var(--gold);
color: var(--black);
padding: 18px 60px;
border-radius: 50px;
font-weight: 700;
font-size: clamp(1.15rem, 2.5vw, 1.35rem);
text-decoration: none;
transition: all 0.5s ease;
position: relative;
z-index: 2;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.cta-button.secondary {
background: transparent;
border: 2px solid var(--gold);
color: var(--white);
margin-left: 1.5rem;
}

.cta-button:hover {
background: var(--accent-purple);
color: var(--white);
transform: translateY(-5px) scale(1.05);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
}

.cta-button.secondary:hover {
background: var(--gold);
color: var(--black);
border-color: transparent;
}

/* Sales Pop-up */
.sales-popup {
position: fixed;
bottom: 90px;
left: 30px;
background: rgba(30, 20, 53, 0.95);
color: var(--light-purple);
padding: 1rem 2rem;
border-radius: 16px;
box-shadow: var(--shadow);
z-index: 1000;
display: none;
font-size: 0.95rem;
max-width: 320px;
border: 1px solid var(--gold);
}

/* Sticky CTA */
.sticky-cta {
position: fixed;
bottom: 40px;
right: 40px;
z-index: 1001;
display: none;
padding: 14px 30px;
font-size: 1.1rem;
border-radius: 50px;
background: var(--gold);
color: var(--black);
animation: bounce 2.5s infinite;
}

/* Sections */
section {
padding: clamp(80px, 15vw, 120px) 2rem;
position: relative;
}

.parallax {
background-attachment: fixed;
background-position: center;
background-size: cover;
}

h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 3.2rem);
color: var(--white);
margin-bottom: 2rem;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Card Styling (General) */


.testimonial-item, .pricing-column, .creator-item {
background: #1E1435;
padding: 2.5rem;
border-radius: 24px;
box-shadow: var(--shadow);
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
transform: perspective(800px);
}
.testimonial-item:hover, .pricing-column:hover, .creator-item:hover {
transform: perspective(800px) rotateY(2deg) translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
border: 1px solid var(--gold);
}

/* Card Styling (Reverted Sections) */


.product-item, .feature-item {
background: #1E1435;
padding: 2.5rem;
border-radius: 24px;
box-shadow: var(--shadow);
text-align: center;
transition: all 0.3s ease;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}

.product-item:hover, .feature-item:hover {
transform: scale(1.03);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
border: 1px solid var(--accent-purple);
}

.product-item::before, .feature-item::before, .testimonial-


item::before, .pricing-column::before, .creator-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}

.product-item:hover::before, .feature-item:hover::before, .testimonial-


item:hover::before, .pricing-column:hover::before, .creator-item:hover::before {
opacity: 0.15;
}

.product-item h3, .feature-item h3, .testimonial-item strong, .pricing-


column h3, .creator-item h3 {
font-family: 'Manrope', sans-serif;
color: var(--accent-purple);
font-size: clamp(1.4rem, 2.4vw, 1.6rem);
font-weight: 600;
margin-bottom: 0.75rem;
}

.product-item p, .feature-item p, .testimonial-item p, .pricing-column


p, .creator-item p {
font-size: clamp(0.95rem, 1.9vw, 1.05rem);
color: var(--light-purple);
font-weight: 300;
margin-bottom: 0;
}

.card-icon {
font-size: 2.8rem;
color: var(--gold);
margin-bottom: 1rem;
transition: transform 0.4s ease;
}

.product-item:hover .card-icon, .feature-item:hover .card-


icon, .testimonial-item:hover .card-icon, .pricing-column:hover .card-
icon, .creator-item:hover .card-icon {
transform: rotate(4deg) scale(1.15);
}

/* Creator Avatars */
.creator-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--accent-purple);
margin-bottom: 1.2rem;
object-fit: cover;
border: 3px solid var(--gold);
transition: transform 0.5s ease;
}

.creator-item:hover .creator-avatar {
transform: scale(1.2) rotate(5deg);
}

/* Pricing */
.pricing-column {
background: var(--white);
color: var(--black);
min-height: 300px;
}

.pricing-column ul {
list-style: none;
padding: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 120px;
}

.pricing-column ul li {
font-size: 1rem;
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
}

.pricing-column ul li::before {
content: '\f058';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--primary-purple);
margin-right: 0.75rem;
}

/* Newsletter */
.newsletter {
text-align: center;
background: var(--gradient);
padding: clamp(100px, 16vw, 120px) 2rem;
position: relative;
overflow: hidden;
background-image: url('https://via.placeholder.com/1920x1080?
text=Newsletter+Background');
background-attachment: fixed;
background-size: cover;
}

.newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%,
transparent 70%);
z-index: 0;
}

.newsletter-form {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
position: relative;
z-index: 2;
}

.newsletter input {
padding: 18px 30px;
border-radius: 50px;
border: none;
width: clamp(300px, 85%, 500px);
font-size: 1.1rem;
background: rgba(255, 255, 255, 0.9);
transition: all 0.5s ease;
box-shadow: 0 0 20px var(--accent-purple);
}

.newsletter input:focus {
outline: none;
box-shadow: 0 0 25px var(--gold);
}

.newsletter input::placeholder {
color: var(--light-purple);
transition: transform 0.5s ease;
}

.newsletter input:focus::placeholder {
transform: translateX(15px);
}

.newsletter .error {
color: #F87171;
font-size: 0.95rem;
margin-top: 1rem;
display: none;
font-weight: 400;
width: 100%;
text-align: center;
}

/* Footer */
footer {
background: #1E1435;
padding: 4rem 2rem;
text-align: center;
color: var(--light-purple);
font-size: clamp(0.95rem, 2vw, 1.05rem);
font-weight: 300;
}

footer a {
color: var(--accent-purple);
text-decoration: none;
margin: 0 1.5rem;
transition: color 0.4s ease;
font-weight: 400;
}

footer a:hover { color: var(--gold); }

.trust-logos img {
height: 45px;
margin: 0 1.2rem;
filter: grayscale(70%);
transition: filter 0.4s ease;
}

.trust-logos img:hover { filter: grayscale(0%); }

/* Mobile Optimizations */
@media (max-width: 768px) {
header { padding: clamp(120px, 18vw, 160px) 1.5rem; }
section { padding: clamp(60px, 12vw, 80px) 1.5rem; }
.navbar { padding: 0.75rem 1.5rem; }
.navbar-brand { font-size: clamp(1.4rem, 3vw, 1.6rem); }
header h1 { font-size: clamp(2.5rem, 7vw, 4rem); }
header p { font-size: clamp(1rem, 2.3vw, 1.2rem); }
.cta-button { padding: 16px 50px; font-size: clamp(1.05rem, 2.2vw,
1.2rem); }
.cta-button.secondary { margin-left: 0; margin-top: 1.2rem; }
.newsletter { padding: clamp(80px, 14vw, 100px) 1.5rem; }
.newsletter input { width: 100%; padding: 16px 28px; }
.newsletter-form { flex-direction: column; align-items: center; }
.product-item, .feature-item, .testimonial-item, .pricing-
column, .creator-item {
padding: 2rem;
min-height: 260px;
margin-bottom: 2rem;
border-radius: 20px;
}
.card-icon { font-size: 2.5rem; }
.creator-avatar { width: 90px; height: 90px; }
.sticky-cta { padding: 12px 25px; font-size: 1rem; border-radius: 50px;
}
.col-md-6, .col-lg-4 { width: 100%; }
#hero-webgl { display: none; }
header, .newsletter { background: var(--gradient); }
.sales-popup { bottom: 70px; left: 20px; max-width: 300px; font-size:
0.9rem; }
.parallax { background-attachment: scroll; }
}

@media (max-width: 576px) {


header h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.hero-features { font-size: clamp(0.9rem, 2vw, 1rem); }
.product-item h3, .feature-item h3, .testimonial-item strong, .pricing-
column h3, .creator-item h3 {
font-size: clamp(1.3rem, 2.2vw, 1.5rem);
}
.sticky-cta { bottom: 30px; right: 30px; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg" role="navigation" aria-label="Main
navigation">
<div class="container-fluid px-3">
<a class="navbar-brand" href="#" aria-label="Swezze Home">Swezze</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end"
id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#home" aria-
label="Home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#marketplace"
aria-label="Marketplace">Marketplace</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing" aria-
label="Pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#features" aria-
label="Features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#creators" aria-
label="Creators">Creators</a></li>
<li class="nav-item"><a class="nav-link" href="#login" aria-
label="Login">Login</a></li>
<li class="nav-item">
<button class="theme-toggle" aria-label="Toggle theme"><i
class="fas fa-moon"></i></button>
</li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->


<header id="home" class="parallax">
<div id="hero-webgl"></div>
<h1 class="fade-in typewriter">Explode Your Income with Just $0.25 a Sale!
</h1>
<p class="fade-in" style="animation-delay: 0.4s;">Create, Sell, Cash In –
Worldwide, Instantly!</p>
<ul class="hero-features fade-in" style="animation-delay: 0.5s;">
<li>No setup fees, no monthly costs.</li>
<li>Sell eBooks, templates, plugins, and more.</li>
<li>Reach billions in 190+ countries.</li>
</ul>
<div class="fade-in" style="animation-delay: 0.6s;">
<a href="#signup" class="cta-button pulse-glow" aria-label="Start
Selling Now">Start Selling Now</a>
<a href="#demo" class="cta-button secondary pulse-glow" aria-
label="Watch Demo">Watch Demo</a>
</div>
</header>

<!-- Sales Pop-up -->


<div class="sales-popup" id="sales-popup"></div>

<!-- What Can You Sell -->


<section class="container" id="marketplace">
<h2 class="text-center mb-4 fade-in">Sell Any Digital Gem,
Hassle-Free!</h2>
<div class="row g-3 justify-content-center">
<?php foreach ($products as $index => $product): ?>
<div class="col-12 col-md-6 col-lg-4">
<div class="product-item scale-in" style="animation-delay: <?
php echo 0.2 + $index * 0.1; ?>s;">
<i class="<?php echo htmlspecialchars($product['icon']); ?>
card-icon"></i>
<h3><?php echo htmlspecialchars($product['name']); ?></h3>
<p><?php echo htmlspecialchars($product['description']); ?
></p>
</div>
</div>
<?php endforeach; ?>
</div>
</section>

<!-- Why Swezze -->


<section class="container" id="features">
<h2 class="text-center mb-4 fade-in">Why Swezze Makes Creators Rich!</h2>
<div class="row g-3 justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.2s;">
<i class="fas fa-rocket card-icon"></i>
<h3>Instant Setup</h3>
<p>Launch your store in seconds.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.3s;">
<i class="fas fa-shield-alt card-icon"></i>
<h3>Secure Payments</h3>
<p>Trusted global gateways.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.4s;">
<i class="fas fa-bolt card-icon"></i>
<h3>Instant Delivery</h3>
<p>Products sent instantly.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.5s;">
<i class="fas fa-chart-line card-icon"></i>
<h3>Live Analytics</h3>
<p>Track sales in real-time.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.6s;">
<i class="fas fa-globe-americas card-icon"></i>
<h3>Global Reach</h3>
<p>Sell to 190+ countries.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-item scale-in" style="animation-delay: 0.7s;">
<i class="fas fa-lock card-icon"></i>
<h3>SSL-Secured</h3>
<p>100% secure platform.</p>
</div>
</div>
</div>
</section>

<!-- Featured Creators -->


<section class="container parallax" id="creators">
<h2 class="text-center mb-4 fade-in">Creators Like You Are Killing It!</h2>
<div class="row g-4 justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="creator-item scale-in" style="animation-delay: 0.3s;">
<div class="creator-avatar" style="background-image:
url('https://via.placeholder.com/90?text=Sarah');"></div>
<h3>Sarah Lee</h3>
<p>Earned $75K+ with eBooks</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="creator-item scale-in" style="animation-delay: 0.4s;">
<div class="creator-avatar" style="background-image:
url('https://via.placeholder.com/90?text=Mike');"></div>
<h3>Mike Chen</h3>
<p>Sold 1,500+ templates</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="creator-item scale-in" style="animation-delay: 0.5s;">
<div class="creator-avatar" style="background-image:
url('https://via.placeholder.com/90?text=Emma');"></div>
<h3>Emma Davis</h3>
<p>Hit $3M+ with courses</p>
</div>
</div>
</div>
</section>

<!-- Pricing -->


<section class="container text-center parallax" id="pricing">
<h2 class="mb-4 fade-in">Pricing That Keeps Your Profits High!</h2>
<p class="mb-4 fade-in" style="animation-delay: 0.3s;">Pay only when you
earn – no subscriptions!</p>
<div class="row g-4 justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="pricing-column scale-in" style="animation-delay:
0.4s;">
<i class="fas fa-dollar-sign card-icon"></i>
<h3>$0.25 Per Sale</h3>
<ul>
<li>Low fee per sale.</li>
<li>No monthly costs.</li>
<li>Unlimited listings.</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="pricing-column scale-in" style="animation-delay:
0.5s;">
<i class="fas fa-credit-card card-icon"></i>
<h3>~4.5% Transaction Fee</h3>
<ul>
<li>Via Stripe, PayPal, Razorpay.</li>
<li>Swezze takes 0% of this.</li>
</ul>
</div>
</div>
</div>
</section>

<!-- Testimonials -->


<section class="container text-center parallax" id="testimonials">
<h2 class="mb-4 fade-in">Why Creators Can’t Stop Loving Swezze!</h2>
<div class="row g-4 justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="testimonial-item scale-in" style="animation-delay:
0.3s;">
<i class="fas fa-quote-left card-icon"></i>
<p>"Swezze turned my hobby into a cash machine. Unreal!"</p>
<strong>Sarah Lee, Author</strong>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="testimonial-item scale-in" style="animation-delay:
0.4s;">
<i class="fas fa-quote-left card-icon"></i>
<p>"Built my store in minutes. Swezze is a goldmine!"</p>
<strong>Mike Chen, Designer</strong>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="testimonial-item scale-in" style="animation-delay:
0.5s;">
<i class="fas fa-quote-left card-icon"></i>
<p>"Tiny fees, huge reach – Swezze is creator heaven!"</p>
<strong>Emma Davis, Musician</strong>
</div>
</div>
</div>
</section>

<!-- Newsletter & CTA -->


<section class="newsletter parallax" id="newsletter">
<h2 class="fade-in">Kickstart Your Creator Cash Machine!</h2>
<p class="mb-4 fade-in" style="animation-delay: 0.3s;">Join 15,000+
Creators Cashing In – Free!</p>
<a href="#signup" class="cta-button fade-in pulse-glow" style="animation-
delay: 0.4s;" aria-label="Start Selling Now">Start Selling Now</a>
<div class="mt-4">
<p class="fade-in" style="animation-delay: 0.5s;">Get exclusive tips to
skyrocket your sales.</p>
<form id="newsletter-form" class="newsletter-form fade-in"
style="animation-delay: 0.6s;" onsubmit="return validateForm(event)" novalidate>
<?php $csrf_token = bin2hex(random_bytes(32));
$_SESSION['csrf_token'] = $csrf_token; ?>
<input type="hidden" name="csrf_token" value="<?php echo
htmlspecialchars($csrf_token); ?>">
<input type="email" id="email" name="email" placeholder="Enter your
email" class="pulse-glow" aria-label="Email for newsletter subscription" required>
<button type="submit" class="cta-button pulse-glow" aria-label="Get
Started Free">Get Started Free</button>
<p class="error" id="email-error">Please enter a valid email
address.</p>
</form>
</div>
</section>

<!-- Sticky CTA -->


<a href="#signup" class="cta-button sticky-cta pulse-glow" aria-label="Start
Selling Now">Start Selling Now</a>

<!-- Footer -->


<footer>
<div class="trust-logos mb-4">
<img src="https://via.placeholder.com/40?text=Stripe" alt="Stripe
Logo">
<img src="https://via.placeholder.com/40?text=PayPal" alt="PayPal
Logo">
<img src="https://via.placeholder.com/40?text=SSL" alt="SSL Certified">
</div>
<p class="fade-in">Secure Payments • Trusted Platform • 24/7 Support</p>
<p class="fade-in" style="animation-delay: 0.2s;">
<a href="#about" aria-label="About Swezze">About</a> |
<a href="#contact" aria-label="Contact Swezze">Contact</a> |
<a href="#terms" aria-label="Terms of Service">Terms</a> |
<a href="#privacy" aria-label="Privacy Policy">Privacy</a>
</p>
<p class="fade-in" style="animation-delay: 0.3s;">© <?php echo date("Y"); ?
> Swezze. All rights reserved.</p>
</footer>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-7u5cV+2bEd2T2YF1yB1gH7wJ2xU+HV+2EOMxAjV+3v0A/2N8f+5jG+UgEPjQeb8hZ
ZeKTL5OampqW3n0K0b7gPw==" crossorigin="anonymous" referrerpolicy="no-referrer"
defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-xek/ve3gU1n69HWN13jd+8vLE0W4TK6KJHX0v2XI6pKxD+0Ne0w3H7/
wnW01q2s+3GKLz7JryQ4vFnL6qT8R62g==" crossorigin="anonymous" referrerpolicy="no-
referrer" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"
integrity="sha512-2c/vi3bKie1LsVpjFkc7Wj3fhO6lB/2T5e3uQixCRcs3Usw6RZoH0ZMcOmqTjO4vQ
J2bI+PuA==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
<script>
// WebGL Background with Interactivity
try {
if (window.innerWidth > 768) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas:
document.getElementById('hero-webgl'), alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.z = 10;

const geometry = new THREE.BufferGeometry();


const vertices = [];
const colors = [];
for (let i = 0; i < 1500; i++) {
vertices.push(
Math.random() * 20 - 10,
Math.random() * 20 - 10,
Math.random() * 20 - 10
);
colors.push(Math.random(), 0.5 + Math.random() * 0.5, 0.8);
}
geometry.setAttribute('position', new
THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('color', new
THREE.Float32BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({ size: 0.06,
vertexColors: true });
const points = new THREE.Points(geometry, material);
scene.add(points);
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = (e.clientX / window.innerWidth) * 2 - 1;
mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
});

function animate() {
points.rotation.y += 0.002 + mouseX * 0.005;
points.rotation.x += 0.001 + mouseY * 0.005;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
animate();

window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
}
} catch (e) {
console.error('WebGL failed:', e);
}

// Theme Toggle
document.querySelector('.theme-toggle').addEventListener('click', () => {
const body = document.body;
const icon = document.querySelector('.theme-toggle i');
if (body.dataset.theme === 'light') {
body.dataset.theme = 'dark';
icon.classList.replace('fa-sun', 'fa-moon');
gsap.to(icon, { rotation: -360, duration: 0.5 });
} else {
body.dataset.theme = 'light';
icon.classList.replace('fa-moon', 'fa-sun');
gsap.to(icon, { rotation: 360, duration: 0.5 });
}
});

// Sticky Navbar
window.addEventListener('scroll', () => {
document.querySelector('.navbar').classList.toggle('scrolled',
window.scrollY > 50);
});

// Sticky CTA Visibility


try {
const stickyCta = document.querySelector('.sticky-cta');
const heroSection = document.querySelector('header');
if (window.innerWidth <= 768) {
window.addEventListener('scroll', () => {
const heroBottom = heroSection.getBoundingClientRect().bottom;
if (heroBottom < 0) {
stickyCta.style.display = 'block';
gsap.fromTo(stickyCta, { opacity: 0, scale: 0.8 },
{ opacity: 1, scale: 1, duration: 0.5, ease: 'power3.out' });
} else {
gsap.to(stickyCta, {
opacity: 0,
scale: 0.8,
duration: 0.5,
ease: 'power3.in',
onComplete: () => { stickyCta.style.display = 'none'; }
});
}
});
}
} catch (e) {
console.error('Sticky CTA failed:', e);
}

// GSAP Animations
try {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.fade-in').forEach((el, i) => {
gsap.from(el, {
opacity: 0,
y: 40,
duration: 1,
ease: 'power4.out',
delay: i * 0.15,
scrollTrigger: { trigger: el, start: 'top 85%' }
});
});

gsap.utils.toArray('.scale-in').forEach((el, i) => {
gsap.from(el, {
opacity: 0,
scale: 0.85,
duration: 0.8,
ease: 'power4.out',
delay: i * 0.1,
scrollTrigger: { trigger: el, start: 'top 85%' }
});
});

// Typewriter Effect
const typewriter = document.querySelector('.typewriter');
if (typewriter) {
const text = typewriter.textContent;
typewriter.textContent = '';
gsap.to(typewriter, {
text: text,
duration: 3,
ease: 'none',
delay: 0.5
});
}
} catch (e) {
console.error('GSAP failed:', e);
}

// Sales Pop-ups
try {
const salesMessages = [
'Liam sold an eBook for $29!',
'Noah sold an audio course for $79!'
];
function showSalesPopup() {
const popup = document.getElementById('sales-popup');
if (!popup) return;
popup.textContent = salesMessages[Math.floor(Math.random() *
salesMessages.length)];
popup.style.display = 'block';
gsap.fromTo(popup,
{ opacity: 0, x: -30 },
{ opacity: 1, x: 0, duration: 0.6, ease: 'power4.out' }
);
gsap.to(popup, {
opacity: 0,
x: 30,
duration: 0.6,
delay: 5,
ease: 'power4.in',
onComplete: () => { popup.style.display = 'none'; }
});
setTimeout(showSalesPopup, 12000);
}
setTimeout(showSalesPopup, 5000);
} catch (e) {
console.error('Sales popup failed:', e);
}

// Newsletter Form Validation


function validateForm(event) {
event.preventDefault();
const email = document.getElementById('email').value.trim();
const emailError = document.getElementById('email-error');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {
emailError.style.display = 'block';
emailError.setAttribute('role', 'alert');
gsap.from(emailError, { opacity: 0, y: 10, duration: 0.5 });
return false;
}

emailError.style.display = 'none';
// Simulate form submission
fetch('/subscribe.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
'email': email,
'csrf_token': '<?php echo htmlspecialchars($csrf_token); ?>'
})
})
.then(response => response.json())
.then(data => {
alert(data.message || 'Thank you for subscribing!');
document.getElementById('newsletter-form').reset();
})
.catch(() => alert('Error subscribing. Please try again.'));
return true;
}
// Real-time Email Validation
document.getElementById('email').addEventListener('input', function() {
const emailError = document.getElementById('email-error');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
emailError.style.display = this.value.trim() && !
emailRegex.test(this.value) ? 'block' : 'none';
});

// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>

You might also like