File size: 4,265 Bytes
cb2b30f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCanvas Studio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-gray-100">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-12">
        <section class="hero-section mb-20">
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2 animate-fade-in">
                    <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
                        Where Code Meets Creativity
                    </h1>
                    <p class="text-xl text-gray-300 mb-8">
                        Build stunning full-stack applications with our feature-rich platform that combines powerful backend with beautiful frontend.
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="/dashboard" class="btn-primary">
                            Get Started <i data-feather="arrow-right" class="ml-2"></i>
                        </a>
                        <a href="/features" class="btn-secondary">
                            Explore Features
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 animate-float">
                    <img src="http://static.photos/technology/1024x576/42" alt="Code illustration" class="rounded-xl shadow-2xl border-2 border-purple-500/20">
                </div>
            </div>
        </section>

        <section class="features-section mb-20">
            <h2 class="text-3xl font-bold text-center mb-12">✨ Powerful Features</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="feature-card">
                    <div class="icon-wrapper bg-purple-500/10 text-purple-400">
                        <i data-feather="database"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Flexible Database</h3>
                    <p class="text-gray-400">Choose between SQL or NoSQL databases with seamless integration.</p>
                </div>
                <div class="feature-card">
                    <div class="icon-wrapper bg-blue-500/10 text-blue-400">
                        <i data-feather="cpu"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">RESTful APIs</h3>
                    <p class="text-gray-400">Auto-generated endpoints with comprehensive documentation.</p>
                </div>
                <div class="feature-card">
                    <div class="icon-wrapper bg-pink-500/10 text-pink-400">
                        <i data-feather="layout"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">UI Components</h3>
                    <p class="text-gray-400">Beautiful, responsive components built with Tailwind CSS.</p>
                </div>
            </div>
        </section>

        <section class="cta-section bg-gradient-to-r from-purple-900/50 to-blue-900/50 rounded-2xl p-8 md:p-12 text-center">
            <h2 class="text-3xl font-bold mb-4">Ready to Build Something Amazing?</h2>
            <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">Join thousands of developers creating exceptional full-stack applications with ease.</p>
            <a href="/signup" class="btn-primary mx-auto">
                Create Free Account
            </a>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>