2026-01-18 02:22:05 -06:00
|
|
|
<!doctype html>
|
2025-12-13 22:59:42 -06:00
|
|
|
<html lang="en">
|
2025-12-19 20:44:46 -06:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
2026-01-18 02:22:05 -06:00
|
|
|
<meta
|
|
|
|
|
name="description"
|
|
|
|
|
content="About Sky Art Shop - Your creative stationery destination"
|
|
|
|
|
/>
|
|
|
|
|
<title>About Us - Sky Art Shop</title>
|
2026-01-19 01:17:43 -06:00
|
|
|
<link rel="icon" type="image/png" href="/favicon.png" />
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<!-- Fonts -->
|
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
2025-12-19 20:44:46 -06:00
|
|
|
<link
|
2026-01-18 02:22:05 -06:00
|
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap"
|
2025-12-19 20:44:46 -06:00
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<!-- Icons -->
|
2025-12-19 20:44:46 -06:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
|
|
|
/>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<!-- Modern Theme CSS -->
|
2026-01-20 20:29:33 -06:00
|
|
|
<link rel="stylesheet" href="/assets/css/modern-theme.css?v=fix35" />
|
2026-01-14 07:16:04 -06:00
|
|
|
<link
|
|
|
|
|
rel="stylesheet"
|
2026-01-20 20:29:33 -06:00
|
|
|
href="/assets/css/mobile-fixes.css?v=20260120fix2"
|
2026-01-14 07:16:04 -06:00
|
|
|
/>
|
2025-12-13 22:59:42 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<style>
|
|
|
|
|
/* About Hero - Smaller/Narrower */
|
|
|
|
|
.about-hero {
|
|
|
|
|
padding: var(--spacing-lg) 0;
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
135deg,
|
|
|
|
|
var(--primary-pink-light) 0%,
|
|
|
|
|
var(--primary-pink) 100%
|
|
|
|
|
);
|
|
|
|
|
}
|
2025-12-13 22:59:42 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-hero h1 {
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
margin-bottom: var(--spacing-sm);
|
|
|
|
|
}
|
2025-12-13 22:59:42 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-hero p {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-19 01:17:43 -06:00
|
|
|
/* Light pink background content area - matches shop page */
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-content-wrapper {
|
2026-01-19 01:17:43 -06:00
|
|
|
background: var(--bg-light);
|
|
|
|
|
padding-top: var(--spacing-xl);
|
2026-01-18 02:22:05 -06:00
|
|
|
padding-bottom: var(--spacing-2xl);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.stats-section {
|
|
|
|
|
background: var(--text-primary);
|
|
|
|
|
color: var(--text-white);
|
|
|
|
|
padding: var(--spacing-2xl) 0;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.stats-grid {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(4, 1fr);
|
|
|
|
|
gap: var(--spacing-xl);
|
2025-12-24 00:13:23 -06:00
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.stat-item h3 {
|
|
|
|
|
font-family: var(--font-heading);
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
margin-bottom: var(--spacing-sm);
|
|
|
|
|
color: var(--primary-pink);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.stat-item p {
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
opacity: 0.9;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.values-grid {
|
2025-12-24 00:13:23 -06:00
|
|
|
display: grid;
|
2026-01-18 02:22:05 -06:00
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
|
|
gap: var(--spacing-xl);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.value-card {
|
2025-12-24 00:13:23 -06:00
|
|
|
text-align: center;
|
2026-01-18 02:22:05 -06:00
|
|
|
padding: var(--spacing-xl);
|
|
|
|
|
background: var(--bg-white);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
transition: var(--transition-smooth);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.value-card:hover {
|
|
|
|
|
transform: translateY(-8px);
|
|
|
|
|
box-shadow: var(--shadow-lg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.value-icon {
|
|
|
|
|
width: 80px;
|
|
|
|
|
height: 80px;
|
|
|
|
|
margin: 0 auto var(--spacing-lg);
|
|
|
|
|
background: var(--primary-pink-light);
|
|
|
|
|
border-radius: var(--radius-full);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
color: var(--text-primary);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.value-card h3 {
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
margin-bottom: var(--spacing-sm);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.value-card p {
|
|
|
|
|
color: var(--text-secondary);
|
|
|
|
|
font-size: 0.95rem;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Dynamic Content Styles */
|
|
|
|
|
.about-dynamic-content {
|
|
|
|
|
background: var(--bg-white);
|
|
|
|
|
padding: var(--spacing-2xl);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
box-shadow: var(--shadow-sm);
|
|
|
|
|
line-height: 1.8;
|
|
|
|
|
font-size: 1.05rem;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content h1,
|
|
|
|
|
.about-dynamic-content h2,
|
|
|
|
|
.about-dynamic-content h3 {
|
|
|
|
|
color: var(--text-primary);
|
|
|
|
|
margin-top: var(--spacing-xl);
|
|
|
|
|
margin-bottom: var(--spacing-md);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content h1:first-child,
|
|
|
|
|
.about-dynamic-content h2:first-child,
|
|
|
|
|
.about-dynamic-content h3:first-child {
|
|
|
|
|
margin-top: 0;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content p {
|
|
|
|
|
margin-bottom: var(--spacing-md);
|
|
|
|
|
color: var(--text-secondary);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content ul,
|
|
|
|
|
.about-dynamic-content ol {
|
|
|
|
|
margin-bottom: var(--spacing-md);
|
|
|
|
|
padding-left: var(--spacing-xl);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content li {
|
|
|
|
|
margin-bottom: var(--spacing-sm);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Float image to the right for content wrap */
|
|
|
|
|
.about-dynamic-content img,
|
|
|
|
|
.about-dynamic-content .ql-image,
|
|
|
|
|
.about-dynamic-content .content-image {
|
|
|
|
|
float: right;
|
|
|
|
|
max-width: 320px;
|
|
|
|
|
margin: 0 0 var(--spacing-lg) var(--spacing-xl);
|
|
|
|
|
border-radius: var(--radius-lg);
|
|
|
|
|
box-shadow: var(--shadow-md);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
/* Cat logo - bigger size, no shadow */
|
|
|
|
|
.about-dynamic-content .about-cat-logo {
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
width: 480px;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
background: transparent;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content::after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: table;
|
|
|
|
|
clear: both;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content img,
|
|
|
|
|
.about-dynamic-content .ql-image,
|
|
|
|
|
.about-dynamic-content .content-image {
|
|
|
|
|
float: none;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
margin: var(--spacing-lg) 0;
|
|
|
|
|
display: block;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.about-dynamic-content .about-cat-logo {
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 320px;
|
2026-01-19 01:17:43 -06:00
|
|
|
margin: 0 auto var(--spacing-lg) auto;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
2026-01-18 02:22:05 -06:00
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
@media (max-width: 992px) {
|
|
|
|
|
.stats-grid {
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
2026-01-18 02:22:05 -06:00
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.values-grid {
|
|
|
|
|
grid-template-columns: 1fr;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
.stats-grid {
|
|
|
|
|
grid-template-columns: 1fr;
|
2025-12-24 00:13:23 -06:00
|
|
|
}
|
|
|
|
|
}
|
2026-01-19 01:17:43 -06:00
|
|
|
|
|
|
|
|
/* Desktop - add more horizontal padding and justify text */
|
|
|
|
|
@media (min-width: 993px) {
|
|
|
|
|
.about-content-wrapper .container,
|
|
|
|
|
.about-hero .container {
|
|
|
|
|
max-width: 1000px !important;
|
|
|
|
|
margin: 0 auto !important;
|
|
|
|
|
padding-left: 60px !important;
|
|
|
|
|
padding-right: 60px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.about-dynamic-content {
|
|
|
|
|
padding: var(--spacing-2xl) var(--spacing-xl) !important;
|
|
|
|
|
text-align: justify !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.about-dynamic-content p {
|
|
|
|
|
text-align: justify !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.about-dynamic-content h1,
|
|
|
|
|
.about-dynamic-content h2,
|
|
|
|
|
.about-dynamic-content h3,
|
|
|
|
|
.about-dynamic-content h4,
|
|
|
|
|
.about-dynamic-content h5,
|
|
|
|
|
.about-dynamic-content h6 {
|
|
|
|
|
text-align: left !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
|
.about-content-wrapper .container,
|
|
|
|
|
.about-hero .container {
|
|
|
|
|
max-width: 1100px !important;
|
|
|
|
|
padding-left: 80px !important;
|
|
|
|
|
padding-right: 80px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
</style>
|
2026-01-18 02:22:05 -06:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<!-- Navigation -->
|
|
|
|
|
<header class="nav-wrapper">
|
|
|
|
|
<nav class="navbar">
|
|
|
|
|
<a href="/home" class="nav-brand">
|
|
|
|
|
<img
|
|
|
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
|
|
|
alt="Sky Art Shop Logo"
|
|
|
|
|
/>
|
|
|
|
|
<span>Sky Art Shop</span>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<ul class="nav-menu">
|
|
|
|
|
<li><a href="/home" class="nav-link">Home</a></li>
|
|
|
|
|
<li><a href="/shop" class="nav-link">Shop</a></li>
|
|
|
|
|
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
|
|
|
|
|
<li><a href="/blog" class="nav-link">Blog</a></li>
|
|
|
|
|
<li><a href="/about" class="nav-link active">About</a></li>
|
|
|
|
|
<li><a href="/contact" class="nav-link">Contact</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
<div class="nav-actions">
|
|
|
|
|
<a href="/signin" class="nav-icon-btn" title="Sign In">
|
|
|
|
|
<i class="bi bi-person"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<button class="nav-icon-btn wishlist-btn-nav" title="Wishlist">
|
|
|
|
|
<i class="bi bi-heart"></i>
|
|
|
|
|
<span class="badge wishlist-count" style="display: none">0</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="nav-icon-btn cart-btn" title="Cart">
|
|
|
|
|
<i class="bi bi-bag"></i>
|
|
|
|
|
<span class="badge cart-count" style="display: none">0</span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="nav-mobile-toggle" aria-label="Toggle menu">
|
|
|
|
|
<span></span>
|
|
|
|
|
<span></span>
|
|
|
|
|
<span></span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<!-- Page Content -->
|
|
|
|
|
<main class="page-content">
|
|
|
|
|
<!-- About Hero (Breadcrumb) -->
|
|
|
|
|
<div class="about-hero">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h1 id="pageTitle">About Us</h1>
|
|
|
|
|
<p id="pageSubtitle">Learn more about Sky Art Shop</p>
|
2026-01-19 01:17:43 -06:00
|
|
|
<div class="breadcrumb">
|
|
|
|
|
<a href="/home">Home</a> <span>/</span> <span>About</span>
|
|
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- White Background Content Wrapper -->
|
|
|
|
|
<div class="about-content-wrapper">
|
|
|
|
|
<!-- Dynamic Content Section -->
|
2026-01-19 01:17:43 -06:00
|
|
|
<section
|
|
|
|
|
class="section"
|
|
|
|
|
style="padding-top: 0; padding-bottom: 3rem; margin-top: 0"
|
|
|
|
|
>
|
|
|
|
|
<div class="container" style="padding-top: 0; margin-top: 0">
|
|
|
|
|
<div
|
|
|
|
|
class="about-dynamic-content"
|
|
|
|
|
id="dynamicContent"
|
|
|
|
|
style="padding-top: 0; margin-top: 0"
|
|
|
|
|
>
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Cat Logo Image - floats right -->
|
|
|
|
|
<img
|
|
|
|
|
src="/uploads/cat_logo_bgremoved-1768630281197.png"
|
|
|
|
|
alt="Sky Art Shop Cat Logo"
|
|
|
|
|
class="content-image about-cat-logo"
|
|
|
|
|
id="aboutCatLogo"
|
|
|
|
|
style="background: transparent"
|
|
|
|
|
/>
|
|
|
|
|
<!-- Dynamic text content will be inserted here -->
|
|
|
|
|
<div id="aboutTextContent">
|
|
|
|
|
<div class="loading-spinner" style="margin: 40px auto"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Our Story (Fallback) -->
|
|
|
|
|
<section
|
|
|
|
|
class="section about-static-content"
|
|
|
|
|
id="staticContent"
|
|
|
|
|
style="padding-top: 0; padding-bottom: 3rem; display: none"
|
|
|
|
|
>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="about-content">
|
|
|
|
|
<div class="about-text">
|
|
|
|
|
<h2>Our Story</h2>
|
|
|
|
|
<p>
|
|
|
|
|
Sky Art Shop was born from a deep love of creativity and the
|
|
|
|
|
belief that everyone has an artist within. What started as a
|
|
|
|
|
small collection of washi tapes and stickers has grown into a
|
|
|
|
|
comprehensive destination for all things stationery.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
We carefully curate each product in our collection, ensuring
|
|
|
|
|
that every item meets our high standards for quality, design,
|
|
|
|
|
and creativity. From bullet journal enthusiasts to
|
|
|
|
|
professional artists, we serve makers of all skill levels.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Our mission is simple: to inspire creativity and provide the
|
|
|
|
|
tools that help you express yourself. Whether you're
|
|
|
|
|
documenting memories, planning your week, or creating handmade
|
|
|
|
|
gifts, we're here to support your creative journey.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="about-image"
|
|
|
|
|
style="box-shadow: none; border-radius: 0; overflow: visible"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
src="/uploads/cat_logo_bgremoved-1768630281197.png"
|
|
|
|
|
alt="Sky Art Shop Cat Logo"
|
|
|
|
|
style="background: transparent; mix-blend-mode: multiply"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- End about-content-wrapper -->
|
|
|
|
|
|
|
|
|
|
<!-- Stats -->
|
|
|
|
|
<section class="stats-section">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="stats-grid">
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<h3>500+</h3>
|
|
|
|
|
<p>Products</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<h3>10K+</h3>
|
|
|
|
|
<p>Happy Customers</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<h3>50+</h3>
|
|
|
|
|
<p>Brands</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="stat-item">
|
|
|
|
|
<h3>5</h3>
|
|
|
|
|
<p>Years of Service</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Our Values -->
|
|
|
|
|
<section class="section" style="background: var(--bg-light)">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
<h2 class="section-title">Our Values</h2>
|
|
|
|
|
<p class="section-subtitle">What drives us every day</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="values-grid">
|
|
|
|
|
<div class="value-card">
|
|
|
|
|
<div class="value-icon">
|
|
|
|
|
<i class="bi bi-star"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Quality First</h3>
|
|
|
|
|
<p>
|
|
|
|
|
We only stock products that meet our rigorous quality standards.
|
|
|
|
|
Every item is tested and approved by our team.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-card">
|
|
|
|
|
<div class="value-icon">
|
|
|
|
|
<i class="bi bi-heart"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Customer Love</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Your satisfaction is our priority. We go above and beyond to
|
|
|
|
|
ensure a wonderful shopping experience.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="value-card">
|
|
|
|
|
<div class="value-icon">
|
|
|
|
|
<i class="bi bi-lightbulb"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Inspire Creativity</h3>
|
|
|
|
|
<p>
|
|
|
|
|
We believe everyone is creative. Our products are designed to
|
|
|
|
|
spark inspiration and fuel imagination.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- Team Section -->
|
|
|
|
|
<section class="section team-section">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="section-header">
|
|
|
|
|
<h2 class="section-title">Meet Our Team</h2>
|
|
|
|
|
<p class="section-subtitle">
|
|
|
|
|
The creative minds behind Sky Art Shop
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="team-grid" id="teamGrid">
|
|
|
|
|
<div
|
|
|
|
|
class="loading-spinner"
|
|
|
|
|
style="grid-column: 1/-1; margin: 40px auto"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- CTA -->
|
|
|
|
|
<section
|
|
|
|
|
class="section"
|
|
|
|
|
style="
|
|
|
|
|
background: linear-gradient(
|
|
|
|
|
135deg,
|
|
|
|
|
var(--primary-pink-light) 0%,
|
|
|
|
|
var(--primary-pink) 100%
|
|
|
|
|
);
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div class="container text-center">
|
|
|
|
|
<h2 class="section-title">Ready to Start Creating?</h2>
|
|
|
|
|
<p class="section-subtitle mb-4">
|
|
|
|
|
Explore our collection and find your next favorite supplies
|
|
|
|
|
</p>
|
|
|
|
|
<a href="/shop" class="btn btn-primary btn-lg">Shop Now</a>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<!-- Footer -->
|
2025-12-13 22:59:42 -06:00
|
|
|
<footer class="footer">
|
2025-12-19 20:44:46 -06:00
|
|
|
<div class="container">
|
|
|
|
|
<div class="footer-grid">
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="footer-about">
|
|
|
|
|
<div class="footer-brand">
|
|
|
|
|
<img
|
|
|
|
|
src="/uploads/cat-png-1767324141436-368259437.png"
|
|
|
|
|
alt="Sky Art Shop"
|
|
|
|
|
/>
|
|
|
|
|
<span>Sky Art Shop</span>
|
|
|
|
|
</div>
|
|
|
|
|
<p>
|
|
|
|
|
Your one-stop shop for scrapbooking, journaling, cardmaking, and
|
|
|
|
|
collaging stationery. Quality products for all your creative
|
|
|
|
|
needs.
|
2025-12-19 20:44:46 -06:00
|
|
|
</p>
|
2026-01-19 01:17:43 -06:00
|
|
|
<div class="footer-social" id="footerSocialLinks">
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerFacebook"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-facebook"></i
|
|
|
|
|
></a>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerInstagram"
|
|
|
|
|
style="display: none"
|
2025-12-19 20:44:46 -06:00
|
|
|
><i class="bi bi-instagram"></i
|
|
|
|
|
></a>
|
2026-01-19 01:17:43 -06:00
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerTwitter"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-twitter-x"></i
|
|
|
|
|
></a>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerYoutube"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-youtube"></i
|
|
|
|
|
></a>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerPinterest"
|
|
|
|
|
style="display: none"
|
2025-12-19 20:44:46 -06:00
|
|
|
><i class="bi bi-pinterest"></i
|
|
|
|
|
></a>
|
2026-01-19 01:17:43 -06:00
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerTiktok"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-tiktok"></i
|
|
|
|
|
></a>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerWhatsapp"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-whatsapp"></i
|
|
|
|
|
></a>
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="social-link"
|
|
|
|
|
id="footerLinkedin"
|
|
|
|
|
style="display: none"
|
|
|
|
|
><i class="bi bi-linkedin"></i
|
|
|
|
|
></a>
|
2025-12-13 22:59:42 -06:00
|
|
|
</div>
|
2025-12-19 20:44:46 -06:00
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<div class="footer-column">
|
|
|
|
|
<h4>Quick Links</h4>
|
2025-12-19 20:44:46 -06:00
|
|
|
<ul class="footer-links">
|
2026-01-18 02:22:05 -06:00
|
|
|
<li><a href="/home">Home</a></li>
|
|
|
|
|
<li><a href="/shop">Shop</a></li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<li><a href="/portfolio">Portfolio</a></li>
|
|
|
|
|
<li><a href="/blog">Blog</a></li>
|
2026-01-18 02:22:05 -06:00
|
|
|
<li><a href="/about">About Us</a></li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<li><a href="/contact">Contact</a></li>
|
2025-12-19 20:44:46 -06:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<div class="footer-column">
|
|
|
|
|
<h4>Customer Service</h4>
|
2025-12-19 20:44:46 -06:00
|
|
|
<ul class="footer-links">
|
2026-01-01 22:24:30 -06:00
|
|
|
<li><a href="/faq">FAQ</a></li>
|
2026-01-18 02:22:05 -06:00
|
|
|
<li><a href="/shipping-info">Shipping Info</a></li>
|
|
|
|
|
<li><a href="/returns">Returns & Refunds</a></li>
|
2026-01-01 22:24:30 -06:00
|
|
|
<li><a href="/privacy">Privacy Policy</a></li>
|
2025-12-19 20:44:46 -06:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
|
|
|
|
<div class="footer-column">
|
|
|
|
|
<h4>Contact Us</h4>
|
|
|
|
|
<ul class="footer-links">
|
2026-01-19 01:17:43 -06:00
|
|
|
<li><i class="bi bi-envelope"></i> skyartshop12.11@gmail.com</li>
|
|
|
|
|
<li><i class="bi bi-telephone"></i> (501) 608-0409</li>
|
|
|
|
|
<li><i class="bi bi-geo-alt"></i> Belmopan, Cayo District</li>
|
2026-01-18 02:22:05 -06:00
|
|
|
</ul>
|
|
|
|
|
</div>
|
2025-12-13 22:59:42 -06:00
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
|
2025-12-19 20:44:46 -06:00
|
|
|
<div class="footer-bottom">
|
2026-01-20 20:29:33 -06:00
|
|
|
<p>© 2026 PromptTech-Solution. Designed and Developed by: PromptTech-Solution</p>
|
2026-01-18 02:22:05 -06:00
|
|
|
<p>
|
|
|
|
|
Made with
|
|
|
|
|
<i class="bi bi-heart-fill" style="color: var(--primary-pink)"></i>
|
|
|
|
|
for creative souls
|
|
|
|
|
</p>
|
2025-12-19 20:44:46 -06:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-13 22:59:42 -06:00
|
|
|
</footer>
|
|
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Cart Drawer -->
|
|
|
|
|
<div class="cart-overlay"></div>
|
|
|
|
|
<div class="cart-drawer">
|
|
|
|
|
<div class="cart-header">
|
|
|
|
|
<h3>Shopping Cart</h3>
|
|
|
|
|
<button class="cart-close"><i class="bi bi-x"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cart-items"></div>
|
|
|
|
|
<div class="cart-footer">
|
|
|
|
|
<div class="cart-total">
|
|
|
|
|
<span>Total:</span>
|
|
|
|
|
<span class="cart-total-amount">$0.00</span>
|
|
|
|
|
</div>
|
|
|
|
|
<a href="/checkout" class="btn btn-primary cart-checkout-btn"
|
|
|
|
|
>Checkout</a
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Wishlist Drawer -->
|
|
|
|
|
<div class="wishlist-overlay"></div>
|
|
|
|
|
<div class="wishlist-drawer">
|
|
|
|
|
<div class="wishlist-header">
|
|
|
|
|
<h3><i class="bi bi-heart"></i> My Wishlist</h3>
|
|
|
|
|
<button class="wishlist-close"><i class="bi bi-x"></i></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="wishlist-items"></div>
|
|
|
|
|
<div class="wishlist-footer">
|
|
|
|
|
<a href="/shop" class="btn btn-outline">Continue Shopping</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
<!-- Scripts -->
|
2026-01-19 01:17:43 -06:00
|
|
|
<script src="/assets/js/modern-theme.js?v=20260118g"></script>
|
2026-01-18 02:22:05 -06:00
|
|
|
<script src="/assets/js/customer-auth.js?v=20260118a"></script>
|
|
|
|
|
<script src="/assets/js/dynamic-page.js?v=20260118b"></script>
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
|
|
|
// Load page content from API - target the text content div
|
|
|
|
|
await DynamicPage.loadPageContent("about", {
|
|
|
|
|
titleSelector: "#pageTitle",
|
|
|
|
|
contentSelector: "#aboutTextContent",
|
|
|
|
|
staticSelector: "#staticContent",
|
|
|
|
|
});
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
// Load team members
|
|
|
|
|
const teamMembers = await API.loadTeamMembers();
|
|
|
|
|
const teamGrid = document.getElementById("teamGrid");
|
2025-12-24 00:13:23 -06:00
|
|
|
|
2026-01-18 02:22:05 -06:00
|
|
|
if (teamMembers.length > 0) {
|
|
|
|
|
teamGrid.innerHTML = teamMembers
|
|
|
|
|
.map(
|
|
|
|
|
(member) => `
|
2025-12-24 00:13:23 -06:00
|
|
|
<div class="team-card">
|
2026-01-18 02:22:05 -06:00
|
|
|
<div class="team-avatar">
|
|
|
|
|
<img src="${
|
|
|
|
|
member.image_url ||
|
|
|
|
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&q=80"
|
|
|
|
|
}" alt="${member.name}">
|
2025-12-24 00:13:23 -06:00
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
<h3>${member.name}</h3>
|
|
|
|
|
<p class="position">${member.position || "Team Member"}</p>
|
|
|
|
|
<p class="bio">${member.bio || ""}</p>
|
2025-12-24 00:13:23 -06:00
|
|
|
</div>
|
2026-01-18 02:22:05 -06:00
|
|
|
`,
|
|
|
|
|
)
|
|
|
|
|
.join("");
|
|
|
|
|
} else {
|
|
|
|
|
// Show placeholder team members
|
|
|
|
|
teamGrid.innerHTML = `
|
|
|
|
|
<div class="team-card">
|
|
|
|
|
<div class="team-avatar">
|
|
|
|
|
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=300&q=80" alt="Team Member">
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Sky Anderson</h3>
|
|
|
|
|
<p class="position">Founder & CEO</p>
|
|
|
|
|
<p class="bio">Passionate crafter with a vision to inspire creativity worldwide.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="team-card">
|
|
|
|
|
<div class="team-avatar">
|
|
|
|
|
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=300&q=80" alt="Team Member">
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Jordan Lee</h3>
|
|
|
|
|
<p class="position">Creative Director</p>
|
|
|
|
|
<p class="bio">Bringing artistic vision to every product we curate.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="team-card">
|
|
|
|
|
<div class="team-avatar">
|
|
|
|
|
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=300&q=80" alt="Team Member">
|
|
|
|
|
</div>
|
|
|
|
|
<h3>Morgan Chen</h3>
|
|
|
|
|
<p class="position">Customer Experience</p>
|
|
|
|
|
<p class="bio">Dedicated to making every customer smile.</p>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
2025-12-24 00:13:23 -06:00
|
|
|
});
|
|
|
|
|
</script>
|
2026-01-18 02:22:05 -06:00
|
|
|
<script src="/assets/js/accessibility.js"></script>
|
2025-12-19 20:44:46 -06:00
|
|
|
</body>
|
2025-12-13 22:59:42 -06:00
|
|
|
</html>
|
