page update

This commit is contained in:
tapframe 2025-09-01 23:33:40 +05:30
parent 2fd2839e18
commit a63168e06d

View file

@ -21,9 +21,13 @@
box-sizing: border-box; box-sizing: border-box;
} }
html {
scroll-behavior: smooth;
}
html, body { html, body {
width: 100%; width: 100%;
height: 100%; min-height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -37,6 +41,8 @@
line-height: 1.6; line-height: 1.6;
width: 100vw; width: 100vw;
min-height: 100vh; min-height: 100vh;
display: flex;
flex-direction: column;
} }
.container { .container {
@ -129,8 +135,8 @@
} }
.hero-logo { .hero-logo {
width: clamp(6rem, 15vw, 10rem); width: clamp(7rem, 18vw, 12rem);
height: clamp(6rem, 15vw, 10rem); height: clamp(7rem, 18vw, 12rem);
object-fit: contain; object-fit: contain;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
} }
@ -294,13 +300,69 @@
opacity: 0.9; opacity: 0.9;
} }
.scroll-down {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
animation: fadeInUp 1s ease-out 1.5s both;
margin-top: 3rem;
}
.scroll-down:hover {
color: rgba(255, 255, 255, 1);
transform: translateY(-5px);
}
.scroll-down-arrow {
width: 24px;
height: 24px;
border: 2px solid currentColor;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: bounce 2s infinite;
}
.scroll-down-arrow svg {
width: 12px;
height: 12px;
}
.scroll-down-text {
font-size: 0.9rem;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
/* Features Section */ /* Features Section */
.features { .features {
padding: 4rem 0 8rem 0; min-height: 100vh;
padding: 4rem 0;
background: transparent; background: transparent;
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
} }
.features::before { .features::before {
@ -529,9 +591,13 @@
/* Screenshots Section */ /* Screenshots Section */
.screenshots { .screenshots {
padding: 8rem 0; min-height: 100vh;
padding: 4rem 0;
background: transparent; background: transparent;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
} }
.screenshots h2 { .screenshots h2 {
@ -701,6 +767,7 @@
text-align: center; text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08);
width: 100%; width: 100%;
margin-top: auto;
} }
.credits { .credits {
@ -840,7 +907,7 @@
.hero { .hero {
padding: 2rem 0; padding: 2rem 0;
min-height: 90vh; min-height: 100vh;
} }
.hero-title { .hero-title {
@ -849,8 +916,8 @@
} }
.hero-logo { .hero-logo {
width: clamp(4rem, 12vw, 6rem); width: clamp(5rem, 15vw, 8rem);
height: clamp(4rem, 12vw, 6rem); height: clamp(5rem, 15vw, 8rem);
} }
.hero h1 { .hero h1 {
@ -862,6 +929,10 @@
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
.scroll-down {
display: none;
}
.download-buttons { .download-buttons {
flex-direction: column; flex-direction: column;
@ -877,12 +948,17 @@
.features, .features,
.screenshots { .screenshots {
padding: 5rem 0; padding: 3rem 0;
min-height: 100vh;
}
.features h2 {
font-size: 2.5rem;
margin-bottom: 3rem;
} }
.features h2,
.screenshots h2 { .screenshots h2 {
font-size: 2rem; font-size: 2.2rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
@ -963,10 +1039,19 @@
Download for iOS Download for iOS
</a> </a>
</div> </div>
<a href="#features" class="scroll-down">
<div class="scroll-down-arrow">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 13L12 18L17 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="scroll-down-text">Explore</span>
</a>
</div> </div>
</section> </section>
<section class="features"> <section class="features" id="features">
<div class="container"> <div class="container">
<h2>POWERFUL FEATURES</h2> <h2>POWERFUL FEATURES</h2>
<div class="features-grid"> <div class="features-grid">
@ -978,8 +1063,8 @@
<path d="M3 12L12 17L21 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 12L12 17L21 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Smart Discovery</h3> <h3>Stremio Addon Support</h3>
<p>Personalized recommendations, advanced search, and calendar integration for tracking your favorite shows and movies.</p> <p>Full compatibility with Stremio addons, allowing you to access your favorite streaming sources and content providers seamlessly.</p>
</div> </div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="200"> <div class="feature-card" data-aos="fade-up" data-aos-delay="200">
@ -989,53 +1074,51 @@
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <rect x="1" y="5" width="15" height="14" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Premium Playback</h3> <h3>Streaming Scrapers</h3>
<p>Dual video player support with trailer integration, auto-play functionality, and seamless progress tracking across devices.</p> <p>Advanced movie and TV show streaming scrapers that automatically find and aggregate content from multiple sources for seamless viewing.</p>
</div> </div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="300"> <div class="feature-card" data-aos="fade-up" data-aos-delay="300">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 13A5 5 0 0 0 7.54 7.54L4.93 4.93A10 10 0 1 0 19.07 19.07L16.46 16.46A5 5 0 0 0 13 10L10 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 2L13.09 8.26L22 9L17 14L18.18 23L12 19.77L5.82 23L7 14L2 9L10.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 21L15 15L9 9L3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Universal Integration</h3> <h3>Advanced Rating System</h3>
<p>Full Trakt.tv sync, Stremio addon compatibility, TMDB integration, and MDBList support for the ultimate experience.</p> <p>Comprehensive rating screens with IMDB, TMDB, Rotten Tomatoes, and Metacritic scores for informed viewing decisions.</p>
</div> </div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="400"> <div class="feature-card" data-aos="fade-up" data-aos-delay="400">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Beautiful Interface</h3> <h3>Deep Customization</h3>
<p>Modern Material Design with dynamic theming, dominant color extraction, and smooth animations throughout.</p> <p>Extensive customization options including themes, player settings, notification preferences, and personalized content discovery.</p>
</div> </div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="500"> <div class="feature-card" data-aos="fade-up" data-aos-delay="500">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8A6 6 0 0 0 6 8C6 7 9 9 12 9S18 7 18 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 12L11 14L15 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 8V12A6 6 0 1 1 6 12V8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
<path d="M12 20V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Smart Notifications</h3> <h3>Watch Progress Tracking</h3>
<p>Push notifications for new episodes, background sync, and comprehensive settings for complete customization.</p> <p>Seamless progress synchronization across devices with Trakt.tv integration and local watch history management.</p>
</div> </div>
<div class="feature-card" data-aos="fade-up" data-aos-delay="600"> <div class="feature-card" data-aos="fade-up" data-aos-delay="600">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 16V8A2 2 0 0 0 19 6H5A2 2 0 0 0 3 8V16A2 2 0 0 0 5 18H19A2 2 0 0 0 21 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polygon points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</div> </div>
<h3>Optimized Performance</h3> <h3>Multi-Platform Support</h3>
<p>Advanced caching system, offline functionality, and optimized rendering for lightning-fast performance.</p> <p>Available on iOS and Android platforms with consistent experience and cross-device synchronization</p>
</div> </div>
</div> </div>
</div> </div>
@ -1069,6 +1152,18 @@
<img src="src/assets/ratingscreen.jpg" alt="Ratings" loading="lazy"> <img src="src/assets/ratingscreen.jpg" alt="Ratings" loading="lazy">
<h4>Ratings</h4> <h4>Ratings</h4>
</div> </div>
<div class="screenshot">
<img src="src/assets/seasonandepisode.jpg" alt="Episodes & Seasons" loading="lazy">
<h4>Episodes & Seasons</h4>
</div>
<div class="screenshot">
<img src="src/assets/search.jpg" alt="Search & Details" loading="lazy">
<h4>Search & Details</h4>
</div>
<div class="screenshot">
<img src="src/assets/metadascreen.jpg" alt="Content Details" loading="lazy">
<h4>Content Details</h4>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -1098,7 +1193,7 @@
<p>Built with ❤️ using React Native & Expo</p> <p>Built with ❤️ using React Native & Expo</p>
<div class="footer-links"> <div class="footer-links">
<a href="https://github.com/tapframe/NuvioStreaming" class="github-link"> <a href="https://github.com/tapframe/NuvioStreaming" class="github-link">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="github-logo"> <img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="GitHub" class="github-logo">
GitHub GitHub
</a> </a>
</div> </div>