5.0

INSTALL.md

@@ -0,0 +1,113 @@
+
+# Installation Guide
+
+This guide will walk you through the process of installing the application on your own web hosting.
+
+## 1. Server Requirements
+
+Before you begin, ensure your hosting environment meets the following requirements:
+
+*   **Web Server:** Apache with `mod_rewrite` enabled.
+*   **PHP:** Version 7.4 or higher.
+*   **Database:** MySQL or MariaDB.
+*   **PHP Extensions:** PDO (specifically `pdo_mysql`).
+
+## 2. Installation Steps
+
+Follow these steps to get the application up and running:
+
+### Step 1: Upload Files
+
+Upload all the files and folders from this project to the root directory of your web server (e.g., `public_html`, `www`, `htdocs`).
+
+### Step 2: Create a Database
+
+Using your hosting control panel (like cPanel or phpMyAdmin), create a new database and a database user. Grant the user full privileges to the database. Make a note of the following:
+
+*   Database Name
+*   Database Username
+*   Database Password
+*   Database Host (usually `localhost` or `127.0.0.1`)
+
+### Step 3: Configure the Database Connection
+
+Open the `db/config.php` file and update the database credentials with the ones you created in the previous step.
+
+```php
+<?php
+// Generated by setup_mariadb_project.sh — edit as needed.
+define('DB_HOST', 'YOUR_DATABASE_HOST');
+define('DB_NAME', 'YOUR_DATABASE_NAME');
+define('DB_USER', 'YOUR_DATABASE_USERNAME');
+define('DB_PASS', 'YOUR_DATABASE_PASSWORD');
+
+function db() {
+  static $pdo;
+  if (!$pdo) {
+    $pdo = new PDO('mysql:host='.DB_HOST.';dbname='.DB_NAME.';charset=utf8mb4', DB_USER, DB_PASS, [
+      PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+      PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+    ]);
+  }
+  return $pdo;
+}
+```
+
+### Step 4: Run the Setup Script
+
+In your web browser, navigate to `http://your-domain.com/db/setup.php`. This will create the necessary tables in your database. You should see a success message.
+
+### Step 5: Secure Your Installation
+
+For security reasons, it is highly recommended that you **delete the `db/setup.php` file** after you have run it.
+
+### Step 6: Log In to the Admin Area
+
+You can now log in to the admin area at `http://your-domain.com/admin.php`. The default credentials are:
+
+*   **Username:** `admin`
+*   **Password:** `password`
+
+### Step 7: Change the Admin Password
+
+Immediately after logging in, you should change the default admin password. You can do this by navigating to the "Change Password" section in the admin area.
+
+You can also change the admin username and password by editing the `admin/config.php` file:
+
+```php
+<?php
+// Simple password protection for the admin area.
+
+define('ADMIN_USERNAME', 'new_admin_username');
+define('ADMIN_PASSWORD', 'new_strong_password');
+```
+**Note:** The password in `admin/config.php` should be a hashed password. You can use the change password functionality in the admin panel to generate a new hashed password.
+
+## 3. Email Configuration
+
+The application sends emails using an SMTP server. The configuration is handled in the `mail/config.php` file, which reads settings from environment variables.
+
+### Option 1: Using a `.env` File
+
+The most secure way to configure email is to create a `.env` file in the root directory of your application and add the following settings.
+
+```
+MAIL_TRANSPORT=smtp
+SMTP_HOST=your_smtp_host
+SMTP_PORT=587
+SMTP_SECURE=tls
+SMTP_USER=your_smtp_username
+SMTP_PASS=your_smtp_password
+MAIL_FROM=your_from_email@example.com
+MAIL_FROM_NAME=Your From Name
+MAIL_REPLY_TO=your_reply_to_email@example.com
+```
+
+### Option 2: Hardcoding the Configuration (Not Recommended)
+
+If you are unable to use environment variables, you can modify the `mail/config.php` file directly. However, this is less secure as it stores your credentials in a plain text file.
+
+## 4. Support
+
+If you encounter any issues during the installation, please double-check that you have followed all the steps correctly and that your server meets the requirements.
+

admin.php

@@ -24,6 +24,9 @@ require_login();
             <li class="active">
                 <a href="admin.php">Templates</a>
             </li>
