

<?php
$title = 'Card';
$subTitle = 'Components / Card';

?>

<?php $__env->startSection('content'); ?>

<div class="mb-40">
    <div class="row gy-4">
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12">
                <img src="<?php echo e(asset('assets/images/card-component/card-img1.png')); ?>" class="card-img-top" alt="">
                <div class="card-body p-16">
                    <h5 class="card-title text-lg text-primary-light
                         mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12">
                <img src="<?php echo e(asset('assets/images/card-component/card-img2.png')); ?>" class="card-img-top" alt="">
                <div class="card-body p-16 text-center">
                    <h5 class="card-title text-lg text-primary-light
                         mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn btn-primary-600 px-12 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12">
                <img src="<?php echo e(asset('assets/images/card-component/card-img3.png')); ?>" class="card-img-top" alt="">
                <div class="card-body p-16 text-end">
                    <h5 class="card-title text-lg text-primary-light
                         mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3">
                        <a href="javascript:void(0)" class="btn btn-primary-100 text-white text-primary-600 px-12 py-10 d-inline-flex align-items-center gap-2">
                            Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                        </a>
                        <button class="btn btn-warning-100 text-white text-warning-600 px-12 py-10 d-inline-flex align-items-center gap-2">
                            Book Mark <iconify-icon icon="bx:bookmark-minus" class="text-xl"></iconify-icon>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12">
                <img src="<?php echo e(asset('assets/images/card-component/card-img4.png')); ?>" class="card-img-top" alt="">
                <div class="card-body p-16 text-center">
                    <h5 class="card-title text-lg text-primary-light
                         mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <button class="btn btn-primary-600 px-12 py-10 d-inline-flex align-items-center gap-2">
                        <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mb-40">
    <h6 class="mb-24">Card Text & icon </h6>
    <div class="row gy-4">
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-gradient-purple text-lilac-600 mb-16 radius-12">
                        <iconify-icon icon="solar:medal-ribbons-star-bold" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Brand Identity</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-lilac-600 hover-text-lilac px-0 py-0 mt-16 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 text-center">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-gradient-primary text-primary-600 mb-16 radius-12">
                        <iconify-icon icon="ri:computer-fill" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">UI/UX Designer</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 text-end">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-gradient-success text-success-600 mb-16 radius-12">
                        <iconify-icon icon="fluent:toolbox-20-filled" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Business Strategy</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-success-600 hover-text-success px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 text-center">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-gradient-danger text-danger-600 mb-16 radius-12">
                        <iconify-icon icon="ph:code-fill" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Business Strategy</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-danger-600 hover-text-danger px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mb-40">
    <h6 class="mb-24">Card With image & Overlays </h6>
    <div class="row gy-4">
        <div class="col-xxl-4 col-sm-6">
            <div class="card h-100 radius-12 p-0 overflow-hidden position-relative">
                <div class="card-body p-0 gradient-overlay bottom-0 start-0">
                    <img src="<?php echo e(asset('assets/images/card-component/card-overlay-img1.png')); ?>" alt="" class="w-100 h-100">
                    <div class="position-absolute start-0 bottom-0 p-24 z-1">
                        <h5 class="card-title text-white text-primary-light
                             text-lg mb-6">This is Card title</h5>
                        <p class="card-text text-white">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all</p>
                        <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                            Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4 col-sm-6">
            <div class="card h-100 radius-12 p-0 overflow-hidden position-relative">
                <div class="card-body p-0 gradient-overlay top-0 start-0">
                    <img src="<?php echo e(asset('assets/images/card-component/card-overlay-img1.png')); ?>" alt="" class="w-100 h-100">
                    <div class="position-absolute start-0 top-0 p-24 z-1 text-center">
                        <h5 class="card-title text-white text-primary-light
                             text-lg mb-6">This is Card title</h5>
                        <p class="card-text text-white">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all</p>
                        <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                            Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xxl-4 col-sm-6">
            <div class="card h-100 radius-12 p-0 overflow-hidden position-relative">
                <div class="card-body p-0 gradient-overlay bottom-0 start-0">
                    <img src="<?php echo e(asset('assets/images/card-component/card-overlay-img1.png')); ?>" alt="" class="w-100 h-100">
                    <div class="position-absolute start-0 bottom-0 p-24 z-1 text-end">
                        <h5 class="card-title text-white text-primary-light
                             text-lg mb-6">This is Card title</h5>
                        <p class="card-text text-white">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all</p>
                        <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                            Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mb-40">
    <h6 class="mb-24">Card Header & Footer</h6>
    <div class="row gy-4">
        <div class="col-xxl-4 col-sm-6">
            <div class="card radius-12 h-100">
                <div class="card-header py-16 px-24 bg-base d-flex align-items-center gap-1 justify-content-between border border-end-0 border-start-0 border-top-0">
                    <h6 class="text-lg mb-0">Hi, Will Mart</h6>
                    <button type="button" class="text-xl line-height-1">
                        <iconify-icon icon="mdi:times" class="text-xl"></iconify-icon>
                    </button>
                </div>
                <div class="card-body py-16 px-24">
                    <h6 class="card-title text-primary-light mb-8 text-lg">How to learn UI /UX Design</h6>
                    <p class="card-text text-neutral-600 mb-0">Intrinsically incubate intuitive opportunities and real-time potentialities for change for interoperable meta-itself
                        the viewer's attention from the layout</p>
                </div>
                <div class="card-footer text-center bg-transparent border border-end-0 border-start-0 border-bottom-0 py-16 px-24">
                    <a href="javascript:void(0)" class="text-primary-600">View All</a>
                </div>
            </div>
        </div>
        <div class="col-xxl-4 col-sm-6">
            <div class="card radius-12 h-100">
                <div class="card-body py-16 px-24">
                    <div class="d-flex align-items-center gap-2 mb-12">
                        <iconify-icon icon="typcn:user-add" class="text-xxl"></iconify-icon>
                        <h6 class="text-lg mb-0">How to learn UI /UX Design</h6>
                    </div>
                    <p class="card-text text-neutral-600 mb-16">Intrinsically incubate intuitive opportunities and real-time potentialities for change for interoperable meta-itself the viewer's attention from the layout</p>
                    <p class="card-text text-neutral-600 mb-0">Intrinsically incubate intuitive opportunities and real-time potentialities for change for interoperable </p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-0 d-inline-flex align-items-center gap-2 mt-16">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-4 col-sm-6">
            <div class="card radius-12 h-100">
                <div class="card-header py-16 px-24 bg-base d-flex align-items-center gap-1 justify-content-between border border-end-0 border-start-0 border-top-0">
                    <div>
                        <h6 class="text-lg mb-0">How can i help your</h6>
                        <span class="text-sm">Awesome Support</span>
                    </div>
                    <a href="javascript:void(0)" class="text-primary-600">View All</a>
                </div>
                <div class="card-body py-16 px-24">
                    <p class="card-text text-neutral-600 mb-16">Intrinsically incubate intuitive opportunities and real-time potentialities for change for interoperable meta-itself the viewer's attention from the layout</p>
                    <p class="card-text text-neutral-600 mb-0">Intrinsically incubate intuitive opportunities and real-time potentialities for change for interoperable </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mb-40">
    <h6 class="mb-24">Horizontal Card</h6>
    <div class="row gy-4">
        <div class="col-xl-6">
            <div class="card radius-12 overflow-hidden h-100 d-flex align-items-center flex-nowrap flex-row">
                <div class="d-flex flex-shrink-0 w-170-px h-100">
                    <img src="<?php echo e(asset('assets/images/card-component/horizontal-card-img1.png')); ?>" class="h-100 w-100 object-fit-cover" alt="">
                </div>
                <div class="card-body p-16 flex-grow-1">
                    <h5 class="card-title text-lg text-primary-light mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600 mb-16">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary p-0 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card radius-12 overflow-hidden h-100 d-flex align-items-center flex-nowrap flex-row flex-row-reverse">
                <div class="d-flex flex-shrink-0 w-170-px h-100">
                    <img src="<?php echo e(asset('assets/images/card-component/horizontal-card-img2.png')); ?>" class="h-100 w-100 object-fit-cover" alt="">
                </div>
                <div class="card-body p-16 flex-grow-1">
                    <h5 class="card-title text-lg text-primary-light mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600 mb-16">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary p-0 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card radius-12 overflow-hidden h-100 d-flex align-items-center flex-nowrap flex-row">
                <div class="d-flex flex-shrink-0 w-170-px h-100">
                    <img src="<?php echo e(asset('assets/images/card-component/horizontal-card-img3.png')); ?>" class="h-100 w-100 object-fit-cover" alt="">
                </div>
                <div class="card-body p-16 flex-grow-1">
                    <h5 class="card-title text-lg text-primary-light mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600 mb-16">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary p-0 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card radius-12 overflow-hidden h-100 d-flex align-items-center flex-nowrap flex-row flex-row-reverse">
                <div class="d-flex flex-shrink-0 w-170-px h-100">
                    <img src="<?php echo e(asset('assets/images/card-component/horizontal-card-img4.png')); ?>" class="h-100 w-100 object-fit-cover" alt="">
                </div>
                <div class="card-body p-16 flex-grow-1">
                    <h5 class="card-title text-lg text-primary-light mb-6">This is Card title</h5>
                    <p class="card-text text-neutral-600 mb-16">We quickly learn to fear and thus automatically avo id potentially stressful situations of all kinds, including the most common of all .</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary p-0 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="">
    <h6 class="mb-24">Card With Background Color</h6>
    <div class="row gy-4">
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 bg-gradient-purple">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-lilac-600 text-white mb-16 radius-12">
                        <iconify-icon icon="solar:medal-ribbons-star-bold" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Brand Identity</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-lilac-600 hover-text-lilac px-0 py-0 mt-16 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 bg-gradient-primary text-center">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-primary-600 text-white mb-16 radius-12">
                        <iconify-icon icon="ri:computer-fill" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">UI/UX Designer</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-primary-600 hover-text-primary px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 bg-gradient-success text-end">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-success-600 text-white mb-16 radius-12">
                        <iconify-icon icon="fluent:toolbox-20-filled" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Business Strategy</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-success-600 hover-text-success px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-sm-6">
            <div class="card h-100 radius-12 bg-gradient-danger text-center">
                <div class="card-body p-24">
                    <div class="w-64-px h-64-px d-inline-flex align-items-center justify-content-center bg-danger-600 text-white mb-16 radius-12">
                        <iconify-icon icon="ph:code-fill" class="h5 mb-0"></iconify-icon>
                    </div>
                    <h6 class="mb-8">Business Strategy</h6>
                    <p class="card-text mb-8 text-secondary-light">Random Text gateway to the Origin al the Works Platform, & your unique block chain gateway identity.</p>
                    <a href="javascript:void(0)" class="btn text-danger-600 hover-text-danger px-0 py-10 d-inline-flex align-items-center gap-2">
                        Read More <iconify-icon icon="iconamoon:arrow-right-2" class="text-xl"></iconify-icon>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layout.layout2', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Laravel\wowdash\resources\views/componentspage/card.blade.php ENDPATH**/ ?>