features.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Mockup Generator - Create Stunning Designs</title>
    <meta name="description" content="Generate professional website mockups online for free. Use our modern mockup generator to create stunning designs for iPhone, MacBook, iPad, and more.">
    <meta name="keywords" content="website mockup, mockup generator, online mockup tool, free mockup, iPhone mockup, MacBook mockup, iPad mockup, design mockup">
    <meta name="author" content="Your Company Name">
    <meta name="robots" content="index, follow">
    <!-- Canonical URL -->
    <link rel="canonical" href="https://dev-nayanray.github.io">
    <!-- Open Graph Tags for Social Media -->
    <meta property="og:title" content="Modern Mockup Generator - Create Stunning Designs">
    <meta property="og:description" content="Generate professional website mockups online for free. Use our modern mockup generator to create stunning designs for iPhone, MacBook, iPad, and more.">
    <meta property="og:image" content="https://dev-nayanray.github.io/images/landing-thumbnail.jpg">
    <meta property="og:url" content="https://dev-nayanray.github.io">
    <!-- Twitter Card Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Modern Mockup Generator - Create Stunning Designs">
    <meta name="twitter:description" content="Generate professional website mockups online for free. Use our modern mockup generator to create stunning designs for iPhone, MacBook, iPad, and more.">
    <meta name="twitter:image" content="https://dev-nayanray.github.io/images/landing-thumbnail.jpg">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts for Chinese-inspired typography -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* Custom styles for Chinese-inspired design */
        body {
            font-family: 'Inter', sans-serif;
        }
        .chinese-font {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-section {
            background: linear-gradient(135deg, #f9fafb, #eef2ff);
        }
        .hero-title {
            font-size: 3.5rem;
            line-height: 1.2;
        }
        .hero-subtitle {
            font-size: 1.25rem;
            color: #4b5563;
        }
        .feature-card {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .cta-button {
            background-color: #3b82f6;
            color: #ffffff;
            transition: background-color 0.3s ease;
        }
        .cta-button:hover {
            background-color: #2563eb;
        }
        .footer {
            background-color: #1f2937;
            color: #f9fafb;
        }
        .header {
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .language-switcher {
            color: #4b5563;
            transition: color 0.3s ease;
        }
        .language-switcher:hover {
            color: #3b82f6;
        }
        /* Loading Animation */
        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3b82f6;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Mouse Effect */
        .mouse-effect {
            position: fixed;
            width: 20px;
            height: 20px;
            background-color: #3b82f6;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Loading Animation -->
    <div id="loading" class="fixed inset-0 flex items-center justify-center bg-white z-50">
        <div class="loader"></div>
    </div>

    <!-- Mouse Effect -->
    <div class="mouse-effect"></div>

    <!-- Header -->
    <header class="header py-4">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <div class="text-xl font-bold text-gray-900 chinese-font">现代模拟生成器</div>
            <nav class="flex items-center space-x-6">
                <a href="#features" class="text-gray-700 hover:text-blue-500">功能</a>
                <a href="#templates" class="text-gray-700 hover:text-blue-500">模板</a>
                <a href="#pricing" class="text-gray-700 hover:text-blue-500">定价</a>
                <a href="#blog" class="text-gray-700 hover:text-blue-500">博客</a>
                <a href="#upcoming" class="text-gray-700 hover:text-blue-500">即将推出</a>
                <a href="#contact" class="text-gray-700 hover:text-blue-500">联系我们</a>
                <div class="flex items-center space-x-2">
                    <button class="language-switcher" onclick="switchLanguage('en')">EN</button>
                    <span class="text-gray-400">|</span>
                    <button class="language-switcher" onclick="switchLanguage('cn')">中文</button>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-section py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="hero-title font-bold text-gray-900 chinese-font">现代模拟生成器</h1>
            <h2 class="hero-subtitle mt-4">在线创建令人惊叹的网站模型</h2>
            <p class="mt-6 text-gray-600 max-w-2xl mx-auto">
                免费生成专业的网站模型。非常适合设计师、开发人员和营销人员。
            </p>
            <div class="mt-8">
                <a href="#features" class="cta-button px-8 py-3 rounded-lg font-semibold">开始使用</a>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-gray-900">功能</h2>
            <p class="mt-4 text-center text-gray-600 max-w-2xl mx-auto">
                探索我们现代模拟生成器的强大功能。
            </p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Feature 1 -->
                <div class="feature-card p-6 bg-white">
                    <div class="text-4xl text-blue-500">📱</div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">iPhone 模型</h3>
                    <p class="mt-2 text-gray-600">为移动设计创建令人惊叹的 iPhone 模型。</p>
                </div>
                <!-- Feature 2 -->
                <div class="feature-card p-6 bg-white">
                    <div class="text-4xl text-blue-500">💻</div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">MacBook 模型</h3>
                    <p class="mt-2 text-gray-600">为网页和桌面设计专业的 MacBook 模型。</p>
                </div>
                <!-- Feature 3 -->
                <div class="feature-card p-6 bg-white">
                    <div class="text-4xl text-blue-500">🖼️</div>
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">海报模型</h3>
                    <p class="mt-2 text-gray-600">用美丽的海报模型展示您的设计。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Templates Section -->
    <section id="templates" class="py-16 bg-blue-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-gray-900">模板</h2>
            <p class="mt-4 text-center text-gray-600 max-w-2xl mx-auto">
                从各种专业设计的模板中选择。
            </p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Template 1 -->
                <div class="feature-card p-6 bg-white">
                    <img src="https://cdn-icons-png.flaticon.com/512/0/747.png" alt="iPhone Mockup" class="w-full h-32 object-contain">
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">iPhone 模型</h3>
                    <p class="mt-2 text-gray-600">非常适合移动应用程序设计。</p>
                </div>
                <!-- Template 2 -->
                <div class="feature-card p-6 bg-white">
                    <img src="https://cdn-icons-png.flaticon.com/512/0/191.png" alt="MacBook Mockup" class="w-full h-32 object-contain">
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">MacBook 模型</h3>
                    <p class="mt-2 text-gray-600">非常适合网页和桌面设计。</p>
                </div>
                <!-- Template 3 -->
                <div class="feature-card p-6 bg-white">
                    <img src="https://cdn-icons-png.flaticon.com/512/0/488.png" alt="Poster Mockup" class="w-full h-32 object-contain">
                    <h3 class="mt-4 text-xl font-semibold text-gray-900">海报模型</h3>
                    <p class="mt-2 text-gray-600">非常适合印刷和数字海报。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="py-16">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-gray-900">定价</h2>
            <p class="mt-4 text-center text-gray-600 max-w-2xl mx-auto">
                为个人和团队提供实惠的计划。
            </p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Plan 1 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">免费</h3>
                    <p class="mt-2 text-gray-600">个人使用的基本功能。</p>
                    <p class="mt-4 text-2xl font-bold text-gray-900">$0<span class="text-sm text-gray-600">/月</span></p>
                    <button class="cta-button w-full mt-6 px-4 py-2 rounded-lg">开始使用</button>
                </div>
                <!-- Plan 2 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">专业版</h3>
                    <p class="mt-2 text-gray-600">为专业人士提供的高级功能。</p>
                    <p class="mt-4 text-2xl font-bold text-gray-900">$9<span class="text-sm text-gray-600">/月</span></p>
                    <button class="cta-button w-full mt-6 px-4 py-2 rounded-lg">升级</button>
                </div>
                <!-- Plan 3 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">团队版</h3>
                    <p class="mt-2 text-gray-600">为团队提供的协作工具。</p>
                    <p class="mt-4 text-2xl font-bold text-gray-900">$29<span class="text-sm text-gray-600">/月</span></p>
                    <button class="cta-button w-full mt-6 px-4 py-2 rounded-lg">联系我们</button>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section id="blog" class="py-16 bg-blue-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-gray-900">博客</h2>
            <p class="mt-4 text-center text-gray-600 max-w-2xl mx-auto">
                了解设计和模型的最新趋势和技巧。
            </p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Blog Post 1 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">2023 年最佳模型工具</h3>
                    <p class="mt-2 text-gray-600">发现创建令人惊叹的模型的最佳工具。</p>
                    <a href="#" class="mt-4 inline-block text-blue-500 hover:text-blue-600">阅读更多 →</a>
                </div>
                <!-- Blog Post 2 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">如何在 5 个简单步骤中创建模型</h3>
                    <p class="mt-2 text-gray-600">学习如何快速创建专业模型。</p>
                    <a href="#" class="mt-4 inline-block text-blue-500 hover:text-blue-600">阅读更多 →</a>
                </div>
                <!-- Blog Post 3 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">设计模型的未来</h3>
                    <p class="mt-2 text-gray-600">探索设计模型的未来趋势。</p>
                    <a href="#" class="mt-4 inline-block text-blue-500 hover:text-blue-600">阅读更多 →</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Upcoming Features Section -->
    <section id="upcoming" class="py-16">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center text-gray-900">即将推出的功能</h2>
            <p class="mt-4 text-center text-gray-600 max-w-2xl mx-auto">
                令人兴奋的新功能即将推出。敬请期待！
            </p>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Feature 1 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">3D 模型</h3>
                    <p class="mt-2 text-gray-600">为您的设计创建沉浸式 3D 模型。</p>
                </div>
                <!-- Feature 2 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">协作工具</h3>
                    <p class="mt-2 text-gray-600">与您的团队无缝协作创建模型。</p>
                </div>
                <!-- Feature 3 -->
                <div class="feature-card p-6 bg-white">
                    <h3 class="text-xl font-semibold text-gray-900">AI 驱动的设计</h3>
                    <p class="mt-2 text-gray-600">利用 AI 轻松创建令人惊叹的设计。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action Section -->
    <section class="py-20 bg-blue-50">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold text-gray-900">准备好创建了吗？</h2>
            <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                立即开始生成专业模型。免费、快速且易于使用。
            </p>
            <div class="mt-8">
                <a href="websitemockupdesigntool.html" class="cta-button px-8 py-3 rounded-lg font-semibold">立即开始</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer py-10">
        <div class="container mx-auto px-6 text-center">
            <p class="text-gray-400">© 2023 现代模拟生成器。保留所有权利。</p>
            <div class="mt-4">
                <a href="#" class="text-gray-400 hover:text-gray-300 mx-2">隐私政策</a>
                <a href="#" class="text-gray-400 hover:text-gray-300 mx-2">服务条款</a>
            </div>
        </div>
    </footer>

    <!-- Language Switcher Script -->
    <script>
        function switchLanguage(lang) {
            if (lang === 'cn') {
                document.querySelector('.hero-title').textContent = '现代模拟生成器';
                document.querySelector('.hero-subtitle').textContent = '在线创建令人惊叹的网站模型';
            } else {
                document.querySelector('.hero-title').textContent = 'Modern Mockup Generator';
                document.querySelector('.hero-subtitle').textContent = 'Create Stunning Website Mockups Online';
            }
        }

        // Loading Animation
        window.addEventListener('load', () => {
            const loading = document.getElementById('loading');
            loading.style.display = 'none';
        });

        // Mouse Effect
        document.addEventListener('mousemove', (e) => {
            const mouseEffect = document.querySelector('.mouse-effect');
            mouseEffect.style.left = `${e.pageX}px`;
            mouseEffect.style.top = `${e.pageY}px`;
        });
    </script>
</body>
</html>