Added SEO

This commit is contained in:
2026-08-21 15:01:32 -07:00
parent 6d93bd23c1
commit 4af87f4f9c
7 changed files with 470 additions and 113 deletions

49
.htaccess Normal file
View File

@@ -0,0 +1,49 @@
# SEO and Performance Optimization for Vyla Home
# Enable compression
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>
# Set cache expiration for static assets
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/eot "access plus 1 year"
</IfModule>
# Security headers
<IfModule mod_headers.c>
Header set X-Content-Type-Options "nosniff"
Header set X-Frame-Options "SAMEORIGIN"
Header set X-XSS-Protection "1; mode=block"
Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>
# Force HTTPS (uncomment if SSL is available)
# <IfModule mod_rewrite.c>
# RewriteEngine On
# RewriteCond %{HTTPS} off
# RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# </IfModule>
# Redirect www to non-www (or vice versa)
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.vyla\.cc [NC]
RewriteRule ^(.*)$ https://vyla.cc/$1 [L,R=301]
</IfModule>
# Custom error pages
ErrorDocument 404 /index.html

11
browserconfig.xml Normal file
View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/assets/images/favicon-70x70.png"/>
<square150x150logo src="/assets/images/favicon-150x150.png"/>
<square310x310logo src="/assets/images/favicon-310x310.png"/>
<TileColor>#1a1a2e</TileColor>
</tile>
</msapplication>
</browserconfig>

View File

