updated features

Author: sPROFFEs

assets/Flow Designer - TestFlow-Formular.png

@@ -5,8 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>PyClicker - Effortless Automation</title>
-  <link rel="icon" type="image/svg"
-    href="assets/icon.svg">
+  <link rel="icon" type="image/svg" href="assets/icon.svg">
   <link rel="stylesheet" href="styles.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
@@ -37,8 +36,10 @@ <h1>Automate Your Repetitive Tasks</h1>
             <a
               href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Windows_installer.exe"><i
                 class="fab fa-windows"></i> Windows Installer (Free)</a>
-            <a href="https://github.com/CoreSecFrame/PyClicker/releases/download/pro/PyClicker_Pro.exe"><i class="fab fa-windows"></i> Windows Pro (License required) (depends on .NET framework)</a>
-            <a href="https://github.com/CoreSecFrame/PyClicker/releases/download/pro/PyClicker_self.zip"><i class="fab fa-windows"></i> Windows Pro (License required) (.NET self-contained)</a>
+            <a href="https://github.com/CoreSecFrame/PyClicker/releases/download/pro/PyClicker_Pro.exe"><i
+                class="fab fa-windows"></i> Windows Pro (License required) (depends on .NET framework)</a>
+            <a href="https://github.com/CoreSecFrame/PyClicker/releases/download/pro/PyClicker_self.zip"><i
+                class="fab fa-windows"></i> Windows Pro (License required) (.NET self-contained)</a>
             <a href="https://github.com/sPROFFEs/autoclicker/releases/download/1.0/PyclickRecorder_Linux_installer.sh"><i
                 class="fab fa-linux"></i> Linux Installer (Free)</a>
             <a href="#"><i class="fab fa-linux"></i> Linux Pro (Coming Soon)</a>
@@ -105,6 +106,38 @@ <h3>Enable & Execute</h3>
     </div>
   </section>
 
+  <section id="pro-features" class="pro-features">
+    <div class="collapsible-header">
+      <h2>Pro Features</h2>
+      <button class="btn collapsible-btn">View Details ▾</button>
+    </div>
+    <div class="collapsible-content">
+      <div class="feature-demonstration">
+        <div class="feature-item">
+          <h3>Demonstration Videos</h3>
+          <div class="video-placeholder">
+            <video width="320" height="240" controls>
+              <source src="assets/sample1.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+            <video width="320" height="240" controls>
+              <source src="assets/sample2.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+        <div class="feature-item">
+          <h3>Scheduling Workflow</h3>
+          <div class="workflow-placeholder">
+            <p>Step-by-step guide on how to schedule a task with PyClicker Pro. Click images to enlarge.</p>
+            <a href="#" data-overlay="img1-overlay"><img src="assets/Flow Designer - TestFlow-Formular.png" alt="TestFlow-Formular" width="500" height="600"></a>
+            <a href="#" data-overlay="img2-overlay"><img src="assets/Flow Designer - WindowDetection-Test.png" alt="WindowDetection-Test" width="500" height="600"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <section id="testimonials" class="testimonials">
     <h2>What Our Users Say</h2>
     <div class="testimonial-grid">
@@ -257,6 +290,20 @@ <h2>Contact Us</h2>
 
   <script src="script.js"></script>
 
+  <!-- Image Overlays -->
+  <div id="img1-overlay" class="overlay image-overlay">
+    <div class="overlay-content">
+      <a href="#" class="close-btn">&times;</a>
+      <img src="assets/Flow Designer - TestFlow-Formular.png" alt="TestFlow-Formular">
+    </div>
+  </div>
+  <div id="img2-overlay" class="overlay image-overlay">
+    <div class="overlay-content">
+      <a href="#" class="close-btn">&times;</a>
+      <img src="assets/Flow Designer - WindowDetection-Test.png" alt="WindowDetection-Test">
+    </div>
+  </div>
+
   <!-- Overlays -->
   <div id="privacy-overlay" class="overlay">
     <div class="overlay-content">

assets/Flow Designer - WindowDetection-Test.png

@@ -46,6 +46,20 @@ window.addEventListener('click', (e) => {
   }
 });
 
+// Collapsible section
+document.querySelectorAll('.collapsible-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const content = btn.closest('.pro-features').querySelector('.collapsible-content');
+    if (content.style.display === 'block') {
+      content.style.display = 'none';
+      btn.innerHTML = 'View Details ▾';
+    } else {
+      content.style.display = 'block';
+      btn.innerHTML = 'Hide Details ▴';
+    }
+  });
+});
+
 document.addEventListener("DOMContentLoaded", () => {
   // Abrir overlays genéricos por data-overlay
   document.querySelectorAll('[data-overlay]').forEach(link => {

assets/sample1.mp4

@@ -156,13 +156,6 @@ section.visible {
   opacity: 1;
   transform: translateY(0);
 }
-section h2 {
-  text-align: center;
-  margin-bottom: 3rem;
-  font-size: 2.5rem;
-  color: #1e293b;
-}
-
 /* Features */
 .feature-grid {
   display: grid;
@@ -235,6 +228,73 @@ section h2 {
   color: #664d00;
 }
 
+/* Pro Features Section */
+.pro-features {
+  background: #f1f5f9;
+}
+
+.collapsible-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.collapsible-header h2 {
+  margin-bottom: 0;
+  text-align: left;
+}
+
+.collapsible-btn {
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  padding: 0.8rem 1.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.collapsible-btn:hover {
+  background: #1d4ed8;
+}
+
+.collapsible-content {
+  display: none;
+  overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
+}
+
+.feature-demonstration {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+}
+
+.feature-item {
+  background: #fff;
+  padding: 2rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+  border: 1px solid #e2e8f0;
+}
+
+.feature-item h3 {
+  margin-bottom: 1rem;
+  color: #1e293b;
+}
+
+.video-placeholder {
+  text-align: center; /* Center the block-level videos */
+}
+
+.workflow-placeholder {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 /* Testimonials */
 .testimonials {
   background: #f1f5f9;
@@ -507,3 +567,39 @@ section h2 {
   text-decoration: none;
   color: #334155;
 }
+
+.video-placeholder video {
+  width: 80%; /* Make videos larger */
+  max-width: 600px; /* Add a max-width */
+  height: auto;
+  border-radius: 8px;
+  margin-bottom: 1rem; /* Add space between stacked videos */
+}
+
+.workflow-placeholder img {
+  flex: 1 1 45%;
+  width: 45%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+.workflow-placeholder img:hover {
+  transform: scale(1.05);
+}
+
+.image-overlay .overlay-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  padding: 1rem;
+  background: transparent;
+  box-shadow: none;
+}
+
+.image-overlay img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}