custom hero section

wp-config.php

@@ -89,7 +89,14 @@ define( 'WP_DEBUG', false );
 
 /* Add any custom values between this line and the "stop editing" line. */
 
+if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] === 'https') {
+    $_SERVER['HTTPS'] = 'on';
+}
 
+if (isset($_SERVER['HTTP_HOST'])) {
+    define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']);
+    define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']);
+}
 
 /* That's all, stop editing! Happy publishing. */
 

wp-content/themes/twentytwentyfive/assets/css/custom-style.css

@@ -0,0 +1,58 @@
+/* Custom Styles */
+
+body.home {
+    background-color: var(--wp--preset--color--base);
+    color: var(--wp--preset--color--contrast);
+}
+
+body.home a {
+    color: var(--wp--preset--color--primary);
+}
+
+body.home a:hover {
+    color: var(--wp--preset--color--contrast);
+}
+
+body.home .wp-block-button__link {
+    background-color: var(--wp--preset--color--primary);
+    color: #FFFFFF;
+}
+
+body.home .wp-block-button__link:hover {
+    background-color: var(--wp--preset--color--contrast);
+    color: #FFFFFF;
+}
+
+body.home .wp-block-site-title a {
+    color: var(--wp--preset--color--primary);
+}
+
+body.home .hero-section {
+    position: relative;
+    height: 300px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    text-align: center;
+    width: 100%;
+    overflow: hidden;
+}
+
+body.home .hero-section img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+}
+
+body.home .hero-section .hero-content {
+    position: relative;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 2rem;
+    border-radius: 0.5rem;
+}

wp-content/themes/twentytwentyfive/functions.php

@@ -67,6 +67,26 @@ if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) :
 endif;
 add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' );
 
