"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 data-aos="fade-down">Author Website Design USA</h1>
                            <p data-aos="fade-up" data-aos-delay="150">Modern, mobile-friendly, and professionally branded author websites for writers, speakers, and publishers. We help you build a strong online identity to showcase your books, bio, and author presence.</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 bookwriting">
            <div  className="container">
                <div  className="row">
                    <div  className="col-lg-6">
                        <div  className="content" data-aos="fade-right">
                            <h3 data-aos="fade-right">Leading Professional</h3>
                            <h2 data-aos="fade-right" data-aos-delay="100">Author Website Design</h2>
                            <p data-aos="fade-right" data-aos-delay="200">Our U.S.-based website designers build fully customized, responsive, and professionally branded author websites tailored for writers, novelists, speakers, and publishers. Whether you&apos;re promoting a single book, an entire catalog, or building your personal brand, we deliver modern layouts, fast performance, and easy navigation. From homepage structure and book pages to blog setup and branding elements, we create websites that boost visibility, strengthen online credibility, and support long-term author growth.</p>
                            <div  className="banner-btns" data-aos="zoom-in" data-aos-delay="350">
                                <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  className="col-lg-6">
                        <div  className="img-ser" data-aos="fade-left" data-aos-delay="200">
                            <Image src="/assets/images/book-writing-img.webp"  width={636} height={608} alt="Professional author website design services in USA with custom layouts, book pages, and responsive design for writers" title="Author Website Design Services in USA | The Book Quill"  className="img-fluid" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section  className="cta-banner cta-banner-2">
            <div  className="container">
                <div  className="row align-items-center">
                    <div  className="col-lg-6">
                        <div  className="banner-content">
                            <h3 data-aos="fade-right">Elevate <span>from Publisher</span> <br/>
                                to Bestselling <span>Author</span></h3>
                            <p data-aos="fade-right" data-aos-delay="150">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" 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>

        <Portfolio />

        <section  className="our-promise-sec extra-features">
            <div  className="container">
                <div  className="title heading" data-aos="fade-down" data-aos-delay="100" data-aos-duration="900">
                    <h2>what we offer</h2>
                    <div  className="row justify-content-center">
                        <div  className="col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                            <p>Our author website design services help writers establish a professional online presence with modern layouts, book showcases, branding visuals, and mobile-friendly performance tailored for today’s publishing market.</p>
                        </div>
                    </div>
                </div>

                <div  className="row align-items-md-end">
                    <div  className="col-xxl-7 col-xl-7 col-lg-7 col-md-8 col-sm-12 col-12">
                        <div  className="title" data-aos="fade-right" data-aos-delay="150" data-aos-duration="800">
                            <h2>expert website design support</h2>
                            <div  className="row">
                                <div  className="col-xxl-10 col-xl-11 col-lg-11 col-md-12 col-sm-12 col-12">
                                    <p>We follow a structured website development process that focuses on branding, speed, and user experience. Every site is built with clean layouts, strong visuals, and industry-standard optimization for authors.</p>
                                    <ul>
                                        <li>Website Planning</li>
                                        <li>Brand Styling</li>
                                        <li>Homepage Layout</li>
                                        <li>Book Page Design</li>
                                        <li>Content Placement</li>
                                        <li>SEO Setup</li>
                                        <li>Speed Optimization</li>
                                        <li>Launch & Support</li>
                                    </ul>
                                    <div  className="banner-btns">
                                        <Link href="/contact-us">start your project</Link>
                                        <a href="tel:+1 (323) 503-1458 "><FontAwesomeIcon icon={faPhoneVolume} /> +1 (323) 503-1458</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div  className="col-xxl-5 col-xl-5 col-lg-5 col-md-4">
                        <div  className="img-our" data-aos="fade-left" data-aos-delay="250" data-aos-duration="800">
                            <Image src="/assets/images/ser-img.webp" width={526} height={502} alt="Expert author website design support with branding, book page layouts, and mobile friendly website development" title="Author Website Design Support | The Book Quill"  className="img-fluid" />
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section  className="section-our-process" data-aos="fade-up">
            <div  className="container">
                <div  className="row justify-content-center">
                    <div  className="col-xxl-9 col-xl-9 col-lg-10 col-md-12 col-sm-12 col-12">
                        <div  className="title">
                            <h2 data-aos="fade-down">our process</h2>
                            <p data-aos="fade-up" data-aos-delay="100">Our author website workflow ensures clean design, strong branding, and smooth functionality. From planning to launch, every website is crafted to support your books, brand, and long-term author growth.</p>
                        </div>
                    </div>
                </div>
                <div  className="row our-line">
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="0">
                            <div  className="top-h3">
                                <h3>Planning</h3>
                            </div>
                            <h2>01</h2>
                            <div  className="content">
                                <h3>Planning</h3>
                                <p>We learn about your books, brand, and goals to plan your website structure.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="150">
                            <div  className="top-h3">
                                <h3>Design</h3>
                            </div>
                            <h2>02</h2>
                            <div  className="content">
                                <h3>Design</h3>
                                <p>We craft layouts, visuals, and branding elements aligned with your author identity.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="300">
                            <div  className="top-h3">
                                <h3>Development</h3>
                            </div>
                            <h2>03</h2>
                            <div  className="content">
                                <h3>Development</h3>
                                <p>We build your website with clean pages, mobile responsiveness, and fast loading.</p>
                            </div>
                        </div>
                    </div>
                    <div  className="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                        <div  className="pro-card" data-aos="fade-right" data-aos-delay="450">
                            <div  className="top-h3">
                                <h3>Launch</h3>
                            </div>
                            <h2>04</h2>
                            <div  className="content">
                                <h3>Launch</h3>
                                <p>Your website is finalized, tested, and launched with ongoing support if needed.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <ReviewSec />
    </main>
  );
}
