Spaces:

Talle2-X
/

codecraft-pro-suite

Running

App Files Files Community

Talle2-X commited on Jan 18

Commit

11cc93c

verified ·

1 Parent(s): c8c8961

Create a software product page with hero demo video, features comparison table, integration logos, API documentation link, use cases with examples, security certifications, customer stories, and free trial signup.

Browse files

Files changed (6) hide show

README.md +7 -4
components/footer.js +141 -0
components/navbar.js +100 -0
index.html +406 -19
script.js +60 -0
style.css +32 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Codecraft Pro Suite
-emoji: 🐠
-colorFrom: pink
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CodeCraft Pro Suite 🚀
+colorFrom: red
 colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,141 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background-color: #1a202c;
+          color: #e2e8f0;
+          padding: 4rem 1rem;
+        }
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          display: grid;
+          grid-template-columns: repeat(1, 1fr);
+          gap: 2rem;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.25rem;
+          margin-bottom: 1rem;
+        }
+        .logo-icon {
+          margin-right: 0.5rem;
+          color: #63b3ed;
+        }
+        .description {
+          color: #a0aec0;
+          margin-bottom: 2rem;
+          max-width: 300px;
+        }
+        .footer-heading {
+          font-weight: 600;
+          font-size: 1.125rem;
+          margin-bottom: 1.5rem;
+          color: white;
+        }
+        .footer-links {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        .footer-link {
+          color: #a0aec0;
+          transition: color 0.2s;
+        }
+        .footer-link:hover {
+          color: #63b3ed;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-link {
+          color: #a0aec0;
+          transition: color 0.2s;
+        }
+        .social-link:hover {
+          color: #63b3ed;
+        }
+        .copyright {
+          border-top: 1px solid #2d3748;
+          padding-top: 2rem;
+          margin-top: 4rem;
+          color: #a0aec0;
+          text-align: center;
+        }
+        @media (min-width: 640px) {
+          .container {
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
+        @media (min-width: 768px) {
+          .container {
+            grid-template-columns: repeat(4, 1fr);
+          }
+        }
+      </style>
+      <div class="container">
+        <div>
+          <div class="logo">
+            <i data-feather="code" class="logo-icon"></i>
+            CodeCraft Pro
+          </div>
+          <p class="description">
+            The complete developer toolkit that accelerates your workflow and supercharges productivity.
+          </p>
+          <div class="social-links">
+            <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+            <a href="#" class="social-link"><i data-feather="github"></i></a>
+            <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+            <a href="#" class="social-link"><i data-feather="youtube"></i></a>
+          </div>
+        </div>
+        <div>
+          <h3 class="footer-heading">Product</h3>
+          <div class="footer-links">
+            <a href="#" class="footer-link">Features</a>
+            <a href="#" class="footer-link">Pricing</a>
+            <a href="#" class="footer-link">Documentation</a>
+            <a href="#" class="footer-link">API Status</a>
+            <a href="#" class="footer-link">Releases</a>
+          </div>
+        </div>
+        <div>
+          <h3 class="footer-heading">Company</h3>
+          <div class="footer-links">
+            <a href="#" class="footer-link">About</a>
+            <a href="#" class="footer-link">Blog</a>
+            <a href="#" class="footer-link">Careers</a>
+            <a href="#" class="footer-link">Press</a>
+            <a href="#" class="footer-link">Contact</a>
+          </div>
+        </div>
+        <div>
+          <h3 class="footer-heading">Legal</h3>
+          <div class="footer-links">
+            <a href="#" class="footer-link">Privacy</a>
+            <a href="#" class="footer-link">Terms</a>
+            <a href="#" class="footer-link">Security</a>
+            <a href="#" class="footer-link">GDPR</a>
+            <a href="#" class="footer-link">Compliance</a>
+          </div>
+        </div>
+      </div>
+      <div class="copyright">
+        &copy; ${new Date().getFullYear()} CodeCraft Technologies, Inc. All rights reserved.
+      </div>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,100 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          background-color: white;
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        }
+        .container {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 0 1rem;
+          height: 4rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .logo {
+          display: flex;
+          align-items: center;
+          font-weight: 700;
+          font-size: 1.25rem;
+          color: #1a365d;
+        }
+        .logo-icon {
+          margin-right: 0.5rem;
+          color: #3182ce;
+        }
+        .nav-links {
+          display: none;
+        }
+        .mobile-menu-button {
+          display: block;
+        }
+        .nav-link {
+          color: #4a5568;
+          font-weight: 500;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          transition: all 0.2s;
+        }
+        .nav-link:hover {
+          color: #3182ce;
+          background-color: #ebf8ff;
+        }
+        .nav-link.active {
+          color: #3182ce;
+          font-weight: 600;
+        }
+        .cta-button {
+          background-color: #3182ce;
+          color: white;
+          font-weight: 500;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          transition: all 0.2s;
+        }
+        .cta-button:hover {
+          background-color: #2c5282;
+        }
+        @media (min-width: 768px) {
+          .nav-links {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+          }
+          .mobile-menu-button {
+            display: none;
+          }
+        }
+      </style>
+      <div class="container">
+        <a href="/" class="logo">
+          <i data-feather="code" class="logo-icon"></i>
+          CodeCraft Pro
+        </a>
+        <div class="nav-links">
+          <a href="#features" class="nav-link">Features</a>
+          <a href="#demo" class="nav-link">Demo</a>
+          <a href="#pricing" class="nav-link">Pricing</a>
+          <a href="#docs" class="nav-link">Docs</a>
+          <a href="#free-trial" class="cta-button">Free Trial</a>
+        </div>
+        <button class="mobile-menu-button">
+          <i data-feather="menu"></i>
+        </button>
+      </div>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,406 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CodeCraft Pro Suite - Powerful Development Tools</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <!-- Hero Section -->
+    <section class="py-20 px-4 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
+        <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
+            <div>
+                <h1 class="text-4xl md:text-5xl font-bold mb-6">Build Better, Faster with CodeCraft Pro</h1>
+                <p class="text-xl mb-8">The complete developer toolkit that accelerates your workflow and supercharges productivity.</p>
+                <div class="flex flex-wrap gap-4">
+                    <a href="#free-trial" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-semibold transition">Start Free Trial</a>
+                    <a href="#demo" class="border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-semibold transition">Watch Demo</a>
+                </div>
+            </div>
+            <div class="relative">
+                <div class="aspect-w-16 aspect-h-9 bg-black rounded-xl overflow-hidden shadow-2xl">
+                    <iframe class="w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                </div>
+                <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-lg font-bold text-sm shadow-lg">New v3.0</div>
+            </div>
+        </div>
+    </section>
+    <!-- Trusted By -->
+    <section class="py-16 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-center text-gray-500 text-sm uppercase font-semibold tracking-wider mb-8">Trusted by innovative teams worldwide</h2>
+            <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-items-center">
+                <img src="http://static.photos/technology/320x240/1" alt="TechCorp" class="h-12 grayscale hover:grayscale-0 transition">
+                <img src="http://static.photos/technology/320x240/2" alt="InnoSoft" class="h-12 grayscale hover:grayscale-0 transition">
+                <img src="http://static.photos/technology/320x240/3" alt="DataSystems" class="h-12 grayscale hover:grayscale-0 transition">
+                <img src="http://static.photos/technology/320x240/4" alt="CloudNine" class="h-12 grayscale hover:grayscale-0 transition">
+                <img src="http://static.photos/technology/320x240/5" alt="FutureTech" class="h-12 grayscale hover:grayscale-0 transition">
+            </div>
+        </div>
+    </section>
+    <!-- Features Comparison -->
+    <section id="features" class="py-20 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-4">Choose Your Perfect Plan</h2>
+            <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Compare features across our different plans to find what works best for your team.</p>
+            <div class="overflow-x-auto">
+                <table class="w-full bg-white rounded-xl shadow-sm overflow-hidden">
+                    <thead>
+                        <tr class="border-b">
+                            <th class="text-left p-6">Feature</th>
+                            <th class="p-6 text-center">Starter</th>
+                            <th class="p-6 text-center">Professional</th>
+                            <th class="p-6 text-center">Enterprise</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="p-6 font-medium">API Requests</td>
+                            <td class="p-6 text-center">1,000/mo</td>
+                            <td class="p-6 text-center">10,000/mo</td>
+                            <td class="p-6 text-center">Unlimited</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="p-6 font-medium">Collaborators</td>
+                            <td class="p-6 text-center">Up to 5</td>
+                            <td class="p-6 text-center">Up to 25</td>
+                            <td class="p-6 text-center">Unlimited</td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="p-6 font-medium">Priority Support</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="text-red-500"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="text-green-500"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="text-green-500"></i></td>
+                        </tr>
+                        <tr class="border-b hover:bg-gray-50">
+                            <td class="p-6 font-medium">Custom Integrations</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="text-red-500"></i></td>
+                            <td class="p-6 text-center">3 included</td>
+                            <td class="p-6 text-center">Unlimited</td>
+                        </tr>
+                        <tr class="hover:bg-gray-50">
+                            <td class="p-6 font-medium">Security Audit</td>
+                            <td class="p-6 text-center"><i data-feather="x" class="text-red-500"></i></td>
+                            <td class="p-6 text-center"><i data-feather="x" class="text-red-500"></i></td>
+                            <td class="p-6 text-center"><i data-feather="check" class="text-green-500"></i></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+    <!-- Integrations -->
+    <section class="py-20 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">Seamless Integrations</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Connect with your favorite tools and services to create a customized workflow.</p>
+            </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition flex flex-col items-center">
+                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="database" class="text-blue-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">Database</h3>
+                    <p class="text-gray-600 text-sm text-center">MySQL, PostgreSQL, MongoDB</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition flex flex-col items-center">
+                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="cloud" class="text-green-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">Cloud</h3>
+                    <p class="text-gray-600 text-sm text-center">AWS, Google Cloud, Azure</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition flex flex-col items-center">
+                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="message-square" class="text-purple-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">Communication</h3>
+                    <p class="text-gray-600 text-sm text-center">Slack, Teams, Discord</p>
+                </div>
+                <div class="bg-gray-50 p-6 rounded-xl hover:shadow-md transition flex flex-col items-center">
+                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="code" class="text-yellow-600"></i>
+                    </div>
+                    <h3 class="font-semibold mb-2">APIs</h3>
+                    <p class="text-gray-600 text-sm text-center">REST, GraphQL, Webhooks</p>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center">
+                    View all integrations <i data-feather="arrow-right" class="ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- API Documentation -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h2 class="text-3xl font-bold mb-6">Developer-Friendly API</h2>
+                    <p class="text-gray-600 mb-6">Our comprehensive API documentation makes integration a breeze with code samples in multiple languages and interactive examples.</p>
+                    <ul class="space-y-4 mb-8">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-3 mt-1"></i>
+                            <span>Detailed reference documentation</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-3 mt-1"></i>
+                            <span>Interactive API explorer</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 mr-3 mt-1"></i>
+                            <span>SDKs for popular languages</span>
+                        </li>
+                    </ul>
+                    <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold inline-flex items-center transition">
+                        API Documentation <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
+                </div>
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-xl">
+                    <div class="bg-gray-900 px-4 py-3 flex items-center">
+                        <div class="flex space-x-2">
+                            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+                        </div>
+                        <div class="text-gray-400 text-sm ml-4">api-example.js</div>
+                    </div>
+                    <pre class="p-6 text-green-400 font-mono text-sm overflow-x-auto">
+<span class="text-blue-400">const</span> <span class="text-yellow-400">CodeCraft</span> = <span class="text-blue-400">require</span>(<span class="text-green-300">'codecraft-sdk'</span>);
+<span class="text-blue-400">const</span> client = <span class="text-blue-400">new</span> <span class="text-yellow-400">CodeCraft</span>({
+  apiKey: <span class="text-green-300">'your-api-key'</span>,
+  environment: <span class="text-green-300">'production'</span>
+});
+<span class="text-gray-600">// Create a new project</span>
+client.projects.create({
+  name: <span class="text-green-300">'My Awesome App'</span>,
+  description: <span class="text-green-300">'Building something great!'</span>
+}).then(<span class="text-blue-400">response</span> => {
+  console.log(<span class="text-green-300">'Project created:'</span>, response);
+});</pre>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Use Cases -->
+    <section class="py-20 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">Powerful Use Cases</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">See how teams are using CodeCraft Pro to solve real-world problems.</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/1" alt="Web Development" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-3">Web Development</h3>
+                        <p class="text-gray-600 mb-4">Accelerate your web projects with our pre-built components and automated deployment pipelines.</p>
+                        <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center">
+                            Learn more <i data-feather="arrow-right" class="ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/2" alt="Mobile Apps" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-3">Mobile Apps</h3>
+                        <p class="text-gray-600 mb-4">Build cross-platform mobile apps faster with our unified codebase approach.</p>
+                        <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center">
+                            Learn more <i data-feather="arrow-right" class="ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="bg-gray-50 rounded-xl overflow-hidden hover:shadow-lg transition">
+                    <img src="http://static.photos/technology/640x360/3" alt="Data Science" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="font-bold text-xl mb-3">Data Science</h3>
+                        <p class="text-gray-600 mb-4">Process and visualize large datasets with our optimized data pipelines.</p>
+                        <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center">
+                            Learn more <i data-feather="arrow-right" class="ml-2"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Security -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div class="order-2 md:order-1">
+                    <h2 class="text-3xl font-bold mb-6">Enterprise-Grade Security</h2>
+                    <p class="text-gray-600 mb-6">Your data's security is our top priority. We adhere to the highest industry standards to protect your information.</p>
+                    <div class="grid grid-cols-2 gap-4 mb-8">
+                        <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
+                            <div class="bg-green-100 p-3 rounded-full mr-4">
+                                <i data-feather="lock" class="text-green-600"></i>
+                            </div>
+                            <span class="font-medium">SOC 2 Type II</span>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
+                            <div class="bg-blue-100 p-3 rounded-full mr-4">
+                                <i data-feather="shield" class="text-blue-600"></i>
+                            </div>
+                            <span class="font-medium">GDPR Compliant</span>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
+                            <div class="bg-purple-100 p-3 rounded-full mr-4">
+                                <i data-feather="award" class="text-purple-600"></i>
+                            </div>
+                            <span class="font-medium">ISO 27001</span>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm flex items-center">
+                            <div class="bg-yellow-100 p-3 rounded-full mr-4">
+                                <i data-feather="key" class="text-yellow-600"></i>
+                            </div>
+                            <span class="font-medium">End-to-End Encryption</span>
+                        </div>
+                    </div>
+                    <a href="#" class="text-blue-600 hover:text-blue-800 font-semibold inline-flex items-center">
+                        Security Overview <i data-feather="arrow-right" class="ml-2"></i>
+                    </a>
+                </div>
+                <div class="order-1 md:order-2">
+                    <img src="http://static.photos/technology/640x360/4" alt="Security" class="rounded-xl shadow-lg w-full">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Customer Stories -->
+    <section class="py-20 bg-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold mb-4">What Our Customers Say</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our customers have to say about CodeCraft Pro.</p>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/1" alt="Sarah Johnson" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">Sarah Johnson</h4>
+                            <p class="text-gray-600 text-sm">CTO at TechCorp</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 mb-6">"CodeCraft Pro has transformed our development workflow. We've reduced deployment times by 60% while improving code quality."</p>
+                    <div class="flex text-yellow-400">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/2" alt="Michael Chen" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">Michael Chen</h4>
+                            <p class="text-gray-600 text-sm">Lead Developer at InnoSoft</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 mb-6">"The API documentation is the best I've ever worked with. Our integration was up and running in less than a day."</p>
+                    <div class="flex text-yellow-400">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-8 rounded-xl">
+                    <div class="flex items-center mb-6">
+                        <img src="http://static.photos/people/200x200/3" alt="Emma Rodriguez" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-semibold">Emma Rodriguez</h4>
+                            <p class="text-gray-600 text-sm">Product Manager at DataSystems</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 mb-6">"Our team collaboration has improved dramatically since switching to CodeCraft Pro. The built-in code review tools are fantastic."</p>
+                    <div class="flex text-yellow-400">
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                        <i data-feather="star" class="fill-current"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Free Trial -->
+    <section id="free-trial" class="py-20 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
+        <div class="max-w-4xl mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Workflow?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of developers and teams who are building better software faster with CodeCraft Pro.</p>
+            <div class="bg-white rounded-xl shadow-xl p-8 max-w-2xl mx-auto text-gray-800">
+                <h3 class="text-2xl font-bold mb-6">Start Your 14-Day Free Trial</h3>
+                <form class="grid md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="name" class="block text-left mb-2 font-medium">Full Name</label>
+                        <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="email" class="block text-left mb-2 font-medium">Work Email</label>
+                        <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="company" class="block text-left mb-2 font-medium">Company</label>
+                        <input type="text" id="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="role" class="block text-left mb-2 font-medium">Role</label>
+                        <select id="role" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                            <option>Developer</option>
+                            <option>Engineering Manager</option>
+                            <option>CTO</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                    <div class="md:col-span-2">
+                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition">
+                            Get Started Now
+                        </button>
+                    </div>
+                </form>
+                <p class="text-gray-500 text-sm mt-4">No credit card required. Cancel anytime.</p>
+            </div>
+        </div>
+    </section>
+    <custom-footer></custom-footer>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,60 @@

+// Main JavaScript file for global functionality
+document.addEventListener('DOMContentLoaded', function() {
+    // Mobile menu toggle functionality
+    document.addEventListener('click', function(e) {
+        if (e.target.closest('.mobile-menu-button')) {
+            const navbar = document.querySelector('custom-navbar');
+            const shadowRoot = navbar.shadowRoot;
+            const navLinks = shadowRoot.querySelector('.nav-links');
+            if (navLinks.style.display === 'flex') {
+                navLinks.style.display = 'none';
+            } else {
+                navLinks.style.display = 'flex';
+                navLinks.style.flexDirection = 'column';
+                navLinks.style.position = 'absolute';
+                navLinks.style.top = '100%';
+                navLinks.style.left = '0';
+                navLinks.style.right = '0';
+                navLinks.style.backgroundColor = 'white';
+                navLinks.style.padding = '1rem';
+                navLinks.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
+            }
+        }
+    });
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+    // Form submission handling
+    const forms = document.querySelectorAll('form');
+    forms.forEach(form => {
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            // In a real app, you would send this data to your server
+            const formData = new FormData(this);
+            const data = Object.fromEntries(formData.entries());
+            console.log('Form submitted:', data);
+            // Show success message
+            alert('Thank you for your interest! We\'ll be in touch soon.');
+            this.reset();
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,42 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles that complement Tailwind */
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    line-height: 1.5;
 }
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }
+/* Custom animation for hover effects */
+.hover-scale {
+    transition: transform 0.2s ease-in-out;
 }
+.hover-scale:hover {
+    transform: scale(1.02);
 }
+/* Custom shadow for cards */
+.custom-shadow {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
+/* Pre code block styling */
+pre {
+    background-color: #1a202c;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    overflow-x: auto;
+}
+/* Responsive table */
+@media (max-width: 640px) {
+    table {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}