mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-25 05:48:32 +01:00
225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Such Software LLC</title>
|
||
<meta name="description" content="Such Software designs, hosts, and runs artist storefronts—no monthly fees, commission-only. Sell originals, merch, and digital collectibles.">
|
||
<meta name="robots" content="index,follow">
|
||
<link rel="canonical" href="https://such.software/">
|
||
|
||
<!-- Social / Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://such.software/">
|
||
<meta property="og:title" content="Such Software — Sell your art online. No upfront costs.">
|
||
<meta property="og:description" content="We design, host, and run your storefront. You pay only when you sell.">
|
||
<meta property="og:image" content="https://such.software/img/Logo_w_text.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Such Software — Sell your art online. No upfront costs.">
|
||
<meta name="twitter:description" content="We design, host, and run your storefront. You pay only when you sell.">
|
||
<meta name="twitter:image" content="https://such.software/img/Logo_w_text.png">
|
||
|
||
<meta name="theme-color" content="#090a2e">
|
||
<link rel="icon" type="image/png" href="img/Logo_SUCH_catface.png">
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
|
||
<!-- JSON-LD Organization -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "Such Software LLC",
|
||
"url": "https://such.software/",
|
||
"logo": "https://such.software/img/Logo_DALLE.png",
|
||
"sameAs": [
|
||
"https://t.me/jwinterm",
|
||
"https://twitter.com/j_winter_m"
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body data-bs-spy="scroll" data-bs-target="#navbarNav" data-bs-offset="80">
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
|
||
<!-- Header with Logo -->
|
||
<header class="navbar navbar-expand-lg navbar-dark sticky-top parallax-bg parallax-header" role="banner">
|
||
<a class="navbar-brand d-flex align-items-center" href="#home">
|
||
<img src="img/Logo_SUCH_catface.png" alt="Such Software cat logo" class="logo" width="90" height="90">
|
||
<span class="visually-hidden">Such Software</span>
|
||
</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>
|
||
<nav class="collapse navbar-collapse" id="navbarNav" role="navigation" aria-label="Primary">
|
||
<ul class="navbar-nav ms-auto align-items-lg-center">
|
||
<li class="nav-item my-1 my-lg-0"><a class="nav-link home-link" href="#home">Home</a></li>
|
||
<li class="nav-item my-1 my-lg-0"><a class="nav-link btn btn-nav btn-sm" href="#services">Services</a></li>
|
||
<li class="nav-item my-1 my-lg-0"><a class="nav-link btn btn-nav btn-sm" href="#about">About</a></li>
|
||
<li class="nav-item my-1 my-lg-0"><a class="nav-link btn btn-nav btn-sm" href="#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main" tabindex="-1">
|
||
<!-- Hero Section -->
|
||
<section id="home" class="hero">
|
||
<div class="hero__overlay"></div>
|
||
<div class="container h-100 d-flex flex-column justify-content-center align-items-start text-white">
|
||
<h1 class="display-4 font-weight-bold">Sell your art online. <br/>No upfront costs.</h1>
|
||
<p class="lead mt-2 mb-4">We design, host, and run your storefront. <br/>You pay only when you sell.</p>
|
||
<div>
|
||
<a href="#contact" class="btn btn-primary btn-lg mr-2">Get your free site</a>
|
||
<a href="#services" class="btn btn-outline-light btn-lg">See how it works</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Parallax spacer -->
|
||
<div class="parallax-bg spacer" aria-hidden="true"></div>
|
||
|
||
<!-- Services Section -->
|
||
<section id="services" class="py-5 bg-soft">
|
||
<div class="container">
|
||
<div class="row mb-4">
|
||
<div class="col">
|
||
<h2>Services</h2>
|
||
<p class="text-muted mb-0">Everything you need to sell originals, prints, merch, and digital work.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 col-lg-3 mb-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5">Custom artist sites</h3>
|
||
<ul class="mb-0 pl-3">
|
||
<li>Branded storefront, your style</li>
|
||
<li>Mobile-first, fast, accessible</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3 mb-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5">Hosting included</h3>
|
||
<ul class="mb-0 pl-3">
|
||
<li>Secure, reliable hosting</li>
|
||
<li>No monthly fees</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3 mb-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5">Sales & fulfillment</h3>
|
||
<ul class="mb-0 pl-3">
|
||
<li>Originals, prints, and merch</li>
|
||
<li>Dropshipping supported</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3 mb-4">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5">Payments & digital</h3>
|
||
<ul class="mb-0 pl-3">
|
||
<li>Cards, PayPal, and crypto</li>
|
||
<li>Optional digital collectibles</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id="about" class="py-5 bg-soft">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-10 col-lg-8">
|
||
<h2>About</h2>
|
||
<p>
|
||
We bridge art and technology so creators can focus on creating. Such Software designs and hosts modern artist storefronts—commission-only, no monthly fees. We handle the web stack; you keep making great work.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Parallax spacer -->
|
||
<div class="parallax-bg spacer" aria-hidden="true"></div>
|
||
|
||
<!-- Contact Section -->
|
||
<section id="contact" class="py-5 bg-soft">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-10">
|
||
<h2>Contact</h2>
|
||
<p class="text-muted">Let’s get your art online this week. Typical response within 24 hours.</p>
|
||
<div class="row g-0 mb-3">
|
||
<div class="col-sm-4 mb-3 pe-sm-2">
|
||
<a href="https://t.me/jwinterm" target="_blank" rel="noopener noreferrer" class="btn btn-nav w-100" aria-label="Contact on Telegram">
|
||
<i class="fab fa-telegram-plane" aria-hidden="true"></i> Telegram
|
||
</a>
|
||
</div>
|
||
<div class="col-sm-4 mb-3 pe-sm-2 ps-sm-2">
|
||
<a href="https://twitter.com/j_winter_m" target="_blank" rel="noopener noreferrer" class="btn btn-nav w-100" aria-label="Visit X/Twitter profile">
|
||
<i class="fab fa-twitter" aria-hidden="true"></i> X / Twitter
|
||
</a>
|
||
</div>
|
||
<div class="col-sm-4 mb-3 ps-sm-2">
|
||
<a href="mailto:info@such.software" class="btn btn-nav w-100" aria-label="Send email to info@such.software">
|
||
<i class="fas fa-envelope" aria-hidden="true"></i> Email
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- Contact form (FormSubmit) -->
|
||
<form class="mt-2" method="POST" action="https://formsubmit.co/info@such.software">
|
||
<!-- FormSubmit options -->
|
||
<input type="hidden" name="_subject" value="New inquiry from such.software">
|
||
<input type="hidden" name="_captcha" value="false">
|
||
<input type="text" name="website" class="visually-hidden" tabindex="-1" autocomplete="off" aria-hidden="true">
|
||
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="name" class="form-label">Name</label>
|
||
<input type="text" id="name" name="name" class="form-control" required>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="email" class="form-label">Email</label>
|
||
<input type="email" id="email" name="email" class="form-control" required>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="message" class="form-label">Message</label>
|
||
<textarea id="message" name="message" rows="4" class="form-control" required></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Send message</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer-bg text-center text-white py-4 parallax-bg parallax-footer">
|
||
<div class="container">
|
||
<img src="img/Logo_w_text.png" alt="Such Software square logo" class="img-fluid mb-3" width="200" height="200" loading="lazy">
|
||
<p class="mb-0">© 2025 Such Software LLC. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Bootstrap JS Bundle (includes Popper) -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||
</body>
|
||
</html>
|