관리-도구

편집 파일: index.blade.php

@extends('layouts.apps')
@section('content')
        
        <section class="rs-banner-area rs-banner-eight p-relative"
            style="background: linear-gradient(135deg, #fef6ff, #f0faff); padding: 160px 0;">
            <div class="container">
                <div class="row g-5 align-items-center">
                    
                    <div class="col-xxl-7 col-xl-6 col-lg-6">
                        <div class="rs-banner-content-wrapper">
                            <div class="rs-banner-content">
                                <span class="rs-banner-subtitle wow fadeInUp" data-wow-delay=".3s"
                                    data-wow-duration=".7s"
                                    style="text-transform: capitalize; font-size: 26px; color: #ff4d6d; font-weight: 600;">
                                    Hi, I'm
                                </span>

<h1 class="rs-banner-title wow fadeInUp" style="font-family: 'Playfair Display', serif;"
                                    data-wow-delay=".5s" data-wow-duration=".9s"
                                    style="font-size: 60px; font-weight: 700; color: #1f1f1f; line-height: 1.2;">
                                    Dr. Ashna P A
                                </h1>
                                <h6>The Dentalpreneur</h6>

<div class="rs-banner-description wow fadeInUp" data-wow-delay=".7s"
                                    data-wow-duration="1.1s">
                                    <div style="font-size: 24px; color: #ff4d6d; font-weight: 600; margin-top: 10px;">
                                        <p style="font-family: 'Playfair Display', serif;">
                                            Guiding You to a Healthier Tomorrow with Expert Care, Innovation &
                                            Compassion.
                                            Inspiring Excellence in Healthcare & Beyond with Dr. Ashna P.A. <br>Expertise in
                                            <span id="fade-text" class="fade-text"
                                                style="color: #ff4d6d;">Dentistry</span>
                                        </p>
                                    </div>

.fade-out {
                                            opacity: 0;
                                        }
                                    </style>
                                </div>
                                
                                <script>
                                    document.addEventListener('DOMContentLoaded', function () {
                                        const words = ["Dentistry", "Leadership", "Innovation", "Entrepreneurship"];
                                        let current = 0;
                                        const el = document.getElementById("fade-text");

setInterval(() => {
                                            // Fade out
                                            el.classList.add("fade-out");

setTimeout(() => {
                                                // Change text and fade back in
                                                current = (current + 1) % words.length;
                                                el.textContent = words[current];
                                                el.classList.remove("fade-out");
                                            }, 500); // Time to stay invisible
                                        }, 2000); // Total duration per word
                                    });
                                </script>

<div class="rs-banner-social mt-4 wow fadeInUp" data-wow-delay="1.3s"
                                    data-wow-duration="1.5s">
                                    <div class="rs-theme-social">
                                        <a href="https://www.facebook.com/dr.ashnahaneesh" target="_blank"><i
                                                class="ri-facebook-fill"
                                                style="color: #4267B2; font-size: 28px;"></i></a>
                                        <a href="https://www.linkedin.com/in/dr-ashna-p-a-021a3419" target="_blank">
                                            <i class="ri-linkedin-fill"
                                                style="color: #0077B5; font-size: 28px;"></i></a>
                                        <a href="https://www.instagram.com/ashnahaneesh" target="_blank"><i
                                                class="ri-instagram-line"
                                                style="color: #E4405F; font-size: 28px;"></i></a>
                                        <a href="mailto:dr.ashnahaneesh@gmail.com" target="_blank">
                                            <i class="fas fa-envelope" style="color: #f05a39; font-size: 28px;"></i>
                                        </a>
                                        <a href="tel:+91 9446504263" target="_blank">
                                            <i class="fas fa-phone" style="color: green; font-size: 28px;"></i>
                                        </a>

</div>
                                </div>
                            </div>
                        </div>
<div class="jury-note mobile-mb">
    <ul style="padding-left: 20px; margin: 0;">
        <li><strong>IIM Bangalore Alumni.</strong></li>
        <li><strong>Served as a jury member at the Indian Startup League in Calicut.</strong></li>
        <li><strong>Josh Talk Speaker.</strong></li>
    </ul>
</div>
<div class="jury-note mobile-mb">
   
</div>

@media (min-width: 768px) {
    .mobile-mb {
        margin-top: 3rem;
        margin-bottom: 3rem;
        color: #ff4d6d;
    }
}