+// Enqueues the custom stylesheet on the front.
+if ( ! function_exists( 'twentytwentyfive_enqueue_custom_styles' ) ) :
+	/**
+	 * Enqueues the custom stylesheet on the front.
+	 *
+	 * @since Twenty Twenty-Five 1.0
+	 *
+	 * @return void
+	 */
+	function twentytwentyfive_enqueue_custom_styles() {
+		wp_enqueue_style(
+			'twentytwentyfive-custom-style',
+			get_stylesheet_directory_uri() . '/assets/css/custom-style.css',
+			array('twentytwentyfive-style'),
+			time()
+		);
+	}
+endif;
+add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_custom_styles' );
+
 // Registers custom block styles.
 if ( ! function_exists( 'twentytwentyfive_block_styles' ) ) :
 	/**

wp-content/themes/twentytwentyfive/templates/home.html

@@ -1,9 +1,19 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
+<!-- wp:html -->
+<div class="hero-section">
+    <img src="wp-content/themes/twentytwentyfive/assets/images/hero-image.png" alt="Hero Image">
+    <div class="hero-content">
+        <h1>Welcome to our Agency</h1>
+        <p>We build amazing websites</p>
+    </div>
+</div>
+<!-- /wp:html -->
+
 <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
-	<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
+    <!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
-	<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
+    <!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
 </main>
 <!-- /wp:group -->
 

wp-content/themes/twentytwentyfive/theme.json

@@ -9,50 +9,30 @@
 			"defaultPalette": false,
 			"palette": [
 				{
-					"color": "#FFFFFF",
+					"color": "#F8F9FA",
 					"name": "Base",
 					"slug": "base"
 				},
 				{
-					"color": "#111111",
+					"color": "#212529",
 					"name": "Contrast",
 					"slug": "contrast"
 				},
 				{
-					"color": "#FFEE58",
+					"color": "#007BFF",
-					"name": "Accent 1",
+					"name": "Primary",
-					"slug": "accent-1"
+					"slug": "primary"
 				},
 				{
-					"color": "#F6CFF4",
+					"color": "#E7F3FF",
-					"name": "Accent 2",
+					"name": "Secondary",
-					"slug": "accent-2"
+					"slug": "secondary"
-				},
-				{
-					"color": "#503AA8",
-					"name": "Accent 3",
-					"slug": "accent-3"
-				},
-				{
-					"color": "#686868",
-					"name": "Accent 4",
-					"slug": "accent-4"
-				},
-				{
-					"color": "#FBFAF3",
-					"name": "Accent 5",
-					"slug": "accent-5"
-				},
-				{
-					"color": "color-mix(in srgb, currentColor 20%, transparent)",
-					"name": "Accent 6",
-					"slug": "accent-6"
 				}
 			]
 		},
 		"layout": {
-			"contentSize": "645px",
+			"contentSize": "800px",
-			"wideSize": "1340px"
+			"wideSize": "1600px"
 		},
 		"spacing": {
 			"defaultSpacingSizes": false,
@@ -110,43 +90,43 @@
 				{
 					"fluid": false,
 					"name": "Small",
-					"size": "0.875rem",
+					"size": "1rem",
 					"slug": "small"
 				},
 				{
 					"fluid": {
-						"max": "1.125rem",
+						"max": "1.5rem",
-						"min": "1rem"
+						"min": "1.2rem"
 					},
 					"name": "Medium",
-					"size": "1rem",
+					"size": "1.2rem",
 					"slug": "medium"
 				},
 				{
 					"fluid": {
-						"max": "1.375rem",
+						"max": "2rem",
-						"min": "1.125rem"
+						"min": "1.5rem"
 					},
 					"name": "Large",
-					"size": "1.38rem",
+					"size": "1.75rem",
 					"slug": "large"
 				},
 				{
 					"fluid": {
-						"max": "2rem",
+						"max": "2.5rem",
-						"min": "1.75rem"
+						"min": "2rem"
 					},
 					"name": "Extra Large",
-					"size": "1.75rem",
+					"size": "2.25rem",
 					"slug": "x-large"
 				},
 				{
 					"fluid": {
-						"max": "3rem",
+						"max": "3.5rem",
-						"min": "2.15rem"
+						"min": "2.5rem"
 					},
 					"name": "Extra Extra Large",
-					"size": "2.15rem",
+					"size": "3rem",
 					"slug": "xx-large"
 				}
 			],
@@ -191,7 +171,7 @@
 			"text": "var:preset|color|contrast"
 		},
 		"spacing": {
-			"blockGap": "1.2rem",
+			"blockGap": "1.5rem",
 			"padding": {
 				"left": "var:preset|spacing|50",
 				"right": "var:preset|spacing|50"
@@ -199,488 +179,49 @@
 		},
 		"typography": {
 			"fontFamily": "var:preset|font-family|manrope",
-			"fontSize": "var:preset|font-size|large",
+			"fontSize": "var:preset|font-size|medium",
-			"fontWeight": "300",
+			"fontWeight": "400",
-			"letterSpacing": "-0.1px",
+			"letterSpacing": "normal",
-			"lineHeight": "1.4"
+			"lineHeight": "1.6"
 		},
 		"blocks": {
-			"core/avatar": {
-				"border": {
-					"radius": "100px"
-				}
-			},
 			"core/button": {
-				"variations": {
-					"outline": {
-						"border": {
-							"color": "currentColor",
-							"width": "1px"
-						},
-						"css": ".wp-block-button__link:not(.has-background):hover {background-color:color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);}",
-						"spacing": {
-							"padding": {
-								"bottom": "calc(1rem - 1px)",
-								"left": "calc(2.25rem - 1px)",
-								"right": "calc(2.25rem - 1px)",
-								"top": "calc(1rem - 1px)"
-							}
-						}
-					}
-				}
-			},
-			"core/columns": {
-				"spacing": {
-					"blockGap": "var:preset|spacing|50"
-				}
-			},
-			"core/buttons": {
-				"spacing": {
-					"blockGap": "16px"
-				}
-			},
-			"core/code": {
-				"typography": {
-					"fontFamily": "var:preset|font-family|fira-code",
-					"fontSize": "var:preset|font-size|medium",
-					"fontWeight": "300"
-				},
 				"color": {
-					"background": "var:preset|color|accent-5",
+					"background": "var:preset|color|primary",
-					"text": "var:preset|color|contrast"
+					"text": "#FFFFFF"
 				},
-				"spacing": {
-					"padding": {
-						"right": "var:preset|spacing|40",
-						"bottom": "var:preset|spacing|40",
-						"left": "var:preset|spacing|40",
-						"top": "var:preset|spacing|40"
-					}
-				}
-			},
-			"core/comment-author-name": {
-				"color": {
-					"text": "var:preset|color|accent-4"
-				},
-				"elements": {
-					"link": {
-						"color": {
-							"text": "var:preset|color|accent-4"
-						},
-						"typography": {
-							"textDecoration": "none"
-						},
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						}
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				},
-				"spacing": {
-					"margin": {
-						"top": "5px",
-						"bottom": "0px"
-					}
-				}
-			},
-			"core/comment-content": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
-				"spacing": {
-					"margin": {
-						"top": "var:preset|spacing|30",
-						"bottom": "var:preset|spacing|30"
-					}
-				}
-			},
-			"core/comment-date": {
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				},
-				"color": {
-					"text": "var:preset|color|contrast"
-				},
-				"elements": {
-					"link": {
-						"color": {
-							"text": "var:preset|color|contrast"
-						}
-					}
-				}
-			},
-			"core/comment-edit-link": {
-				"elements": {
-					"link": {
-						"color": {
-							"text": "var:preset|color|contrast"
-						}
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				}
-			},
-			"core/comment-reply-link": {
-				"elements": {
-					"link": {
-						"color": {
-							"text": "var:preset|color|contrast"
-						}
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				}
-			},
-			"core/post-comments-form": {
-				"css": "& textarea, input:not([type=submit]){border-radius:.25rem; border-color: var(--wp--preset--color--accent-6) !important;} & input[type=checkbox]{margin:0 .2rem 0 0 !important;} & label {font-size: var(--wp--preset--font-size--small); }",
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
-				"spacing": {
-					"padding": {
-						"top": "var:preset|spacing|40",
-						"bottom": "var:preset|spacing|40"
-					}
-				}
-			},
-			"core/comments-pagination": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
-				"spacing": {
-					"margin": {
-						"top": "var:preset|spacing|40",
-						"bottom": "var:preset|spacing|40"
-					}
-				}
-			},
-			"core/comments-pagination-next": {
 				"typography": {
 					"fontSize": "var:preset|font-size|medium"
 				}
-			},
-			"core/comments-pagination-numbers": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"core/comments-pagination-previous": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"core/post-date": {
-				"color":{
-					"text": "var:preset|color|accent-4"
-				},
-				"elements": {
-					"link": {
-						"color" : {
-							"text": "var:preset|color|accent-4"
-						},
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						},
-						"typography": {
-							"textDecoration": "none"
-						}
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|small"
-				}
-			},
-			"core/post-navigation-link": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"core/post-terms": {
-				"css": "& a { white-space: nowrap; }",
-				"typography": {
-					"fontSize": "var:preset|font-size|small",
-					"fontWeight": "600"
-				}
-			},
-			"core/post-title": {
-				"elements": {
-					"link": {
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						},
-						"typography": {
-							"textDecoration": "none"
-						}
-					}
-				}
-			},
-			"core/quote": {
-				"border": {
-					"style": "solid",
-					"width": "0 0 0 2px",
-					"color": "currentColor"
-				},
-				"spacing": {
-					"blockGap": "var:preset|spacing|30",
-					"margin": {
-						"left": "0",
-						"right": "0"
-					},
-					"padding": {
-						"top": "var:preset|spacing|30",
-						"right": "var:preset|spacing|40",
-						"bottom": "var:preset|spacing|30",
-						"left": "var:preset|spacing|40"
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|large",
-					"fontWeight": "300"
-				},
-				"elements": {
-					"cite": {
-						"typography": {
-							"fontSize": "var:preset|font-size|small",
-							"fontStyle": "normal",
-							"fontWeight": "300"
-						},
-						"css": "& sub { font-size: 0.65em }"
-					}
-				},
-				"css": "&.has-text-align-right { border-width: 0 2px 0 0; } &.has-text-align-center { border-width: 0;border-inline: 0; padding-inline: 0; }",
-				"variations": {
-					"plain": {
-						"border": {
-							"color": "transparent",
-							"style": "none",
-							"width": "0",
-							"radius": "0"
-						},
-						"spacing": {
-							"padding": {
-								"top": "0",
-								"right": "0",
-								"bottom": "0",
-								"left": "0"
-							}
-						}
-					}
-				}
-			},
-			"core/pullquote": {
-				"typography": {
-					"fontSize": "var:preset|font-size|xx-large",
-					"fontWeight": "300",
-					"lineHeight": "1.2"
-				},
-				"elements": {
-					"cite": {
-						"typography": {
-							"fontSize": "var:preset|font-size|small",
-							"fontStyle": "normal"
-						}
-					}
-				},
-				"spacing": {
-					"padding": {
-						"bottom": "var:preset|spacing|30",
-						"top": "var:preset|spacing|30"
-					}
-				},
-				"css": "& p:last-of-type {margin-bottom: var(--wp--preset--spacing--30);}"
-			},
-			"core/query-pagination": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium",
-					"fontWeight": "500"
-				}
-			},
-			"core/search": {
-				"css": "& .wp-block-search__input{border-radius:3.125rem;padding-left:1.5625rem;padding-right:1.5625rem;border-color:var(--wp--preset--color--accent-6);}",
-				"typography": {
-					"fontSize": "var:preset|font-size|medium",
-					"lineHeight": "1.6"
-				},
-				"elements": {
-					"button": {
-						"border": {
-							"radius": "3.125rem"
-						},
-						"spacing": {
-							"margin": {
-								"left": "1.125rem"
-							}
-						},
-						":hover" : {
-							"border": {
-								"color": "transparent"
-							}
-						}
-					}
-				}
-			},
-			"core/separator": {
-				"border": {
-					"color": "currentColor",
-					"style": "solid",
-					"width": "0 0 1px 0"
-				},
-				"color": {
-					"text": "var:preset|color|accent-6"
-				},
-				"variations": {
-					"wide": {
-						"css": " &:not(.alignfull){max-width: var(--wp--style--global--wide-size) !important;}"
-					}
-				}
-			},
-			"core/site-tagline": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"core/site-title": {
-				"typography": {
-					"fontWeight": "700",
-					"letterSpacing": "-.5px"
-				},
-				"elements": {
-					"link": {
-						"typography": {
-							"textDecoration": "none"
-						},
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						}
-					}
-				}
-			},
-			"core/term-description": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"core/navigation": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				},
-				"elements": {
-					"link": {
-						":hover": {
-							"typography": {
-								"textDecoration": "underline"
-							}
-						},
-						"typography": {
-							"textDecoration": "none"
-						}
-					}
-				}
-			},
-			"core/list": {
-				"css": "& li{margin-top: 0.5rem;}"
 			}
 		},
 		"elements": {
-			"button": {
+			"link": {
 				"color": {
-					"background": "var:preset|color|contrast",
+					"text": "var:preset|color|primary"
-					"text": "var:preset|color|base"
-				},
-				":focus": {
-					"outline": {
-						"color": "var:preset|color|accent-4",
-						"offset": "2px"
-					}
 				},
 				":hover": {
 					"color": {
-						"background": "color-mix(in srgb, var(--wp--preset--color--contrast) 85%, transparent)",
+						"text": "var:preset|color|contrast"
-						"text": "var:preset|color|base"
-					},
-					"border": {
-						"color": "transparent"
 					}
-				},
-				"spacing": {
-					"padding": {
-						"bottom": "1rem",
-						"left": "2.25rem",
-						"right": "2.25rem",
-						"top": "1rem"
-					}
-				},
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"caption": {
-				"typography": {
-					"fontSize": "var:preset|font-size|small",
-					"lineHeight": "1.4"
 				}
 			},
 			"h1": {
 				"typography": {
-					"fontSize": "var:preset|font-size|xx-large"
+					"fontSize": "var:preset|font-size|xx-large",
+					"fontWeight": "700"
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontSize": "var:preset|font-size|x-large"
+					"fontSize": "var:preset|font-size|x-large",
+					"fontWeight": "700"
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontSize": "var:preset|font-size|large"
+					"fontSize": "var:preset|font-size|large",
-				}
+					"fontWeight": "700"
-			},
-			"h4": {
-				"typography": {
-					"fontSize": "var:preset|font-size|medium"
-				}
-			},
-			"h5": {
-				"typography": {
-					"fontSize": "var:preset|font-size|small",
-					"letterSpacing": "0.5px"
-				}
-			},
-			"h6": {
-				"typography": {
-					"fontSize": "var:preset|font-size|small",
-					"fontWeight": "700",
-					"letterSpacing": "1.4px",
-					"textTransform": "uppercase"
-				}
-			},
-			"heading": {
-				"typography": {
-					"fontWeight": "400",
-					"lineHeight": "1.125",
-					"letterSpacing": "-0.1px"
-				}
-			},
-			"link": {
-				"color": {
-					"text": "currentColor"
-				},
-				":hover": {
-					"typography": {
-						"textDecoration": "none"
-					}
 				}
 			}
 		}