Skip to content

Added Pricing Page #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DarrylN2 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added Pricing Page #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
<a href="ai-tools.html" class="nav-item hot">AI tools</a>
<a href="solutions.html" class="nav-item">Solutions</a>
<a href="resources.html" class="nav-item">Resources</a>
<a href="pricing.html" class="nav-item">Pricing</a>
<a href="#" class="nav-item">NewsRoom</a>
<a href="about.html" class="nav-item">About</a>
<a href="#" class="btn btn-outline">Try VFXB Online</a>
Expand Down Expand Up @@ -147,6 +148,7 @@
</a>
</div>
</div>
<a href="pricing.html" class="nav-item">Pricing</a>
<a href="#" class="nav-item">NewsRoom</a>
<a href="about.html" class="nav-item">About</a>
</nav>
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
<a href="ai-tools.html" class="nav-item hot">AI tools</a>
<a href="solutions.html" class="nav-item">Solutions</a>
<a href="resources.html" class="nav-item">Resources</a>
<a href="pricing.html" class="nav-item">Pricing</a>
<a href="#" class="nav-item">NewsRoom</a>
<a href="about.html" class="nav-item">About</a>
<a href="#" class="btn btn-outline">Try VFXB Online</a>
Expand Down
325 changes: 325 additions & 0 deletions pricing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pricing - VFXB</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="position: relative; background: #111">
<!-- Background Video -->
<div class="body-bg-video-wrapper">
<video id="bg-video" autoplay loop muted playsinline></video>
</div>
<script>
document.getElementById("bg-video").src = "background-video.mp4";
</script>

<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="cursor-text">Pricing</div>

<!-- Particles Background -->
<div class="particles" id="particles"></div>

<!-- Mobile Menu -->
<div class="mobile-menu" id="mobileMenu">
<button class="close-menu" onclick="toggleMobileMenu()">&times;</button>
<div class="dropdown">
<a href="#" class="nav-item">Products</a>
<div class="dropdown-content">
<a href="products.html" class="dropdown-item"
>Video Editor
<div class="item-desc">Professional video editing tools</div></a
>
<a href="products.html" class="dropdown-item"
>Audio Editor
<div class="item-desc">Advanced audio processing</div></a
>
<a href="products.html" class="dropdown-item"
>Image Editor
<div class="item-desc">Photo editing and enhancement</div></a
>
</div>
</div>
<a href="ai-tools.html" class="nav-item hot">AI tools</a>
<a href="solutions.html" class="nav-item">Solutions</a>
<a href="resources.html" class="nav-item">Resources</a>
<a href="pricing.html" class="nav-item">Pricing</a>
<a href="#" class="nav-item">NewsRoom</a>
<a href="about.html" class="nav-item">About</a>
<a href="#" class="btn btn-outline">Try VFXB Online</a>
<a href="#" class="btn btn-primary">Download</a>
</div>

<!-- Header -->
<header class="header">
<div class="logo">
<a href="index.html">
<img
src="vfxb.png"
alt="VFXB Logo"
style="height: 35px; vertical-align: middle; margin-right: 8px" />
</a>
</div>
<nav class="nav">
<div class="dropdown">
<a href="#" class="nav-item">Products</a>
<div class="dropdown-content">
<a href="products.html" class="dropdown-item"
>Video Editor
<div class="item-desc">Professional video editing tools</div></a
>
<a href="products.html" class="dropdown-item"
>Audio Editor
<div class="item-desc">Advanced audio processing</div></a
>
<a href="products.html" class="dropdown-item"
>Image Editor
<div class="item-desc">Photo editing and enhancement</div></a
>
<a href="products.html" class="dropdown-item"
>Motion Graphics
<div class="item-desc">Create stunning animations</div></a
>
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-item hot">AI tools</a>
<div class="dropdown-content">
<a href="ai-tools.html" class="dropdown-item"
>AI Video Generator
<div class="item-desc">Create videos from text</div></a
>
<a href="ai-tools.html" class="dropdown-item"
>AI Voice Clone
<div class="item-desc">Clone any voice instantly</div></a
>
<a href="ai-tools.html" class="dropdown-item"
>AI Captions
<div class="item-desc">Auto-generate captions</div></a
>
<a href="ai-tools.html" class="dropdown-item"
>AI Avatar
<div class="item-desc">Create AI-powered avatars</div></a
>
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-item">Solutions</a>
<div class="dropdown-content">
<a href="solutions.html" class="dropdown-item"
>For Creators
<div class="item-desc">Tools for content creators</div></a
>
<a href="solutions.html" class="dropdown-item"
>For Business
<div class="item-desc">Enterprise video solutions</div></a
>
<a href="solutions.html" class="dropdown-item"
>For Education
<div class="item-desc">Educational video tools</div></a
>
<a href="solutions.html" class="dropdown-item"
>For Marketing
<div class="item-desc">Marketing video creation</div></a
>
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-item">Resources</a>
<div class="dropdown-content">
<a href="resources.html" class="dropdown-item"
>Tutorials
<div class="item-desc">Learn video editing</div></a
>
<a href="resources.html" class="dropdown-item"
>Templates
<div class="item-desc">Pre-made video templates</div></a
>
<a href="resources.html" class="dropdown-item"
>Support
<div class="item-desc">Get help and support</div></a
>
<a href="resources.html" class="dropdown-item"
>Community
<div class="item-desc">Join our community</div></a
>
</div>
</div>
<a href="pricing.html" class="nav-item">Pricing</a>
<a href="#" class="nav-item">NewsRoom</a>
<a href="about.html" class="nav-item">About</a>
</nav>
<div class="header-buttons">
<a href="#" class="btn btn-outline">Try VFXB Online</a>
<a href="#" class="btn btn-primary">Download</a>
</div>
<button class="mobile-menu-btn" onclick="toggleMobileMenu()">☰</button>
</header>