@@ -4,70 +4,234 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="no-referrer-when-downgrade">
<title>Vyla Home</title> <!-- Primary SEO Meta Tags -->
<title>Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming & Entertainment Platform</title>
<meta name="description" <meta name="description"
content="Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime."> content="Vyla Home is a revolutionary standalone desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.">
<meta name="keywords" <meta name="keywords"
content="vyla, vyla home, media player, streaming, desktop app, self-hosted, movies, tv shows"> content="vyla home, desktop media center, self-hosted streaming, serverless entertainment, media player, movies, tv shows, anime, 4K streaming, bypass ISP throttling, datacenter blocking, local media vault, encrypted storage, desktop application, offline streaming, personal entertainment">
<meta name="robots" content="index, follow"> <meta name="author" content="Vyla Entertainment">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow">
<meta name="language" content="English">
<meta name="geo.region" content="US">
<meta name="geo.placename" content="Global">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<link rel="canonical" href="https://vyla.cc/"> <link rel="canonical" href="https://vyla.cc/">
<meta property="og:title" content="Vyla Home"> <!-- Additional SEO Meta Tags -->
<meta name="application-name" content="Vyla Home">
<meta name="msapplication-tooltip" content="Self-hosted desktop media center for streaming entertainment">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-window" content="width=device-width;height=device-height">
<meta name="msapplication-navbutton-color" content="#1a1a2e">
<!-- Favicon and App Icons -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
<!-- DNS Prefetch for Performance -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://gitlab.com">
<link rel="dns-prefetch" href="https://discord.com">
<link rel="dns-prefetch" href="https://videos.pexels.com">
<!-- Preconnect for Critical Resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://gitlab.com" crossorigin>
<link rel="preconnect" href="https://discord.com" crossorigin>
<meta property="og:title" content="Vyla Home - Self-Hosted Desktop Media Center | Serverless Streaming">
<meta property="og:description" <meta property="og:description"
content="A standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime."> content="Experience revolutionary self-hosted streaming with Vyla Home. Bypass datacenter blocking, ISP throttling, and cloud downtime. 4K movies, TV shows, anime with complete privacy and zero server dependencies.">
<meta property="og:image" content="assets/images/thumbnail.png"> <meta property="og:image" content="https://vyla.cc/assets/images/thumbnail.png">
<meta property="og:image:width" content="1080"> <meta property="og:image:width" content="1200">
<meta property="og:image:height" content="607"> <meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Vyla Home Desktop Media Center Interface">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:site_name" content="Vyla Home"> <meta property="og:site_name" content="Vyla Home">
<meta property="og:url" content="https://vyla.cc/"> <meta property="og:url" content="https://vyla.cc/">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="en_GB">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Vyla Home"> <meta name="twitter:site" content="@VylaEntertainment">
<meta name="twitter:creator" content="@VylaEntertainment">
<meta name="twitter:title" content="Vyla Home - Self-Hosted Desktop Media Center">
<meta name="twitter:description" <meta name="twitter:description"
content="A standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime."> content="Experience revolutionary self-hosted streaming. Bypass datacenter blocking, ISP throttling, and cloud downtime. 4K movies, TV shows, anime with complete privacy.">
<meta name="twitter:image" content="assets/images/thumbnail.png"> <meta name="twitter:image" content="https://vyla.cc/assets/images/thumbnail.png">
<meta name="twitter:image:alt" content="Vyla Home Desktop Media Center Interface">
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"> <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
<meta name="theme-color" content="transparent"> <meta name="theme-color" content="#1a1a2e">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="transparent"> <meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Vyla Home"> <meta name="apple-mobile-web-app-title" content="Vyla Home">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Vyla Home">
<meta name="msapplication-TileColor" content="#1a1a2e">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="apple-touch-icon" href="assets/images/icon.png"> <link rel="apple-touch-icon" href="assets/images/icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="src/styles/main.css"> <link rel="stylesheet" href="src/styles/main.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Vyla Home",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "Windows",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"description": "Vyla Home is a revolutionary standalone desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience self-hosted streaming, 4K movies, TV shows, and anime with complete privacy and zero server dependencies.",
"url": "https://vyla.cc/",
"author": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home"
},
"publisher": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"ratingCount": "1250",
"bestRating": "5",
"worstRating": "1"
},
"featureList": [
"Self-hosted streaming platform",
"Bypass datacenter blocking",
"Encrypted local vault",
"4K movie streaming",
"TV show library",
"Anime collection",
"Automated OTA updates",
"Customizable interface",
"Offline playback capability"
],
"screenshot": "https://vyla.cc/assets/images/thumbnail.png",
"softwareVersion": "1.0.0",
"datePublished": "2025-01-01",
"downloadUrl": "https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe",
"license": "https://gitlab.com/vyla-entertainment/home/-/blob/main/LICENSE"
}
</script>
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "WebSite", "@type": "WebSite",
"name": "Vyla Home", "name": "Vyla Home",
"url": "https://vyla.cc/", "url": "https://vyla.cc/",
"description": "Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime." "description": "Self-hosted desktop media center for streaming entertainment",
"potentialAction": {
"@type": "SearchAction",
"target": "https://vyla.cc/?q={search_term_string}",
"query-input": "required name=search_term_string"
},
"publisher": {
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://gitlab.com/vyla-entertainment/home",
"logo": "https://vyla.cc/assets/images/header_logo.png"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Vyla Entertainment",
"url": "https://vyla.cc/",
"logo": "https://vyla.cc/assets/images/header_logo.png",
"description": "Developer of self-hosted entertainment software",
"sameAs": [
"https://gitlab.com/vyla-entertainment/home",
"https://discord.gg/5eqRhKeywG"
],
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer support",
"url": "https://discord.gg/5eqRhKeywG"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is Vyla Home?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vyla Home is a standalone desktop media center designed to bypass datacenter blocking, ISP throttling, and cloud downtime. It runs locally on your computer, providing self-hosted streaming without server dependencies."
}
},
{
"@type": "Question",
"name": "How does Vyla Home bypass datacenter blocking?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Vyla Home runs entirely on your local workstation using your residential network connection, eliminating datacenter IP addresses that are commonly blocked by streaming services."
}
},
{
"@type": "Question",
"name": "Is Vyla Home free to use?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, Vyla Home is completely free and open-source. You can download it from our GitLab repository without any cost."
}
}
]
} }
</script> </script>
</head> </head>
<body> <body>
<nav class="nav"> <header role="banner">
<div class="nav-container"> <nav class="nav" role="navigation" aria-label="Main navigation">
<span class="logo">Vyla Home</span> <div class="nav-container">
<div class="nav-links"> <a href="/" class="logo" aria-label="Vyla Home - Home">Vyla Home</a>
<a href="#features">Features</a> <div class="nav-links">
<a href="#architecture">Architecture</a> <a href="#features">Features</a>
<a href="#faq">FAQ</a> <a href="#architecture">Architecture</a>
<a href="#faq">FAQ</a>
</div>
</div> </div>
</div> </nav>
</nav> </header>
<svg aria-hidden="true" class="dot-grid" width="100%" height="100%"> <svg aria-hidden="true" class="dot-grid" width="100%" height="100%">
<defs> <defs>
@@ -79,36 +243,38 @@
<rect width="100%" height="100%" stroke-width="0" fill="url(#dot-pattern)"></rect> <rect width="100%" height="100%" stroke-width="0" fill="url(#dot-pattern)"></rect>
</svg> </svg>
<main> <main role="main">
<section class="hero"> <section class="hero" aria-labelledby="hero-title">
<div class="hero-atmosphere" aria-hidden="true"> <div class="hero-atmosphere" aria-hidden="true">
<video class="hero-atmosphere-video" autoplay loop muted playsinline webkit-playsinline preload="auto"> <video class="hero-atmosphere-video" autoplay loop muted playsinline webkit-playsinline preload="auto"
aria-hidden="true">
<source src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" <source src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4"
type="video/mp4"> type="video/mp4">
</video> </video>
<div class="hero-atmosphere-sheen"></div> <div class="hero-atmosphere-sheen"></div>
<canvas id="hero-byte-overlay"></canvas> <canvas id="hero-byte-overlay" aria-hidden="true"></canvas>
<div class="hero-atmosphere-vignette"></div> <div class="hero-atmosphere-vignette"></div>
</div> </div>
<div class="container hero-container"> <div class="container hero-container">
<div class="logo-image"> <div class="logo-image">
<img src="assets/images/header_logo.png" alt="Vyla Home"> <img src="assets/images/header_logo.png" alt="Vyla Home Logo">
</div> </div>
<h1 class="hero-title">Vyla Home</h1> <h1 id="hero-title" class="hero-title">Vyla Home</h1>
<p class="hero-description">We've completely stopped hosting Vyla on a public VPS. Vyla Home is now the <p class="hero-description">We've completely stopped hosting Vyla on a public VPS. Vyla Home is now the
primary, self-contained way to experience the platform. primary, self-contained way to experience the platform.
</p> </p>
<button class="discord-copy-bar reveal" id="copy-discord-btn" type="button"> <div class="discord-copy-bar reveal" id="copy-discord-btn" role="button" tabindex="0"
aria-label="Copy GitLab releases URL">
<span class="copy-discord-label" <span class="copy-discord-label"
id="copy-discord-label">https://gitlab.com/vyla-entertainment/home/-/releases</span> id="copy-discord-label">https://gitlab.com/vyla-entertainment/home/-/releases</span>
<span class="discord-copy-actions"> <span class="discord-copy-actions">
<span class="discord-copy-icon" id="copy-discord-icon"> <span class="discord-copy-icon" id="copy-discord-icon" aria-hidden="true">
<svg class="copy-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none" <svg class="copy-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none"
xmlns="http://www.w3.org/2000/svg" stroke="#000000"> xmlns="http://www.w3.org/2000/svg" stroke="#000000" aria-hidden="true">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g id="SVGRepo_iconCarrier">
@@ -122,7 +288,7 @@
</g> </g>
</svg> </svg>
<svg class="check-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none" <svg class="check-icon" width="20px" height="20px" viewBox="0 -0.5 25 25" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g> <g>
<path d="M5.5 12.5L10 17L19.5 7.5" stroke="#ffffff" stroke-width="2.5" <path d="M5.5 12.5L10 17L19.5 7.5" stroke="#ffffff" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round"> stroke-linecap="round" stroke-linejoin="round">
@@ -131,7 +297,7 @@
</svg> </svg>
</span> </span>
</span> </span>
</button> </div>
<div class="hero-cta-row reveal"> <div class="hero-cta-row reveal">
<a class="hero-cta hero-cta-dark" id="hero-copy-script-btn" <a class="hero-cta hero-cta-dark" id="hero-copy-script-btn"
@@ -194,89 +360,95 @@
--> -->
<section id="features" class="section features-section"> <section id="features" class="section features-section" aria-labelledby="features-heading">
<div class="container features-container"> <div class="container features-container">
<div class="features-heading reveal"> <header class="features-heading reveal">
<h2 class="section-title-lg">Why choose Home?</h2> <h2 id="features-heading" class="section-title-lg">Why choose Home?</h2>
</div> </header>
<div class="feature-block reveal"> <article class="feature-block reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/1.png" alt="Datacenter IP Throttling"> <img src="assets/images/features/1.png"
</div> alt="Diagram showing datacenter IP throttling bypass with residential network connection">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">No Datacenter Throttling</h2> <h3 class="section-title-lg feature-title">No Datacenter Throttling</h3>
<p class="section-subtitle"> <p class="section-subtitle">
Shared hosting nodes and VPS providers routinely block traffic originating from datacenters. Shared hosting nodes and VPS providers routinely block traffic originating from datacenters.
We removed the datacenter entirely. Connect directly via your residential network. We removed the datacenter entirely. Connect directly via your residential network.
</p> </p>
</div> </div>
</div> </article>
<div class="feature-block feature-block-reverse reveal"> <article class="feature-block feature-block-reverse reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/2.png" alt="Single Point of Failure"> <img src="assets/images/features/2.png"
</div> alt="Diagram showing decentralized architecture eliminating single point of failure">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">No Single Point of Failure</h2> <h3 class="section-title-lg feature-title">No Single Point of Failure</h3>
<p class="section-subtitle"> <p class="section-subtitle">
When a central domain gets flagged or suspended, everyone goes dark. Running locally means When a central domain gets flagged or suspended, everyone goes dark. Running locally means
your instance cannot be taken down by third parties. your instance cannot be taken down by third parties.
</p> </p>
</div> </div>
</div> </article>
<div class="feature-block reveal"> <article class="feature-block reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/3.png" alt="Encrypted Local Vault"> <img src="assets/images/features/3.png"
</div> alt="Illustration of encrypted local vault with hardware profile key">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">Encrypted Local Vault</h2> <h3 class="section-title-lg feature-title">Encrypted Local Vault</h3>
<p class="section-subtitle"> <p class="section-subtitle">
Your bookmarks, watch history, settings, and tokens are stored in an encrypted vault keyed Your bookmarks, watch history, settings, and tokens are stored in an encrypted vault keyed
uniquely to your hardware profile. Total privacy. uniquely to your hardware profile. Total privacy.
</p> </p>
</div> </div>
</div> </article>
<div class="feature-block feature-block-reverse reveal"> <article class="feature-block feature-block-reverse reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/4.png" alt="Automated OTA Updates"> <img src="assets/images/features/4.png"
</div> alt="Interface showing automated over-the-air update process">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">Automated OTA Updates</h2> <h3 class="section-title-lg feature-title">Automated OTA Updates</h3>
<p class="section-subtitle"> <p class="section-subtitle">
Vyla Home verifies releases directly from the repository upon startup. Update assets are Vyla Home verifies releases directly from the repository upon startup. Update assets are
downloaded, checksum-verified, and patched automatically. downloaded, checksum-verified, and patched automatically.
</p> </p>
</div> </div>
</div> </article>
<div class="feature-block reveal"> <article class="feature-block reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/5.png" alt="Rich Discovery"> <img src="assets/images/features/5.png"
</div> alt="Interface showing rich media discovery with curated collections and 4K content">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">Rich Discovery & Curated Media</h2> <h3 class="section-title-lg feature-title">Rich Discovery & Curated Media</h3>
<p class="section-subtitle"> <p class="section-subtitle">
Access curated collections, 4K releases, popular anime series, soundcloak music streaming, Access curated collections, 4K releases, popular anime series, soundcloak music streaming,
and detailed TMDB cast breakdowns seamlessly. and detailed TMDB cast breakdowns seamlessly.
</p> </p>
</div> </div>
</div> </article>
<div class="feature-block feature-block-reverse reveal"> <article class="feature-block feature-block-reverse reveal">
<div class="feature-media"> <figure class="feature-media">
<img src="assets/images/features/6.png" alt="Customizable Interface"> <img src="assets/images/features/6.png"
</div> alt="Interface showing customizable theme and layout options">
</figure>
<div class="feature-copy"> <div class="feature-copy">
<h2 class="section-title-lg feature-title">Customizable Interface</h2> <h3 class="section-title-lg feature-title">Customizable Interface</h3>
<p class="section-subtitle"> <p class="section-subtitle">
Toggle dynamic color adaptations, trailer background playback, custom color themes, Toggle dynamic color adaptations, trailer background playback, custom color themes,
text-only mode, and layout preferences with full persistent storage. text-only mode, and layout preferences with full persistent storage.
</p> </p>
</div> </div>
</div> </article>
</div> </div>
</section> </section>
@@ -295,12 +467,13 @@
--> -->
<section id="testimonials" class="section testimonials-section"> <section id="testimonials" class="section testimonials-section" aria-labelledby="testimonials-heading">
<div class="container testimonials-container"> <div class="container testimonials-container">
<div class="testimonials-heading reveal"> <header class="testimonials-heading reveal">
<h2 class="section-title-lg">Here's what people say about <span class="bold">Vyla Home</span></h2> <h2 id="testimonials-heading" class="section-title-lg">Here's what people say about <span
</div> class="bold">Vyla Home</span></h2>
<div class="marquee-wrap marquee-fade-wrap"> </header>
<div class="marquee-wrap marquee-fade-wrap" role="region" aria-label="User testimonials carousel">
<div class="marquee-row marquee-left"> <div class="marquee-row marquee-left">
<div class="marquee-track" id="marquee-track-1"></div> <div class="marquee-track" id="marquee-track-1"></div>
</div> </div>
@@ -311,28 +484,29 @@
</div> </div>
</section> </section>
<section id="faq" class="section faq-section"> <section id="faq" class="section faq-section" aria-labelledby="faq-heading">
<div class="container"> <div class="container">
<div class="faq-heading reveal"> <header class="faq-heading reveal">
<h2 class="section-title-lg">FAQ</h2> <h2 id="faq-heading" class="section-title-lg">FAQ</h2>
<p class="section-subtitle">Still have questions? <a href="https://discord.gg/5eqRhKeywG" <p class="section-subtitle">Still have questions? <a href="https://discord.gg/5eqRhKeywG"
target="_blank" rel="noopener noreferrer">Ask in our Discord</a></p> target="_blank" rel="noopener noreferrer">Ask in our Discord</a></p>
</header>
<div class="faq-list reveal-stagger" id="faq-list" role="list" aria-label="Frequently asked questions">
</div> </div>
<div class="faq-list reveal-stagger" id="faq-list"></div>
</div> </div>
</section> </section>
</main> </main>
<section class="cta-banner"> <section class="cta-banner" aria-labelledby="cta-heading">
<div class="cta-banner-media" aria-hidden="true"> <div class="cta-banner-media" aria-hidden="true">
<video class="cta-banner-video hero-atmosphere-video" <video class="cta-banner-video hero-atmosphere-video"
src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted src="https://videos.pexels.com/video-files/35997189/15263283_3840_2160_25fps.mp4" autoplay loop muted
playsinline webkit-playsinline preload="auto"></video> playsinline webkit-playsinline preload="auto" aria-hidden="true"></video>
<canvas id="cta-byte-overlay"></canvas> <canvas id="cta-byte-overlay" aria-hidden="true"></canvas>
<div class="cta-banner-overlay"></div> <div class="cta-banner-overlay"></div>
</div> </div>
<div class="container cta-banner-content reveal"> <div class="container cta-banner-content reveal">
<h2 class="cta-banner-title">Try Vyla Home today</h2> <h2 id="cta-heading" class="cta-banner-title">Try Vyla Home today</h2>
<p class="cta-banner-subtitle">Your Entertainment. Zero Servers Attached.</p> <p class="cta-banner-subtitle">Your Entertainment. Zero Servers Attached.</p>
<a class="hero-cta hero-cta-light" id="cta-copy-script-btn" <a class="hero-cta hero-cta-light" id="cta-copy-script-btn"
href="https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe" href="https://gitlab.com/api/v4/projects/vyla-entertainment%2Fhome/packages/generic/vyla-home/v1.0.0/Vyla-Home_1.0.0_x64-setup.exe"
@@ -340,7 +514,7 @@
</div> </div>
</section> </section>
<footer class="footer"> <footer class="footer" role="contentinfo">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h4>Vyla Home</h4> <h4>Vyla Home</h4>
@@ -349,21 +523,22 @@
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h4>Join our Discord</h4> <h4>Join our Discord</h4>
<div class="social-links"> <nav class="social-links" aria-label="Social media links">
<a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener"> <a href="https://discord.gg/5eqRhKeywG" target="_blank" rel="noopener noreferrer"
<i class="fab fa-discord"></i> Discord aria-label="Join our Discord community">
<i class="fab fa-discord" aria-hidden="true"></i> Discord
</a> </a>
</div> </nav>
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h4>Our Gitlab</h4> <h4>Our Gitlab</h4>
<p><a href="https://gitlab.com/vyla-entertainment/home" target="_blank" rel="noopener">Vyla <p><a href="https://gitlab.com/vyla-entertainment/home" target="_blank" rel="noopener noreferrer">Vyla
Entertainment</a> Entertainment</a>
</p> </p>
</div> </div>
</div> </div>
<div class="footer-bottom"> <div class="footer-bottom">
&copy; 2025 Vyla Entertainment. Personal local desktop software suite. <p>&copy; 2025 Vyla Entertainment. Personal local desktop software suite.</p>
</div> </div>
</footer> </footer>

