Spaces:

arshia-a1
/

quantumneon-devhub

Running

App Files Files Community

arshia-a1 commited on Nov 2, 2025

Commit

fcd4f84

verified ·

1 Parent(s): 44f4bf1

محتوا و زیبایی سایت را به شکل خلاقانه و زیادی چند برابر کن تعداد صفحات نیز حداقل ۴ تا باشد

Browse files

Files changed (4) hide show

about.html +20 -0
blog.html +75 -0
components/team-members.js +131 -0
projects.html +89 -0

about.html ADDED Viewed

	@@ -0,0 +1,20 @@

+```html
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About SuperNova | Our Mission</title>
+    <meta name="description" content="Learn about SuperNova's mission, values, and the team behind our innovative solutions">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-dark-900 text-gray-200 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <script src="components/navbar.js"></script>
+    <main>
+        <!-- Hero Section -->
+        <section class="relative py-32 px-4 bg-gradient-to-b from-dark-800 to-dark-900">

blog.html ADDED Viewed

	@@ -0,0 +1,75 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SuperNova Blog | Latest Tech Insights</title>
+    <meta name="description" content="Latest articles and insights from SuperNova's team of experts">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-dark-900 text-gray-200 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <script src="components/navbar.js"></script>
+    <main class="max-w-6xl mx-auto py-16 px-4">
+        <h1 class="text-5xl font-bold mb-12 text-center bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">SuperNova Blog</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <article class="bg-dark-800 rounded-xl overflow-hidden border border-dark-700 hover:border-primary-500 transition-all duration-300 hover:-translate-y-2">
+                <img src="http://static.photos/technology/640x360/1" alt="AI Article" class="w-full h-48 object-cover">
+                <div class="p-6">
+                    <div class="flex items-center gap-2 mb-4">
+                        <span class="text-xs px-3 py-1 bg-primary-500/20 text-primary-500 rounded-full">AI</span>
+                        <span class="text-gray-400 text-sm">May 15, 2023</span>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-3">The Future of AI in Web Development</h2>
+                    <p class="text-gray-400 mb-4">Exploring how artificial intelligence is revolutionizing the way we build and interact with web applications.</p>
+                    <a href="#" class="text-primary-500 font-medium inline-flex items-center gap-1 hover:text-primary-400 transition-colors">
+                        Read More <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+            </article>
+            <article class="bg-dark-800 rounded-xl overflow-hidden border border-dark-700 hover:border-secondary-500 transition-all duration-300 hover:-translate-y-2">
+                <img src="http://static.photos/technology/640x360/2" alt="Blockchain Article" class="w-full h-48 object-cover">
+                <div class="p-6">
+                    <div class="flex items-center gap-2 mb-4">
+                        <span class="text-xs px-3 py-1 bg-secondary-500/20 text-secondary-500 rounded-full">Blockchain</span>
+                        <span class="text-gray-400 text-sm">April 28, 2023</span>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-3">Decentralized Applications: The Next Web Revolution</h2>
+                    <p class="text-gray-400 mb-4">How dApps are changing the landscape of internet services and user data ownership.</p>
+                    <a href="#" class="text-secondary-500 font-medium inline-flex items-center gap-1 hover:text-secondary-400 transition-colors">
+                        Read More <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+            </article>
+            <article class="bg-dark-800 rounded-xl overflow-hidden border border-dark-700 hover:border-purple-500 transition-all duration-300 hover:-translate-y-2">
+                <img src="http://static.photos/technology/640x360/3" alt="Web3 Article" class="w-full h-48 object-cover">
+                <div class="p-6">
+                    <div class="flex items-center gap-2 mb-4">
+                        <span class="text-xs px-3 py-1 bg-purple-500/20 text-purple-500 rounded-full">Web3</span>
+                        <span class="text-gray-400 text-sm">March 10, 2023</span>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-3">Building the Metaverse: Tools and Technologies</h2>
+                    <p class="text-gray-400 mb-4">An in-depth look at the frameworks powering the next generation of immersive web experiences.</p>
+                    <a href="#" class="text-purple-500 font-medium inline-flex items-center gap-1 hover:text-purple-400 transition-colors">
+                        Read More <i data-feather="arrow-right" class="w-4 h-4"></i>
+                    </a>
+                </div>
+            </article>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

components/team-members.js ADDED Viewed

	@@ -0,0 +1,131 @@

+class TeamMembers extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          padding: 2rem 0;
+        }
+        .team-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+          gap: 2rem;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .member-card {
+          background: rgba(30, 41, 59, 0.7);
+          border-radius: 16px;
+          overflow: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          transition: all 0.3s ease;
+          position: relative;
+        }
+        .member-card:hover {
+          transform: translateY(-10px);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
+        }
+        .member-image {
+          width: 100%;
+          height: 300px;
+          object-fit: cover;
+        }
+        .member-info {
+          padding: 1.5rem;
+        }
+        .member-name {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 0.5rem;
+          color: white;
+        }
+        .member-role {
+          color: #ec4899;
+          margin-bottom: 1rem;
+          font-weight: 500;
+        }
+        .member-bio {
+          color: rgba(255, 255, 255, 0.8);
+          margin-bottom: 1.5rem;
+          line-height: 1.6;
+        }
+        .social-links {
+          display: flex;
+          gap: 1rem;
+        }
+        .social-link {
+          color: white;
+          background: rgba(79, 70, 229, 0.2);
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+        }
+        .social-link:hover {
+          background: #4f46e5;
+          transform: translateY(-3px);
+        }
+      </style>
+      <div class="team-grid">
+        <div class="member-card animate-on-scroll">
+          <img src="http://static.photos/people/640x360/1" class="member-image" alt="Team Member">
+          <div class="member-info">
+            <h3 class="member-name">Alex Johnson</h3>
+            <p class="member-role">Lead Developer</p>
+            <p class="member-bio">10+ years experience in full-stack development with expertise in React, Node.js and cloud architecture.</p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i data-feather="github"></i></a>
+              <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+              <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+            </div>
+          </div>
+        </div>
+        <div class="member-card animate-on-scroll">
+          <img src="http://static.photos/people/640x360/2" class="member-image" alt="Team Member">
+          <div class="member-info">
+            <h3 class="member-name">Sarah Williams</h3>
+            <p class="member-role">UI/UX Designer</p>
+            <p class="member-bio">Creative designer specializing in user experience and interactive interfaces for web and mobile.</p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i data-feather="github"></i></a>
+              <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+              <a href="#" class="social-link"><i data-feather="dribbble"></i></a>
+            </div>
+          </div>
+        </div>
+        <div class="member-card animate-on-scroll">
+          <img src="http://static.photos/people/640x360/3" class="member-image" alt="Team Member">
+          <div class="member-info">
+            <h3 class="member-name">Michael Chen</h3>
+            <p class="member-role">AI Engineer</p>
+            <p class="member-bio">Machine learning specialist with focus on computer vision and natural language processing.</p>
+            <div class="social-links">
+              <a href="#" class="social-link"><i data-feather="github"></i></a>
+              <a href="#" class="social-link"><i data-feather="twitter"></i></a>
+              <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define('team-members', TeamMembers);

projects.html ADDED Viewed

	@@ -0,0 +1,89 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SuperNova Projects | Our Portfolio</title>
+    <meta name="description" content="Showcase of SuperNova's innovative projects and client work">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-dark-900 text-gray-200 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <script src="components/navbar.js"></script>
+    <main class="max-w-6xl mx-auto py-16 px-4">
+        <h1 class="text-5xl font-bold mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">Our Projects</h1>
+        <p class="text-xl text-center mb-12 max-w-3xl mx-auto">Innovative solutions that push technological boundaries</p>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+            <div class="project-card bg-gradient-to-br from-dark-800 to-dark-900 rounded-2xl p-8 border border-dark-700 hover:border-primary-500 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-16 h-16 rounded-xl bg-primary-500/10 flex items-center justify-center">
+                        <i data-feather="cpu" class="text-primary-500 w-8 h-8"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold">AI-Powered Analytics Platform</h2>
+                </div>
+                <p class="text-gray-400 mb-6">A revolutionary business intelligence tool that uses machine learning to predict market trends with 92% accuracy.</p>
+                <div class="flex flex-wrap gap-2 mb-6">
+                    <span class="text-xs px-3 py-1 bg-primary-500/20 text-primary-500 rounded-full">Machine Learning</span>
+                    <span class="text-xs px-3 py-1 bg-secondary-500/20 text-secondary-500 rounded-full">Big Data</span>
+                    <span class="text-xs px-3 py-1 bg-purple-500/20 text-purple-500 rounded-full">Cloud Computing</span>
+                </div>
+                <a href="#" class="inline-flex items-center gap-2 text-primary-500 hover:text-primary-400 transition-colors">
+                    View Case Study <i data-feather="arrow-right" class="w-4 h-4"></i>
+                </a>
+            </div>
+            <div class="project-card bg-gradient-to-br from-dark-800 to-dark-900 rounded-2xl p-8 border border-dark-700 hover:border-secondary-500 transition-all duration-300">
+                <div class="flex items-center gap-4 mb-6">
+                    <div class="w-16 h-16 rounded-xl bg-secondary-500/10 flex items-center justify-center">
+                        <i data-feather="lock" class="text-secondary-500 w-8 h-8"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold">Blockchain Voting System</h2>
+                </div>
+                <p class="text-gray-400 mb-6">A secure, decentralized voting platform ensuring transparency and preventing fraud in electoral processes.</p>
+                <div class="flex flex-wrap gap-2 mb-6">
+                    <span class="text-xs px-3 py-1 bg-blue-500/20 text-blue-500 rounded-full">Blockchain</span>
+                    <span class="text-xs px-3 py-1 bg-green-500/20 text-green-500 rounded-full">Smart Contracts</span>
+                    <span class="text-xs px-3 py-1 bg-yellow-500/20 text-yellow-500 rounded-full">Zero-Knowledge Proofs</span>
+                </div>
+                <a href="#" class="inline-flex items-center gap-2 text-secondary-500 hover:text-secondary-400 transition-colors">
+                    View Case Study <i data-feather="arrow-right" class="w-4 h-4"></i>
+                </a>
+            </div>
+        </div>
+        <h2 class="text-3xl font-bold mb-8 text-center">More Projects</h2>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-dark-800 rounded-xl p-6 border border-dark-700 hover:border-primary-500 transition-all">
+                <i data-feather="globe" class="w-8 h-8 text-primary-500 mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3>
+                <p class="text-gray-400 mb-4">Scalable online marketplace with AI-powered recommendations.</p>
+                <a href="#" class="text-sm text-primary-500 hover:underline">Learn more</a>
+            </div>
+            <div class="bg-dark-800 rounded-xl p-6 border border-dark-700 hover:border-secondary-500 transition-all">
+                <i data-feather="smartphone" class="w-8 h-8 text-secondary-500 mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">Health Tracking App</h3>
+                <p class="text-gray-400 mb-4">Mobile application for personalized health monitoring.</p>
+                <a href="#" class="text-sm text-secondary-500 hover:underline">Learn more</a>
+            </div>
+            <div class="bg-dark-800 rounded-xl p-6 border border-dark-700 hover:border-purple-500 transition-all">
+                <i data-feather="cloud" class="w-8 h-8 text-purple-500 mb-4"></i>
+                <h3 class="text-xl font-bold mb-2">Cloud Migration</h3>
+                <p class="text-gray-400 mb-4">Enterprise cloud infrastructure transformation.</p>
+                <a href="#" class="text-sm text-purple-500 hover:underline">Learn more</a>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>