<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Punarapi India</title>
    <link rel="icon" href="/resource/media/general/Logo_hero_icon.png" type="image/png" sizes="36x36">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/punarapi.css">
    <link rel="stylesheet" href="/css/navbar.css">

    <link rel="stylesheet" href="/css/blog.css">

    <link rel="stylesheet" href="/css/contact.css">

    <link rel="stylesheet" href="/css/quality.css">
    <link rel="stylesheet" href="/css/review.css">


    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

    <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

</head>

<body>
    <%- include('partials/_navbar.ejs'); %>
    <section class="main">
            <section class="middle">
                <section class="carousel">
                    <section class="carousel1">
                        <button class="carousel-button prev-button">&#10094;</button>
                        <div class="carousel-slide" );"></div>
                        <button class="carousel-button next-button">&#10095;</button>
                    </section>
                    <div class="request_cont">
                        <!-- <img class="caroselMainLogo" src="\resource\media\general\footer_logo.png" alt="Punarapi Logo"> -->
                        <p class="caroselIntro">New Life For Plastic And You.</p>
                        <p class="caroselIntro2">Unleash Aesthetic Excellence with Superior Tiles.</p>
                        <div class="rqButton"><a href="#request-sample" class="rqButtonContent">Request Sample <img class="rqButtonContentImg" src="\resource\media\justIcons\requestRight.png" alt=""></a></div>
                    </div>
                </section>


                <section class="product" id="product">
                    <div class="product-heading">
                        <h1>Roofing Collections</h1>
                        <p>Punarapi roof tiles: the eco-smart choice. Outlasting, eco-conscious, and stunningly elegant,
                            they surpass asphalt, concrete, and traditional tiles. Roofing reimagined for a greener
                            future,
                            offering both durability and a statement of sustainability for your home or project.</p>
                    </div>
                    <ul class="product-list">
                        <li class="product-item">
                            <a href="/products?tile=mangalore" class="product-item-wrapper">
                                <div class="tile-le" style="background-image: url('/resource/media/general/tile1.jpg')">
                                    <h2 class="tile-name">Mangalore<br>Tile</h2>
                                </div>
                                <div class="tile-r">
                                    <div class="tile-r-wrapper">
                                        <p class="tile-r-content">Authentic Mangalore tile aesthetics meet modern
                                            composite innovation, offering timeless appeal with enhanced durability and
                                            cost-effectiveness.</p>
                                        <span class="view-button"><p>View More</p><img src="\resource\media\justIcons\requestRight.png" alt="Arrow"></span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="product-item">
                            <a href="/products?tile=roman" class="product-item-wrapper">
                                <div class="tile-le" style="background-image: url('/resource/media/general/tile2.jpg')">
                                    <h2 class="tile-name">Roman<br>Tile</h2>
                                </div>
                                <div class="tile-r">
                                    <div class="tile-r-wrapper">
                                        <p class="tile-r-content">A fusion of Roman architectural elegance and
                                            contemporary durability, our Composite Roman Tiles provide a classic look
                                            that lasts.</p>
                                        <span class="view-button"><p>View More</p><img src="\resource\media\justIcons\requestRight.png" alt="Arrow"></span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="product-item">
                            <a href="/products?tile=ridge" class="product-item-wrapper">
                                <div class="tile-le" style="background-image: url('/resource/media/general/tile3.jpg')">
                                    <h2 class="tile-name">Ridge<br>Tile</h2>
                                </div>
                                <div class="tile-r">
                                    <div class="tile-r-wrapper">
                                        <p class="tile-r-content">Seamlessly blend form and function in your roofing
                                            system with our Ridge Tiles, designed for composite roofs to endure and
                                            enhance.</p>
                                        <span class="view-button"><p>View More</p><img src="\resource\media\justIcons\requestRight.png" alt="Arrow"></span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </section>



                <section class="quality" id="quality">
                    <div class="qualityHeading">
                        <h1>Why Choose Punarapi ?</h1>
                    </div>
                    <div class="choosePoints">
                        <button class="qualityLeft" id="qualityLeft"><img
                                src="\resource\media\justIcons\qualityLeft.png" alt="left"></button>
                        <ul class="choosePointsItems">
                            <li ><button class="chooseItem hover-underline-animation-quality" id="chooseItem0">Sustainability</button></li>
                            <li ><button class="chooseItem hover-underline-animation-quality" id="chooseItem1">Color Detail</button></li>
                            <li ><button class="chooseItem hover-underline-animation-quality" id="chooseItem2">Durability</button></li>
                            <li ><button class="chooseItem hover-underline-animation-quality" id="chooseItem3">Eco Impact</button></li>
                        </ul>
                        <button class="qualityRight" id="qualityRight"><img
                                src="\resource\media\justIcons\qualityRight.png" alt="Right"></button>
                    </div>
                    <div class="pointsDisplay">
                        <ul class="pointsListContent">

                            <!-- Point 1 -->
                            <li class="pointsContent" id="pointsContent1">
                                <div class="pointsPara" id="pointsPara1">
                                    <span class="pointSentence" id="pointSentence1"></span>
                                </div>
                                <div class="pointsImages" id="pointsImages1">
                                    <img src="\resource\media\choiceItems\choiceItem1.jpg" alt="">
                                </div>
                            </li>

                            <!-- Point 2 -->
                            <li class="pointsContent" id="pointsContent2">
                                <div class="pointsPara" id="pointsPara2">
                                    <span class="pointSentence" id="pointSentence2"></span>
                                </div>
                                <div class="pointsImages" id="pointsImages2">
                                    <img src="\resource\media\choiceItems\choiceItem2.jpg" alt="">
                                </div>
                            </li>

                            <!-- Point 3 -->
                            <li class="pointsContent" id="pointsContent3">
                                <div class="pointsPara" id="pointsPara3">
                                    <span class="pointSentence" id="pointSentence3"></span>
                                </div>
                                <div class="pointsImages" id="pointsImages3">
                                    <img src="\resource\media\choiceItems\choiceItem3.jpg" alt="">
                                </div>
                            </li>

                            <!-- Point 4 -->
                            <li class="pointsContent" id="pointsContent4">
                                <div class="pointsPara" id="pointsPara4">
                                    <span class="pointSentence" id="pointSentence4"></span>
                                </div>
                                <div class="pointsImages" id="pointsImages4">
                                    <img src="\resource\media\choiceItems\choiceItem4.jpg" alt="">
                                </div>
                            </li>
                        </ul>

                    </div>
                </section>
            </section>


                <section class="review-section" id="review-section">
                    <h1 class="ourCustomers">Our Customers</h1>
                    <!-- Swiper -->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>A Poetic Revolution in Sustainability</h2>
                                    <div class="author-details">
                                        <h3>By Subramania Bharati</h3>
            
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles are a revolution in sustainability, akin to the power of words.
                                        They
                                        breathe life into discarded plastic, and I applaud their commitment to a greener
                                        India.</p>
                                </div>
                                <div class="review-img"><img src="\resource\media\product page\gal\mang_gal (1).jpg" alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>Symbol of Self-Reliance</h2>
                                    <div class="author-details">
                                        <h3>By V.O. Chidambaram Pillai</h3>

                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles represent self-reliance and economic independence, similar to
                                        the
                                        Swadeshi movement. They embody the spirit of turning adversity into opportunity.
                                    </p>
                                </div>
                                <div class="review-img"><img src="\resource\media\product page\gal\mang_gal (2).jpg" alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>Empowering the Marginalized</h2>
                                    <div class="author-details">
                                        <h3>By U. Muthuramalingam Thevar</h3>
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles empower the marginalized, offering economic opportunities and
                                        environmental conservation. I wholeheartedly support their mission.</p>
                                </div>
                                <div class="review-img"><img src="\resource\media\product page\gal\mang_gal (3).jpg" alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>Justice for a Greener Tomorrow</h2>
                                    <div class="author-details">
                                        <h3>By S. V. Subramania Iyer</h3>
            
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles symbolize justice for our environment, taking discarded plastic
                                        and
                                        transforming it into a shield against the elements.</p>
                                </div>
                                <div class="review-img"><img src="resource\media\product page\gal\mang_gal (4).jpg"
                                        alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>A Step Towards a Cleaner Tomorrow</h2>
                                    <div class="author-details">
                                        <h3>By Kuyil Pattu S. Subramaniam</h3>
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles represent a step towards a cleaner and greener future, embodying
                                        the
                                        values of self-sufficiency and hope. Subramaniam would have been proud.</p>
                                </div>
                                <div class="review-img"><img src="resource\media\product page\gal\rid_gal (1).jpg"
                                        alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">
                                <div class="review-begin">
                                    <h2>A Step Towards a Cleaner Tomorrow</h2>
                                    <div class="author-details">
                                        <h3>By Kuyil Pattu S. Subramaniam</h3>
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles represent a step towards a cleaner and greener future, embodying
                                        the
                                        values of self-sufficiency and hope. Subramaniam would have been proud.</p>
                                </div>
                                <div class="review-img"><img src="\resource\media\product page\gal\rid_gal (3).jpg"
                                        alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                            <div class="swiper-slide">

                                <div class="review-begin">
                                    <h2>A Step Towards a Cleaner Tomorrow</h2>
                                    <div class="author-details">
                                        <h3>By Kuyil Pattu S. Subramaniam</h3>
                                        <p>17/10/2023</p>
                                    </div>
                                </div>
                                <div class="para-review">
                                    <p>Punarapi's tiles represent a step towards a cleaner and greener future, embodying
                                        the
                                        values of self-sufficiency and hope. Subramaniam would have been proud.</p>
                                </div>
                                <div class="review-img"><img src="\resource\media\product page\gal\roman_gal (2).jpg"
                                        alt="Loading"></div>
                                <div class="review-overlay"></div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </section>

            

            <section class="blog-section" id="blog-section">
                <h1 class="blog-title">Our Blogs</h1>
                <!-- <p class="blog-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. In aliquam quis quos
                    aut. Iure officiis soluta voluptatem ullam amet blanditiis aperiam quaerat? Illo maxime nam earum
                    cum molestiae consequuntur distinctio!</p> -->
                <div class="videos-container">
                    <a href="https://www.youtube.com/watch?v=ynvOBQ_DrO4" class="video-link"
                        data-video-id="ynvOBQ_DrO4">
                        <iframe class="video" src="https://www.youtube.com/embed/ynvOBQ_DrO4"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            frameborder="0" allowfullscreen></iframe>
                    </a>
                    <a href="https://www.youtube.com/watch?v=pxdU2Po6Hpg" class="video-link"
                        data-video-id="pxdU2Po6Hpg">
                        <iframe class="video" src="https://www.youtube.com/embed/pxdU2Po6Hpg"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            frameborder="0" allowfullscreen></iframe>
                    </a>
                </div>
            </section>


            <section class="contact-request-section" id="request-sample">
                <div class="contact-request-title-wrapper">
                    <h1 class="contact-request-title">
                        Request Sample
                    </h1>
                    <p class="contact-request-subtitle">
                        Discover exceptional roofing products to elevate your home design! From cutting-edge roofing tiles to unique solutions, we have what you need to make a difference!
                    </p>
                </div>

                <form action="/request_sample" method="POST" class="contact-form-wrapper" id="request-form">

                    <h2 class="form-section-title">Tell Us About You</h2>
                    <div class="form-section">
                        <div class="form-item">
                            <label for="firstname">First Name <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="firstname" id="firstname" required>
                        </div>
                        <div class="form-item">
                            <label for="lastname">Last Name</label>
                            <input type="text" class="form-input" name="lastname" id="lastname">
                        </div>
                        <div class="form-item">
                            <label for="email">Email <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="email" id="email" required>
                        </div>
                        <div class="form-item">
                            <label for="phno">Phone Number <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="phno" id="phno" required>
                        </div>
                        <div class="form-item form-item-long">
                            <label for="position">I am a <span class="req-sign">*</span></label>
                            <select class="form-input" id="position" name="position" required>
                                <option value="" disabled selected>Select an Option</option>
                                <option value="Homeowner">Homeowner</option>
                                <option value="Contractor">Contractor</option>
                                <option value="Builder">Builder</option>
                                <option value="Distributer">Distributer</option>
                                <option value="Architect">Architect</option>
                                <option value="Designer">Designer</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>


                    <h2 class="form-section-title">Tell us about your Project</h2>
                    <div class="form-section">
                        <div class="form-item form-item-long">
                            <label for="sample">Product Sample You Are Interested In <span
                                    class="req-sign">*</span></label>
                            <select class="form-input" id="sample" name="sample" required>
                                <option value="" disabled selected>Select an Option</option>
                                <option value="Mangalore">Mangalore Tiles</option>
                                <option value="Roman">Roman Tiles</option>
                                <option value=">Ridge">Ridge Tiles</option>
                            </select>
                        </div>
                        <div class="form-item form-item-long">
                            <label for="colors">Tell us what colors you would like to receive or specify multiple styles
                                and colors you need below. If you need many colors a representative will reach out to
                                you to help you narrow your selection<span class="req-sign">*</span></label>
                            <textarea class="form-input textarea-input" name="colors" id="colors" required></textarea>
                        </div>
                    </div>

                    <h2 class="form-section-title">Where should we send your samples?</h2>
                    <div class="form-section">
                        <div class="form-item form-item-long">
                            <label for="address">Address <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="address" id="address" required>
                        </div>
                        <div class="form-item">
                            <label for="city">City <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="city" id="city" required>
                        </div>
                        <div class="form-item">
                            <label for="phno">State / International <span class="req-sign">*</span></label>
                            <select class="form-input" name="state" id="state" required>
                                <option value="" disabled selected>Select a State / International</option>
                                <option value="International">International</option>
                                <option value="Andhra Pradesh">Andhra Pradesh</option>
                                <option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
                                <option value="Arunachal Pradesh">Arunachal Pradesh</option>
                                <option value="Assam">Assam</option>
                                <option value="Bihar">Bihar</option>
                                <option value="Chandigarh">Chandigarh</option>
                                <option value="Chhattisgarh">Chhattisgarh</option>
                                <option value="Dadar and Nagar Haveli">Dadar and Nagar Haveli</option>
                                <option value="Daman and Diu">Daman and Diu</option>
                                <option value="Delhi">Delhi</option>
                                <option value="Lakshadweep">Lakshadweep</option>
                                <option value="Puducherry">Puducherry</option>
                                <option value="Goa">Goa</option>
                                <option value="Gujarat">Gujarat</option>
                                <option value="Haryana">Haryana</option>
                                <option value="Himachal Pradesh">Himachal Pradesh</option>
                                <option value="Jammu and Kashmir">Jammu and Kashmir</option>
                                <option value="Jharkhand">Jharkhand</option>
                                <option value="Karnataka">Karnataka</option>
                                <option value="Kerala">Kerala</option>
                                <option value="Madhya Pradesh">Madhya Pradesh</option>
                                <option value="Maharashtra">Maharashtra</option>
                                <option value="Manipur">Manipur</option>
                                <option value="Meghalaya">Meghalaya</option>
                                <option value="Mizoram">Mizoram</option>
                                <option value="Nagaland">Nagaland</option>
                                <option value="Odisha">Odisha</option>
                                <option value="Punjab">Punjab</option>
                                <option value="Rajasthan">Rajasthan</option>
                                <option value="Sikkim">Sikkim</option>
                                <option value="Tamil Nadu">Tamil Nadu</option>
                                <option value="Telangana">Telangana</option>
                                <option value="Tripura">Tripura</option>
                                <option value="Uttar Pradesh">Uttar Pradesh</option>
                                <option value="Uttarakhand">Uttarakhand</option>
                                <option value="West Bengal">West Bengal</option>
                            </select>
                        </div>
                        <div class="form-item">
                            <label for="zip">ZIP / Postal Code <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="zip" id="zip" required>
                        </div>
                        <div class="form-item">
                            <label for="country">Country <span class="req-sign">*</span></label>
                            <input type="text" class="form-input" name="country" id="country" required>
                        </div>
                    </div>


                    <button type="submit" class="submit-button" id="submit-request">Submit</button>
                </form>
            </section>


            <%- include('partials/_footer.ejs'); %>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="/js/punarapi.js" async defer></script>
    <script src="/js/navbar.js" async defer></script>


    <script src="/js/blog.js" charset="utf-8"></script>

    <script src="/js/request.js" charset="utf-8"></script>

    <script src="/js/quality.js" charset="utf-8"></script>
    <script src="/js/review.js" charset="utf-8"></script>



</body>

</html>