<?php
/**
 * Title: front-page
 * Slug: notewood/front-page
 * Inserter: no
 */
?>
<!-- wp:template-part {"slug":"header","tagName":"header","align":"center"} /-->

<!-- wp:group {"tagName":"main","metadata":{"name":"main"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80)"><!-- wp:group {"metadata":{"name":"hero-section"},"align":"full","style":{"spacing":{"blockGap":"0"},"position":{"type":""}},"layout":{"type":"constrained","contentSize":"80%"}} -->
<div class="wp-block-group alignfull"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","className":"relative text_mobile","style":{"typography":{"fontStyle":"normal","fontWeight":"300","fontSize":"230px","textTransform":"uppercase"},"spacing":{"padding":{"right":"0","left":"0","top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}}} -->
<h1 class="wp-block-heading alignwide has-text-align-center relative text_mobile" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;font-size:230px;font-style:normal;font-weight:300;text-transform:uppercase"><?php esc_html_e( 'Notewood Studio', 'notewood' ); ?></h1>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"center","className":"img-hero is-style-default","style":{"spacing":{"margin":{"top":"-350px"}},"color":[]}} -->
<figure class="wp-block-image aligncenter size-full img-hero is-style-default" style="margin-top:-350px"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/business-businessman-businesswoman-businesswomen-colleagues-company-1448535-pxhere.com_.jpg" alt="" class=""/></figure>
<!-- /wp:image --></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"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" id="about" style="margin-top:5vh;margin-bottom:5vh;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"align":"full","className":"padding-line ","style":{"spacing":{"padding":{"right":"15%","left":"15%","top":"var:preset|spacing|80"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap"}} -->
<div class="wp-block-group alignfull padding-line" style="padding-top:var(--wp--preset--spacing--80);padding-right:15%;padding-left:15%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"20px","fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|text-color"}}}},"textColor":"text-color"} -->
<p class="has-text-color-color has-text-color has-link-color" style="font-size:20px;font-style:normal;font-weight:700">
    
<?php esc_html_e( 'ABOUT US', 'notewood' ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"scroll-text","style":{"typography":{"fontStyle":"normal","fontWeight":"300"},"elements":{"link":{"color":{"text":"var:preset|color|text-color"}}}},"textColor":"text-color","fontSize":"large"} -->
<p class="scroll-text has-text-color-color has-text-color has-link-color has-large-font-size" style="font-style:normal;font-weight:300">
<?php esc_html_e( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dictum risus, nec aliquet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse consequat neque vel eros ullamcorper imperdiet.', 'notewood' ); ?>    
</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"full","linkDestination":"none","align":"wide","style":{"color":{"duotone":"var:preset|duotone|grayscale"}}} -->
<figure class="wp-block-image alignwide size-full"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/computer-man-working-table-technology-camera-1280716-pxhere.com_-edited.jpg" alt="" class=""/></figure>
<!-- /wp:image --></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', 'notewood' ); ?></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">
<?php esc_html_e( 'Our articles and news', 'notewood' ); ?>    
</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">
    <?php esc_html_e( 'CONTACT', 'notewood' ); ?>
</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', 'notewood' ); ?></h2>
<!-- /wp:heading -->

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

.form-field {
    margin-bottom: 30px;
}

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

.form-field input,
.form-field textarea {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #ccc;
    border-radius: 20px;
    color: #1a1a1a;
    font-size: 16px;
    padding: 14px 16px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: #888;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.submit-btn {
    background-color: #ffffff;
    color: #1a1a1a;
    border: 2px solid #ccc;
    padding: 14px 30px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.3s, transform 0.2s, border-color 0.3s;
}

.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"><?php esc_html_e( 'Name', 'notewood' ); ?></label>
            <input type="text" id="name" required>
        </div>
        
        <div class="form-field">
            <label for="email"><?php esc_html_e( 'Email Address', 'notewood' ); ?></label>
            <input type="email" id="email" required>
        </div>
        
        <div class="form-field">
            <label for="message"><?php esc_html_e( 'Message', 'notewood' ); ?></label>
            <textarea id="message" required></textarea>
        </div>
        
        <button type="submit" class="submit-btn"><?php esc_html_e( 'SUBMIT', 'notewood' ); ?></button>
    </form>
</div>
<!-- /wp:html --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

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