import Layout from "@/components/layout/Layout";
import BrandActiveSlider from "@/components/slider/BrandActiveSlider";
import Link from "next/link";

export const metadata = {
    title: "Service Details | RankRunners - SEO, Web Design & Digital Marketing Agency",
    description:
        "RankRunners provides enterprise level SEO, Web Design/Development, Digital Marketing and IT Management services for companies across all industries, regardless of scope or size. Contact support@rankrunners.net to get started today!",
};

export default function ServicesDetails3() {
    return (
        <>
            <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Services We Provide">
                <div>
                    <section className="services__details-area">
                        <div className="container">
                            <div className="services__details-wrap">
                                <div className="row">
                                    <div className="col-70 order-0 order-lg-2">
                                        <div className="services__details-content services__details-content-two">
                                            <h2 className="title">Web Development / Design</h2>
                                            <p>
                                                The very first impression that an online prospect forms of your business
                                                comes from the quality of your Web Design. Many companies struggle with
                                                outdated designs, poor user experience, or technical issues like slow
                                                site speed or dysfunctional buttons that hinder their online presence.
                                                RankRunners addresses these challenges with our comprehensive Web
                                                Development and Design services. We build and design websites that not
                                                only look great but also function seamlessly, ensuring an exceptional
                                                user experience and robust performance. You can reference this website
                                                that you’re currently reading through for a first-hand account of our
                                                expertise, and check our Case Studies page to see other websites we’ve
                                                created.
                                            </p>
                                            <div className="services__details-thumb">
                                                <img src="/assets/img/custom/service-05-01.png" alt="" />
                                            </div>
                                            <div className="services__details-inner-three">
                                                <h3>Benefits:</h3>
                                                <ul>
                                                    <li>
                                                        <strong>Custom Design</strong>: We create visually appealing and
                                                        unique designs tailored to your brand’s identity, helping you
                                                        stand out in a crowded market.
                                                    </li>
                                                    <li>
                                                        <strong>Responsive Layouts</strong>: Our websites are designed
                                                        to look and perform perfectly on all devices, from desktops to
                                                        smartphones, ensuring a consistent user experience.
                                                    </li>
                                                    <li>
                                                        <strong>User-Centric Experience</strong>: We focus on intuitive
                                                        navigation and user-friendly interfaces to keep visitors engaged
                                                        and encourage conversions.
                                                    </li>
                                                    <li>
                                                        <strong>Technical Excellence</strong>: Our backend development
                                                        ensures your website runs smoothly with fast load times, secure
                                                        functionality, and scalable solutions.
                                                    </li>
                                                    <li>
                                                        <strong>SEO-Friendly</strong>: We build websites with search
                                                        engine optimization in mind, improving your visibility and
                                                        ranking in search engine results.
                                                    </li>
                                                </ul>
                                            </div>
                                            <div className="services__details-inner-two services__details-inner-four">
                                                <div className="gutter-24">
                                                    <div className="col-48">
                                                        <div className="services__details-inner-img float-img">
                                                            <img src="/assets/img/custom/service-05-02.png" alt="" />
                                                        </div>
                                                    </div>
                                                    <div className="col-52">
                                                        <div className="services__details-inner-content-two">
                                                            <h3>Services:</h3>
                                                            <ul>
                                                                <li>
                                                                    <strong>Frontend Development</strong>: Crafting the
                                                                    visual elements of your website using modern
                                                                    technologies such as HTML, CSS, and JavaScript to
                                                                    ensure an attractive and interactive user
                                                                    experience.
                                                                </li>
                                                                <li>
                                                                    <strong>Backend Development</strong>: Developing the
                                                                    server-side logic and database management to support
                                                                    your website’s functionality, including custom
                                                                    features and integrations.
                                                                </li>
                                                                <li>
                                                                    <strong>Responsive Web Design</strong>: Designing
                                                                    websites that adapt to different screen sizes and
                                                                    devices, ensuring a seamless experience for all
                                                                    users.
                                                                </li>
                                                                <li>
                                                                    <strong>E-Commerce Development</strong>: Building
                                                                    robust online stores with secure payment gateways,
                                                                    inventory management, and user-friendly shopping
                                                                    experiences.
                                                                </li>
                                                                <li>
                                                                    <strong>Content Management Systems (CMS)</strong>:
                                                                    Implementing and customizing CMS platforms like
                                                                    WordPress or Joomla to enable easy content updates
                                                                    and management.
                                                                </li>
                                                                <li>
                                                                    <strong>Website Maintenance</strong>: Offering
                                                                    ongoing support and updates to keep your website
                                                                    secure, up-to-date, and functioning optimally.
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>
                                                <strong>
                                                    The development and design of a new website typically take 6 to 12
                                                    weeks, depending on the complexity and scope of the project. This
                                                    includes initial design, development, testing, and revisions. We
                                                    will provide regular updates throughout the process to ensure your
                                                    vision is realized.
                                                </strong>
                                            </p>
                                            <div className="all_services__area-six-two">
                                                <div className="container">
                                                    <h3>
                                                        Ready to elevate your online presence with a stunning new
                                                        website?
                                                    </h3>
                                                    <Link href="/schedule" className="btn">
                                                        Get Started with Web Development Today!
                                                    </Link>
                                                </div>
                                            </div>
                                            <p>Have questions or need more details? Contact us today:</p>
                                            <div className="contact__info mb-50">
                                                <ul className="list-wrap">
                                                    <li>
                                                        <div className="icon">
                                                            <i className="flaticon-phone-call" />
                                                        </div>
                                                        <div className="content">
                                                            <h4 className="title">Phone</h4>
                                                            <Link href="tel:+14702604117">(470) 260-4117</Link>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="icon">
                                                            <i className="flaticon-mail" />
                                                        </div>
                                                        <div className="content">
                                                            <h4 className="title">Email</h4>
                                                            <Link href="mailto:support@rankrunners.net">
                                                                support@rankrunners.net
                                                            </Link>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <h4 className="title-center">
                                                Let RankRunners bring your website vision to life with our expert web
                                                development and design services!
                                            </h4>
                                        </div>
                                    </div>
                                    <div className="col-30">
                                        <aside className="services__sidebar">
                                            <div className="sidebar__widget">
                                                <div className="services-sidebar">
                                                    <ul className="list-wrap">
                                                        <li>
                                                            <Link href="/services/search-engine-optimization">
                                                                Search Engine Optimization
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/ad-campaign-management">
                                                                Ad Campaign Management
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/cloud-computing">
                                                                Cloud Computing <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/lead-generation">
                                                                Lead Generation <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/web-development" className="active">
                                                                Web Development/Design
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/social-media-management">
                                                                Social Media Management
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/performance-monitoring">
                                                                Performance Monitoring
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/cyber-security">
                                                                Cyber Security <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                        <li>
                                                            <Link href="/services/website-maintenance">
                                                                Website Maintenance
                                                                <i className="flaticon-arrow-button" />
                                                            </Link>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div className="sidebar__widget sidebar__widget-three">
                                                <h4 className="sidebar__widget-title">SEO Checker</h4>
                                                <div className="sidebar__brochure sidebar__brochure-two">
                                                    <p>Check your website's SEO performance.</p>
                                                    <Link href="/seo-checker">SEO Checker</Link>
                                                </div>
                                            </div>
                                            <div className="sidebar__widget sidebar__widget-two">
                                                <div
                                                    className="sidebar__contact sidebar__contact-two"
                                                    data-background="/assets/img/services/sidebar_contact_bg.jpg"
                                                >
                                                    <h2 className="title">
                                                        Contact Us Any Time For Immediate Support!
                                                    </h2>
                                                    <Link href="tel:+14702604117" className="btn">
                                                        <i className="flaticon-phone-call" />
                                                        (470) 260-4117
                                                    </Link>
                                                </div>
                                            </div>
                                            <div className="sidebar__widget sidebar__widget-three">
                                                <h4 className="sidebar__widget-title">Send Us a Message</h4>
                                                <div className="sidebar__form">
                                                    <form action="#">
                                                        <div className="form-grp">
                                                            <input type="text" name="name" placeholder="Your Name" />
                                                        </div>
                                                        <div className="form-grp">
                                                            <input
                                                                type="text"
                                                                name="phone"
                                                                placeholder="Phone Number"
                                                            />
                                                        </div>
                                                        <div className="form-grp">
                                                            <textarea name="message" placeholder="Type Your Message" />
                                                        </div>
                                                        <button type="submit" className="btn btn-two">
                                                            Send Message
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </aside>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div className="brand-area">
                    <div className="container">
                        <h4 className="brand__content">Trusted by Numerous Companies, Worldwide</h4>
                        <div className="swiper-container brand-active">
                            <BrandActiveSlider />
                        </div>
                    </div>
                </div>
            </Layout>
        </>
    );
}
