<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studio Easel - The Ultimate Private Shortlink Manager</title>
    <meta name="description" content="Studio Easel is a private shortlink manager designed for professionals. Create, manage, and analyze your short URLs with ease and security.">
    <meta name="keywords" content="shortlink, URL shortener, private shortlink manager, link management, link analytics, custom slugs, secure shortlinks">
    <meta name="author" content="Studio Easel">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Studio Easel - The Ultimate Private Shortlink Manager">
    <meta property="og:description" content="Studio Easel is a private shortlink manager designed for professionals. Create, manage, and analyze your short URLs with ease and security.">
    <meta property="og:image" content="assets/images/studioeasel-banner.png">
    <meta property="og:url" content="https://studioeasel.com">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Studio Easel">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Studio Easel - The Ultimate Private Shortlink Manager">
    <meta name="twitter:description" content="Studio Easel is a private shortlink manager designed for professionals. Create, manage, and analyze your short URLs with ease and security.">
    <meta name="twitter:image" content="assets/images/studioeasel-banner.png">
    <meta name="twitter:site" content="@studioeasel">
    <meta name="twitter:creator" content="@studioeasel">
    <meta itemprop="name" content="Studio Easel - The Ultimate Private Shortlink Manager">
    <meta itemprop="description" content="Studio Easel is a private shortlink manager designed for professionals. Create, manage, and analyze your short URLs with ease and security.">
    <meta itemprop="image" content="assets/images/studioeasel-banner.png">
    <link rel="canonical" href="https://studioeasel.com">
    <link rel="shortcut icon" href="assets/images/studioeasel-favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="home-body">
    <header class="home-header">
        <div class="header-inner">
            <img src="assets/images/studioeasel-logo.png" alt="Studio Easel Logo" class="home-logo">
            <nav class="home-nav">
                <a href="#features">Features</a>
                <a href="#pricing">Pricing</a>
                <a href="#faq">FAQ</a>
            </nav>
            <a href="login.php" class="btn btn-login">Log in</a>
        </div>
    </header>

    <section class="hero-banner">
        <div class="hero-content">
            <img src="assets/images/studioeasel-banner.png" alt="Hero Banner" style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:2rem;">
            <h1>Manage Your Short Links Effortlessly and Securely.</h1>
            <p>A professional solution to create, monitor, and organize your shortlinks in private. Take full control of every link you share.</p>
            <a href="login.php" class="cta-button">Get Started</a>
        </div>
    </section>

    <section id="features" class="section features-section">
        <h2 class="section-title">Built for Your Needs.</h2>
        <div class="features-grid">
            <div class="feature-card">
                <h3 class="feature-title">Advanced Analytics</h3>
                <p>Gain insights into your traffic with real-time charts on devices, browsers, and daily clicks. Make data-driven decisions to optimize your campaigns.</p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">Customizable Slugs</h3>
                <p>Brand your links with meaningful and professional slugs (e.g., studioeasel.com/your-brand). Leave generic codes behind.</p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">Secure & Private</h3>
                <p>Your data is our priority. With a private dashboard, your links and click data are secure and accessible only to you.</p>
            </div>
            <div class="feature-card">
                <h3 class="feature-title">Full Control</h3>
                <p>Generate, edit, and delete links with ease. Your private link library is always at your fingertips, giving you complete control.</p>
            </div>
        </div>
    </section>

    <section id="pricing" class="section pricing-section">
        <h2 class="section-title">Flexible Pricing, No Surprises.</h2>
        <p class="section-subtitle">Choose the plan that fits your professional needs. All plans include full admin dashboard access.</p>
        <div class="pricing-grid">
            <div class="pricing-card">
                <h3>Starter</h3>
                <p class="price-tag">Free</p>
                <p class="price-info">For personal use and testing.</p>
                <ul>
                    <li>1,000 Clicks/Month</li>
                    <li>Basic Analytics</li>
                    <li>5 Custom Links</li>
                    <li>Standard Support</li>
                </ul>
                <a href="login.php" class="btn btn-primary">Start Now</a>
            </div>
            <div class="pricing-card recommended">
                <h3>Professional</h3>
                <p class="price-tag">$49<span>/month</span></p>
                <p class="price-info">Perfect for professionals & small teams.</p>
                <ul>
                    <li>Unlimited Clicks</li>
                    <li>Advanced Analytics</li>
                    <li>Unlimited Custom Links</li>
                    <li>Priority Email Support</li>
                </ul>
                <a href="login.php" class="btn btn-primary">Get Started</a>
            </div>
            <div class="pricing-card">
                <h3>Enterprise</h3>
                <p class="price-tag">Contact Us</p>
                <p class="price-info">For large-scale business solutions.</p>
                <ul>
                    <li>Dedicated Server</li>
                    <li>White-Label Solution</li>
                    <li>API Access</li>
                    <li>Account Manager</li>
                    <li>24/7 Phone Support</li>
                </ul>
                <a href="login.php" class="btn btn-primary">Request a Demo</a>
            </div>
        </div>
    </section>

    <section id="faq" class="section faq-section">
        <h2 class="section-title">Frequently Asked Questions</h2>
        <div class="faq-accordion">
            <div class="faq-item">
                <button class="faq-question">What makes Studio Easel private?</button>
                <div class="faq-answer">
                    <p>Studio Easel is designed as a private, single-user solution. Unlike public shortlink services, your dashboard and data are not shared or accessible by anyone else, ensuring complete privacy and security.</p>
                </div>
            </div>
            <div class="faq-item">
                <button class="faq-question">Can I use my own domain?</button>
                <div class="faq-answer">
                    <p>Yes, the platform is built to be installed on your own domain (e.g., studioeasel.com), giving you full control and a branded experience for all your shortlinks.</p>
                </div>
            </div>
            <div class="faq-item">
                <button class="faq-question">Is the analytics feature accurate?</button>
                <div class="faq-answer">
                    <p>Our analytics are highly accurate and update in real-time. We track clicks, devices, browsers, and geographical data to provide a comprehensive view of your link performance.</p>
                </div>
            </div>
        </div>
    </section>

    <footer class="home-footer">
        <p>&copy; 2026 Studio Easel. All rights reserved.</p>
    </footer>

    <script>
        document.querySelectorAll('.faq-question').forEach(button => {
            button.addEventListener('click', () => {
                const answer = button.nextElementSibling;
                button.classList.toggle('active');
                if (button.classList.contains('active')) {
                    answer.style.maxHeight = answer.scrollHeight + 'px';
                } else {
                    answer.style.maxHeight = 0;
                }
            });
        });
    </script>
</body>
</html>