"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">Children’s Book Illustration Services USA</h1>
                            <p data-aos="fade-up" data-aos-delay="150">Bright, imaginative, and professionally illustrated children’s books for young readers. Our U.S.-based illustrators create picture book art, characters, and full-color scenes that bring your story to life.</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">Children’s Book Illustrations</h2>
                            <p data-aos="fade-right" data-aos-delay="200">Our U.S.-based children’s book illustrators create vibrant, engaging artwork for picture books, early readers, and illustrated stories. Whether you need playful characters, educational visuals, or full-page scenes, we bring your story to life with expressive art styles suited for young readers. From character sketches and storyboard planning to full-color illustrations and print-ready files, we support authors through every stage of the visual storytelling process.</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 children's book illustration services in USA creating colorful characters, story scenes, and engaging artwork for young readers" title="Children’s Book Illustration 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 children’s book illustration services provide authors with expressive characters, colorful scenes, and playful artwork designed to captivate young readers and enhance your storytelling.</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 illustration 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 creative illustration process that ensures your artwork is expressive, age-appropriate, and visually aligned with your children’s book theme and storyline.</p>
                                    <ul>
                                        <li>Concept Planning</li>
                                        <li>Character Sketches</li>
                                        <li>Scene Drafting</li>
                                        <li>Color Development</li>
                                        <li>Page Layout Art</li>
                                        <li>Illustration Edits</li>
                                        <li>Cover Artwork</li>
                                        <li>Final Illustration Prep</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 children's book illustration support with character design, colorful scenes, and storytelling artwork for young readers" title="Children’s Book Illustration 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 illustration workflow ensures your children’s book receives expressive designs, consistent style, and print-ready artwork. From sketches to final colors, we follow a detailed visual development process.</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 review your story, characters, and visual style to plan the illustration direction.</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>Sketches</h3>
                            </div>
                            <h2>02</h2>
                            <div  className="content">
                                <h3>Sketches</h3>
                                <p>We create character sketches, scene drafts, and layout concepts for approval.</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>Illustration</h3>
                            </div>
                            <h2>03</h2>
                            <div  className="content">
                                <h3>Illustration</h3>
                                <p>We illustrate each page with full color, expressive details, and child-friendly visuals.</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>Final Art</h3>
                            </div>
                            <h2>04</h2>
                            <div  className="content">
                                <h3>Final Art</h3>
                                <p>Your illustrations are polished, formatted, and prepared for print or digital publishing.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <ReviewSec />
    </main>
  );
}
