@extends('app')

@section('title', 'Community that Connects')

@section('description',
    'Community Connecting Us (CCU) is a 501(c)(3) nonprofit Asset Based Community Development organization
    located in Port Deposit, MD.')

@section('page_phrase', 'Welcome To CCU')

@section('content')

    <div class="homepage">
        <div id="homeBanner">
            <video class="hero_video" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
                disablePictureInPicture>
                <source src="{{ asset('videos/community-connecting-us-organization-maryland-banner720.mp4') }}"
                    type="video/mp4">
            </video>
            <div class="container d-flex align-items-center justify-content-center">
                <div class="banner_info_wrap">
                    <h1 class="banner_heading display-4 fw_500 text-center mb-3 text-uppercase">
                        Community that Connects
                    </h1>
                    <h2 class="banner_subheading text-center fw_400 mb-5">
                        We focus on building a strong community to grow and prosper together
                    </h2>

                    <div class="button_wrap text-center text-lg-start">
                        <a class="btn custom_button mt-0 mx-auto white reversed text-uppercase"
                            href="{{ route('contact') }}#contact-us">Want More Info?</a>
                    </div>
                </div>
            </div>
        </div>

        <section id="home_cta_section" class="section_row">
            <div class="content_wrap wider">
                <div class="row first_content_animate" id="contentToSlideUp">
                    <div class="col-12 px-0">
                        <h2 class="featurette-heading fs-1 text-center mb-5">
                            Welcome to Your Community
                        </h2>
                    </div>
                    <div class="col-12 col-lg-9 text-center mx-auto px-0 mb-4">
                        <p class="mb-3">

                            Community Connecting Us (CCU) is an <b>Asset Based Community Development</b>
                            501(c)(3) nonprofit.

                            We welcome neighbors and friends from all walks of life, who share a common respect for each
                            other, and want to share their resources, skills,
                            and experiences.
                        </p>
                        <p class="mb-4">
                            CCU takes care of our community, by providing opportunities to build relationships, promote
                            education, wellness, creativity and community at the Historic Tome Memorial Complex in Port
                            Deposit, Maryland.
                        </p>
                        <p class="fs-5 fw_600 mb-5">
                            Please join us in living out community the way it was meant to be <i
                                class="far fa-heart ms-1"></i>
                        </p>
                    </div>
                    <style>
                        .first_content_animate {
                            opacity: 0;
                            position: relative;
                            top: 100px;
                        }
                    </style>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            setTimeout(function() {
                                let element = document.getElementById('contentToSlideUp');
                                let position = 100;
                                let opacity = 0;
                                let duration = 1000; // 1 second
                                let interval = 10; // Interval in milliseconds for smoother animation
                                let steps = duration / interval;
                                let positionStep = position / steps;
                                let opacityStep = 1 / steps;
                    
                                let id = setInterval(frame, interval);
                    
                                function frame() {
                                    if (position <= 0 && opacity >= 1) {
                                        clearInterval(id);
                                    } else {
                                        if (position > 0) {
                                            position -= positionStep;
                                            if (position < 0) position = 0;
                                            element.style.top = position + 'px';
                                        }
                                        if (opacity < 1) {
                                            opacity += opacityStep;
                                            if (opacity > 1) opacity = 1;
                                            element.style.opacity = opacity;
                                        }
                                    }
                                }
                            }, 3000); // 3 seconds delay 
                        });
                    </script>
                    
                </div>

                <div class="row cta_3columns mb-5">
                    <div class="col-lg-4 column column_lg_left pb-3 content_animate slide_left">
                        <div class="inside_wrap">
                            <div class="image_wrap">
                                <img class="content_image" width="700" height="700"
                                    title="Community Connecting Us in {{ $location['city_state'] }}"
                                    alt="Community Network"
                                    src="{{ asset('images/image-blank-community-connecting-us-cta.jpg') }}">

                                <div class="absolute_block">
                                    <div class="flip-card">
                                        <div class="flip-card-inner">
                                            <div class="flip-card-front">
                                                <div class="card_inside_wrap">
                                                    <img class="content_image" width="700" height="700"
                                                        title="{{ $location['city_state'] }}" alt="Local Community Network"
                                                        src="{{ asset('images/mission-community-connecting-us-port-deposit-md-joining-hands700x700.jpg') }}">

                                                    <div class="absolute_block">
                                                        <div class="d-flex h-100 align-items-center justify-content-center">
                                                            <div class="d-block">
                                                                <h2 class="small_heading text-center">Community
                                                                    Connecting Us</h2>
                                                                <h4 class="column_heading">
                                                                    Our Mission
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flip-card-back">
                                                <div class="d-flex h-100 align-items-center justify-content-center">
                                                    <div class="d-block">
                                                        <div class="card_text">
                                                            <div class="card_heading mb-3">
                                                                <p class="big_heading">Our Main Purpose</p>
                                                            </div>
                                                            <p class="fs-6 mb-4">
                                                                We are on the mission to create welcoming community that
                                                                connects,
                                                                educates, and encourages.
                                                            </p>
                                                            <div class="button_wrap text-center">
                                                                <a class="btn custom_button mt-0 mx-auto blue text-uppercase fs_14"
                                                                    href="{{ route('about') }}">
                                                                    Read More
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 column column_lg_center pb-3 content_animate slide_up">
                        <div class="inside_wrap">
                            <div class="image_wrap">
                                <img class="content_image" width="700" height="700"
                                    title="{{ $location['city_state'] }}" alt="Local Community Network"
                                    src="{{ asset('images/image-blank-community-connecting-us-cta.jpg') }}">
                                <div class="absolute_block">
                                    <div class="flip-card">
                                        <div class="flip-card-inner">
                                            <div class="flip-card-front">
                                                <div class="card_inside_wrap">
                                                    <img class="content_image" width="700" height="700"
                                                        title="Community Connectin Us Events in {{ $location['city_state'] }}"
                                                        alt="Community Events"
                                                        src="{{ asset('images/events-community-connecting-us-port-deposit-md-kids700x700.jpg') }}">
                                                    <div class="absolute_block">
                                                        <div class="d-flex h-100 align-items-center justify-content-center">
                                                            <div class="d-block">
                                                                <h2 class="small_heading text-center">Community Connecting
                                                                    Us</h2>
                                                                <h4 class="column_heading">
                                                                    Our Events
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flip-card-back">
                                                <div class="d-flex h-100 align-items-center justify-content-center">
                                                    <div class="d-block">
                                                        <div class="card_text">
                                                            <div class="card_heading mb-3">
                                                                <p class="big_heading">Community Events</p>
                                                            </div>
                                                            <p class="fs-6 mb-4">
                                                                Don't miss out on our events. From Yoga and Crafting to
                                                                various sale events, we have a little something for
                                                                everybody.
                                                            </p>
                                                            <div class="button_wrap text-center">
                                                                <a class="btn custom_button mt-0 mx-auto blue text-uppercase fs_14"
                                                                    href="{{ route('calendar') }}">
                                                                    Event Calendar
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 column column_lg_right pb-3 content_animate slide_right">
                        <div class="inside_wrap">
                            <div class="image_wrap">
                                <img class="content_image" width="700" height="700"
                                    title="{{ $location['city_state'] }}" alt="Local Community Network"
                                    src="{{ asset('images/image-blank-community-connecting-us-cta.jpg') }}">
                                <div class="absolute_block">
                                    <div class="flip-card">
                                        <div class="flip-card-inner">
                                            <div class="flip-card-front">
                                                <div class="card_inside_wrap">
                                                    <img class="content_image" width="700" height="700"
                                                        title="{{ $location['city_state'] }}"
                                                        alt="Local Community Network"
                                                        src="{{ asset('images/get-involved-with-community-connecting-us-port-deposit-md700x700.jpg') }}">

                                                    <div class="absolute_block">
                                                        <div
                                                            class="d-flex h-100 align-items-center justify-content-center">
                                                            <div class="d-block">
                                                                <h2 class="small_heading text-center">Community
                                                                    Connecting Us</h2>
                                                                <h4 class="column_heading">
                                                                    Get Involved
                                                                </h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flip-card-back">
                                                <div class="d-flex h-100 align-items-center justify-content-center">
                                                    <div class="d-block">
                                                        <div class="card_text">
                                                            <div class="card_heading mb-3">
                                                                <p class="big_heading">Take Action</p>
                                                            </div>
                                                            <p class="fs-6 mb-4">
                                                                There are many ways in which you can support our mission.
                                                                Learn how you can make a difference today!
                                                            </p>
                                                            <div class="button_wrap text-center">
                                                                <a class="btn custom_button mt-0 mx-auto blue text-uppercase fs_14"
                                                                    href="{{ route('volunteer') }}">
                                                                    Learn How
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row content_animate slide_up">
                    <div class="col-12 col-lg-9 px-0 mx-auto">
                        <p class="text-center mb-0">
                            Community Connecting Us is dedicated to providing a safe and welcoming space for everyone in our
                            community. <br> Here we say,
                            <b class="d-block fs-5 my-3 lh-sm">"All people are welcome, not all behaviors are welcome."</b>
                            What we mean by that is everyone must be kind, inclusive and respect one another.
                        </p>
                    </div>
                </div>
            </div> <!--end of .content_wrap-->
        </section> <!--end of .section_row-->

        <x-contact-section class="mt-0" />

        <section class="section_row bg-light">
            <div class="content_wrap wider">
                <div class="row featurette core_parts_row">
                    <div class="col-12 px-0 mb-3">
                        <h2 class="featurette-heading fs-1 text-center mb-5">
                            Main Areas Of Our Focus
                        </h2>
                    </div>
                    <div class="col-md-6 col-xl-3 column d-lg-flex align-items-top mb-5 mb-xl-0">
                        <div class="inside_wrap px-md-3 content_animate slide_left">
                            <div class="image_wrap mb-4">
                                <img class="content_image"
                                    src="/images/education-community-connecting-us-port-deposit-md700x467.jpg"
                                    title="Community Connecting Us Education in Port Deposit, MD" alt="Education">
                            </div>
                            <h3 class="featurette-heading fs-4 text-center mb-3 mb-lg-3">Education</h3>
                            <p class="mb-0">
                                Education is imperative for the growth of everyone, and comes through experience, books,
                                teachings, and observation.
                                The imperative thing to remember about education is, everyone has something to teach and
                                everyone has something to learn.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3 column d-lg-flex align-items-top mb-5 mb-xl-0">
                        <div class="inside_wrap px-md-3 content_animate slide_left slide_up">
                            <div class="image_wrap mb-4">
                                <img class="content_image"
                                    src="/images/our-community-connecting-us-port-deposit-md700x467.jpg"
                                    title="Community Connecting Us in Port Deposit, MD" alt="Community Connecting Us">
                            </div>
                            <h3 class="featurette-heading fs-4 text-center mb-3 mb-lg-3">Community</h3>
                            <p class="mb-0">
                                Community is important to the health and well-being of both individuals and the collective
                                whole.
                                Community Connecting Us is an Asset Based Community movement providing folks a sense of
                                belonging and connection to others through numerous opportunities.
                            </p>
                        </div>
                    </div>

                    <div class="col-md-6 col-xl-3 column d-lg-flex align-items-top mb-5 mb-xl-0">
                        <div class="inside_wrap px-md-3 content_animate slide_right slide_up">
                            <div class="image_wrap mb-4">
                                <img class="content_image"
                                    src="/images/creativity-rock-painting-community-connecting-us-port-deposit-md700x467.jpg"
                                    title="Community Connecting Us in Port Deposit, MD" alt="Community Connecting Us">
                            </div>
                            <h3 class="featurette-heading fs-4 text-center mb-3 mb-lg-3">Creativity</h3>
                            <p class="mb-0">
                                Creativity facilitates personal growth and development by encouraging individuals to think
                                and solve problems in new and innovative ways.
                                Collectively, creative opportunities lead to increased social connections.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3 column d-lg-flex align-items-top mb-5 mb-xl-0">
                        <div class="inside_wrap px-md-3 content_animate slide_right">
                            <div class="image_wrap mb-4">
                                <img class="content_image"
                                    src="/images/well-being-community-connecting-us-port-deposit-md700x467.jpg"
                                    title="Community Connecting Us Wellness in Port Deposit, MD"
                                    alt="Community Connecting Us">
                            </div>
                            <h3 class="featurette-heading fs-4 text-center mb-3 mb-lg-3">Wellness</h3>
                            <p class="mb-0">
                                Focusing on wellness and mental health allows individuals and the community to grow in
                                knowledge and strength.
                                Having a focus on wellness and mental health can help individuals take an active role in
                                improving and maintaining their own health, as well as the health of others.
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-12 column text-center pt-4 mt-xl-5">
                        <p class="text-center mb-0 mb-lg-0">
                            <a class="btn custom_button text-uppercase red" href="{{ route('about') }}">Learn More <i
                                    class="fas fa-chevron-right"></i></a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section_row our_model_section bg_blue">
            <div class="content_wrap">
                <div class="row">
                    <div class="col-12 mx-auto px-0">
                        <h2 class="featurette-heading fs-1 text-center mb-4">
                            Our Operating Model
                        </h2>
                        <p class="mb-5 text-center">
                            We operate under a <b>"pay-what-you-want"</b> model. This means that we rely heavily on the
                            donations of others to ensure that everyone has the opportunity to participate,
                            regardless of their socioeconomic status. Whether you have or have not; all are welcome and all
                            are equal here.
                        </p>
                        <p class="text-center d-md-flex justify-content-center mb-0">
                            <a class="btn custom_button red text-uppercase mx-md-2 mb-4 mb-md-0"
                                href="{{ route('contact') }}">
                                Have a question?
                            </a>

                            <a class="btn custom_button green text-uppercase mx-md-2" href="{{ route('donate') }}">
                                Donate
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section_row bg-white my-2">
            <div class="content_wrap wider">
                <div class="row featurette">
                    <div class="col-lg-6 column d-lg-flex align-items-center order-lg-last ps-lg-4 mb-5 mb-lg-0">
                        <div class="text_wrap content_animate slide_right">
                            <h2 class="featurette-heading fs-1 text-center text-lg-start">Our Story in Video</h2>
                            <p class="mb-5">
                                This informative video is an excellent introduction to Community Connecting Us, our vision
                                and purpose.
                            </p>
                            <p class="text-center text-lg-start mb-0">
                                <a class="btn custom_button red text-uppercase ms-lg-0"
                                    href="{{ route('resources') }}#ccu-video-resources">
                                    See More Videos <i class="fas fa-chevron-right"></i>
                                </a>
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6 column order-lg-first pe-lg-5">
                        <div class="content_animate slide_up">
                            <div class="ratio ratio-16x9 mb-0">
                                <iframe
                                    src="https://www.youtube.com/embed/E-Y9e8rxlQ4?controls=1&rel=0"
                                    title="Community Connecting Us in {{ $location['city_state'] }}"
                                    width="560"
                                    height="315"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="section_row bg_blue our_model_section">
            <div class="content_wrap wider">
                <h2 class="featurette-heading fs-1 text-center mb-5 pb-3">
                    What people say about Community Connecting Us </h2>
                <x-review-section-widget :location="$location" />
                <br>
                <div class="button_wrap text-center pt-4 wow fadeInUp">
                    <a class="btn custom_button red text-uppercase  mb-0" href="{{ route('leave-review') }}">Write A
                        Testimonial</a>
                </div>
            </div>
        </section>

        <div class="section_row mt-2 px-0">
            <div class="map_wrap">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d21907.481169013892!2d-76.12374407205817!3d39.60942119181562!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x78ff39ee4e62dbcf!2sCommunity%20connecting%20Us!5e0!3m2!1sen!2sus!4v1672765420947!5m2!1sen!2sus"
                    style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </div>

@endsection