| @@ -21,95 +21,177 @@ | ||
| 21 | 21 | */ |
| 22 | 22 | public static function layout() { |
| 23 | 23 | ?> |
| 24 | 24 | <style> |
| 25 | - .wpsc-other-plugins-container { | |
| 26 | - display: flex; | |
| 27 | - flex-direction: column; | |
| 28 | - align-items: center; | |
| 29 | - justify-content: center; | |
| 30 | - gap:20px; | |
| 31 | - padding-<?php echo is_rtl() ? 'left' : 'right'; ?>: 20px; | |
| 25 | + :root { | |
| 26 | + --primary-color: #2271b1; | |
| 27 | + --text-main: #111827; | |
| 28 | + --text-muted: #4b5563; | |
| 29 | + --bg-light: #f9fafb; | |
| 32 | 30 | } |
| 33 | - .wpsc-other-plugins-header-container { | |
| 31 | + | |
| 32 | + body { | |
| 33 | + background-color: var(--bg-light); | |
| 34 | + margin: 0; | |
| 35 | + font-family: 'Inter', -apple-system, sans-serif; | |
| 36 | + } | |
| 37 | + | |
| 38 | + .plugin-showcase { | |
| 39 | + max-width: 1200px; | |
| 40 | + margin: 0 auto; | |
| 41 | + padding: 20px 20px; | |
| 42 | + } | |
| 43 | + | |
| 44 | + /* Header & Footer Styling */ | |
| 45 | + .showcase-header, .showcase-footer { | |
| 46 | + text-align: center; | |
| 47 | + margin-bottom: 50px; | |
| 48 | + } | |
| 49 | + | |
| 50 | + .showcase-footer { | |
| 51 | + margin-top: 50px; | |
| 52 | + border-top: 1px solid #e5e7eb; | |
| 53 | + padding-top: 10px; | |
| 54 | + } | |
| 55 | + | |
| 56 | + .showcase-header h2, .showcase-footer h3 { | |
| 57 | + font-size: 2rem; | |
| 58 | + color: var(--text-main); | |
| 59 | + margin-bottom: 15px; | |
| 60 | + line-height: 2rem; | |
| 61 | + } | |
| 62 | + | |
| 63 | + .showcase-header p, .showcase-footer p { | |
| 64 | + color: var(--text-muted); | |
| 65 | + max-width: 700px; | |
| 66 | + margin: 0 auto; | |
| 67 | + line-height: 1.6; | |
| 68 | + } | |
| 69 | + | |
| 70 | + /* Grid Logic: Forces 3 columns */ | |
| 71 | + .grid-container { | |
| 72 | + display: grid; | |
| 73 | + grid-template-columns: repeat(3, 1fr); | |
| 74 | + gap: 40px; | |
| 75 | + } | |
| 76 | + | |
| 77 | + /* Card Styling */ | |
| 78 | + .modern-card { | |
| 79 | + background: #ffffff; | |
| 80 | + border-radius: 12px; | |
| 81 | + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| 82 | + overflow: hidden; | |
| 34 | 83 | display: flex; |
| 35 | 84 | flex-direction: column; |
| 36 | - align-items: center; | |
| 85 | + transition: transform 0.3s ease; | |
| 37 | 86 | } |
| 38 | - .header-title-main{ | |
| 39 | - color:#2C3E50; | |
| 40 | - font-size: 39px; | |
| 41 | - font-style: normal; | |
| 42 | - font-weight: 700; | |
| 43 | - line-height: normal; | |
| 44 | - margin-bottom: 0; | |
| 45 | - text-align: center; | |
| 87 | + | |
| 88 | + .image-wrapper { | |
| 89 | + height: 180px; | |
| 90 | + background: #eee; | |
| 46 | 91 | } |
| 47 | - .header-subtitle-main{ | |
| 48 | - font-size: 18px; | |
| 49 | - font-style: normal; | |
| 50 | - font-weight: 400; | |
| 51 | - line-height: normal; | |
| 52 | - text-align: center; | |
| 92 | + | |
| 93 | + .card-img { | |
| 94 | + width: 100%; | |
| 95 | + height: 100%; | |
| 96 | + object-fit: cover; | |
| 53 | 97 | } |
| 54 | - .wpsc-single-product{ | |
| 98 | + | |
| 99 | + .card-body { | |
| 100 | + padding: 24px; | |
| 55 | 101 | display: flex; |
| 56 | 102 | flex-direction: column; |
| 57 | - align-items: flex-start; | |
| 58 | - gap:10px; | |
| 59 | - max-width: 1080px; | |
| 60 | - font-size: 18px; | |
| 103 | + flex-grow: 1; | |
| 61 | 104 | } |
| 62 | - .wpsc-single-product img{ | |
| 63 | - width: 100%; | |
| 64 | - height: auto; | |
| 65 | - border-radius: 10px; | |
| 105 | + | |
| 106 | + .card-body h3 { | |
| 107 | + margin: 0 0 12px 0; | |
| 108 | + line-height: 1.25rem; | |
| 66 | 109 | } |
| 67 | - .wpsc-single-product p{ | |
| 68 | - font-size: 18px; | |
| 69 | - margin: 0; | |
| 110 | + | |
| 111 | + .card-body p { | |
| 112 | + font-size: 0.95rem; | |
| 113 | + color: var(--text-muted); | |
| 114 | + line-height: 1.5; | |
| 115 | + margin-bottom: 20px; | |
| 116 | + /* Keeps text between 3-5 lines */ | |
| 117 | + display: -webkit-box; | |
| 118 | + -webkit-line-clamp: 4; | |
| 119 | + -webkit-box-orient: vertical; | |
| 120 | + overflow: hidden; | |
| 70 | 121 | } |
| 71 | - .wpsc-single-product a { | |
| 122 | + | |
| 123 | + .card-link { | |
| 124 | + margin-top: auto; | |
| 125 | + background: var(--primary-color); | |
| 126 | + color: white; | |
| 72 | 127 | text-decoration: none; |
| 128 | + text-align: center; | |
| 129 | + padding: 12px; | |
| 130 | + border-radius: 6px; | |
| 131 | + font-weight: 600; | |
| 132 | + font-size: 0.9rem; | |
| 133 | + border: 1px solid var(--primary-color); | |
| 73 | 134 | } |
| 74 | - .wpsc-other-plugins-footer-container { | |
| 75 | - display: flex; | |
| 76 | - flex-direction: column; | |
| 77 | - align-items: center; | |
| 135 | + | |
| 136 | + .card-link:hover { | |
| 137 | + background: var(--bg-light); | |
| 78 | 138 | } |
| 79 | - .footer-title-main{ | |
| 80 | - color:#2C3E50; | |
| 81 | - font-size: 30px; | |
| 82 | - font-style: normal; | |
| 83 | - font-weight: 500; | |
| 84 | - line-height: normal; | |
| 85 | - margin-bottom: 0; | |
| 86 | - text-align: center; | |
| 139 | + | |
| 140 | + /* Responsive Adjustments */ | |
| 141 | + @media (max-width: 992px) { | |
| 142 | + .grid-container { | |
| 143 | + grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */ | |
| 144 | + } | |
| 87 | 145 | } |
| 88 | - .footer-subtitle-main{ | |
| 89 | - font-size: 18px; | |
| 90 | - font-style: normal; | |
| 91 | - font-weight: 400; | |
| 92 | - line-height: normal; | |
| 93 | - text-align: center; | |
| 146 | + | |
| 147 | + @media (max-width: 650px) { | |
| 148 | + .grid-container { | |
| 149 | + grid-template-columns: 1fr; /* 1 per row on mobile */ | |
| 150 | + } | |
| 94 | 151 | } |
| 95 | 152 | </style> |
| 96 | - <div class="wpsc-other-plugins-container"> | |
| 97 | - <div class="wpsc-other-plugins-header-container"> | |
| 98 | - <h1 class="header-title-main">Our WooCommerce Extensions</h1> | |
| 99 | - <p class="header-subtitle-main">Looking to start an online store? We're the team behind SupportCandy, and we've developed powerful WooCommerce extensions to help you build and grow a successful business.</p> | |
| 153 | + <section class="plugin-showcase"> | |
| 154 | + <header class="showcase-header"> | |
| 155 | + <h2>Our other plugins</h2> | |
| 156 | + <p>From store enhancements to customer support, our plugins are built to help you sell better, communicate faster, and manage your business more efficiently.</p> | |
| 157 | + </header> | |
| 158 | + | |
| 159 | + <div class="grid-container"> | |
| 160 | + <div class="modern-card"> | |
| 161 | + <div class="image-wrapper"> | |
| 162 | + <img src="<?php echo esc_url( WPSC_PLUGIN_URL . 'asset/images/multi-currency-banner.webp' ); ?>" alt="Multi-Currency Plugin" class="card-img"> | |
| 163 | + </div> | |
| 164 | + <div class="card-body"> | |
| 165 | + <h3>Multi Currency Switcher for WooCommerce</h3> | |
| 166 | + <p>Offer your customers a seamless multi-currency shopping experience. This plugin automatically updates exchange rates and detects customer location for easy global selling.</p> | |
| 167 | + <a href="https://psmplugins.com/multi-currency-for-woocommerce" target="__blank" class="card-link">View Plugin</a> | |
| 168 | + </div> | |
| 100 | 169 | </div> |
| 101 | - <div class="wpsc-single-product"> | |
| 102 | - <img src="<?php echo esc_url( WPSC_PLUGIN_URL . '/asset/images/multi-currency-banner.png' ); ?>" alt=""> | |
| 103 | - <p>Offer your customers a seamless multi-currency shopping experience. | |
| 104 | - This plugin automatically updates exchange rates, detects your customer's currency by their location, and provides robust switching options so you can sell around the world with ease.</p> | |
| 105 | - <p><a href="https://psmplugins.com/multi-currency-for-woocommerce?utm_source=plugin&utm_medium=multi_currency&utm_campaign=supportcandy_other_plugins" target="_blank">Visit product page >>></a></p> | |
| 170 | + | |
| 171 | + <div class="modern-card"> | |
| 172 | + <div class="image-wrapper"> | |
| 173 | + <img src="<?php echo esc_url( WPSC_PLUGIN_URL . 'asset/images/request-a-quote-banner.webp' ); ?>" alt="Request a Quote Plugin" class="card-img"> | |
| 174 | + </div> | |
| 175 | + <div class="card-body"> | |
| 176 | + <h3>Request a Quote for WooCommerce</h3> | |
| 177 | + <p>Turn your store into a negotiation hub. Allow customers to build custom inquiry lists for bulk orders and convert quotes to orders with a single click.</p> | |
| 178 | + <a href="https://psmplugins.com/request-a-quote-for-woocommerce/" target="__blank" class="card-link">View Plugin</a> | |
| 179 | + </div> | |
| 106 | 180 | </div> |
| 107 | - <div class="wpsc-other-plugins-footer-container"> | |
| 108 | - <h2 class="footer-title-main">More plugins are on the way !</h2> | |
| 109 | - <p class="footer-subtitle-main">We're actively developing new extensions to help you get even more out of WooCommerce. Stay tuned!</p> | |
| 181 | + | |
| 182 | + <div class="modern-card"> | |
| 183 | + <div class="image-wrapper"> | |
| 184 | + <img src="<?php echo esc_url( WPSC_PLUGIN_URL . 'asset/images/supportcandy-banner.webp' ); ?>" alt="SupportCandy Plugin" class="card-img"> | |
| 185 | + </div> | |
| 186 | + <div class="card-body"> | |
| 187 | + <h3>SupportCandy – Helpdesk & Customer Support Ticket System</h3> | |
| 188 | + <p>Streamline your customer service with a professional helpdesk. Organize, track, and resolve tickets efficiently directly from your website dashboard.</p> | |
| 189 | + <a href="https://psmplugins.com/supportcandy/" target="__blank" class="card-link">View Plugin</a> | |
| 190 | + </div> | |
| 110 | 191 | </div> |
| 111 | - </div> | |
| 192 | + </div> | |
| 193 | + </section> | |
| 112 | 194 | <?php |
| 113 | 195 | } |
| 114 | 196 | } |
| 115 | 197 | endif; |
