"use client";
import Image from "next/image";
import Link from "next/link";
import Portfolio from "../component/portoflio";
import ReviewSec from "../component/Testimonials";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faPhoneVolume, faArrowDown } from '@fortawesome/free-solid-svg-icons';

export default function Home() {
  
  return (
    <main>
        <section  className="main-banner inner-banner">
            <div  className="container">
                <div  className="row align-items-center justify-content-center">
                    <div  className="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
                        <div  className="banner-content text-center">
                            <h1>Client Testimonials</h1>
                            <p>See what authors across the USA say about our professional book writing, editing, and publishing services. Your story deserves the right creative partners.</p>
                            <div  className="banner-btns justify-content-center">
                                <Link href="/contact-us">Contact Us</Link>
                                <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section  className="testimonial-inner-sec">
            <div  className="container">
                <div  className="row justify-content-center">
                    <div  className="col-lg-9 col-xl-9">
                        <div  className="title">
                            <h3>What Our Clients Say About Us</h3>
                            <p>Authors nationwide trust The Book Quill for reliable book writing, editing, publishing guidance, and creative support. Here are real experiences from writers who chose our team to bring their stories to life.</p>
                        </div>
                    </div>
                </div>
                <div  className="row gy-4">
                    <div  className="col-lg-6">
                        <div  className="testi-card h-100">
                            <div  className="row align-items-center flex-row-reverse">
                                <div  className="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                    <div  className="content"  data-aos="fade-left" data-aos-delay="150">
                                        <h2>The Best Book Publishing</h2>
                                        <p>The Book Quill transformed my manuscript into a masterpiece. Their team of 
                                        professional experts handled everything from editing to final distribution with 
                                        immense care and precision. I highly recommend their services to any 
                                        aspiring author looking for top-tier publishing quality in the USA. 
                                        Truly a remarkable experience!</p>
                                        <ul>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="5 Star Customer Rating" title="Top Rated Service"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Verified Review" title="Excellent Quality"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Author Testimonial Star" title="Trusted by Authors"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Professional Publishing Rating" title="100% Satisfaction"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="The Book Quill Highly Recommended" title="Best Book Writing Agency"  className="img-fluid" />
                                            </li>
                                        </ul>
                                        <h3>Jay Sferra - Author</h3>
                                        <Image src="/assets/images/trustpilot.webp" alt="Verified Trustpilot Review for Jay Sferra" title="Read Jay Sferra's Full Story" width={115} height={28} className="img-fluid" />
                                    </div>
                                </div>
                                <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                    <div  className="img-testi" data-aos="fade-right" data-aos-delay="250">
                                        <Image src="/assets/images/testi-img-2.webp" alt="The Book Quill Trustpilot Rating for Jay Sferra" title="View Jay Sferra's Review on Trustpilot" width={134} height={234} className="img-fluid" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  className="col-lg-6">
                        <div  className="testi-card h-100">
                            <div  className="row align-items-center flex-row-reverse">
                                <div  className="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">
                                    <div  className="content">
                                        <h2>Trusted Book Publishing Solutions</h2>
                                        <p>Working with The Book Quill was a game-changer for my career. Their 
                                        dedicated publishing team provided seamless guidance from the initial 
                                        draft to the final launch on global platforms. I am impressed by their 
                                        commitment to quality and timely delivery for authors across the USA. 
                                        The best choice for professional writers!</p>
                                        <ul>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Top Rated Book Agency" title="5/5 Rating"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Verified Author Feedback"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Professional Publishing Standards"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Excellent Service Quality"  className="img-fluid" />
                                            </li>
                                            <li>
                                                <Image src="/assets/images/star.webp" width={19} height={18} alt="Highly Recommended by Authors"  className="img-fluid" />
                                            </li>
                                        </ul>
                                        <h3>Sarah Jenkins - Novelist</h3>
                                        <Image src="/assets/images/trustpilot.webp" alt="Verified Trustpilot Review for Sarah Jenkins" title="Read Sarah's Full Story" width={115} height={28} className="img-fluid" />
                                    </div>
                                </div>
                                <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                    <div  className="img-testi">
                                        <Image src="/assets/images/testi-img-3.webp" alt="Sarah Jenkins - Satisfied Author Review" title="Success Story of Our Published Author" width={134} height={234} className="img-fluid" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* <!--<div  className="col-lg-6">-->
                    <!--    <div  className="testi-card">-->
                    <!--        <div  className="row align-items-center flex-row-reverse">-->
                    <!--            <div  className="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">-->
                    <!--                <div  className="content">-->
                    <!--                    <h2>Magnificent Work!!</h2>-->
                    <!--                    <p>The Book Quill provided exceptional support throughout my entire writing and publishing journey. Their attention to detail, communication, and commitment to quality made the entire process smooth and stress-free. I’m extremely satisfied with the final outcome and highly recommend their services.</p>-->
                    <!--                    <ul>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                    </ul>-->
                    <!--                    <h3>Jay Sferra - Author</h3>-->
                    <!--                    <Image src="/assets/images/trustpilot.webp" alt="Trustpilot"  className="img-fluid" />-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--            <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">-->
                    <!--                <div  className="img-testi">-->
                    <!--                    <Image src="/assets/images/testi-img-2.webp" alt="Testimonial 3"  className="img-fluid" />-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div  className="col-lg-6">-->
                    <!--    <div  className="testi-card">-->
                    <!--        <div  className="row align-items-center flex-row-reverse">-->
                    <!--            <div  className="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">-->
                    <!--                <div  className="content">-->
                    <!--                    <h2>Magnificent Work!!</h2>-->
                    <!--                    <p>The Book Quill provided exceptional support throughout my entire writing and publishing journey. Their attention to detail, communication, and commitment to quality made the entire process smooth and stress-free. I’m extremely satisfied with the final outcome and highly recommend their services.</p>-->
                    <!--                    <ul>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                        <li>-->
                    <!--                            <Image src="/assets/images/star.webp" width={19} height={18} alt="rating"  className="img-fluid" />-->
                    <!--                        </li>-->
                    <!--                    </ul>-->
                    <!--                    <h3>Jay Sferra - Author</h3>-->
                    <!--                    <Image src="/assets/images/trustpilot.webp" alt="Trustpilot"  className="img-fluid" />-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--            <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">-->
                    <!--                <div  className="img-testi">-->
                    <!--                    <Image src="/assets/images/testi-img-3.webp" alt="Testimonial 4"  className="img-fluid" />-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--        </div>-->
                    <!--    </div>-->
                    <!--</div>--> */}
                </div>
            </div>
        </section>

        <section  className="cta-banner">
            <div  className="container">
                <div  className="row align-items-center justify-content-center">
                    <div  className="col-xl-6 col-lg-8 col-md-8 col-sm-12 col-12">
                        <div  className="banner-content text-center" data-aos="fade-up" data-aos-duration="900">
                            <h2 data-aos="fade-up" data-aos-delay="100">The Book Quill</h2>
                            <p data-aos="fade-up" data-aos-delay="200">we are offer our client a <span>40% discount</span> on all of our services. avail your discount coupon now through our live chat
                            </p>
                            <div  className="banner-btns justify-content-center" data-aos="zoom-in" data-aos-delay="300">
                                <Link href="/contact-us">Contact Us</Link>
                                <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section  className="sec-services">
            <div  className="container">
                <div  className="row align-items-end justify-content-center gy-4 ">
                    <div  className="col-xl-5 col-lg-5 col-md-5 col-sm-9 col-9">
                        <div  className="img-ser" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1100">
                            <Image src="/assets/images/services-sec-img.webp" alt="Professional Book Publishing and Distribution Services by The Book Quill" title="Comprehensive Publishing Solutions for Authors" width={512} height={458} className="img-fluid" />
                        </div>
                    </div>
                    <div  className="col-xl-7 col-lg-7 col-md-7 col-sm-12 col-12">
                        <div  className="content" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1100">
                            <h3>Professional Book Publishing</h3>
                            <h2>Services in USA</h2>
                            <p>We help authors publish high-quality books through expert writing, editing, design, formatting, and complete publishing assistance. Our team ensures your manuscript is polished, industry-ready, and professionally presented.</p>

                            <div  className="banner-btns">
                                <Link href="/contact-us">Contact Us</Link>
                                <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="our-sr">
                    <div className="coll" data-aos="fade-up" data-aos-delay="100">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/1.webp" alt="Professional Mystery Book Ghostwriting Services" title="Mystery Genre Writing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Mystery</h4>
                        </div>
                    </div>
                    
                    <div className="coll" data-aos="fade-up" data-aos-delay="150">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/2.webp" alt="Horror Fiction Novel Writing and Publishing" title="Horror Book Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Horror</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="200">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/3.webp" alt="Romance Novel Ghostwriters for Hire" title="Romance Book Writing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Romance</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="250">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/4.webp" alt="Children's Book Illustration and Writing Services" title="Kids' Book Publishing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Kids&apos; Books</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="300">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/1.webp" alt="Epic Fantasy World Building and Ghostwriting" title="Fantasy Novel Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Fantasy</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="350">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/6.webp" alt="Drama and Script Writing Experts" title="Drama Genre Writing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Drama</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="400">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/7.webp" alt="Crime Thriller and True Crime Writing" title="Crime Book Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Crime</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="450">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/8.webp" alt="Professional Biography and Memoir Ghostwriters" title="Biography Writing Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Biography</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="500">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/9.webp" alt="Health and Wellness Non-fiction Writing" title="Health Book Publishing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Health</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="550">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/10.webp" alt="Philosophy and Thought Leadership Book Design" title="Philosophy Book Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Philosophy</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="600">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/11.webp" alt="General Fiction Book Writing and Editing" title="Fiction Writing Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Fiction</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="650">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/12.webp" alt="Action and Adventure Novel Publishing USA" title="Adventure Book Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Adventure</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="700">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/13.webp" alt="Art and Coffee Table Book Design Services" title="Art Book Publishing" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Art</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="750">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/14.webp" alt="Business and Entrepreneurship Ghostwriting" title="Business Book Services" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Business</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="800">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/15.webp" alt="Book Series and Trilogy Writing Packages" title="Series & Trilogy Planning" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>Trilogy</h4>
                        </div>
                    </div>
                
                    <div className="coll" data-aos="fade-up" data-aos-delay="850">
                        <div className="card">
                            <div className="img-card">
                                <Image src="/assets/images/Icons-about/16.webp" alt="Custom Book Writing Services for All Genres" title="Explore More Genres" className="img-fluid" width={90} height={103}/>
                            </div>
                            <h4>And More</h4>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
  );
}