<!-- Pricing Hero Section -->
<section class="pricing-hero">
<h1>Choose Your Plan</h1>
<p>Flexible pricing for creators, businesses, and everyone in between.</p>
</section>

<!-- Pricing Plans Section -->
<section class="pricing-section">
<div class="pricing-container">
<div class="pricing-card">
<h2 class="pricing-title">Free</h2>
<div class="pricing-price">$0<span>/mo</span></div>
<ul class="pricing-features">
<li>Basic AI video editing</li>
<li>Watermarked exports</li>
<li>Community support</li>
<li>Limited templates</li>
</ul>
<a href="#" class="btn btn-outline">Get Started</a>
</div>
<div class="pricing-card featured">
<h2 class="pricing-title">Pro</h2>
<div class="pricing-price">$19<span>/mo</span></div>
<ul class="pricing-features">
<li>All Free features</li>
<li>No watermarks</li>
<li>Premium templates</li>
<li>Priority support</li>
<li>AI voice & avatar tools</li>
</ul>
<a href="#" class="btn btn-primary">Start Free Trial</a>
</div>
<div class="pricing-card">
<h2 class="pricing-title">Business</h2>
<div class="pricing-price">$49<span>/mo</span></div>
<ul class="pricing-features">
<li>All Pro features</li>
<li>Team collaboration</li>
<li>Custom branding</li>
<li>Dedicated account manager</li>
<li>Advanced analytics</li>
</ul>
<a href="#" class="btn btn-outline">Contact Sales</a>
</div>
</div>
</section>

<script>
// Mobile Menu Toggle
function toggleMobileMenu() {
const mobileMenu = document.getElementById("mobileMenu");
mobileMenu.classList.toggle("active");
}

// Particles
function createParticles() {
const particlesContainer = document.getElementById("particles");
const particleCount = window.innerWidth < 768 ? 25 : 50;

for (let i = 0; i < particleCount; i++) {
const particle = document.createElement("div");
particle.className = "particle";
particle.style.left = Math.random() * 100 + "%";
particle.style.top = Math.random() * 100 + "%";
particle.style.animationDelay = Math.random() * 3 + "s";
particlesContainer.appendChild(particle);
}
}

// Initialize particles
createParticles();

// Custom Cursor (only for non-touch devices)
if (window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
const cursor = document.querySelector(".cursor");
const cursorFollower = document.querySelector(".cursor-follower");
const cursorText = document.querySelector(".cursor-text");
let mouseX = 0;
let mouseY = 0;
let followerX = 0;
let followerY = 0;

document.addEventListener("mousemove", (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
cursor.style.left = mouseX + "px";
cursor.style.top = mouseY + "px";
cursorText.style.left = mouseX + "px";
cursorText.style.top = mouseY - 50 + "px";
});

function updateFollower() {
followerX += (mouseX - followerX) * 0.1;
followerY += (mouseY - followerY) * 0.1;
cursorFollower.style.left = followerX + "px";
cursorFollower.style.top = followerY + "px";
requestAnimationFrame(updateFollower);
}
updateFollower();

// Interactive elements cursor effects
const interactiveElements = document.querySelectorAll(
".btn, .nav-item, .dropdown-item, .team-member, .contact-item"
);
interactiveElements.forEach((element) => {
element.addEventListener("mouseenter", () => {
cursor.style.transform = "scale(1.5)";
cursorFollower.style.transform = "scale(1.5)";
});
element.addEventListener("mouseleave", () => {
cursor.style.transform = "scale(1)";
cursorFollower.style.transform = "scale(1)";
});
});
}

// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: "0px 0px -50px 0px",
};

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
}
});
}, observerOptions);

// Observe about sections for animations
document.querySelectorAll(".about-section").forEach((element) => {
observer.observe(element);
});

// Close mobile menu when clicking outside
document.addEventListener("click", (e) => {
const mobileMenu = document.getElementById("mobileMenu");
const menuBtn = document.querySelector(".mobile-menu-btn");

if (!mobileMenu.contains(e.target) && !menuBtn.contains(e.target)) {
mobileMenu.classList.remove("active");
}
});

// Resize handler
window.addEventListener("resize", () => {
const particlesContainer = document.getElementById("particles");
particlesContainer.innerHTML = "";
createParticles();
});

// Loading animation
window.addEventListener("load", () => {
document.body.style.opacity = "0";
document.body.style.transition = "opacity 0.5s ease";

setTimeout(() => {
document.body.style.opacity = "1";
}, 100);
});
</script>
</body>
</html>
Loading