<?php
// phpcs:ignore
?>
<style>
	.cf7-gs-wrap {
		margin: 20px 20px 0 0;
		max-width: 1200px;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	}

	.cf7-gs-header {
		background: #fff;
		padding: 40px;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		margin-bottom: 30px;
		text-align: center;
		background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
	}

	.cf7-gs-header h1 {
		font-size: 32px;
		font-weight: 700;
		color: #1d2327;
		margin: 0 0 10px 0;
		line-height: 1.2;
	}

	.cf7-gs-header p {
		font-size: 18px;
		color: #646970;
		max-width: 700px;
		margin: 0 auto;
	}

	.cf7-gs-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 25px;
		margin-bottom: 40px;
	}

	.cf7-gs-card {
		background: #fff;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
		border: 1px solid #e2e4e7;
		display: flex;
		flex-direction: column;
	}

	.cf7-gs-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	}

	.cf7-gs-card .step-number {
		display: inline-block;
		background: #2271b1;
		color: #fff;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: 50%;
		font-weight: 700;
		margin-bottom: 20px;
	}

	.cf7-gs-card h2 {
		font-size: 20px;
		font-weight: 600;
		margin: 0 0 15px 0;
		color: #1d2327;
	}

	.cf7-gs-card p {
		font-size: 15px;
		line-height: 1.6;
		color: #50575e;
		flex-grow: 1;
		margin-bottom: 20px;
	}

	.cf7-gs-card .dashicons {
		font-size: 40px;
		width: 40px;
		height: 40px;
		margin-bottom: 15px;
		color: #2271b1;
	}

	.cf7-gs-button {
		display: inline-block;
		background: #2271b1;
		color: #fff;
		padding: 10px 20px;
		border-radius: 6px;
		text-decoration: none;
		font-weight: 600;
		font-size: 14px;
		transition: background 0.2s;
		text-align: center;
	}

	.cf7-gs-button:hover {
		background: #135e96;
		color: #fff;
	}

	.cf7-gs-footer {
		text-align: center;
		padding: 30px;
		background: #f0f0f1;
		border-radius: 12px;
		border: 1px dashed #c3c4c7;
	}

	.cf7-gs-footer p {
		margin: 0;
		font-size: 14px;
		color: #646970;
	}

	.cf7-gs-footer a {
		color: #2271b1;
		text-decoration: none;
		font-weight: 600;
	}
</style>

<div class="cf7-gs-wrap">
	<div class="cf7-gs-header">
		<h1>Welcome to Grid & Divi Styler for Contact Form 7</h1>
		<p>The easiest way to create beautiful, responsive grid layouts and style your Contact Form 7 forms directly in Divi 4 & 5.</p>
	</div>

	<div class="cf7-gs-grid">
		<!-- Step 1 -->
		<div class="cf7-gs-card">
			<span class="step-number">1</span>
			<span class="dashicons dashicons-layout"></span>
			<h2>Create Your Grid Layout</h2>
			<p>Head over to Contact Form 7 and use our built-in grid tags to create 1, 1/2, 1/3, or 1/4 column layouts. Simply wrap your fields in rows and columns.</p>
			<a href="https://wptools.app/how-to/how-to-create-grid-layout-for-contact-form-7/" target="_blank" class="cf7-gs-button">View Grid Guide</a>
		</div>

		<!-- Step 2 -->
		<div class="cf7-gs-card">
			<span class="step-number">2</span>
			<span class="dashicons dashicons-edit"></span>
			<h2>Add to Divi Page</h2>
			<p>Open the Divi Builder (compatible with Divi 4 and Divi 5) and add the <strong>"Contact Form 7"</strong> module to any section of your page.</p>
			<a href="https://wptools.app/how-to/how-to-style-contact-form-7-in-divi-theme/" target="_blank" class="cf7-gs-button">Learn How to Add</a>
		</div>

		<!-- Step 3 -->
		<div class="cf7-gs-card">
			<span class="step-number">3</span>
			<span class="dashicons dashicons-art"></span>
			<h2>Style Your Form</h2>
			<p>Use the Design tab in the Divi module to customize every detail: labels, inputs, buttons, success messages, and more with live previews.</p>
			<a href="https://wptools.app/how-to/how-to-style-contact-form-7-in-divi-theme/" target="_blank" class="cf7-gs-button">Explore Styling Options</a>
		</div>
	</div>


	<div class="cf7-gs-footer">
		<p>Need more help? Check out our <a href="https://wptools.app/wordpress-plugin/grid-styler-for-contact-form-7-and-divi/#docs" target="_blank">Full Documentation</a> or <a href="<?php echo esc_url(admin_url('admin.php?page=cf7-grid-and-styler-for-divi-contact')); ?>">Contact Support</a>.</p>
	</div>
</div>