/** VUE COMPONENT **/
 /** VUE COMPONENT **/


    var navbar = () => {
        return {
            $template: ` 
    <nav class="web">
        <div class="container columns">
            <div class="col-5 left gap-50">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#service">Services</a>
                <a href="#blog">Blog</a>
                <a href="#contact">Contact</a>
            </div>
            <div class="col-2 circle center">
                <div class="logo">
                    <img src="/assets/img/logo.png" alt="LLSM PTY LTD Logo" />
                </div>
            </div>
            <div class="col-5 right gap-20">
                <p>Call Us At</p>
                <a href="tel:0123211756" class="btn-link" >(+27) 12 321 1756</a>
            </div>
        </div>
    </nav>
     <nav class="mobile">
        <div class="container columns">
            <div class="col-1  ">
                <div class="logo">
                    <img src="/assets/img/logo.png" alt="LLSM PTY LTD Logo" style="width: 100%" />
                </div>
            </div>
            <div class="col-10 right gap-20">
                <a href="tel:0123211756" class="btn-link" >(+27) 12 321 1756</a>
                <a></a>
            </div>
        </div>
    </nav>
`
        }
    }



 /** VUE COMPONENT **/

    var route = "";

    var footer = (route) => {
        route = route;
        console.log(route);
        return {
            setPage(num) {
                this.type = num;
            },
            type: 1,
            $template: ` 
    <footer>
        <div class="container columns gap-40 gap-m-20">
            <div class="col-4 col-m-12">
                <img src="/assets/img/logo-alt.png" alt="LLSM PTY LTD's logo" />
                <p>LLSM PTY LTD is a privately owned agricultural company in South Africa, registered under the Companies and Intellectual Property Commission, primarily involved in the agricultural Industry with operations nationwide.</p>
                <h2>Office 104<br/>Metromitch 564<br/>Charlotte Maxeke Street<br/>Pretoria West, 0183</h2>
            </div>
            <div class="col-2"></div>
            <div class="col-6 col-m-12 form" >
                <div class="">
                    <h3>Free Consultion</h3>
                    <div class="form-group">
                        <label>Full Name</label>
                        <input placeholder="Your Full Name" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Email Address</label>
                        <input placeholder="Your Email Address" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label>Additional Message</label>
                        <textarea placeholder="Your Full Name" class="form-control" ></textarea>
                    </div>
                    <button class="btn">Submit Request</button>
                </div> 
            </div>
        </div>
    </footer>
`,
            count: 0,

            inc() {
                console.log(style);
                this.style = "color : red"

                this.count++
            }
        }
    }






    var route = "";

    var App = (route) => {
        route = route;
        console.log(route);
        return {
            setPage(num) {
                this.type = num;
            },
            type: 1,
            $template: ` 
    <div v-scope="navbar()"></div>
    <section class="hero " >
        <div class="container  center">
            <div class=" text gap-5">
                <p>Come Improving The With Agribusiness  Us</p>
                <h1>Agriculture and Bio-economy</h1>
                <p>maximize profit while sustainably satisfying the needs of consumers</p>
                <br/><br/>
                <a class="btn" href="#" >Get In Touch</a>
            </div>

        </div>
    </section>

    <section class="about " >
        <div class="container">
            <div class="columns gap-20">
                <div class="col-1"></div>
                <div class="col-6 col-m-12">
                    <img src="/assets/img/about.png" alt="" style="width: 100%;height: 461px;" />
                </div>
                <div class="col-4 col-m-12 left" >
                    <div>
                        <small>Our Story</small>
                        <h1>LLSM PTY LTD </h1>
                        <p>is a privately owned agricultural company in South Africa, registered under the Companies and Intellectual Property Commission, primarily involved in the agricultural Industry with operations nationwide.</p>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="what" >
        <div class="container">
            <div class="columns gap-20">
                <div class="col-6 col-m-12 left">
                    <div>
                        <small>Empowerment</small>
                        <h1>Growing Agribusiness</h1>
                        <p>We support about 200 households through job creation, small business partnership, training and other Corporate Social Investments such as career exhibitions, sponsorship and job placements for unemployed graduates.</p>
                    </div>
                </div>
                <div class="col-3 col-m-6">
                    <img src="/assets/img/what/1.png" alt="" style="width: 100%;object-fit: scale-down" />
                </div>
                <div class="col-3 col-m-6">
                    <img src="/assets/img/what/2.png" alt="" style="width: 100%;" />
                </div>
                <div class="col-3 col-m-6" >
                    <img src="/assets/img/what/3.png" alt="" style="width: 100%;" />
                </div>
                <div class="col-3 col-m-6" >
                    <img src="/assets/img/what/4.png" alt="" style="width: 100%;" />
                </div>
                <div class="col-3 col-m-6" >
                    <img src="/assets/img/what/5.png" alt="" style="width: 100%;" />
                </div>
                <div class="col-3 col-m-6" >
                    <img src="/assets/img/what/6.png" alt="" style="width: 100%;" />
                </div>
            </div>
        </div>
    </section>
    <section class="services" >
        <div class="container">
            <div class="columns gap-20">
                <div class="col-12 center text-center">
                    <div>
                        <small>WHAT WE DO</small>
                        <h1>Our Services</h1>
                    </div>
                </div>
                <div class="col-3 col-m-6 item">
                    <img src="/assets/img/services/1.png" alt="" style="width: 100%;object-fit: scale-down" />
                    <strong>Farming</strong>
                </div>
                <div class="col-3  col-m-6 item">
                    <img src="/assets/img/services/2.png" alt=""/>
                    <strong>Pest Control</strong>
                </div>
                <div class="col-3  col-m-6 item" >
                    <img src="/assets/img/services/3.png" alt=""/>
                    <strong>Cleaning & Hygiene</strong>
                </div>
                <div class="col-3  col-m-6 item" >
                    <img src="/assets/img/services/4.png" alt=""  />
                    <strong>Training & Development</strong>
                </div>
                <div class="col-3 col-m-6 item" >
                    <img src="/assets/img/services/5.png" alt=""  />
                    <strong>Silviculture and Construction</strong>
                </div>
            </div>
        </div>
    </section>
    <div v-scope="footer()"></div>
`,
            count: 0,

            inc() {
                console.log(style);
                this.style = "color : red"

                this.count++
            }
        }
    }