Scribd
Upload
7 views23 pages

Index

The document outlines a PHP-based digital marketplace named Swezze, where creators can sell various digital products such as eBooks, templates, and software for a low fee of $0.25 per sale. It includes a simulated product data array and extensive HTML structure with CSS styling for a visually appealing user interface. The marketplace emphasizes ease of use, instant store launch, and profit retention for creators.

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
7 views23 pages

Index

The document outlines a PHP-based digital marketplace named Swezze, where creators can sell various digital products such as eBooks, templates, and software for a low fee of $0.25 per sale. It includes a simulated product data array and extensive HTML structure with CSS styling for a visually appealing user interface. The marketplace emphasizes ease of use, instant store launch, and profit retention for creators.

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/ 23

<?

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-paintbrush', '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 - Sell Your Creations for Just $0.25
Per Sale">
<meta property="og:description" content="Launch your digital store instantly —
no fees, no stress, pure profit.">
<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&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=clash-
display@400;500;700;600;800&display=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: 'Clash Display', 'Manrope', sans-serif;
font-weight: 700;
font-size: clamp(1.8rem, 4vw, 2.2rem);
color: var(--gold) !important;
letter-spacing: 0.08em;
text-shadow: 0 4px 12px rgba(234, 179,8, 0.4);
transition: color 0.4s ease, transform 0.3s ease, text-shadow 0.3s
ease;
}

.navbar-brand:hover {
color: var(--accent-purple) !important;
transform: scale(1.05);
text-shadow: 0 6px 16px rgba(196, 181,253, 0.6);
}

.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: 'Clash Display', 'Manrope', sans-serif;
font-size: clamp(3.2rem, 9.5vw, 6rem);
font-weight: 800;
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
letter-spacing: -0.01em;
color: var(--white);
text-shadow: 0 6px 16px rgba(0, 0,0, 0.6);
}

header p {
font-family: 'Clash Display', 'Manrope', sans-serif;
font-size: clamp(1.3rem, 3vw, 1.6rem);
font-weight: 600;
max-width: 700px;
margin: 0 auto 2.5rem;
color: var(--light-purple);
letter-spacing: 0.02em;
position: relative;
z-index: 2;
text-shadow: 0 3px 8px rgba(0, 0,0, 0.4);
}

.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;
}

/* 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: 'Clash Display', 'Manrope', sans-serif;
font-size: clamp(2.4rem, 5.5vw, 3.6rem);
font-weight: 700;
color: var(--white);
margin-bottom: 2rem;
text-shadow: 0 5px 12px rgba(0, 0,0, 0.5);
letter-spacing: 0.01em;
}

/* Slogan-specific styling */
.slogan {
font-family: 'Clash Display', 'Manrope', sans-serif;
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
font-weight: 600;
color: var(--light-purple);
text-shadow: 0 3px 8px rgba(0, 0,0, 0.4);
letter-spacing: 0.03em;
}

/* 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.6rem, 3.5vw, 1.8rem); }
header h1 { font-size: clamp(2.8rem, 7.5vw, 4.5rem); }
header p { font-size: clamp(1.1rem, 2.5vw, 1.3rem); }
.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); }
.parallax { background-attachment: scroll; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
.slogan { font-size: clamp(1rem, 2.2vw, 1.2rem); }
}

@media (max-width: 576px) {


header h1 { font-size: clamp(2.2rem, 6.5vw, 3.5rem); }
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; }
.navbar-brand { font-size: clamp(1.4rem, 3vw, 1.6rem); }
header p { font-size: clamp(1rem, 2.3vw, 1.2rem); }
.slogan { font-size: clamp(0.9rem, 2vw, 1.1rem); }
}
</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">Sell Your Creations for Just $0.25 Per
Sale.</h1>
<p class="fade-in" style="animation-delay: 0.4s;">Launch your digital store
instantly — no fees, no stress, pure profit.</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>

<!-- 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="slogan 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="slogan 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="slogan 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+8vLE0W4v2XI6pKxD+0Ne0w3H7/wnW01q2s+3GKLz7Jry
Q4vFnL6qT8R62g==" 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));
.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: cover;
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: 'Clash Display', sans-serif;
font-size: clamp(3.2rem, 9.5vw, 6rem);
font-weight: 800;
margin-bottom: 2rem;
position: relative;
z-index: 2;
letter-spacing: -0.05rem;
color: var(--white);
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

header p {
font-family: 'Clash Display', sans-serif;
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: 600;
max-width: 600px;
margin: 0 auto 2.5rem;
color: var(--light-purple);
letter-spacing: 2;
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: bold;
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: bold;
font-size: clamp(1.15rem, 2.5vw, 1.25rem);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
z-index: 2;
box-shadow: 0 8px 25px rgba(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.5);
}

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

/* 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: 'Clash Display', sans-serif;
font-size: clamp(2.4rem, 5vw, 3.2rem);
color: var(--white);
margin-bottom: 2;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Card Styling (General) */


.testimonial-item, .pricing-column, .creator-item {
background: #1e1435;
padding: 2.5rem;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
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.3);
border: 1px solid var(--gold);
}

/* Card Styling (Reverted Sections) */


.product-item, .feature-item {
background: #1E1435;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 10px 10px rgba(0,0,0,0.2);
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 20px rgba(0,0,0,0.25);
border-bottom: 1px solid var(--accent-purple);
}

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


item::before, .pricing-column::before, .creator-item::after {
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, 24px);
font-weight: bold;
margin-bottom: 0.75rem;
}

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


p.pricing-column p, .creator-item p {
font-size: 14px;
color: var(--light-purple);
margin-bottom: 0;
}

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

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


.card-icon:hover {
transform: rotate(3deg) scale(1.1);
}
/* Creator Avatars */
.creator {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--accent-purple);
margin-bottom: 1rem;
object-fit: cover;
border: 2px 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: 100px;
}

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

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

/* Newsletter */
.newsletter {
text-align: center;
background: var(--gradient);
padding: clamp(100px, 16vw, 120px);
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),
transparent 70%);
z-index: 0;
}

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

.newsletter input {
padding: 15px 25px;
border-radius: 50px;
border: none;
width: clamp(300px, 85%, 500px);
font-size: 1rem;
background: rgba(255,255,255,0.2);
transition: all 0.3s ease;
box-shadow: 0 0 10px var(--shadow);
}

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

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

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

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

/* Footer */
footer {
background: #1e1435;
padding: 4rem 0;
text-align: center;
color: var(--light-purple);
font-size: 1rem;
}

footer a {
color: var(--accent-purple);
text-decoration: none;
margin: 0 1rem;
transition: color 0.3s ease;
}

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

.trust-logos img {
height: 40px;
margin: 0 10px;
filter: grayscale(50%);
transition: filter 0.5s ease;
}

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

/* Mobile Optimization */
@media (max-width: 768px) {
header { padding: clamp(100px, 15vw, 120px) 1rem; }
section { padding: clamp(60px, 10vw, 80px); }
.navbar { padding: 0.5rem 1rem; }
.navbar-brand { font-size: clamp(1.5rem, 3vw, 1.7rem); }
header h1 { font-size: clamp(2.5rem, 3vw, 3rem); }
header p2 { font-size: clamp(1rem, 2vw, 2rem); }
.cta-button { padding: 12px 30px; font-size: clamp(0.9rem,
2vw, 1rem); }
.cta-button.secondary { margin-left: 0; margin-top: 1rem; }
.newsletter { padding: clamp(60px, 10vw, 80px); }
.newsletter input { width: 100%; padding: 12px 20px; }
.newsletter-form

You might also like