+            <li>
+                <a href="editor_13d84da0257b8680.php">Template Directory</a>
+            </li>
             <li>
                 <a href="logout.php">Logout</a>
             </li>

published/692e364f95b0c.html

@@ -0,0 +1,207 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Minimalist Modern Title Happy To Be Here</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="icon" href="/assets/images/favicon.jpg" type="image/jpeg">
+    <style>
+        body {
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #F8F9FA;
+            color: #212529;
+        }
+        .preview-container { max-width: 960px; }
+        /* assets/css/custom.css */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #007bff; /* A vibrant blue */
+    --primary-hover: #0056b3;
+    --background-color: #fdfdfd; /* A very light, almost white grey */
+    --card-bg-color: #ffffff;
+    --text-color: #333;
+    --text-light: #666;
+    --border-color: #eef2f7;
+    --shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
+    --border-radius: 12px;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+a {
+    color: var(--primary-color);
+}
+
+a:hover {
+    color: var(--primary-hover);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-hover);
+    border-color: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+.btn-success {
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-success:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+}
+
+header.bg-white {
+    background-color: var(--card-bg-color) !important;
+    border-bottom-color: var(--border-color) !important;
+}
+
+header .fs-4 {
+    font-weight: 600;
+}
+
+#gallery-section .display-5 {
+    font-weight: 700;
+}
+
+#gallery-section .card {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: none;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#gallery-section .card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow);
+}
+
+#gallery-section .card-img-top {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+}
+
+#gallery-section .card-title {
+    font-weight: 600;
+}
+
+#gallery-section .card-footer {
+    background-color: transparent;
+}
+
+#preview-section {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+
+.preview-container {
+    max-width: 960px;
+    margin: auto;
+    background: var(--card-bg-color);
+    padding: 3rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+}
+
+.preview-container img {
+    border-radius: var(--border-radius);
+}
+
+#editor-section {
+    background-color: #f8f9fa; /* A slightly darker grey for contrast */
+}
+
+#editor-section h2 {
+    font-weight: 600;
+}
+
+.form-control, .form-select {
+    border-radius: 8px;
+    border-color: var(--border-color);
+}
+
+.form-control:focus {
+    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15);
+    border-color: var(--primary-color);
+}
+
+footer.bg-light {
+    background-color: var(--card-bg-color) !important;
+    border-top-color: var(--border-color) !important;
+}
+    </style>
+</head>
+<body>
+    <main>
+        <section class="py-5">
+            <div class="container preview-container">
+                
+<div class="row align-items-center">
+    <div class="col-md-6">
+        <img id="previewImage" src="https://marketing-landing-page-downloader.dev.flatlogic.app/assets/images/Social-Media-eBook.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+    </div>
+    <div class="col-md-6">
+        <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Minimalist Modern Title Happy To Be Here</h1>
+        <p id="previewDescription" class="lead fs-4">A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.</p>
+        <div id="previewCtaContainer">
+                <div class="flex flex-col mb-10 lg:items-start items-center">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
+                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
+                        </svg></div>
+                    <div class="flex-grow">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Shooting Stars</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg></a>
+                    </div>
+                </div>
+                <div class="flex flex-col mb-10 lg:items-start items-center">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
+                            <circle cx="6" cy="6" r="3"></circle>
+                            <circle cx="6" cy="18" r="3"></circle>
+                            <path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
+                        </svg></div>
+                    <div class="flex-grow">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg></a>
+                    </div>
+                </div>
+                <div class="flex flex-col mb-10 lg:items-start items-center">
+                    <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
+                            <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
+                            <circle cx="12" cy="7" r="4"></circle>
+                        </svg></div>
+                    <div class="flex-grow">
+                        <h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2>
+                        <p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
+                                <path d="M5 12h14M12 5l7 7-7 7"></path>
+                            </svg></a>
+                    </div>
+                </div>
+            </div>
+    </div>
+</div>
+            </div>
+        </section>
+    </main>
+    <footer class="text-center py-3 bg-light">
+        <p class="mb-0">&copy; 2025 <a href="https://www.thecontentrepreneur.com/">The Contentrepreneur</a></p>
+    </footer>
+</body>
+</html>

