<?php
/**
 * Title: front-page
 * Slug: shinebuild/front-page
 * Inserter: no
 */
?>
<!-- wp:group {"tagName":"main","metadata":{"name":"main"},"style":{"spacing":{"padding":{"top":"0"},"blockGap":"0"},"color":{"background":"#381e11"}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group has-background" style="background-color:#381e11;padding-top:0"><!-- wp:group {"metadata":{"name":"hero-section"},"align":"full","style":{"spacing":{"blockGap":"0","padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|80"}},"position":{"type":""},"background":{"backgroundImage":{"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/banner.png","id":200,"source":"file","title":"banner"},"backgroundSize":"cover","backgroundPosition":"62% 42%"},"dimensions":{"minHeight":"80vh"}},"backgroundColor":"background-primary","layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group alignfull has-background-primary-background-color has-background" style="min-height:80vh;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--80)"><!-- wp:group {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|80"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--80)"><!-- wp:template-part {"slug":"header","tagName":"header","align":"wide"} /--></div>
<!-- /wp:group -->

<!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"top":"var:preset|spacing|70"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom" style="padding-top:var(--wp--preset--spacing--70)"><!-- wp:column {"verticalAlignment":"bottom","width":"35%","style":{"spacing":{"padding":{"top":"var:preset|spacing|80"}}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-top:var(--wp--preset--spacing--80);flex-basis:35%"><!-- wp:heading {"className":"text_mobile","style":{"typography":{"fontStyle":"normal","fontWeight":"500","fontSize":"80px"}}} -->
<h2 class="wp-block-heading text_mobile" style="font-size:80px;font-style:normal;font-weight:500"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( 'Build your %1$ssuccess%2$s with us today', 'shinebuild' ), '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-color-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"color","style":{"border":{"width":"2px"}},"borderColor":"color"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-color-background-color has-background has-border-color has-color-border-color wp-element-button" style="border-width:2px"><?php esc_html_e('About the Shinebuild', 'shinebuild');?></a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"text-color","style":{"color":{"background":"#ffffff00"},"border":{"width":"2px"},"elements":{"link":{"color":{"text":"var:preset|color|text-color"}}}},"borderColor":"text-color"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color-color has-text-color has-background has-link-color has-border-color has-text-color-border-color wp-element-button" style="border-width:2px;background-color:#ffffff00"><?php esc_html_e('Get in touch', 'shinebuild');?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"top":"0"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom" style="padding-top:0"><!-- wp:column {"verticalAlignment":"bottom","width":"70%","style":{"spacing":{"padding":{"top":"0"}}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-top:0;flex-basis:70%"></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom"} -->
<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:paragraph -->
<p><?php esc_html_e('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae ante eget lectus ultrices rutrum nec vitae massa. Sed pellentesque id nisi ac placerat.&nbsp;', 'shinebuild');?></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"about-section"},"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0","top":"0","bottom":"0"}},"color":{"background":"#fff5df"}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group alignfull has-background" id="about" style="background-color:#fff5df;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"className":"padding-line ","style":{"spacing":{"padding":{"left":"var:preset|spacing|30","top":"var:preset|spacing|80","right":"var:preset|spacing|30","bottom":"var:preset|spacing|80"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group padding-line" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--30)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"right":"var:preset|spacing|80"}}}} -->
<div class="wp-block-column" style="padding-right:var(--wp--preset--spacing--80)"><!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/banner3.jpg" alt="" class="" style="aspect-ratio:3/4;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80"}}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-right:var(--wp--preset--spacing--80)"><!-- wp:heading {"className":"text_mobile","style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"none","fontSize":"54px"},"elements":{"link":{"color":{"text":"var:preset|color|background-secundary"}}}},"textColor":"background-secundary"} -->
<h2 class="wp-block-heading text_mobile has-background-secundary-color has-text-color has-link-color" style="font-size:54px;font-style:normal;font-weight:600;text-transform:none"><?php /* Translators: 1. is the start of a 'mark' HTML element, 2. is the end of a 'mark' HTML element */ 
echo sprintf( esc_html__( 'Discover our %1$sexpertise and unique%2$s approach', 'shinebuild' ), '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-color-color">', '</mark>' ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}},"elements":{"link":{"color":{"text":"var:preset|color|background-secundary"}}},"typography":{"fontStyle":"normal","fontWeight":"300"}},"textColor":"background-secundary"} -->
<p class="has-text-align-left has-background-secundary-color has-text-color has-link-color" style="padding-top:var(--wp--preset--spacing--40);font-style:normal;font-weight:300"><?php esc_html_e('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget vulputate tellus. Aenean auctor non leo eu dignissim. Nullam eu congue leo, et rutrum nunc. Aliquam vel nisl eu ante sollicitudin fermentum. Vestibulum non risus nec libero blandit ultrices. Proin sed quam tortor. Etiam ac quam vulputate, suscipit lacus ac, facilisis odio.', 'shinebuild');?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"color","textColor":"text-color","style":{"border":{"radius":"53px"},"typography":{"fontStyle":"normal","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|text-color"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color-color has-color-background-color has-text-color has-background has-link-color wp-element-button" style="border-radius:53px;font-style:normal;font-weight:600"><?php esc_html_e('Get in touch', 'shinebuild');?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/banner2.jpg" alt="" class=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"blog-section"},"align":"full","className":"padding-line","style":{"spacing":{"margin":{"top":"10vh","bottom":"10vh"},"padding":{"right":"15%","left":"15%"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull padding-line" id="blog" style="margin-top:10vh;margin-bottom:10vh;padding-right:15%;padding-left:15%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|text-color"}}}},"textColor":"text-color","fontSize":"medium"} -->
<p class="has-text-color-color has-text-color has-link-color has-medium-font-size" style="font-style:normal;font-weight:700"><?php esc_html_e('BLOG', 'shinebuild');?></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"60px","fontStyle":"normal","fontWeight":"400"},"elements":{"link":{"color":{"text":"var:preset|color|color"}}}},"textColor":"color"} -->
<h2 class="wp-block-heading has-text-align-left has-color-color has-text-color has-link-color" style="font-size:60px;font-style:normal;font-weight:400">
Our articles and news    
</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:query {"queryId":37,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"asc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false,"parents":[],"format":[]},"className":"containers-ims"} -->
<div class="wp-block-query containers-ims"><!-- wp:post-template {"className":"image-span","layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"className":"ajust","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group ajust"><!-- wp:post-featured-image {"isLink":true} /--></div>
<!-- /wp:group -->

<!-- wp:post-title {"style":{"typography":{"fontSize":"29px","fontStyle":"normal","fontWeight":"400"}}} /-->

<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"contacts-section"},"align":"full","className":"padding-line background-white","style":{"spacing":{"padding":{"top":"10vh","bottom":"10vh","left":"15%","right":"15%"}}},"backgroundColor":"text-color","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull padding-line background-white has-text-color-background-color has-background" id="contact" style="padding-top:10vh;padding-right:15%;padding-bottom:10vh;padding-left:15%"><!-- wp:html -->
<div class="left-block-projects "> </div>
<div class="right-block-projects "> </div>
<!-- /wp:html -->

<!-- wp:group {"align":"full","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group alignfull"><!-- wp:paragraph {"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|background-secundary"}}}},"textColor":"background-secundary"} -->
<p class="has-background-secundary-color has-text-color has-link-color" style="font-size:20px;font-style:normal;font-weight:700">
    CONTACT</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"33px","fontStyle":"normal","fontWeight":"400"},"elements":{"link":{"color":{"text":"var:preset|color|background-primary"}}}},"textColor":"background-primary"} -->
