Upload 5 files

css/style.css

@@ -0,0 +1,758 @@
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: #000;
+  color: #fff;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Layout */
+.container {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Sidebar Styles */
+.sidebar {
+  width: 232px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  padding: 10px;
+  border-right: 1px solid #404040;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000;
+  transform: translateX(0);
+  transition: transform 0.3s ease-in-out;
+  z-index: 999;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 99.2px;
+  padding: 1px 0;
+}
+
+.sidebar-header span {
+  font-size: 27px;
+  font-weight: 400;
+  line-height: 32.4px;
+}
+
+.nav-items {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  padding: 0 12px;
+  text-decoration: none;
+  color: #fff;
+}
+
+.nav-item.active {
+  border: 1px solid #7550DC;
+}
+
+.nav-item svg {
+  width: 20px;
+  height: 21px;
+}
+
+.nav-item span {
+  font-size: 14px;
+  line-height: 16.8px;
+}
+
+.nav-item .indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+}
+
+.nav-item .indicator div {
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+/* Close Button Styles */
+.close-menu {
+  display: none; /* Hidden by default, shown on mobile */
+}
+
+/* Footer Styles */
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  margin-top: auto;
+}
+
+.footer .powered-by {
+  color: #999;
+  font-size: 9px;
+  line-height: 10px;
+  letter-spacing: -0.2px;
+}
+
+.footer img {
+  width: 46px;
+  height: 26px;
+}
+
+.footer .copyright {
+  display: flex;
+  gap: 4px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  line-height: 14.4px;
+}
+
+.footer .copyright .year {
+  font-weight: 500;
+}
+
+/* Main Content Styles */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 46px;
+  padding: 54px 10px 10px 10px;
+  margin-left: 232px;
+}
+
+/* Remove only the top padding for index.html */
+body.index-page .main-content {
+  padding-top: 0;
+}
+
+/* Top Bar Styles */
+.top-bar {
+  position: fixed;
+  top: 0;
+  left: 232px;
+  right: 0;
+  background-color: #000;
+  border-bottom: 1px solid #7550DC;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+}
+
+.top-bar__hamburger {
+  display: none;
+  color: #fff;
+  font-size: 24px;
+  padding: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.top-bar__content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.top-bar__credits {
+  background-color: #7550DC;
+  color: #fff;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.top-bar__upgrade {
+  background-color: #7550DC;
+  color: #fff;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  border: none;
+  cursor: pointer;
+}
+
+.top-bar__welcome {
+  color: #fff;
+  padding: 2px 10px;
+  border: 1px solid #7550DC;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.top-bar__avatar {
+  width: 36px;
+  height: 36px;
+  background-color: #d9d9d9;
+  border-radius: 50%;
+}
+
+/* Hero Styles */
+.hero {
+  position: relative;
+  height: 303px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.hero video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero h1 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 50px;
+  font-weight: 600;
+  line-height: 60px;
+  letter-spacing: -1.5px;
+  color: rgba(255, 255, 255, 0.62);
+  text-align: center;
+}
+
+/* Feature Cards Styles */
+.feature-cards {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+.feature-card {
+  width: 180px;
+  height: 74px;
+  background-color: rgba(255, 255, 255, 0.14);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.feature-card .highlight {
+  width: 44px;
+  height: 64px;
+  background-color: #7550DC;
+  margin-left: 5px;
+}
+
+.feature-card .content {
+  display: flex;
+  align-items: center;
+  margin-left: 2px;
+}
+
+.feature-card .icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 35px;
+}
+
+.feature-card .icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.feature-card span {
+  color: #fff;
+  font-size: 16px;
+  line-height: 20px;
+  letter-spacing: -0.1px;
+  margin-left: 14px;
+}
+
+/* Why Section Styles */
+.why-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.why-section h2 {
+  font-size: 32px;
+  line-height: 44.8px;
+}
+
+.bullet-points {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.bullet-point {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.bullet-point .bullet {
+  font-size: 16px;
+}
+
+.bullet-point .text {
+  font-size: 16px;
+  line-height: 22.4px;
+}
+
+/* Content Section Styles */
+.content-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.content-section h2 {
+  font-size: 32px;
+  line-height: 44.8px;
+}
+
+.content-section img {
+  width: 100%;
+  height: 174px;
+  object-fit: cover;
+}
+
+.content-section .divider {
+  border-top: 1px solid #404040;
+  margin-top: 15px;
+}
+
+.content-section p {
+  font-size: 16px;
+  line-height: 22.4px;
+  margin-top: 24px;
+}
+
+/* Image Generation Section (Face Fusion Page) */
+.image-generation {
+  padding: 40px 20px;
+  background-color: #111;
+  border-bottom: 1px solid #404040;
+}
+
+.generation-container {
+  display: flex;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Left Column: Inputs */
+.generation-inputs {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  padding-right: 20px;
+}
+
+.upload-box {
+  margin-bottom: 20px;
+}
+
+.upload-label {
+  display: block;
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+.upload-box input[type="file"] {
+  width: 100%;
+  padding: 12px;
+  background-color: #222;
+  border: 2px solid #7550DC;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.upload-box input[type="file"]::-webkit-file-upload-button {
+  background-color: #7550DC;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.upload-box input[type="file"]::-webkit-file-upload-button:hover {
+  background-color: #6440cc;
+}
+
+.prompt-box {
+  margin-bottom: 20px;
+}
+
+.prompt-label {
+  display: block;
+  font-size: 16px;
+  color: #fff;
+  margin-bottom: 8px;
+}
+
+#generationPrompt {
+  width: 100%;
+  padding: 12px;
+  background-color: #222;
+  border: 2px solid #7550DC;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  resize: none;
+  outline: none;
+}
+
+#generationPrompt::placeholder {
+  color: #757575;
+}
+
+.generate-btn {
+  padding: 12px;
+  background-color: #7550DC;
+  border: none;
+  border-radius: 8px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.generate-btn:hover {
+  background-color: #6440cc;
+}
+
+/* Right Column: Preview */
+.generation-preview {
+  width: 55%;
+}
+
+.preview-box {
+  width: 100%;
+  height: 400px;
+  background-color: #222;
+  border: 2px solid #7550DC;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.preview-placeholder {
+  color: #666;
+  font-size: 16px;
+  text-align: center;
+  padding: 20px;
+}
+
+/* Introduction Section (Face Fusion Page) */
+.box-border h1 {
+  font-size: 32px;
+  margin-bottom: 24px;
+}
+
+.box-border div {
+  font-size: 16px;
+  line-height: 1.4;
+  margin-bottom: 48px;
+}
+
+/* Image Comparison Section (Face Fusion Page) */
+.image-comparison {
+  display: flex;
+  gap: 64px;
+  padding: 64px;
+  border-radius: 24px;
+}
+
+.comparison-container {
+  position: relative;
+  width: 484px;
+  height: 397px;
+}
+
+.comparison-container img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.comparison-after {
+  width: 50%;
+  overflow: hidden;
+}
+
+.comparison-divider {
+  position: absolute;
+  left: 50%;
+  width: 2px;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.8);
+  transform: translateX(-50%);
+  cursor: ew-resize;
+}
+
+.comparison-handle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 36px;
+  height: 36px;
+  background-color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 21px;
+  font-weight: bold;
+  color: #666;
+  transform: translate(-50%, -50%);
+  cursor: ew-resize;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.image-comparison .box-border {
+  flex: 1;
+  color: #999;
+}
+
+.image-comparison .box-border div {
+  font-size: 19px;
+  margin-bottom: 20px;
+}
+
+.image-comparison ul {
+  list-style: none;
+}
+
+.image-comparison li {
+  font-size: 19px;
+  margin-bottom: 20px;
+}
+
+.image-comparison li strong {
+  font-weight: bold;
+}
+
+/* Showcase Image (Face Fusion Page) */
+.box-border img {
+  width: 100%;
+  border-radius: 24px;
+}
+
+/* Features Section (Face Fusion Page) */
+section .box-border {
+  margin-bottom: 48px;
+}
+
+section h2 {
+  font-size: 32px;
+  margin-bottom: 24px;
+}
+
+section div {
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+/* Footer (Face Fusion Page) */
+footer {
+  text-align: center;
+  padding: 24px;
+}
+
+footer .box-border {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+footer a {
+  width: 40px;
+  height: 40px;
+  background-color: #000;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+}
+
+footer a:hover {
+  background-color: #111;
+}
+
+footer img {
+  width: 20px;
+  height: 20px;
+}
+
+footer div {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  font-size: 12px;
+}
+
+footer a {
+  color: #fff;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .close-menu {
+    display: block;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .top-bar {
+    left: 0;
+  }
+
+  .top-bar__hamburger {
+    display: block;
+  }
+
+  .sidebar-header span,
+  .nav-item span,
+  .nav-item .indicator,
+  .footer .copyright {
+    display: none;
+  }
+
+  .hero h1 {
+    font-size: 40px;
+  }
+
+  .feature-cards {
+    flex-wrap: wrap;
+  }
+
+  .why-section h2,
+  .content-section h2 {
+    font-size: 28px;
+  }
+
+  .generation-container {
+    flex-direction: column;
+  }
+
+  .generation-inputs {
+    width: 100%;
+    padding-right: 0;
+    margin-bottom: 20px;
+  }
+
+  .generation-preview {
+    width: 100%;
+  }
+
+  .preview-box {
+    height: 300px;
+  }
+
+  .image-comparison {
+    flex-direction: column;
+    padding: 32px;
+  }
+
+  .comparison-container {
+    width: 100%;
+  }
+}
+
+@media (max-width: 640px) {
+  .sidebar {
+    width: 200px;
+  }
+
+  .hero h1 {
+    font-size: 30px;
+  }
+
+  .feature-cards {
+    flex-direction: column;
+  }
+
+  .why-section h2,
+  .content-section h2 {
+    font-size: 24px;
+  }
+
+  .image-generation {
+    padding: 20px 10px;
+  }
+
+  .preview-box {
+    height: 250px;
+  }
+
+  .image-comparison {
+    padding: 16px;
+  }
+
+  section {
+    padding: 0 20px;
+  }
+
+  footer {
+    padding: 20px;
+  }
+}

face-fusion.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DPIcon - Face Fusion</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <div class="container">
+    <!-- Sidebar -->
+    <nav class="sidebar">
+      <!-- Close Button (Visible on Mobile) -->
+      <button class="close-menu md:hidden text-white text-2xl m-0 p-2 border-none bg-transparent cursor-pointer">
+        ✕
+      </button>
+      <div class="sidebar-header">
+        <svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_1_917)">
+            <!-- SVG Path Placeholder -->
+          </g>
+          <defs>
+            <clipPath id="clip0_1_917">
+              <rect width="25" height="29.59" fill="white" transform="translate(0 0.389893)"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <span>dpicon</span>
+      </div>
+      <div class="nav-items">
+        <a href="index.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Home</span>
+          <div class="indicator">
+            <div></div>
+          </div>
+        </a>
+        <a href="face-fusion.html" class="nav-item active">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Face Fusion</span>
+        </a>
+        <a href="text-to-image.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Text to Image</span>
+        </a>
+        <a href="community.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Community</span>
+        </a>
+        <a href="sponsor.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Sponsor</span>
+        </a>
+      </div>
+      <div class="footer">
+        <div class="powered-by">Powered by</div>
+        <img src="public/images/powered-by-logo.jpg" alt="Powered by logo">
+        <div class="copyright">
+          <span>© Copyright</span>
+          <span class="year">2025</span>
+          <span>by DPIcon</span>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Top Bar -->
+      <header class="top-bar">
+        <button class="top-bar__hamburger md:hidden">
+          ☰
+        </button>
+        <div class="top-bar__content">
+          <span class="top-bar__credits">50</span>
+          <button class="top-bar__upgrade">Upgrade</button>
+          <span class="top-bar__welcome">Welcome Akash</span>
+          <div class="top-bar__avatar"></div>
+        </div>
+      </header>
+
+      <!-- Image Generation Section -->
+      <section class="image-generation">
+        <div class="generation-container">
+          <!-- Left Column: Upload, Prompt, and Button -->
+          <div class="generation-inputs">
+            <div class="upload-box">
+              <label for="imageUpload" class="upload-label">
+                Upload an Image
+              </label>
+              <input
+                type="file"
+                id="imageUpload"
+                accept="image/*"
+                onchange="handleImageUpload(event)"
+              />
+            </div>
+            <div class="prompt-box">
+              <label for="generationPrompt" class="prompt-label">
+                Describe Your Vision
+              </label>
+              <textarea
+                id="generationPrompt"
+                placeholder="e.g., A cyberpunk samurai in a neon city"
+                rows="3"
+              ></textarea>
+            </div>
+            <button class="generate-btn" onclick="generateImage()">
+              Generate Image
+            </button>
+          </div>
+          <!-- Right Column: Generated Image Preview -->
+          <div class="generation-preview">
+            <div class="preview-box" id="previewBox">
+              <span class="preview-placeholder">
+                Your generated image will appear here
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Introduction Section -->
+      <div class="box-border m-0 px-12 py-0">
+        <h1 class="box-border text-[32px] mb-6 m-0 p-0">Rewrite Realities</h1>
+        <div class="box-border text-base leading-[1.4] mb-12 m-0 p-0">
+          What if your selfie became a vampire lord atop a glowing skyscraper? With DPIcon's Image to Image Face Swap,
+          it's not "what if"—it's "watch this." Upload a photo, toss in a prompt, and our AI plucks your face, planting
+          it into a whole new universe. Buckle up for a wild ride!
+        </div>
+      </div>
+
+      <!-- Image Comparison Section -->
+      <div class="image-comparison box-border flex gap-16 m-0 p-16 rounded-3xl max-md:flex-col max-md:p-8 max-sm:p-4">
+        <div class="comparison-container box-border relative w-[484px] h-[397px] m-0 p-0">
+          <img
+            src="public/images/before-image.jpg"
+            alt="Before"
+            class="box-border absolute w-full h-full object-cover m-0 p-0"
+          />
+          <img
+            src="public/images/after-image.jpg"
+            alt="After"
+            class="box-border absolute w-full h-full object-cover m-0 p-0 comparison-after"
+          />
+          <div class="box-border absolute w-1 h-full -translate-x-2/4 cursor-ew-resize bg-[rgba(255,255,255,0.8)] m-0 p-0 comparison-divider"></div>
+          <div
+            class="box-border absolute -translate-x-2/4 -translate-y-2/4 w-9 h-9 text-[#666] font-bold text-[21px] shadow-[0_2px_8px_rgba(0,0,0,0.3)] bg-white m-0 p-0 rounded-[50%] flex items-center justify-center cursor-ew-resize comparison-handle"
+          >
+            ↔
+          </div>
+        </div>
+        <div class="box-border flex-1 text-[#999] m-0 p-0 max-md:p-5">
+          <div class="box-border text-[19px] mb-5 m-0 p-0">
+            Fast & Free: Get your transparent images in just seconds without any cost.
+          </div>
+          <ul class="box-border m-0 p-0 list-none">
+            <li class="box-border text-[19px] mb-5 m-0 p-0">
+              <strong class="box-border m-0 p-0">No Signup Needed:</strong>
+              <span> Start editing right away without creating an account.</span>
+            </li>
+            <li class="box-border text-[19px] mb-5 m-0 p-0">
+              <strong class="box-border m-0 p-0">High-Quality Results:</strong>
+              <span> Download high-resolution images perfect for social media, websites, or e-commerce.</span>
+            </li>
+            <li class="box-border text-[19px] mb-5 m-0 p-0">
+              <strong class="box-border m-0 p-0">User-Friendly Interface:</strong>
+              <span> Simple drag-and-drop functionality for seamless image editing.</span>
+            </li>
+            <li class="box-border text-[19px] mb-5 m-0 p-0">
+              <strong class="box-border m-0 p-0">Unlimited Usage:</strong>
+              <span> No restrictions on the number of images you can process.</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- Showcase Image -->
+      <div class="box-border m-0 px-4 py-20">
+        <img src="public/images/showcase-image.jpg" alt="Showcase" class="box-border w-full m-0 p-0 rounded-3xl" />
+      </div>
+
+      <!-- Features Section -->
+      <section class="box-border m-0 px-12 py-0 max-sm:px-5 max-sm:py-0">
+        <div class="box-border mb-12 m-0 p-0">
+          <h2 class="box-border text-[32px] mb-6 m-0 p-0">How to Warp Reality</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            <span>Drop Your Mug: Pick a photo—your face, your cat's, whatever sparks joy.</span><br />
+            <span>Dream Big: Prompt us—"a cyberpunk samurai" or "a mermaid in space."</span><br />
+            <span>Behold the Mashup: Our AI fuses your face into a stunning new scene.</span><br />
+            <span>Claim Your Glory: Download and flaunt your interdimensional doppelgänger.</span>
+          </div>
+        </div>
+
+        <div class="box-border mb-12 m-0 p-0">
+          <h2 class="box-border text-[32px] mb-6 m-0 p-0">Why DPIcon's Face Swap is a Game-Changer</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            <span>Freaky Precision: Faces fit like they were born there—zero awkward vibes.</span><br />
+            <span>Epic Adventures: From medieval quests to alien discos, you name it.</span><br />
+            <span>SEO Stardust: Unique images to rocket your content to the top.</span><br />
+            <span>Foolproof Fun: So easy, even your grandma could swap into a ninja.</span>
+          </div>
+        </div>
+
+        <div class="box-border mb-12 m-0 p-0">
+          <h2 class="box-border text-[32px] mb-6 m-0 p-0">What Sets Us Apart</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            AI Sorcery: Advanced algorithms that turn imagination into masterpieces. No Limits, Just Magic: From text to
+            art, face to fantasy – explore it all. Instant Alchemy: Conjure creations faster than a lightning strike. Yours
+            to Command: Simple tools, extraordinary results – no wizardry degree required.
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="box-border text-center m-0 px-12 py-6 max-sm:px-5 max-sm:py-6">
+        <div class="box-border flex gap-2.5 justify-center mb-10 m-0 p-0">
+          <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors">
+            <img src="public/images/twitter-icon.png" alt="Twitter icon" class="w-5 h-5" />
+          </a>
+          <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors">
+            <img src="public/images/facebook-icon.png" alt="Facebook icon" class="w-5 h-5" />
+          </a>
+          <a href="#" class="box-border w-10 h-10 flex items-center justify-center bg-black rounded hover:bg-[#111] transition-colors">
+            <img src="public/images/instagram-icon.png" alt="Instagram icon" class="w-5 h-5" />
+          </a>
+        </div>
+
+        <div class="box-border flex gap-4 justify-center text-xs text-white m-0 p-0">
+          <span>© Copyright</span>
+          <span>2025</span>
+          <span>by</span>
+          <span>TRAR</span>
+          <span>|</span>
+          <a href="#" class="text-white no-underline hover:underline">Privacy Policy</a>
+          <a href="#" class="text-white no-underline hover:underline">Cookie Policy</a>
+        </div>
+      </footer>
+    </main>
+  </div>
+  <script src="js/script.js"></script>
+</body>
+</html>

index.html

@@ -1,19 +1,247 @@
-<!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>DPIcon - Transform Your Ideas into Stunning Visuals</title>
+  <link rel="stylesheet" href="css/style.css">
+  <!-- Firebase SDK -->
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
+</head>
+<body class="index-page">
+  <div class="container">
+    <!-- Sidebar -->
+    <nav class="sidebar">
+      <button class="close-menu md:hidden text-white text-2xl m-0 p-2 border-none bg-transparent cursor-pointer">
+        ✕
+      </button>
+      <div class="sidebar-header">
+        <svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_1_917)">
+            <!-- SVG Path Placeholder -->
+          </g>
+          <defs>
+            <clipPath id="clip0_1_917">
+              <rect width="25" height="29.59" fill="white" transform="translate(0 0.389893)"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <span>dpicon</span>
+      </div>
+      <div class="nav-items">
+        <a href="index.html" class="nav-item active">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Home</span>
+          <div class="indicator">
+            <div></div>
+          </div>
+        </a>
+        <a href="face-fusion.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Face Fusion</span>
+        </a>
+        <a href="text-to-image.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Text to Image</span>
+        </a>
+        <a href="community.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Community</span>
+        </a>
+        <a href="sponsor.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Sponsor</span>
+        </a>
+        <a href="founder.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Founder</span>
+        </a>
+      </div>
+      <div class="footer">
+        <div class="powered-by">Powered by</div>
+        <img src="public/images/powered-by-logo.jpg" alt="Powered by logo">
+        <div class="copyright">
+          <span>© Copyright</span>
+          <span class="year">2025</span>
+          <span>by DPIcon</span>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Top Bar -->
+      <header class="top-bar">
+        <button class="top-bar__hamburger md:hidden">
+          ☰
+        </button>
+        <div class="top-bar__content">
+          <span class="top-bar__credits" id="credits-display">50</span>
+          <button class="top-bar__upgrade" id="upgrade-button">Upgrade</button>
+          <span class="top-bar__welcome" id="welcome-message">Welcome Guest</span>
+          <div class="top-bar__avatar"></div>
+        </div>
+      </header>
+
+      <!-- Connect with Google Button -->
+      <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full">
+        <button id="google-signin-button" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-transform transform hover:scale-105 font-medium text-lg flex items-center">
+          <svg class="mr-2" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2ZM12 4C8.962 4 6.5 6.462 6.5 9.5C6.5 12.538 8.962 15 12 15C15.038 15 17.5 12.538 17.5 9.5C17.5 6.462 15.038 4 12 4ZM12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6ZM18.5 7.5C18.5 8.328 17.828 9 17 9C16.172 9 15.5 8.328 15.5 7.5C15.5 6.672 16.172 6 17 6C17.828 6 18.5 6.672 18.5 7.5Z" fill="white"/>
+          </svg>
+          Connect with Google
+          <span id="google-signin-spinner" class="ml-2 hidden">⏳</span>
+        </button>
+      </div>
+
+      <!-- Hero Section -->
+      <div class="hero">
+        <video autoplay muted loop playsinline>
+          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
+          Your browser does not support the video tag.
+        </video>
+        <h1>Transform Your Ideas into Stunning Visuals</h1>
+      </div>
+
+      <!-- Feature Cards Section -->
+      <div class="feature-cards">
+        <div class="feature-card">
+          <div class="highlight"></div>
+          <div class="content">
+            <div class="icon">
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- SVG Path Placeholder -->
+              </svg>
+            </div>
+            <span>Face Fusion</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="highlight"></div>
+          <div class="content">
+            <div class="icon">
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- SVG Path Placeholder -->
+              </svg>
+            </div>
+            <span>Text to Image</span>
+          </div>
+        </div>
+        <div class="feature-card">
+          <div class="highlight"></div>
+          <div class="content">
+            <div class="icon">
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <!-- SVG Path Placeholder -->
+              </svg>
+            </div>
+            <span>Community</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Why Section -->
+      <div class="why-section">
+        <h2>Why DPIcon is Your Creative Rocket Fuel</h2>
+        <div class="bullet-points">
+          <div class="bullet-point">
+            <div class="bullet">•</div>
+            <div class="text">AI Alchemy: Turn whispers of thought into vivid masterpieces with next-gen tech. No Rules</div>
+          </div>
+          <div class="bullet-point">
+            <div class="bullet">•</div>
+            <div class="text">Just Wonders: Easy enough for dreamers, powerful enough for visionaries.</div>
+          </div>
+          <div class="bullet-point">
+            <div class="bullet">•</div>
+            <div class="text">Infinite Realms: Text-to-image wizardry or face-swapping adventures—your choice.</div>
+          </div>
+          <div class="bullet-point">
+            <div class="bullet">•</div>
+            <div class="text">Blink-and-Done Speed: Stellar results faster than a meteor shower.</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Content Sections -->
+      <div class="content-section">
+        <h2>Transform Your Ideas into Stunning Visuals</h2>
+        <img src="public/images/transform-ideas-image.jpg" alt="Transform Your Ideas into Stunning Visuals">
+        <div class="divider"></div>
+        <p>Step into a world where words weave wonders and faces find new fates. DPIcon is your portal to boundless creativity, powered by cutting-edge AI. From conjuring vivid scenes with a single sentence to reimagining your face in fantastical realms, we turn your wildest whims into breathtaking visuals. Dare to dream – DPIcon makes it real.</p>
+      </div>
+
+      <div class="content-section">
+        <h2>The Spark of a New Era</h2>
+        <img src="public/images/spark-era-image.jpg" alt="The Spark of a New Era">
+        <div class="divider"></div>
+        <p>At DPIcon, we believe creativity shouldn't be confined. We're pioneers at the crossroads of art and technology, crafting tools that let you sculpt the impossible. Whether you're an artist seeking a muse, a visionary with a story, or a soul craving something new, DPIcon is your playground of endless potential.</p>
+      </div>
+
+      <div class="content-section">
+        <h2>What Sets Us Apart</h2>
+        <img src="public/images/sets-apart-image.jpg" alt="What Sets Us Apart">
+        <div class="divider"></div>
+        <p>AI Sorcery: Advanced algorithms that turn imagination into masterpieces. No Limits, Just Magic: From text to art, face to fantasy – explore it all. Instant Alchemy: Conjure creations faster than a lightning strike. Yours to Command: Simple tools, extraordinary results – no wizardry degree required.</p>
+      </div>
+
+      <!-- Meet Our Founder CTA Button -->
+      <div class="box-border flex justify-center items-center mb-6 m-0 p-0 w-full">
+        <a href="founder.html" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-colors font-medium text-lg">
+          Meet Our Founder
+        </a>
+      </div>
+    </main>
+  </div>
+
+  <!-- Upgrade Popup -->
+  <div id="upgrade-popup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
+    <div class="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-lg p-8 max-w-4xl w-full mx-4 popup-content">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-[32px] text-white">Choose Your Plan</h2>
+        <button id="close-popup" class="text-white text-2xl">&times;</button>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Basic Free Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Basic Free</h3>
+          <p class="text-white text-lg mb-4">50 Credits / Month</p>
+          <p class="text-white text-2xl font-bold mb-4">$0</p>
+          <button id="select-basic" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+        <!-- Pro Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Pro</h3>
+          <p class="text-white text-lg mb-4">Unlimited for 1 Month</p>
+          <p class="text-white text-2xl font-bold mb-4">$80</p>
+          <button id="select-pro" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+        <!-- Premium Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Premium</h3>
+          <p class="text-white text-lg mb-4">Unlimited for 1 Year</p>
+          <p class="text-white text-2xl font-bold mb-4">$900</p>
+          <button id="select-premium" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/firebase.js"></script>
+  <script src="js/script.js"></script>
+</body>
+</html>

js/script.js

@@ -0,0 +1,38 @@
+// Function for Face Fusion page
+function handleImageUpload(event) {
+  const file = event.target.files[0];
+  if (file) {
+    console.log("Image uploaded:", file.name);
+    // Add logic to display the uploaded image preview if needed
+  }
+}
+
+function generateImage() {
+  const prompt = document.getElementById("generationPrompt").value;
+
+  // Check if we're on the Face Fusion page (which has an image upload)
+  const fileInput = document.getElementById("imageUpload");
+  if (fileInput) {
+    const file = fileInput.files[0];
+    if (!file || !prompt) {
+      alert("Please upload an image and enter a prompt.");
+      return;
+    }
+    console.log("Generating image with prompt (Face Fusion):", prompt);
+    const previewBox = document.getElementById("previewBox");
+    previewBox.innerHTML = "<span>Generating...</span>";
+    // Add your face fusion image generation logic here
+    // Example: previewBox.innerHTML = `<img src="generated-image-url" alt="Generated Image" style="width: 100%; height: 100%; object-fit: cover;" />`;
+  } else {
+    // Text to Image page (no image upload)
+    if (!prompt) {
+      alert("Please enter a prompt to generate an image.");
+      return;
+    }
+    console.log("Generating text-to-image with prompt:", prompt);
+    const previewBox = document.getElementById("previewBox");
+    previewBox.innerHTML = "<span>Generating...</span>";
+    // Add your text-to-image generation logic here
+    // Example: previewBox.innerHTML = `<img src="generated-image-url" alt="Generated Image" style="width: 100%; height: 100%; object-fit: cover;" />`;
+  }
+}

sponsor.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DPIcon - Sponsorship & Support</title>
+  <link rel="stylesheet" href="css/style.css">
+  <!-- Firebase SDK -->
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
+</head>
+<body>
+  <div class="container">
+    <!-- Sidebar -->
+    <nav class="sidebar">
+      <button class="close-menu md:hidden text-white text-2xl m-0 p-2 border-none bg-transparent cursor-pointer">
+        ✕
+      </button>
+      <div class="sidebar-header">
+        <svg width="25" height="30" viewBox="0 0 25 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_1_917)">
+            <!-- SVG Path Placeholder -->
+          </g>
+          <defs>
+            <clipPath id="clip0_1_917">
+              <rect width="25" height="29.59" fill="white" transform="translate(0 0.389893)"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <span>dpicon</span>
+      </div>
+      <div class="nav-items">
+        <a href="index.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Home</span>
+          <div class="indicator">
+            <div></div>
+          </div>
+        </a>
+        <a href="face-fusion.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Face Fusion</span>
+        </a>
+        <a href="text-to-image.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Text to Image</span>
+        </a>
+        <a href="community.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Community</span>
+        </a>
+        <a href="sponsor.html" class="nav-item active">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Sponsor</span>
+        </a>
+        <a href="founder.html" class="nav-item">
+          <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <!-- SVG Path Placeholder -->
+          </svg>
+          <span>Founder</span>
+        </a>
+      </div>
+      <div class="footer">
+        <div class="powered-by">Powered by</div>
+        <img src="public/images/powered-by-logo.jpg" alt="Powered by logo">
+        <div class="copyright">
+          <span>© Copyright</span>
+          <span class="year">2025</span>
+          <span>by DPIcon</span>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Top Bar -->
+      <header class="top-bar">
+        <button class="top-bar__hamburger md:hidden">
+          ☰
+        </button>
+        <div class="top-bar__content">
+          <span class="top-bar__credits" id="credits-display">50</span>
+          <button class="top-bar__upgrade" id="upgrade-button">Upgrade</button>
+          <span class="top-bar__welcome" id="welcome-message">Welcome Guest</span>
+          <div class="top-bar__avatar"></div>
+        </div>
+      </header>
+
+      <!-- Connect with Google Button -->
+      <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full">
+        <button id="google-signin-button" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-transform transform hover:scale-105 font-medium text-lg flex items-center">
+          <svg class="mr-2" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 0C5.373 0 0 5.373 0 12C0 18.627 5.373 24 12 24C18.627 24 24 18.627 24 12C24 5.373 18.627 0 12 0ZM12 2C17.514 2 22 6.486 22 12C22 17.514 17.514 22 12 22C6.486 22 2 17.514 2 12C2 6.486 6.486 2 12 2ZM12 4C8.962 4 6.5 6.462 6.5 9.5C6.5 12.538 8.962 15 12 15C15.038 15 17.5 12.538 17.5 9.5C17.5 6.462 15.038 4 12 4ZM12 6C13.933 6 15.5 7.567 15.5 9.5C15.5 11.433 13.933 13 12 13C10.067 13 8.5 11.433 8.5 9.5C8.5 7.567 10.067 6 12 6ZM18.5 7.5C18.5 8.328 17.828 9 17 9C16.172 9 15.5 8.328 15.5 7.5C15.5 6.672 16.172 6 17 6C17.828 6 18.5 6.672 18.5 7.5Z" fill="white"/>
+          </svg>
+          Connect with Google
+          <span id="google-signin-spinner" class="ml-2 hidden">⏳</span>
+        </button>
+      </div>
+
+      <!-- Sponsorship & Support Content -->
+      <section class="box-border m-0 py-0">
+        <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full">
+          <h1 class="box-border text-[32px] mb-6 m-0 p-0">Sponsorship & Support</h1>
+        </div>
+        <div class="box-border mb-12 m-0 px-12 max-sm:px-5">
+          <h2 class="box-border text-[24px] mb-4 m-0 p-0">Fuel DPIcon’s AI Galaxy</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            We’re DPIcon, a constellation of AI dreamers, and we’re building a universe where creativity knows no bounds. But every star needs a spark—your sponsorship keeps our engines humming, our tools evolving, and our community thriving. Toss a comet our way, and snag exclusive goodies while you’re at it!
+          </div>
+        </div>
+        <div class="box-border mb-12 m-0 px-12 max-sm:px-5">
+          <h2 class="box-border text-[24px] mb-4 m-0 p-0">Invest in the Future of AI Creativity</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            At DPIcon, we’re pioneering the next generation of artificial intelligence tools, empowering individuals and businesses to transform ideas into stunning visual realities. Your support plays a vital role in advancing our mission—enhancing our platform, expanding accessibility, and fostering a thriving creative community. Whether you’re an individual, a corporation, or an organization, partnering with us offers a unique opportunity to contribute to cutting-edge AI innovation.
+          </div>
+        </div>
+        <div class="box-border mb-12 m-0 px-12 max-sm:px-5">
+          <h2 class="box-border text-[24px] mb-4 m-0 p-0">How Your Support Makes a Difference</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            We welcome contributions of all sizes—each one fuels our ability to innovate and grow. Rather than offering predefined plans, we tailor our sponsorship opportunities to suit your goals. Whether you’re looking to support as an individual advocate or establish a corporate partnership, your involvement directly enhances our platform’s capabilities and reach. This is an investment in creativity, technology, and the future.
+          </div>
+        </div>
+        <div class="box-border mb-12 m-0 px-12 max-sm:px-5">
+          <h2 class="box-border text-[24px] mb-4 m-0 p-0">How to Get Involved</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            Contact Us: Reach out to our team at support@dpicon.com to discuss your interest in supporting DPIcon. Explore Opportunities: We’ll work with you to identify a collaboration that aligns with your vision. Make an Impact: Your support will be implemented to drive meaningful advancements in our platform.
+          </div>
+        </div>
+        <div class="box-border mb-12 m-0 px-12 max-sm:px-5">
+          <h2 class="box-border text-[24px] mb-4 m-0 p-0">Questions or Assistance?</h2>
+          <div class="box-border text-base leading-[1.4] m-0 p-0">
+            Our dedicated support team is available to assist you at any time. For inquiries about sponsorship, technical support, general feedback, please email us at support@dpicon.com. We value your input and are committed to building partnerships that benefits both our community and your objectives.
+          </div>
+        </div>
+        <div class="box-border flex justify-center items-center mb-12 m-0 p-0 w-full">
+          <div class="text-center">
+            <h2 class="box-border text-[12px] mb-4 m-0 p-0" style="font-size: 12px !important;">Thank You for Supporting Our Vision ❤️</h2>
+            <div class="box-border text-base leading-[1.4] m-0 p-0">
+              <a href="mailto:support@dpicon.com" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] transition-colors font-medium text-lg">
+                Contact Us
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Footer -->
+      <footer class="box-border text-center m-0 px-12 py-6 max-sm:px-5 max-sm:py-6">
+      </footer>
+    </main>
+  </div>
+
+  <!-- Upgrade Popup -->
+  <div id="upgrade-popup" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden">
+    <div class="bg-gradient-to-br from-[#1a1a1a] to-[#2a2a2a] rounded-lg p-8 max-w-4xl w-full mx-4 popup-content">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-[32px] text-white">Choose Your Plan</h2>
+        <button id="close-popup" class="text-white text-2xl">&times;</button>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Basic Free Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Basic Free</h3>
+          <p class="text-white text-lg mb-4">50 Credits / Month</p>
+          <p class="text-white text-2xl font-bold mb-4">$0</p>
+          <button id="select-basic" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+        <!-- Pro Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Pro</h3>
+          <p class="text-white text-lg mb-4">Unlimited for 1 Month</p>
+          <p class="text-white text-2xl font-bold mb-4">$80</p>
+          <button id="select-pro" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+        <!-- Premium Plan -->
+        <div class="plan-card p-6 rounded-lg text-center">
+          <h3 class="text-[24px] text-white mb-4">Premium</h3>
+          <p class="text-white text-lg mb-4">Unlimited for 1 Year</p>
+          <p class="text-white text-2xl font-bold mb-4">$900</p>
+          <button id="select-premium" class="inline-block px-6 py-3 bg-[#7550DC] text-white rounded-lg hover:bg-[#6440cc] font-medium text-lg">Select Plan</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="js/firebase.js"></script>
+  <script src="js/script.js"></script>
+</body>
+</html>