published/692f51dfba560.html

@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Minimalist Modern Title</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="icon" href="/assets/images/favicon.jpg" type="image/jpeg">
+    <style>
+        body {
+            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: #F8F9FA;
+            color: #212529;
+        }
+        .preview-container { max-width: 960px; }
+        /* assets/css/custom.css */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+:root {
+    --primary-color: #007bff; /* A vibrant blue */
+    --primary-hover: #0056b3;
+    --background-color: #fdfdfd; /* A very light, almost white grey */
+    --card-bg-color: #ffffff;
+    --text-color: #333;
+    --text-light: #666;
+    --border-color: #eef2f7;
+    --shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
+    --border-radius: 12px;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+}
+
+a {
+    color: var(--primary-color);
+}
+
+a:hover {
+    color: var(--primary-hover);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-hover);
+    border-color: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+.btn-success {
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-success:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+}
+
+header.bg-white {
+    background-color: var(--card-bg-color) !important;
+    border-bottom-color: var(--border-color) !important;
+}
+
+header .fs-4 {
+    font-weight: 600;
+}
+
+#gallery-section .display-5 {
+    font-weight: 700;
+}
+
+#gallery-section .card {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: none;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+#gallery-section .card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow);
+}
+
+#gallery-section .card-img-top {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+}
+
+#gallery-section .card-title {
+    font-weight: 600;
+}
+
+#gallery-section .card-footer {
+    background-color: transparent;
+}
+
+#preview-section {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+
+.preview-container {
+    max-width: 960px;
+    margin: auto;
+    background: var(--card-bg-color);
+    padding: 3rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+}
+
+.preview-container img {
+    border-radius: var(--border-radius);
+}
+
+#editor-section {
+    background-color: #f8f9fa; /* A slightly darker grey for contrast */
+}
+
+#editor-section h2 {
+    font-weight: 600;
+}
+
+.form-control, .form-select {
+    border-radius: 8px;
+    border-color: var(--border-color);
+}
+
+.form-control:focus {
+    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15);
+    border-color: var(--primary-color);
+}
+
+footer.bg-light {
+    background-color: var(--card-bg-color) !important;
+    border-top-color: var(--border-color) !important;
+}
+    </style>
+</head>
+<body>
+    <main>
+        <section class="py-5">
+            <div class="container preview-container">
+                
+<div class="row align-items-center">
+    <div class="col-md-6">
+        <img id="previewImage" src="https://marketing-landing-page-downloader.dev.flatlogic.app/assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+    </div>
+    <div class="col-md-6">
+        <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Minimalist Modern Title</h1>
+        <p id="previewDescription" class="lead fs-4">A compelling description for the minimalist modern template.</p>
+        
+    </div>
+</div>
+            </div>
+        </section>
+    </main>
+    <footer class="text-center py-3 bg-light">
+        <p class="mb-0">&copy; 2025 <a href="https://www.thecontentrepreneur.com/">The Contentrepreneur</a></p>
+    </footer>
+</body>
+</html>

templates/data.php

@@ -4,42 +4,42 @@ $templates = [
         'id' => 1,
         'name' => 'Minimalist Modern',
         'description' => 'A clean, modern design with a large feature image.',
-        'preview_image' => 'assets/images/Social-Media-eBook.png',
+        'preview_image' => 'assets/images/Content-Repurposing.png',
         'file' => 'templates/template-1.html',
     ],
     [
         'id' => 2,
         'name' => 'Bold & Blue',
         'description' => 'A vibrant design with a prominent blue call-to-action.',
-        'preview_image' => 'assets/images/Marketing.png',
+        'preview_image' => 'assets/images/Social-Media.png',
         'file' => 'templates/template-2.html',
     ],
     [
         'id' => 3,
         'name' => 'Classic Serif',
         'description' => 'An elegant, text-focused design for a classic feel.',
-        'preview_image' => 'assets/images/Signals-of-Strain-eBook.png',
+        'preview_image' => 'assets/images/Webinars-Marketing.png',
         'file' => 'templates/template-3.html',
     ],
     [
         'id' => 4,
         'name' => 'Minimalist Modern (Dark Theme)',
         'description' => 'A clean, modern design with a large feature image.',
-        'preview_image' => 'assets/images/Social-Media-eBook.png',
+        'preview_image' => 'assets/images/Customer-Loyalty.png',
         'file' => 'templates/template-4.html',
     ],
     [
         'id' => 5,
         'name' => 'Bold & Blue (Dark Theme)',
         'description' => 'A vibrant design with a prominent blue call-to-action.',
-        'preview_image' => 'assets/images/Marketing.png',
+        'preview_image' => 'assets/images/Blog-Promotions.png',
         'file' => 'templates/template-5.html',
     ],
     [
         'id' => 6,
         'name' => 'Classic Serif (Dark Theme)',
         'description' => 'An elegant, text-focused design for a classic feel.',
-        'preview_image' => 'assets/images/Signals-of-Strain-eBook.png',
+        'preview_image' => 'assets/images/Lead-Magnet.png',
         'file' => 'templates/template-6.html',
     ],
 ];