<h2 class="wp-block-heading has-text-align-center has-background-primary-color has-text-color has-link-color" style="font-size:33px;font-style:normal;font-weight:400"><?php esc_html_e('Get in touch with us', 'shinebuild');?></h2>
<!-- /wp:heading -->

<!-- wp:html -->
<style>
.form-container {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    background-color: #f6f6f6; /* fundo escuro do container */
    box-sizing: border-box;
    border-radius: 16px; /* container levemente arredondado */
}

/* Campos do formulário */
.form-field {
    margin-bottom: 30px;
}

/* Labels */
.form-field label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #000; /* labels brancos */
    font-weight: 500;
}

/* Inputs e textarea com fundo branco e bordas arredondadas */
.form-field input,
.form-field textarea {
    width: 100%;
    background-color: #ffffff; /* fundo branco */
    border: 2px solid #ccc; /* borda cinza */
    border-radius: 20px; /* bastante arredondada */
    color: #1a1a1a; /* texto escuro */
    font-size: 16px;
    padding: 14px 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efeito ao focar no input */
.form-field input:focus,
.form-field textarea:focus {
    border-color: #888; /* borda cinza mais escura */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Textarea */
.form-field textarea {
    height: 120px;
    resize: none;
}

/* Botão de submit com estilo arredondado */
.submit-btn {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 2px solid #ccc;
    padding: 14px 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px; /* bastante arredondado */
    transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
}

/* Hover no botão */
.submit-btn:hover {
    background-color: #f0f0f0;
    border-color: #888;
    transform: translateY(-2px);
}
</style>

<div class="form-container">
    <form id="contactForm">
        <div class="form-field">
            <label for="name">Name</label>
            <input type="text" id="name" required>
        </div>
        
        <div class="form-field">
            <label for="email">Email Address</label>
            <input type="email" id="email" required>
        </div>
        
        <div class="form-field">
            <label for="message">Message</label>
            <textarea id="message" required></textarea>
        </div>
        
        <button type="submit" class="submit-btn">SUBMIT</button>
    </form>
</div>
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->