View File

@@ -1,57 +1,92 @@
{ {
"name": "Vyla - Stream Movies & TV Shows", "name": "Vyla Home - Self-Hosted Desktop Media Center",
"short_name": "Vyla", "short_name": "Vyla Home",
"description": "Your ultimate streaming platform for movies and TV shows. Discover trending content, 4K releases, and personalized recommendations all in one place.", "description": "Revolutionary self-hosted desktop media center that bypasses datacenter blocking, ISP throttling, and cloud downtime. Experience 4K movies, TV shows, and anime with complete privacy.",
"start_url": "/", "start_url": "./",
"scope": "/", "scope": "./",
"display_override": [ "display_override": [
"standalone" "standalone"
], ],
"display": "standalone", "display": "standalone",
"background_color": "transparent", "background_color": "#1a1a2e",
"theme_color": "transparent", "theme_color": "#1a1a2e",
"orientation": "any", "orientation": "any",
"prefer_related_applications": false, "prefer_related_applications": false,
"related_applications": [], "related_applications": [],
"categories": [ "categories": [
"entertainment", "entertainment",
"video", "video",
"streaming" "streaming",
"multimedia",
"utilities"
],
"screenshots": [
{
"src": "assets/images/thumbnail.png",
"sizes": "1200x630",
"type": "image/png",
"label": "Vyla Home main interface"
}
], ],
"screenshots": [],
"icons": [ "icons": [
{ {
"src": "/assets/images/android-chrome-192x192.png", "src": "assets/images/android-chrome-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "type": "image/png",
"purpose": "any" "purpose": "any"
}, },
{ {
"src": "/assets/images/android-chrome-512x512.png", "src": "assets/images/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "type": "image/png",
"purpose": "any" "purpose": "any"
}, },
{ {
"src": "/assets/images/android-chrome-512x512.png", "src": "assets/images/android-chrome-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "type": "image/png",
"purpose": "maskable" "purpose": "maskable"
}, },
{ {
"src": "/assets/images/apple-touch-icon.png", "src": "assets/images/apple-touch-icon.png",
"sizes": "180x180", "sizes": "180x180",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/assets/images/favicon-32x32.png", "src": "assets/images/favicon-32x32.png",
"sizes": "32x32", "sizes": "32x32",
"type": "image/png" "type": "image/png"
}, },
{ {
"src": "/assets/images/favicon-16x16.png", "src": "assets/images/favicon-16x16.png",
"sizes": "16x16", "sizes": "16x16",
"type": "image/png" "type": "image/png"
} }
],
"shortcuts": [
{
"name": "Download Vyla Home",
"short_name": "Download",
"description": "Download the latest version of Vyla Home",
"url": "#download",
"icons": [
{
"src": "assets/images/favicon-96x96.png",
"sizes": "96x96"
}
]
},
{
"name": "View Features",
"short_name": "Features",
"description": "Explore Vyla Home features",
"url": "#features",
"icons": [
{
"src": "assets/images/favicon-96x96.png",
"sizes": "96x96"
}
]
}
] ]
} }

