<?php
/**
 * Title: front-page
 * Slug: packwad/front-page
 * Inserter: no
 */
?>
<!-- wp:group {"tagName":"main","metadata":{"name":"main"},"style":{"spacing":{"padding":{"top":"0"},"blockGap":"0"},"color":{"background":"#07283c"}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group has-background" style="background-color:#07283c;padding-top:0"><!-- wp:group {"metadata":{"name":"hero-section"},"align":"full","style":{"spacing":{"blockGap":"0","padding":{"top":"var:preset|spacing|60","bottom":"0"}},"position":{"type":""},"background":{"backgroundImage":{"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/fundo_ruido.png","id":117,"source":"file","title":"fundo_ruido"},"backgroundSize":"cover"},"dimensions":{"minHeight":""}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:0"><!-- wp:template-part {"slug":"header","tagName":"header","align":"center"} /-->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained","contentSize":"70%"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--80)"><!-- wp:columns {"verticalAlignment":"center","align":"full","style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center" style="padding-right:0;padding-left:0"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontSize":"16px"},"spacing":{"padding":{"bottom":"var:preset|spacing|70"}}}} -->
<h2 class="wp-block-heading" style="padding-bottom:var(--wp--preset--spacing--70);font-size:16px">THE STUDIO THAT MAKES YOUR PROJECT TO REALITY.</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}}},"textColor":"luminous-vivid-orange","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-luminous-vivid-orange-color has-text-color has-link-color has-x-large-font-size">+900</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HAPPY CLIENTS</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}},"spacing":{"padding":{"top":"var:preset|spacing|60"}}},"textColor":"luminous-vivid-orange","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-luminous-vivid-orange-color has-text-color has-link-color has-x-large-font-size" style="padding-top:var(--wp--preset--spacing--60)">+800</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
<p style="text-transform:uppercase">successful projects</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}},"spacing":{"padding":{"top":"var:preset|spacing|60"}}},"textColor":"luminous-vivid-orange","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-luminous-vivid-orange-color has-text-color has-link-color has-x-large-font-size" style="padding-top:var(--wp--preset--spacing--60)">+700</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}}} -->
<p style="text-transform:uppercase">partner companies</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"60%","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:60%"><!-- wp:image {"scale":"cover","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/hand-girl-hair-camera-photographer-pine-14200-pxhere.com-alt.png" alt="" class="" style="object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"20%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"right","style":{"typography":{"fontSize":"16px"},"spacing":{"padding":{"bottom":"var:preset|spacing|70"}}}} -->
<h2 class="wp-block-heading has-text-align-right" style="padding-bottom:var(--wp--preset--spacing--70);font-size:16px">SPECIALIZED AND CAPABLE TEAM IN ALL AREAS OF BUSSINES</h2>
<!-- /wp:heading -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}}},"textColor":"luminous-vivid-orange","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-luminous-vivid-orange-color has-text-color has-link-color has-x-large-font-size">+900</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HAPPY CLIENTS</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|luminous-vivid-orange"}}},"spacing":{"padding":{"top":"var:preset|spacing|60"}}},"textColor":"luminous-vivid-orange","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-luminous-vivid-orange-color has-text-color has-link-color has-x-large-font-size" style="padding-top:var(--wp--preset--spacing--60)">+800</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"textTransform":"uppercase"}}} -->
<p class="has-text-align-right" style="text-transform:uppercase">successful projects</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"spacing":{"padding":{"top":"var:preset|spacing|80"}}}} -->
<p class="has-text-align-right" style="padding-top:var(--wp--preset--spacing--80)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices lobortis nibh.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-orange","style":{"border":{"radius":"0px"},"typography":{"fontStyle":"normal","fontWeight":"600"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-orange-background-color has-background wp-element-button" style="border-radius:0px;font-style:normal;font-weight:600">Get in touch</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"about-section"},"align":"full","style":{"spacing":{"padding":{"right":"0","left":"0","top":"0","bottom":"0"},"margin":{"top":"5vh","bottom":"5vh"}}},"backgroundColor":"luminous-vivid-orange","layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group alignfull has-luminous-vivid-orange-background-color has-background" id="about" style="margin-top:5vh;margin-bottom:5vh;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 {"verticalAlignment":null} -->
<div class="wp-block-columns"><!-- 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 {"style":{"typography":{"fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","fontSize":"59px"}}} -->
<h2 class="wp-block-heading" style="font-size:59px;font-style:normal;font-weight:600;text-transform:uppercase">Get to know our work and diferentials</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"left","style":{"spacing":{"padding":{"top":"var:preset|spacing|80"}}}} -->
<p class="has-text-align-left" style="padding-top:var(--wp--preset--spacing--80)">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.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- 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/camera-photography-photographer-dslr-reflex-camera-digital-camera-99202-pxhere.com_.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">BLOG</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"60px","fontStyle":"normal","fontWeight":"400"}}} -->
<h2 class="wp-block-heading has-text-align-left" 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">Get in touch with us</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"} /-->