{% extends 'base.html' %}

{% block title %}Oaken Cloud Technologies{% endblock %}

{% block head %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .form-control, .form-select {
            margin-bottom: 10px;
        }
        .form-container {
            display: flex;
        }
        .form-section, .results-section {
            flex: 1;
            padding: 20px;
        }
        .slider-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .slider-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .results-section h2 {
            text-align: center;
        }
        .results-table {
            width: 100%;
            margin-top: 20px;
        }
        .results-table th, .results-table td {
            text-align: right;
            padding: 5px;
        }
        .results-table .label {
            text-align: left;
        }
        .results-table .value-positive {
            color: green;
            font-weight: bold;
        }
        .results-table .value-negative {
            color: red;
            font-weight: bold;
        }
    </style>
	<script>
	    let chart;
	
	    function formatNumber(value) {
	        return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	    }
	
	    function calculateROI(updateTaskFrequency = false) {
	        var formData = {
	            service_type: $('#service-type').val(),
	            hourly_rate: $('#hourly-rate').val().replace('$', '').replace(',', ''),
	            initial_investment: $('#initial-investment').val().replace('$', '').replace(',', ''),
	            estimated_hours: $('#estimated-hours').val(),
	            task_frequency: $('#task-frequency').val(),
	            time_frame: $('#time-frame').val()
	        };
	
	        $.ajax({
	            type: 'POST',
	            url: '/calculate',
	            data: JSON.stringify(formData),
	            contentType: 'application/json',
	            success: function(response) {
	                if (updateTaskFrequency) {
	                    setTaskFrequencyToBreakEven(response.break_even_months);
	                } else {
	                    updateResults(response);
	                    updateChart(response);
	                }
	            }
	        });
	    }
	
	    function updateResults(response) {
	        $('#roi-percentage').text(Math.round(response.roi_percentage) + '%');
	        $('#savings').text('$' + formatNumber(response.savings.toFixed(2)));
	        $('#break-even-months').text(response.break_even_months.toFixed(2) + ' months');
	
	        $('#roi-percentage, #savings, #break-even-months').each(function() {
	            var value = parseFloat($(this).text().replace(/[^0-9.-]+/g,""));
	            if (value > 0) {
	                $(this).addClass('value-positive').removeClass('value-negative');
	            } else {
	                $(this).addClass('value-negative').removeClass('value-positive');
	            }
	        });
	    }
	
	    function updateChart(response) {
	        const ctx = $('#roi-chart')[0].getContext('2d');
	        const labels = Array.from({length: 25}, (_, i) => i + 1);
	        const data = labels.map(i => (i / 12) * response.savings);
	
	        if (chart) {
	            chart.data.datasets[0].data = data;
	            chart.update();
	        } else {
	            chart = new Chart(ctx, {
	                type: 'line',
	                data: {
	                    labels: labels,
	                    datasets: [{
	                        label: 'ROI Over Time',
	                        data: data,
	                        borderColor: 'rgba(75, 192, 192, 1)',
	                        borderWidth: 2,
	                        fill: false
	                    }]
	                },
	                options: {
	                    scales: {
	                        x: {
	                            title: {
	                                display: true,
	                                text: 'Months'
	                            }
	                        },
	                        y: {
	                            title: {
	                                display: true,
	                                text: 'ROI ($)'
	                            }
	                        }
	                    }
	                }
	            });
	        }
	    }
	
	    function setTaskFrequencyToBreakEven(breakEvenMonths) {
	        $('#task-frequency').val(Math.round(breakEvenMonths+1));
	        $('#task-frequency-value').text(Math.round(breakEvenMonths+1));
	        // Call calculateROI again after setting task frequency to update the chart and results
	        calculateROI();
	    }
	
	    $(document).ready(function() {
	        $('#service-type').change(function() {
	            var serviceType = $(this).val();
	            var hourlyRate;
	            if (serviceType === 'Accounting') {
	                hourlyRate = '$40';
	            } else if (serviceType === 'Engineering') {
	                hourlyRate = '$60';
	            } else if (serviceType === 'Drafting') {
	                hourlyRate = '$50';
	            }
	            $('#hourly-rate').val(hourlyRate);
	            calculateROI(true);
	        });
	
	        $('#task-frequency').on('input', function() {
	            $('#task-frequency-value').text($(this).val());
	            calculateROI();
	        });
	
	        $('#hourly-rate, #initial-investment').on('input', function() {
	            let value = $(this).val();
	            if (value.charAt(0) !== '$') {
	                value = '$' + value;
	            }
	            $(this).val(value);
	            calculateROI(true);
	        });
	
	        $('#estimated-hours').on('input', function() {
	            calculateROI(true);
	        });
	
	        $('#roi-form input, #roi-form select').on('input change', function() {
	            if (!['hourly_rate', 'initial_investment', 'estimated_hours'].includes($(this).attr('id'))) {
	                calculateROI();
	            }
        	});

	        $('#service-type').change(); // Initialize the hourly rate on page load
	        $('#task-frequency').trigger('input'); // Initialize the task frequency display on page load
	    });
	</script>

{% endblock %}

{% block hero %}
    <!-- Hero Header Start -->
    <div class="hero-header overflow-hidden px-5">
        <div class="rotate-img">
            <img src="{{ url_for('static', filename='img/sty-1.png') }}" class="img-fluid w-100" alt="">
            <div class="rotate-sty-2"></div>
        </div>
        <div class="row gy-5 align-items-center">
            <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                <h1 class="display-4 text-dark mb-4 wow fadeInUp" data-wow-delay="0.3s">Automation Maximization</h1>
                <p class="fs-4 mb-4 wow fadeInUp" data-wow-delay="0.5s">Are you ready to grow your business? Upgrade your processes. Upgrade your technology. Let's grow together!
                    Increase your efficiency, lower costs, and increase quality. Book a Call today!</p>
                <a href="/contact" class="btn btn-primary rounded-pill py-3 px-5 wow fadeInUp" data-wow-delay="0.7s">Get Started</a>
            </div>
            <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.2s">
                <img src="{{ url_for('static', filename='img/hero-img-1.png') }}" class="img-fluid w-100 h-100" alt="">
            </div>
        </div>
    </div>
    <!-- Hero Header End -->
{% endblock %}
{% block content %}
<!-- About Start -->
		<a id="about_start"></a>
        <div class="container-fluid bg-light overflow-hidden py-5"  style="margin-top: 6rem;">
            <div class="container py-5">
                <div class="row g-5">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                        <div class="RotateMoveLeft">
                            <img src="{{ url_for('static', filename='img/about-1.png') }}" class="img-fluid w-100" alt="">
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                        <h4 class="mb-1 text-primary">About Us</h4>
                        <h1 class="display-5 mb-4">Efficiency Architects</h1>
                        <p class="mb-4">At Oaken Cloud Technologies, we turn your process pains into gains. Don't be shy, give us a try –
                            book your call today and let's crank up your business efficiency together.
                        </p>
                        <p class="mb-4">Oaken Cloud Technologies brings together years of experience from the forefront of corporate America,
                            innovative startups, and dynamic mid-sized companies. We specialize in refining processes,
                            helping you cut through the clutter and focus on growth. With our automation solutions,
                            we ensure that your business operates smoothly and efficiently.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- About End -->


        <!-- Service Start -->
		<a id="services_start"></a>
        <div class="container-fluid service py-5">
            <div class="container py-5">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 900px;">
                    <h4 class="mb-1 text-primary">Our Service</h4>
                    <h1 class="display-5 mb-4">What We Can Do For You</h1>
                    <p class="mb-0">Still navigating a sea of spreadsheets? Step up to smarter tools with Oaken Cloud Technologies, your
                        impartial guide to finding the right solution. We’ll make sure you have exactly what you need.
                    </p>
                </div>
                <div class="row g-4 justify-content-center">
                    <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.1s">
                        <div class="service-item text-center rounded p-4">
                            <div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fas fa-file-invoice fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">Document Generation</h4>
                                <p class="mb-4">Do you spend hours filling out documents or applications? There is a
                                    better way! We can help cut out manual entry and free up your time to spend on growing your business.
                                </p>
<!--                                <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="service-item text-center rounded p-4">
                            <div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fas fa-handshake fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">Data Synchronization</h4>
                                <p class="mb-4">Is your data spread across multiple applications like CRM, Accounting, Project
                                    Management, etc? Pull it together have your data sources communicate! Eliminate multiple data entry points and reduce errors!
                                </p>
<!--                                <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.5s">
                        <div class="service-item text-center rounded p-4">
                            <div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fa fa-chart-line fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">Comprehensive Reporting</h4>
                                <p class="mb-4">Know your business. We can help generate daily, weekly, or monthly reports
                                    and dashboards that are valuable to <strong>you!</strong>
                                </p>
<!--                                <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-4 wow fadeInUp" data-wow-delay="0.1s">
                        <div class="service-item text-center rounded p-4">
                            <div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fas fa-money-bill-wave fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">Accounting Automations</h4>
                                <p class="mb-4">Generate invoices, purchase orders, send and receive signed contracts, and make payments automatically. Save time and have <strong>more</strong> money to count!
                                </p>
<!--                                <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a>-->
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.3s">
                        <div class="service-item text-center rounded p-4">
							<div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fas fa-globe-americas fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">GIS Visualization </h4>
                                <p class="mb-4">Are you a GIS power user? Do you have lots of GIS files from different sources and in different formats? We can build an interactive web based GIS viewer to keep you in the know.
                                </p>
<!--                                 <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a> -->
                            </div>
                       </div>
                   </div>
                    <div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.5s">
                        <div class="service-item text-center rounded p-4">
                            <div class="service-icon d-inline-block bg-light rounded p-4 mb-4"><i class="fa fa-drafting-compass fa-5x text-secondary"></i></div>
                            <div class="service-content">
                                <h4 class="mb-4">CAD Automations</h4>
                                <p class="mb-4">Save your drafters time and eliminate errors with AutoCAD automations. We will develop and implement LISP routines, scripts, and API links to your database to turn your data into drawings. Get your permits faster and save money!
                                </p>
<!--                                 <a href="#" class="btn btn-light rounded-pill text-primary py-2 px-4">Read More</a> -->
                            </div>
                       </div>
                   </div>
                </div>
            </div>
        </div>
        <!-- Service End -->


        <!-- Feature Start -->
        <a id="feature_start"></a>
        <div class="container-fluid feature bg-light overflow-hidden py-5">
            <div class="container py-5">
                <div class="row g-5 pt-5" style="margin-top: 6rem;">
                    <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                        <div class="feature-img RotateMoveLeft h-100" style="object-fit: cover;">
                            <img src="{{ url_for('static', filename='img/features-1.png') }}" class="img-fluid w-100 h-100" alt="">
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.1s">
                        <h1 class="display-5 mb-4">Delivering Results, Maximizing Satisfaction</h1>
                        <p class="mb-4">Our track record of successful projects and efficiently generated documents
                            speaks volumes. We've streamlined operations for numerous clients, significantly cutting
                            down on time spent on routine tasks and freeing up resources for more strategic endeavors.
                        </p>
                        <div class="row g-4">
                            <div class="col-6">
                                <div class="d-flex">
                                    <i class="fas fa-newspaper fa-4x text-secondary"></i>
                                    <div class="d-flex flex-column ms-3">
                                        <h2 class="mb-0 fw-bold">285</h2>
                                        <small class="text-dark">Projects Completed</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex">
                                    <i class="fas fa-users fa-4x text-secondary"></i>
                                    <div class="d-flex flex-column ms-3">
                                        <h2 class="mb-0 fw-bold">15526</h2>
                                        <small class="text-dark">Documents Generated</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="my-4">
                            <a href="/contact" class="btn btn-primary rounded-pill py-3 px-5">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Feature End -->


        <!-- FAQ Start -->
		<a id="faq_start"></a>
        <div class="container-fluid FAQ overflow-hidden py-5">
            <div class="container py-5">
                <div class="row g-5 align-items-center">
                    <div class="col-lg-6 wow fadeInLeft" data-wow-delay="0.1s">
                       <div class="accordion" id="accordionExample">
                            <div class="accordion-item border-0 mb-4">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button rounded-top" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseTOne">
                                        Why do I need to automate?
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                                     data-bs-parent="#accordionExample">
                                    <div class="accordion-body my-2">
                                        <h5>Automation is essential for enhancing efficiency, reducing errors, and freeing up your team to focus on more strategic tasks.</h5>
                                        <p>By automating routine and repetitive tasks, Oaken Cloud Technologies helps you streamline your
                                            operations, which can lead to significant cost savings and improved productivity.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item border-0 mb-2">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed rounded-top" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        How does automation help me save money?
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                    <div class="accordion-body my-2">
                                        <h5>Automation reduces the need for manual input, which not only cuts down on labor costs but also minimizes the likelihood of costly errors.</h5>
                                        <p>With more efficient processes, you'll see quicker turnaround times and higher quality outputs, leading to increased customer satisfaction and potentially higher revenues.</p>

                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item border-0 mb-2">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed rounded-top" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        What processes can Oaken Cloud Technologies automate for my business?
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                    <div class="accordion-body my-2">
                                        <h5>We specialize in automating a wide range of business processes, including
                                            document generation, data entry, invoicing, and customer relationship management.</h5>
                                        <p>Our solutions are tailored to meet the unique needs of your business, ensuring
                                            that you get the most out of your automation investment.</p>
                                    </div>
                                </div>
                            </div>
                           <div class="accordion-item border-0 mb-2">
                               <h2 class="accordion-header" id="headingFour">
                                   <button class="accordion-button collapsed rounded-top" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
                                       How long does it take to implement automation solutions?
                                   </button>
                               </h2>
                               <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                   <div class="accordion-body my-2">
                                       <h5>The timeframe for implementing automation solutions varies depending on the complexity and scale of the project.</h5>
                                       <p>However, Oaken Cloud Technologies is committed to ensuring a smooth and swift integration,
                                           usually within a few weeks, allowing you to start seeing the benefits as soon as possible.</p>
                                   </div>
                               </div>
                           </div>
                           <div class="accordion-item border-0 mb-2">
                               <h2 class="accordion-header" id="headingFive">
                                   <button class="accordion-button collapsed rounded-top" type="button" data-bs-toggle="collapse"
                                           data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                       Can automation integrate with my existing systems?
                                   </button>
                               </h2>
                               <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                   <div class="accordion-body my-2">
                                       <h5>Yes, our automation solutions are designed to seamlessly integrate with your
                                           existing business systems and software. </h5>
                                       <p>This ensures a unified workflow and minimizes disruption to your current operations.</p>
                                   </div>
                               </div>
                           </div>
                           <div class="accordion-item border-0 mb-2">
                               <h2 class="accordion-header" id="headingSix">
                                   <button class="accordion-button collapsed rounded-top" type="button" data-bs-toggle="collapse"
                                           data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                       Is my data safe with automation?
                                   </button>
                               </h2>
                               <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
                                   <div class="accordion-body my-2">
                                       <h5>Absolutely. At Oaken Cloud Technologies, we prioritize the security of your data.</h5>
                                       <p>Our automation tools adhere to stringent security protocols, ensuring that
                                           your information remains confidential and protected against unauthorized access.</p>
                                   </div>
                               </div>
                           </div>
                       </div>
                    </div>
                    <div class="col-lg-6 wow fadeInRight" data-wow-delay="0.3s">
                        <div class="FAQ-img RotateMoveRight rounded">
                            <img src="{{ url_for('static', filename='img/about-1.png') }}" class="img-fluid w-100" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- FAQ End -->


        <!-- ROI Calculator Start -->
<a id="roi_calc"></a>
<div class="container-fluid feature bg-light overflow-hidden py-5">
    <div class="container py-5">
        <h1 class="display-5 mb-4">ROI Investment Calculator</h1>
        <p class="mb-2">How much could your business save? Is automation worth it?</p>
        <p class="mb-2">Find out now! Use our ROI Calculator to plug in your numbers for a task you're considering automating. Determine your break-even point and see how much you could save yearly.</p>
        <p class="mb-2">Steps to use:</p>
	<ul>
	    <li>Select your Automation type: Accounting, Engineering, or Drafting.</li>
	    <li>Input your hourly rate, initial investment, and estimated hours per task.</li>
	    <li>Adjust the task frequency slider to the number of times the task needs to be completed per Month or per Year to see real-time results. You can enter this number as tasks per month or tasks per year by changing the Time Frame drop down</li>
	    <li>Review your first-year ROI percentage, savings, and break-even point.</li>
	</ul>
        <p class="mb-2">Discover the potential savings and make informed decisions about automating your business tasks!</p>
        <div class="row g-5 align-items-center mb-2">
        <div class="col-lg-4 form-container wow fadeInUp">
            <div class="form-section">
                <form id="roi-form">
                    <label for="service-type">Automation Type:</label>
                    <select id="service-type" name="service_type" class="form-select">
                        <option value="Accounting">Accounting</option>
                        <option value="Engineering">Engineering</option>
                        <option value="Drafting">CAD Drafting</option>
                    </select>

                    <label for="hourly-rate">Hourly Rate:</label>
                    <input type="text" id="hourly-rate" name="hourly_rate" class="form-control" value="$40">

                    <label for="initial-investment">Initial Investment:</label>
                    <input type="text" id="initial-investment" name="initial_investment" class="form-control">

                    <label for="estimated-hours">Estimated Hours per Task:</label>
                    <input type="number" id="estimated-hours" name="estimated_hours" class="form-control">

                    <div class="slider-container">
                        <label for="task-frequency">Task Frequency:</label>
                        <div id="task-frequency-value">1</div>
                        <input type="range" id="task-frequency" name="task_frequency" min="1" max="1000" class="form-range" value="1">
                        <div class="slider-labels">
                            <span>1</span>
                            <span>1,000</span>
                        </div>
                    </div>

                    <label for="time-frame">Time Frame:</label>
                    <select id="time-frame" name="time_frame" class="form-select">
                        <option value="monthly">Monthly</option>
                        <option value="yearly">Yearly</option>
                    </select>
                </form>
            </div>
            </div>
            <div class="col-lg-8 wow fadeInDown results-section mb-5">
                <h2>First Year Return on Investment</h2>
                <div>
                    <canvas id="roi-chart"></canvas>
                </div>
                <table class="results-table">
                    <tr>
                        <th class="label">ROI Percentage (First Year):</th>
                        <td id="roi-percentage" class="value"></td>
                    </tr>
                    <tr>
                        <th class="label">Savings (First Year):</th>
                        <td id="savings" class="value"></td>
                    </tr>
                    <tr>
                        <th class="label">Break-even Point (Months):</th>
                        <td id="break-even-months" class="value"></td>
                    </tr>
                </table>
            </div>
        </div>
        </div>
    </div>
</div>


<!-- ROI Calculator End -->


<!-- Blog Start -->
         <div class="container-fluid blog py-5">
            <div class="container py-5">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 900px;">
                     <h1 class="display-5 mb-4">Automation Station</h1>
                    <p class="mb-0">Welcome to Automation Station, your go-to destination for all things automation. Dive into the latest innovations, explore practical tips for streamlining your business processes, and discover how automation can transform your workflow and boost efficiency.
                    </p>
                </div>
                <div class="row g-4 justify-content-center">
                    {% if posts %}
                        {% for post in posts %}
                            <div class="col-md-6 col-lg-4 col-xl-3 wow fadeInUp" data-wow-delay="0.1s">

                            <div class="blog-item">
                                <div class="blog-img">
                                    <img src="img/blog-1.png" class="img-fluid w-100" alt="">
                                    <div class="blog-info">
                                        <span><i class="fa fa-clock"></i> {{ post.date }}</span>
                                        <div class="d-flex">
                                            <span class="me-3"> 3 <i class="fa fa-heart"></i></span>
                                            <a href="{{ post.url }}" class="text-white">0 <i class="fa fa-comment"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="blog-content text-dark border p-4 ">
							        <h5 class="mb-4">{{ post.title.rendered | striptags}}</h5>
							        <p class="mb-4">{{ post.content.rendered[:100] | striptags }}...</p>
                                                                
							        <a class="btn btn-light rounded-pill py-2 px-4" href="{{ url_for('blog_post', post_id=post.id) }}">Read More</a>
						        </div>
                            </div>
                        </div>
                    	{% endfor %}
                    {% else %}
                        <p>No posts available.</p>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Blog End -->


        <!-- Testimonial Start -->
        <!--<div class="container-fluid testimonial py-5">
            <div class="container py-5">
                <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 900px;">
                    <h4 class="text-primary">Testimonial</h4>
                    <h1 class="display-5 mb-4">What Our Client Say About Us</h1>
                    <p class="mb-0">Dolor sit amet consectetur, adipisicing elit. Ipsam, beatae maxime. Vel animi eveniet doloremque reiciendis soluta iste provident non rerum illum perferendis earum est architecto dolores vitae quia vero quod incidunt culpa corporis, porro doloribus. Voluptates nemo doloremque cum.
                    </p>
                </div>
                <div class="testimonial-carousel owl-carousel wow zoomInDown" data-wow-delay="0.2s">
                    <div class="testimonial-item" data-dot="<img class='img-fluid' src='img/testimonial-img-1.jpg' alt=''>">
                        <div class="testimonial-inner text-center p-5">
                            <div class="d-flex align-items-center justify-content-center mb-4">
                                <div class="testimonial-inner-img border border-primary border-3 me-4" style="width: 100px; height: 100px; border-radius: 50%;">
                                    <img src="img/testimonial-img-1.jpg" class="img-fluid rounded-circle" alt="">
                                </div>
                                <div>
                                    <h5 class="mb-2">John Abraham</h5>
                                    <p class="mb-0">New York, USA</p>
                                </div>
                            </div>
                            <p class="fs-7">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores nemo facilis tempora esse explicabo sed! Dignissimos quia ullam pariatur blanditiis sed voluptatum. Totam aut quidem laudantium tempora. Minima, saepe earum!
                            </p>
                            <div class="text-center">
                                <div class="d-flex justify-content-center">
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-item" data-dot="<img class='img-fluid' src='img/testimonial-img-2.jpg' alt=''>">
                        <div class="testimonial-inner text-center p-5">
                            <div class="d-flex align-items-center justify-content-center mb-4">
                                <div class="testimonial-inner-img border border-primary border-3 me-4" style="width: 100px; height: 100px; border-radius: 50%;">
                                    <img src="{{ url_for('static', filename='img/testimonial-img-2.jpg') }}" class="img-fluid rounded-circle" alt="">
                                </div>
                                <div>
                                    <h5 class="mb-2">John Abraham</h5>
                                    <p class="mb-0">New York, USA</p>
                                </div>
                            </div>
                            <p class="fs-7">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores nemo facilis tempora esse explicabo sed! Dignissimos quia ullam pariatur blanditiis sed voluptatum. Totam aut quidem laudantium tempora. Minima, saepe earum!
                            </p>
                            <div class="text-center">
                                <div class="d-flex justify-content-center">
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-item" data-dot="<img class='img-fluid' src='img/testimonial-img-3.jpg' alt=''>">
                        <div class="testimonial-inner text-center p-5">
                            <div class="d-flex align-items-center justify-content-center mb-4">
                                <div class="testimonial-inner-img border border-primary border-3 me-4" style="width: 100px; height: 100px; border-radius: 50%;">
                                    <img src="img/testimonial-img-3.jpg" class="img-fluid rounded-circle" alt="">
                                </div>
                                <div>
                                    <h5 class="mb-2">John Abraham</h5>
                                    <p class="mb-0">New York, USA</p>
                                </div>
                            </div>
                            <p class="fs-7">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores nemo facilis tempora esse explicabo sed! Dignissimos quia ullam pariatur blanditiis sed voluptatum. Totam aut quidem laudantium tempora. Minima, saepe earum!
                            </p>
                            <div class="text-center">
                                <div class="d-flex justify-content-center">
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                    <i class="fas fa-star text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- Testimonial End -->
	{% endblock %}