<file_sep>import React from 'react'
import { format } from 'date-fns'
import {
    BrowserRouter as Router,
    Link
} from "react-router-dom";

const MostViewBlogs = ({ blogs }) => {
    return (
        <section className="blog">
            <div className="container mx-auto">
                <div className="text-4xl font-bold p-16 pb-10 text-center">Our Most View <span className="text-blue-500">Blogs</span></div>
                <div className="grid grid-cols-3 gap-10 pb-24">
                    {blogs.map((blog, index) => (
                        <div className="blog-item bg-gray-200 rounded" key={index}>
                            <div className="overflow-hidden">
                                <img src={`../../images/${blog.image[0].name}`} className="blog-img transform hover:scale-110 transition duration-500" alt="" />
                            </div>
                            <div className="p-4">
                                <p className="blog-name text-xl font-semibold mb-2">{blog.name}</p>
                                <div className="my-2">
                                    <span className="text-blue-500"><i class="fas fa-user"></i> </span> Admin
                                    &nbsp;&nbsp;&nbsp;
                                    <span className="text-blue-500"><i class="fas fa-calendar-alt"></i> </span>{format(new Date(2020, 1, 11), 'yyyy-MM-dd')}
                                    &nbsp;&nbsp;&nbsp;
                                    <span className="text-blue-500"><i class="fas fa-tags"></i> </span> {blog.tag.name}
                                    &nbsp;&nbsp;&nbsp;
                                </div>
                                <p className="my-2">{blog.desc}</p>
                                <button className="text-base font-semibold text-blue-500"><Link to=""> Read more</Link></button>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}

export default MostViewBlogs
<file_sep>import React from 'react'

const Services = () => {
    return (
        <section className="services">
            this are services
        </section>
    )
}

export default Services
<file_sep>import React from 'react'
import Customers from '../Customers'
import Welcome from '../Welcome'
import Why from '../Why'

const About = () => {
    return (
        <section className="about">
            <Welcome/>
            <Why/>
            <Customers/>
        </section>
    )
}

export default About
<file_sep>import React from 'react'

const Customers = () => {
    return (
        <section className="customer">
            <div className="container mx-auto text-white">
                <div className="text-4xl font-bold p-16 pb-10 text-center">Our Happy <span className="text-blue-500">Customers</span></div>
                <div className="grid grid-cols-3">
                    <div className="text-center customer-item">
                        <img src="../../images/customer1.png" className="mx-auto" alt=""/>
                        <p className="text-blue-500 text-2xl font-bold my-3">Hilpton Broad</p>
                        <p className="mb-24 px-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                    <div className="text-center customer-item">
                        <img src="../../images/customer2.png" className="mx-auto" alt="" />
                        <p className="text-blue-500 text-2xl font-bold my-3"><NAME></p>
                        <p className="mb-24 px-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                    <div className="text-center customer-item">
                        <img src="../../images/customer3.png" className="mx-auto" alt="" />
                        <p className="text-blue-500 text-2xl font-bold my-3">Stive Philips</p>
                        <p className="mb-24 px-10">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of cla ssical Latin literature from 45 BC, making it over 2000 years old.</p>
                    </div>
                </div>
                
            </div>
        </section>
    )
}

export default Customers
<file_sep>import React from 'react'

import {
    BrowserRouter as Router,
    Link
} from "react-router-dom";

const Banner = () => {
    return (
        <section className="banner flex text-center text-white grid justify-items-center items-center">
            <div className="container mx-auto py-64">
                <div className="text-5xl font-bold">Effect Of Feng Shui</div>

                <div className="text-medium px-64">It focuses on how things in our physical world influence how we think and behave. Feng shui originated in China and is a belief system in which there is a spiritual relationship between the physical elements of nature and is a belief system in which there is a spiritual relationship</div>
                <div className="my-20">
                    <Link className="hover-btn bg-blue-500 text-white font-bold px-6 py-2 mx-2 rounded hover:no-underline" to="/services"><span> Our Services</span></Link>
                    <Link className="hover-btn bg-blue-500 text-white font-bold px-6 py-2 mx-2 rounded hover:no-underline" to="/contact"><span> Contact Us</span></Link>
                </div>
            </div>
        </section>
    )
}

export default Banner
<file_sep>import React from 'react'

const Staffs = () => {
    return (
        <section className="staff">
            <div className="container mx-auto">
                <div className="text-4xl font-bold p-16 pb-10 text-center">Our Professional <span className="text-blue-500">Staff</span></div>
                <div className="grid grid-cols-2 gap-8 mb-24">
                    <div className="staff-item grid grid-cols-2">
                        <img src="images/artist1.jpg" width="80%" alt="" />
                        <div className="bg-blue-500 pt-4 pl-4 pr-4 text-white -ml-16">
                            <p className="font-bold text-2xl"><NAME></p>
                            <p className="text-base mb-3">Chief Advisior</p>
                            <p className="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</p>
                            <div className="pt-2">
                                <i className="fab fa-facebook-f px-2"></i>
                                <i className="fab fa-twitter px-2"></i>
                                <i className="fab fa-google px-2"></i>
                                <i className="fab fa-linkedin-in px-2"></i>
                                </div>
                        </div>
                    </div>
                    <div className="staff-item grid grid-cols-2">
                        <img src="images/artist2.jpg" width="80%" alt="" />
                        <div className="bg-blue-500 pt-4 pl-4 pr-4 text-white -ml-16">
                            <p className="font-bold text-2xl"><NAME></p>
                            <p className="text-base mb-3">Chief Advisior</p>
                            <p className="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</p>
                            <div className="pt-2">
                                <i className="fab fa-facebook-f px-2"></i>
                                <i className="fab fa-twitter px-2"></i>
                                <i className="fab fa-google px-2"></i>
                                <i className="fab fa-linkedin-in px-2"></i>
                                </div>
                        </div>
                    </div>
                    <div className="staff-item grid grid-cols-2">
                        <div className="bg-blue-500 pt-4 pl-4 pr-4 text-white -mr-16">
                            <p className="font-bold text-2xl"><NAME></p>
                            <p className="text-base mb-3">Chief Advisior</p>
                            <p className="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</p>
                            <div className="pt-2">
                                <i className="fab fa-facebook-f px-2"></i>
                                <i className="fab fa-twitter px-2"></i>
                                <i className="fab fa-google px-2"></i>
                                <i className="fab fa-linkedin-in px-2"></i>
                                </div>
                        </div>
                        <img src="images/artist3.jpg" className="spec-img" width="80%" alt="" />
                    </div>
                    <div className="staff-item grid grid-cols-2">
                        <div className="bg-blue-500 pt-4 pl-4 pr-4 text-white -mr-16">
                            <p className="font-bold text-2xl"><NAME></p>
                            <p className="text-base mb-3">Chief Advisior</p>
                            <p className="text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempus erat, et luctus quam. Maecenas cursus porta tortor, vel consectetur ante volutpat imperdiet.</p>
                            <div className="pt-2">
                                <i className="fab fa-facebook-f px-2"></i>
                                <i className="fab fa-twitter px-2"></i>
                                <i className="fab fa-google px-2"></i>
                                <i className="fab fa-linkedin-in px-2"></i>
                            </div>
                        </div>
                        <img src="images/artist4.jpg" className="spec-img" width="80%" alt="" />
                    </div>
                </div>

            </div>
        </section>
    )
}

export default Staffs
<file_sep>import React from 'react'

const Bread = ({data, bg}) => {
    return (
        <section className={`bread text-center text-white pb-16 pt-40 ${bg}`}>
            <div className="text-5xl font-bold">{data}</div>
            <div className="line mx-auto"></div>
            <div className="second-line mx-auto m-2"></div>
            <div className="m-4 text-lg font-semibold">Home / <span className="text-blue-500">{data}</span></div>
        </section>
    )
}

export default Bread
<file_sep>import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

const DetailProduct = () => {
    let { id } = useParams();
    const API_DETAIL_PRODUCT = `http://localhost:1337/products/${id}`;
    const [detail, setDetail] = useState([]);
    useEffect(() => {
        fetch(API_DETAIL_PRODUCT)
            .then(response => response.json())
            .then(data => setDetail(data));

    }, [])
    return (
        <section className="detail-product">
            <div className="container mx-auto py-20">
                <div className="grid grid-cols-2">
                    <div className="grid grid-cols-2">
                        <img src={detail.image ? `../../images/${detail.image[0].name}` : "null"} alt="" className="" />
                        <div className="">
                            <p className="">{detail.name}</p>
                            <p className="">{detail.price}</p>
                            <p className="">{detail.short_desc}</p>
                            <p className="">{detail.desc}</p>
                        </div>
                    </div>
                    <div className=""></div>
                </div>
            </div>
        </section>
    )
}

export default DetailProduct
<file_sep>import React from 'react'

const Why = () => {
    return (
        <section className="why">
            <div className="container mx-auto">
                <div className="grid grid-cols-3">
                    <div className="col-span-1"></div>
                    <div className="col-span-2 text-left">
                        <div className="text-4xl font-bold p-16 pb-10"><span className="text-blue-600">Why </span>Choose Us</div>
                        <div className="why-item text-white text-xl font-semibold p-3 bg-blue-500 ml-16 mb-10 rounded">Respecting Your Time</div>
                        <div className="why-item text-white text-xl font-semibold p-3 bg-blue-500 ml-16 mb-10 rounded">Latest In Technology</div>
                        <div className="why-item text-white text-xl font-semibold p-3 bg-blue-500 ml-16 mb-10 rounded">Professional Staff</div>
                        <div className="why-item text-white text-xl font-semibold p-3 bg-blue-500 ml-16 mb-32 rounded">Free Home Dilevery</div>
                    </div>
                </div>
            </div>

        </section>
    )
}

export default Why
<file_sep>import React from 'react'

const Contact = () => {
    return (
        <section className="contact pt-20 bg-gray-200">
            <div className="container mx-auto">
                <div className="grid grid-cols-3 gap-10">
                    <div className="text-center border-2 border-blue-600 rounded p-10 hover-box">
                        <i class="fas fa-envelope fa-3x text-blue-600 m-3"></i>
                        <p className="text-2xl font-semibold">Email</p>
                        <p className=""><EMAIL></p>
                    </div>
                    <div className="text-center border-2 border-blue-600 rounded p-10 hover-box">
                        <i class="fas fa-phone-alt fa-3x text-blue-600 m-3"></i>
                        <p className="text-2xl font-semibold">Phone</p>
                        <p className="">+842094832345</p>
                    </div>
                    <div className="text-center border-2 border-blue-600 rounded p-10 hover-box">
                        <i class="fas fa-map-marker-alt fa-3x text-blue-600 m-3"></i>
                        <p className="text-2xl font-semibold">Address</p>
                        <p className="">Trinh Van Bo Street, Xuan Phuong, Nam Tu Liem, Ha Noi</p>
                    </div>
                </div>
            </div>
            <div className="grid grid-cols-2 mt-20">
                <div className="">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3723.863981044331!2d105.74459841501292!3d21.038127785993407!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x313454b991d80fd5%3A0x53cefc99d6b0bf6f!2sFPT%20Polytechnic%20Hanoi!5e0!3m2!1sen!2s!4v1606041303879!5m2!1sen!2s" width="100%" height="100%" frameBorder={0} style={{ border: 0 }} allowFullScreen aria-hidden="false" tabIndex={0} />
                </div>
                <form action="" className="bg-blue-600 py-20 px-16 pt-10">
                    <span className="text-white text-3xl font-normal">Send A Message</span>
                    <div className="grid grid-rows-2 gap-10 mt-10">
                        <div className="grid grid-cols-2 gap-10">
                            <input type="text" className="p-2 w-full" name="name" placeholder="Name" id="" />
                            <input type="text" className="p-2 w-full" name="email" placeholder="Email" id="" />
                        </div>
                        <div className="grid grid-cols-2 gap-10">
                            <input type="text" className="p-2 w-full" name="phone" placeholder="Phone" id="" />
                            <input type="text" className="p-2 w-full" name="subject" placeholder="Subject" id="" />
                        </div>
                    </div>
                    <textarea className="mt-10 p-2 w-full" name="message" placeholder="Message" id="" rows="6"></textarea>
                    <button className="border-2 border-white text-white hover:bg-blue-800 mt-4 py-2 px-4">SUBMIT</button>
                </form>
            </div>
        </section>
    )
}

export default Contact
<file_sep>import React from 'react'

const Footer = () => {
    return (
        <footer className="bg-blue-500">
            <div className="container mx-auto p-6 text-xl font-medium text-center text-white">
                Copyrights © 2018 All Rights Reserved by <NAME>
            </div>
        </footer>
    )
}

export default Footer
<file_sep>import React from 'react'

const PreFooter = () => {
    return (
        <section className="fre-footer bg-black text-white">
            <div className="container mx-auto">
                <div className="grid grid-cols-4 gap-x-20">
                    <div className="my-20">
                        <img src="../../images/Feng_shui_logo.png" className="pb-6" width="200px" alt=""/>
                        <span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
                    </div>
                    <div className="grid grid-rows-5 py-20">
                        <span className="text-2xl font-semibold text-blue-500">Help</span>
                        <a href="">Find Your Beer</a>
                        <a href="">Customer Service</a>
                        <a href="">Contact</a>
                        <a href="">Recent Orders</a>
                    </div>
                    <div className="grid grid-rows-5 py-20">
                        <span className="text-2xl font-semibold text-blue-500">Links</span>
                        <a href="">Home</a>
                        <a href="">Shop</a>
                        <a href="">404 Page</a>
                        <a href="">Login</a>
                    </div>
                    <div className="grid grid-rows-5 py-20">
                        <span className="text-2xl font-semibold text-blue-500">Our Information
                        </span>
                        <a href=""><i class="fa fa-map-marker" aria-hidden="true"></i> 787 Lakeview St. Marion, NC 28752</a>
                        <a href=""><i class="fa fa-phone" aria-hidden="true"></i> +1800123654789</a>
                        <a href=""><i class="fa fa-envelope" aria-hidden="true"></i> <EMAIL></a>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default PreFooter
<file_sep>import React, { useState } from 'react'

import {
    BrowserRouter as Router,
    Link,
    useLocation,
} from "react-router-dom";

const Nav = () => {
    const [nav, setNav] = useState(false);

    const changeNavBg = () => {
        if (window.scrollY > 100) {
            setNav(true);
        } else {
            setNav(false);
        }
    }
    window.addEventListener('scroll', changeNavBg)


    return (
        <nav className={`z-50 ${nav ? 'nav-scrolled' : ''}`}>
            <div className="px-32">
                <div className="grid grid-cols-5 items-center p-2">
                    <a href="#"><img src="../../images/Feng_shui_logo.png" width="90px" className="" alt="" /></a>
                    <ul className="col-span-3 text-xl font-medium">
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/"> Home</Link></li>
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/about">About</Link></li>
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/services">Services</Link></li>
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/gallery">Gallery</Link></li>
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/blog">Blog</Link></li>
                        <li className="inline-block p-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/shop">Shop</Link></li>
                        <li className="inline-block pl-4"><Link className="nav-content hover:no-underline hover:text-blue-400" to="/contact">Contact</Link></li>
                    </ul>
                    <div className="text-right">
                        <a className="px-2 nav-content hover:no-underline hover:text-blue-400"><i className="fas fa-user"></i> Login</a>
                        <a className="px-2 nav-content hover:no-underline hover:text-blue-400"><i className="fas fa-pencil-alt"></i> Register</a>
                    </div>
                </div>
            </div>
        </nav>
    )
}

export default Nav
<file_sep>import React from 'react'

const Products = () => {
    return (
        <section className="products">
            <h1 className="text-4xl py-4">Sản phẩm nổi bật</h1>
            <div className="grid grid-cols-3 gap-3">
                <div className="pro-item border-solid border-2 border-gray-200 p-4">
                    <img src="./product-img-demo.jpg" className="" alt="" />
                    <div className="pro-title text-orange-500 text-xl font-semibold pt-5">
                        Tieu de bai viet
                </div>
                    <div className="pro-content">
                        Noi dung bai viet
                </div>
                </div>
                <div className="pro-item border-solid border-2 border-gray-200 p-4">
                    <img src="./product-img-demo.jpg" className="" alt="" />
                    <div className="pro-title text-orange-500 text-xl font-semibold pt-5">
                        Tieu de bai viet
                </div>
                    <div className="pro-content">
                        Noi dung bai viet
                </div>
                </div>
                <div className="pro-item border-solid border-2 border-gray-200 p-4">
                    <img src="./product-img-demo.jpg" className="" alt="" />
                    <div className="pro-title text-orange-500 text-xl font-semibold pt-5">
                        Tieu de bai viet
                </div>
                    <div className="pro-content">
                        Noi dung bai viet
                </div>
                </div>
            </div>
        </section>
    )
}

export default Products