templates/template-1.html

@@ -1,7 +1,7 @@
 <a id="back-to-templates-btn" href="editor_13d84da0257b8680.php" class="btn btn-secondary mb-3">Back to Templates</a>
 <div class="row align-items-center">
     <div class="col-md-6">
-        <img id="previewImage" src="assets/images/Social-Media-eBook.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+        <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
     </div>
     <div class="col-md-6">
         <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Minimalist Modern Title</h1>

templates/template-2.html

@@ -1,7 +1,7 @@
 <a id="back-to-templates-btn" href="editor_13d84da0257b8680.php" class="btn btn-secondary mb-3">Back to Templates</a>
 <div class="row align-items-center">
     <div class="col-md-6 order-md-2">
-        <img id="previewImage" src="assets/images/Marketing.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+        <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
     </div>
     <div class="col-md-6 order-md-1">
         <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Bold & Blue Title</h1>

templates/template-3.html

@@ -1,7 +1,7 @@
 <a id="back-to-templates-btn" href="editor_13d84da0257b8680.php" class="btn btn-secondary mb-3">Back to Templates</a>
 <div class="row justify-content-center text-center">
     <div class="col-lg-8">
-        <img id="previewImage" src="assets/images/Signals-of-Strain-eBook.png" class="img-fluid rounded shadow-sm mb-4" alt="Ebook Cover">
+        <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm mb-4" alt="Ebook Cover">
         <h1 id="previewTitle" class="display-4 fw-bold">Classic Serif Title</h1>
         <p id="previewDescription" class="lead fs-3 mx-auto">An elegant and classic description, perfect for a timeless serif-style ebook.</p>
         <div id="previewCtaContainer">

templates/template-4.html

@@ -18,7 +18,7 @@
 <div class="dark-theme-container">
     <div class="row align-items-center">
         <div class="col-md-6">
-            <img id="previewImage" src="assets/images/Social-Media-eBook.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+            <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
         </div>
         <div class="col-md-6">
             <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Minimalist Modern Title (Dark Theme)</h1>

templates/template-5.html

@@ -18,7 +18,7 @@
 <div class="dark-theme-container">
     <div class="row align-items-center">
         <div class="col-md-6 order-md-2">
-            <img id="previewImage" src="assets/images/Marketing.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
+            <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
         </div>
         <div class="col-md-6 order-md-1">
             <h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Bold & Blue Title (Dark Theme)</h1>

templates/template-6.html

@@ -19,7 +19,7 @@
 <div class="dark-theme-container">
     <div class="row justify-content-center text-center">
         <div class="col-lg-8">
-            <img id="previewImage" src="assets/images/Signals-of-Strain-eBook.png" class="img-fluid rounded shadow-sm mb-4" alt="Ebook Cover">
+            <img id="previewImage" src="assets/images/Default-Load-Your-Cover-Here.png" class="img-fluid rounded shadow-sm mb-4" alt="Ebook Cover">
             <h1 id="previewTitle" class="display-4 fw-bold">Classic Serif Title (Dark Theme)</h1>
             <p id="previewDescription" class="lead fs-3 mx-auto">An elegant and classic description, perfect for a timeless serif-style ebook.</p>
             <div id="previewCtaContainer">