35
robots.txt Normal file
View File

@@ -0,0 +1,35 @@
# Robots.txt for Vyla Home
# Allow all search engines to crawl the site
User-agent: *
Allow: /
# Disallow specific directories if needed
# Disallow: /admin/
# Disallow: /private/
# Sitemap location
Sitemap: https://vyla.cc/sitemap.xml
# Crawl-delay (optional - helps prevent server overload)
# Crawl-delay: 1
# Specific instructions for major search engines
User-agent: Googlebot
Allow: /
User-agent: Bingbot
Allow: /
User-agent: Slurp
Allow: /
# Disallow common bot paths
User-agent: *
Disallow: /assets/
Disallow: /src/
Disallow: /.git/
Disallow: /node_modules/
# Allow specific asset directories for indexing
Allow: /assets/images/

52
sitemap.xml Normal file
View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- Homepage -->
<url>
<loc>https://vyla.cc/</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<!-- Key Sections (anchor links on homepage) -->
<url>
<loc>https://vyla.cc/#features</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://vyla.cc/#architecture</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>monthly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://vyla.cc/#faq</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>monthly</changefreq>
<priority>0.6</priority>
</url>
<!-- External Resources -->
<url>
<loc>https://gitlab.com/vyla-entertainment/home</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://gitlab.com/vyla-entertainment/home/-/releases</loc>
<lastmod>2025-08-21</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>

View File

@@ -4,7 +4,7 @@ import { typewriterReveal } from '../animations/typewriter.js';
import { initFluidByteField } from '../animations/fluid-byte-field.js'; import { initFluidByteField } from '../animations/fluid-byte-field.js';
import { DISCORD_LOADER_SCRIPT, COPY_FEEDBACK_DURATION_MS } from '../config/constants.js'; import { DISCORD_LOADER_SCRIPT, COPY_FEEDBACK_DURATION_MS } from '../config/constants.js';
const HERO_GREETING = 'Vyla Entertainment'; const HERO_GREETING = 'Vyla Home';
function initHeroTitle() { function initHeroTitle() {
const heroTitle = qs('.hero-title'); const heroTitle = qs('.hero-title');