</style>
                    </div>

<div style="
    aspect-ratio: 1 / 1;
    width: min(100%, 500px);
    max-width: 100%;
    padding: 14px;
    border-radius: 50%;
    background: conic-gradient(from 180deg at 50% 50%, #e5d4ff, #5b189a, #e5d4ff);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px rgba(91, 24, 154, 0.3);
    margin: 0 auto;
">
                        <img src="assets/images/ash.png" alt="Dr. Ashna Haneesh" style="
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 12px solid white;
        ">
                    </div>
                    <style>
                        @media (max-width: 768px) {
                            .circle-image-wrapper {
                                width: 90vw;
                                padding-top: 90vw;
                                margin-top: 90px;
                                position: relative;
                            }

.circle-image-wrapper img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    </style>
                </div>
            </div>
        </section>

<section class="rs-education-background" style="background-color: #f9f9f9; padding: 60px 0;">
            <div class="container-fluid" style="max-width: 1600px;">
                
                <div class="row mb-5">
                    <div class="col-12 text-center wow fadeInDown" data-wow-delay=".1s">
                        <h2 class="fw-bold" style="font-size: 4rem;">Educational Background</h2>
                    </div>
                </div>

<div class="row align-items-center g-5">
                    
                    <div class="col-md-4 text-center wow fadeInLeft" data-wow-delay=".2s">
                        <h1 style="font-size: 10rem; color: #f77dab; font-weight: bold; line-height: 1;">
                            16<span style="color: #faa7ec;">+</span>
                        </h1>
                        <p class="mt-4" style="font-size: 1.8rem; font-weight: 600;">YEARS OF EXPERIENCE</p>
                    </div>

<div class="col-md-4 text-center wow zoomIn" data-wow-delay=".4s">
                        <div class="float-img-wrapper"
                            style="width: 360px; height: 360px; overflow: hidden; border-radius: 50px; margin: 0 auto;">
                            <img src="assets/images/banner/education.png" alt="Dr. Ashna"
                                style="width: 100%; height: 100%; object-fit: cover;" class="floating-image">
                        </div>
                    </div>

<div class="col-md-4 wow fadeInRight" data-wow-delay=".6s">
                        <div class="mb-5">
                            <strong style="font-size: 1.8rem;">BDS, MDS: Amrita School of Dentistry Kochi</strong><br>
                            <small class="text-muted" style="font-size: 1.2rem;">(16+ Years of experience)</small>
                        </div>
                        <div class="mb-5">
                            <strong style="font-size: 1.8rem;">Fellowship in Entrepreneurship</strong><br>
                            <small class="text-muted" style="font-size: 1.2rem;">with scholarship from reputed IIM
                                Bangalore</small>
                        </div>
                        <div>
                            <strong style="font-size: 1.8rem;">Fellowship in Finance</strong><br>
                            <small class="text-muted" style="font-size: 1.2rem;">IIM Bangalore</small>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<style>
            @keyframes floatY {
                0% {
                    transform: translateY(0);
                }

50% {
                    transform: translateY(-10px);
                }

100% {
                    transform: translateY(0);
                }
            }

.floating-image {
                animation: floatY 4s ease-in-out infinite;
            }
        </style>

<div class="col-lg-7 wow fadeInRight" data-wow-delay=".4s">
                        <div class="d-flex align-items-center mb-5">
                            <div class="icon-circle me-3">
                                <img src="https://cdn-icons-png.flaticon.com/512/1828/1828884.png" width="36"
                                    alt="medal">
                            </div>
                            <h2 class="fw-bold mb-0 accolade-title" style="margin-top:20px;">Accolades</h2>
                        </div>

<div class="row gy-4">
                            @foreach ($accolades as $accolade)
                            <div class="col-md-12">
                                <div class="accolade-item">
                                    <div class="accolade-icon animate-icon">🏆</div>
                                    <div class="accolade-text">
                                        <strong>{{$accolade->award}}</strong><br>
                                        <span>{{$accolade->presentedby}}</span>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

<div class="dot-pattern"></div>
        </section>

/* Accolades Section */
            .accolade-img-wrapper {
                padding: 15px;
                background: linear-gradient(to right, #faa7ec, #91d2ff);
                border-radius: 50px;
                display: inline-block;
                transform: rotate(45deg);
                transition: transform 0.4s ease;
            }

.accolade-img-wrapper:hover {
                transform: rotate(45deg) scale(1.05);
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
            }

.img-border {
                overflow: hidden;
                border-radius: 40px;
                width: 320px;
                height: 320px;
            }

.accolade-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: rotate(-45deg);
            }

/* Heading Style */
            .accolade-title {
                font-size: 3.5rem;
                position: relative;
                display: inline-block;
                color: #222;
            }

.accolade-title::after {
                content: "";
                width: 60%;
                height: 4px;
                background-color: #faa7ec;
                position: absolute;
                left: 0;
                bottom: -10px;
                transition: width 0.4s ease;
            }

.accolade-title:hover::after {
                width: 100%;
            }

/* Icon Circle */
            .icon-circle {
                background: linear-gradient(to right, #ffd6e0, #b4d4ff);
                border-radius: 50%;
                padding: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

/* Accolade Items */
            .accolade-item {
                background: #fff;
                border-radius: 20px;
                padding: 20px 30px;
                display: flex;
                align-items: flex-start;
                gap: 20px;
                border-left: 5px solid #faa7ec;
                transition: all 0.3s ease;
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
            }

.accolade-item:hover {
                background-color: #fff5fc;
                transform: translateY(-5px);
                box-shadow: 0 12px 25px rgba(250, 167, 236, 0.3);
            }

/* Trophy Icon */
            .accolade-icon {
                font-size: 2rem;
                color: #f77dab;
            }

.animate-icon {
                animation: bounce 1.6s infinite;
            }

/* Text */
            .accolade-text strong {
                font-size: 1.6rem;
                color: #111;
            }

.accolade-text span {
                font-size: 1.2rem;
                color: #777;
            }

/* Animation */
            @keyframes bounce {

0%,
                100% {
                    transform: translateY(0);
                }

50% {
                    transform: translateY(-6px);
                }
            }
        </style>

<section class="rs-about-area rs-about-eight py-5"
            style="background: linear-gradient(135deg, #fff0f5, #e6f7ff);">
            <div class="container">
                <div class="row g-5 align-items-center">
                    
                    <div class="col-xxl-6 col-xl-5 col-lg-5 text-center">
                        <div class="rs-about-thumb wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="1s">
                            <img src="assets/images/banner/family.jpg" alt="Family"
                                class="img-fluid rounded-4 shadow-lg" style="max-width: 100%; height: auto;">
                        </div>
                    </div>

<div class="col-xxl-6 col-xl-7 col-lg-7">
                        <div class="rs-about-content wow fadeInRight" data-wow-delay=".3s" data-wow-duration="1s">
                            <div class="rs-section-title-wrapper section-title-space">
                                <h2 class="rs-section-title mb-4 fw-bold" style="font-size: 36px; color: #2a2a72;">
                                    Family</h2>
                                <p class="rs-section-paragraph" style="font-size: 18px; line-height: 1.8; color: #333;">
                                    My husband <strong style="color: #007bff;">Dr. Haneesh M</strong> is an <strong>ENT
                                        surgeon</strong>
                                    <br>(Immediate Past President of IMA Cochin, Nodal Officer at Airport & Seaport
                                    during COVID, Awarded Best Doctor).
                                    <br><br>
                                    We are blessed with <strong>triplets</strong> – <em>Ahsan, Halah, Haniah</em> – and
                                    our youngest, Hessah</em>.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section class="rs-servcies-area section-space rs-services-eight secondary-bg"
            style="background-color: #f9f9f9;">
            <div class="container">
                
                <div class="row justify-content-center">
                    <div class="col-xl-6 col-lg-8">

</div>
                </div>

<div class="row g-4">
                    @foreach ($trainers as $trainer)
                    
                    
                    
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="gradient-card-light text-center p-4 rounded-4 shadow-sm h-100">
                            <h5 class="fw-bold mb-3">{{ $trainer->title }}</h5>
                            <p class="mb-0">
                               {{ $trainer->description }}
                            </p>
                        </div>
                    </div>
                    @endforeach

</div>
            </div>
        </section>

<style>
            .gradient-card-light {
                background: linear-gradient(135deg, #ffe8ec, #e6e9ff);
                /* Lightened from original */
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                border: 1px solid #eee;
            }

.gradient-card-light:hover {
                transform: translateY(-6px);
                box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
            }

.gradient-card-light h5 {
                color: #000;
                font-size: 18px;
            }

.gradient-card-light p {
                color: #333;
                font-size: 15px;
                line-height: 1.6;
            }
        </style>

<section class="leadership-section"
            style="background: linear-gradient(135deg, #ffe8ec, #e6e9ff); padding: 60px 0; color: #000;">
            <div class="container">

<ul style="font-size: 16px; line-height: 1.8; color: #444;">
                                <li>Featured in newspapers (The Hindu, Madhyamam), various television programs
                                    (Reporter, Mathrubhumi, 24*7), etc.</li>
                                <li>Member of CII</li>
                                <li>Member of Indian Dental Association and Indian Prosthodontic Society</li>
                            </ul>

<h3
                                style="font-size: 26px; margin: 30px 0 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; color: #222;">
                                Leadership</h3>
                            <ul style="font-size: 16px; line-height: 1.8; color: #444;">
                                <li>Executive Member of WINGS (Women’s Initiative for Nurturing Growth of Society)</li>
                                <li>Former Executive Member of WEN (Women Entrepreneurs Network) for 2 years</li>
                                <li>Founder President of BNI Hallmark chapter (Cochin), Launch Ambassador for BNI GEMS
                                    chapter</li>
                                <li>Speaker for entrepreneurship in various colleges in association with IEDC</li>
                            </ul>

<h3
                                style="font-size: 26px; margin: 30px 0 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; color: #222;">
                                Networking Groups</h3>
                            <ul style="font-size: 16px; line-height: 1.8; color: #444;">
                                <li>Indian Dental Association, IDA KOCHI member</li>
                                <li>IPS, Indian Prosthodontic Society member</li>
                                <li>Colead: Health panel, IWN CII</li>
                                <li>Fitness Cell Coordinator, WINGS</li>
                            </ul>
                        </div>
                    </div>

<div class="col-lg-6 mb-4">
                        <div class="image-card">
                            <img src="assets/images/banner/leadership.png" alt="Leadership & Networking Highlights"
                                class="img-fluid rounded-4 shadow"
                                style="border: 6px solid #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.15);">
                        </div>
                    </div>
                </div>
            </div>
        </section>

<div class="row g-4">
                    @foreach ($blog as $blogs)
                    
                    <div class="col-lg-4 col-md-6">
                        <div class="blog-card">
                        <small class="date">{{ \Carbon\Carbon::parse($blogs->date)->format('F j, Y') }}</small>
                            <h4 class="title">{{ $blogs->blog }}</h4>
                            <a href="{{ route('blog-details', ['id' => $blogs->id]) }}" class="read-more">Read More →</a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </section>

.blog-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            }

.blog-card .date {
                font-size: 14px;
                color: #6c757d;
                margin-bottom: 12px;
                display: block;
            }

.blog-card .title {
                font-size: 18px;
                font-weight: 700;
                color: #222;
                margin-bottom: 20px;
                line-height: 1.4;
            }

.blog-card .read-more {
                font-size: 14px;
                color: #f35b51;
                text-decoration: none;
                font-weight: 600;
            }

.blog-card .read-more:hover {
                text-decoration: underline;
            }

.blog-section-title {
                font-size: 36px;
                font-weight: 700;
                color: #1f1f1f;
                margin-bottom: 10px;
            }
        </style>
<style type="text/css">
    .containerss {
        position: relative;
        width: 100%;
        min-height: 450px;
        background-color: #f5f5f5;
    }

.containerss .contents-wraperss {
        width: 70%;
        min-height: inherit;
        margin: 30px auto;
        text-align: center;
    }

.contents-wraperss .header h1 {
        position: relative;
        font-size: 40px;
        text-transform: uppercase;
        font-weight: 500;
        text-align: center;
        letter-spacing: 1px;
    }

.contents-wraperss .header h1::before {
        content: '';
        width: 200px;
        height: 2px;
        background-color: #006994;
        border-radius: 15px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
    }

.contents-wraperss .testRow {
        width: 100%;
        min-height: inherit;
        position: relative;
        overflow: hidden;
    }

.testRow .testItem {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

.testRow .testItem:not(.active) {
        top: 0;
        left: -100%;
    }

.testRow .testItem img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 5px;
        outline: 2px solid #006994;
        outline-offset: 2px;
    }

.testRow .testItem h3 {
        font-size: 30px;
        font-style: italic;
        padding: 7px;
    }

.testRow .testItem h4 {
        font-style: italic;
    }

.testRow .testItem p {
        font-size: 18px;
        letter-spacing: 1px;
        line-height: 1.2;
        padding: 10px;
    }

.contents-wraper .indicators {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        cursor: pointer;
    }

.contents-wraper .indicators .dot {
        width: 15px;
        height: 15px;
        margin: 0px 3px;
        border: 3px solid #aaa;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }

.contents-wraper .indicators .active {
        background-color: #006994;
    }

@keyframes next1 {
        from {
            left: 0%;
        }

to {
            left: -100%;
        }
    }

@keyframes next2 {
        from {
            left: 100%;
        }

to {
            left: 0%;
        }
    }

@keyframes prev1 {
        from {
            left: 0%;
        }

to {
            left: 100%;
        }
    }

@keyframes prev2 {
        from {
            left: -100%;
        }

to {
            left: 0%;
        }
    }

@media(max-width: 550px) {
        .containerss .contents-wraperss {
            width: 90%;
        }

.contents-wraperss .header h1 {
            font-size: 32px;
        }

.testRow .testItem h3 {
            font-size: 26px;
        }

.testRow .testItem p {
            font-size: 16px;
            letter-spacing: initial;
            line-height: initial;
        }
    }
</style>

<div class="video-testimonial-section"
    style="background: linear-gradient(135deg, #fff0f5, #e6f7ff); padding: 60px 0;">
    <div class="container text-center">
        <h2 style="font-size: 4.5rem; color: black; margin-bottom: 40px;">Testimonials</h2>

<div class="row justify-content-center g-4">
            
@foreach ($testimonials as $testimonial)
    <div class="col-md-4 col-lg-3">
        <div class="video-wrapper">
            @if($testimonial->video)
                <video width="100%" height="220" controls>
                    <source src="{{ asset($testimonial->video) }}" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            @else
                <p>No video available</p>
            @endif
            <div class="video-info">
                <h5>{{ $testimonial->name }}</h5>
                <p>{{ $testimonial->designation }}<br>
                    <span class="location">
                        <i class="fa-solid fa-location-dot"></i> {{ $testimonial->location }}
                    </span>
                </p>
            </div>
        </div>
    </div>
@endforeach

</div>
    </div>
</div>

// Access the testimonials
            let testSlide = document.querySelectorAll('.testItem');
            // Access the indicators
            let dots = document.querySelectorAll('.dot');

var counter = 0;

// Add click event to the indicators
            function switchTest(currentTest) {
                currentTest.classList.add('active');
                var testId = currentTest.getAttribute('attr');
                if (testId > counter) {
                    testSlide[counter].style.animation = 'next1 0.5s ease-in forwards';
                    counter = testId;
                    testSlide[counter].style.animation = 'next2 0.5s ease-in forwards';
                }
                else if (testId == counter) { return; }
                else {
                    testSlide[counter].style.animation = 'prev1 0.5s ease-in forwards';
                    counter = testId;
                    testSlide[counter].style.animation = 'prev2 0.5s ease-in forwards';
                }
                indicators();
            }

// Add and remove active class from the indicators
            function indicators() {
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(' active', '');
                }
                dots[counter].className += ' active';
            }

// Code for auto sliding
            function slideNext() {
                testSlide[counter].style.animation = 'next1 0.5s ease-in forwards';
                if (counter >= testSlide.length - 1) {
                    counter = 0;
                }
                else {
                    counter++;
                }
                testSlide[counter].style.animation = 'next2 0.5s ease-in forwards';
                indicators();
            }
            function autoSliding() {
                deleteInterval = setInterval(timer, 2000);
                function timer() {
                    slideNext();
                    indicators();
                }
            }
            autoSliding();

// Stop auto sliding when mouse is over the indicators
            const container = document.querySelector('.indicators');
            container.addEventListener('mouseover', pause);
            function pause() {
                clearInterval(deleteInterval);
            }

// Resume sliding when mouse is out of the indicators
            container.addEventListener('mouseout', autoSliding);

</script>

</main>

@endsection

Name	Size	Permissions	Action
📄 .htaccess	218 bytes
📁 755944	-
📄 index.php	33,708 bytes

관리-도구

편집 파일: index.blade.php

Sid Gifari File Manager