@extends('frontend.app')
@push('css')
<style>	

  /* about-content content-right.h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, address, p, pre, blockquote, menu, ol, ul, table, hr{
    margin-bottom: 9px !important;
  }
  
  	.axil-about-area .about-content.content-right {
 	   padding-left: 0px !important; 
      
	}
  
    .axil-about-area .about-content p {
      font-size:16px !important;
      color:#000
  	} */
/* about us */
/* ===== About Us Page Custom Styles ===== */

/* Hero Background Gradient */



/* Orange Button */
.btn-orange {
  background: linear-gradient(135deg, #fd8923 0%, #dc6c09 100%);
  border: none;
color: #ffffff;
  padding: 12px 32px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(253, 137, 35, 0.3);
}

.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(253, 137, 35, 0.4);
  color: #ffffff;
}

/* Outline Button */
.btn-outline-light-custom {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 12px 32px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-outline-light-custom:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Team Member Card */
.team-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  border: 1px solid #e5e7eb;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: #fd8923;
}

.team-card .card-img-top {
  height: 450px;
  object-fit: cover;
  transition: transform 0.4s ease;
  object-position: top;
}

.team-card:hover .card-img-top {
  transform: scale(1.05);
}

.team-card .card-img-wrapper {
  overflow: hidden;
  position: relative;
}

.team-card .card-img-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #fd8923 0%, #dc6c09 100%);
}

.team-card .card-body {
  padding: 24px;
  text-align: center;
}

.team-card .card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.team-card .role-badge {
  display: inline-block;
  color: #fd8923;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.team-card .card-text {
  color: #6b7280;
  line-height: 1.7;
}

/* Value Card */
.value-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.value-card:hover {
  transform: translateY(-8px);
}

.value-card .icon-wrapper {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #fd8923 0%, #dc6c09 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.value-card .icon-wrapper svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.value-card h5 {
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.value-card p {
  color: #6b7280;
  font-size: 0.9rem;
  margin: 0;
}

/* Section Icon */
.section-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #fd8923 0%, #dc6c09 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-icon svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

/* Stats */
.stat-value {
  font-size: 3rem;
  font-weight: 700;
  color: #fd8923;
}

.stat-label {
  color: #6b7280;
}

/* Badge */
.badge-orange {
  background: rgba(253, 137, 35, 0.2);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Social Icons */
.social-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-3px);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animation-delay-1 {
  animation-delay: 0.1s;
}

.animation-delay-2 {
  animation-delay: 0.2s;
}

.animation-delay-3 {
  animation-delay: 0.3s;
}

.animation-delay-4 {
  animation-delay: 0.4s;
}

/* Decorative Elements */
.decorative-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
}

.decorative-circle.circle-1 {
  width: 300px;
  height: 300px;
  background: #fd8923;
  top: -100px;
  right: -100px;
}

.decorative-circle.circle-2 {
  width: 400px;
  height: 400px;
  background: hsl(280, 60%, 40%);
  bottom: -150px;
  left: -150px;
}

/* Responsive */
@media (max-width: 768px) {
  .stat-value {
    font-size: 2rem;
  }
  
  .team-card .card-img-top {
    height: 400px;
  }
}



</style>
@endpush
@section('content')
<main class="main-wrapper">
        <!-- Start Breadcrumb Area  -->
        <div class="axil-breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="inner">
                            <ul class="axil-breadcrumb">
                                <li class="axil-breadcrumb-item"><a href="{{ route('front.home')}}">Home</a></li>
                                <li class="separator"></li>
                                <li class="axil-breadcrumb-item active" aria-current="page">{{ $page->title ?? 'About Us' }} </li>
                            </ul>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Breadcrumb Area  -->

        <!-- Start About Area  -->
        <!-- <div class="axil-about-area about-style-1" style="background-color:#f8f8f8;">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-12 col-lg-12">
                        <div class="about-content content-right pt-3">
                            <h2 class="text-center m-1">{{ $page?$page->title:''}}</h2>
                            <!-- {!! $page ? $page->body : '' !!} -->
                        <!-- </div>
                    </div>
                </div>
            </div>
        </div>  -->
      

    <section class="hero-bg py-5 position-relative overflow-hidden text-white">
        <div class="decorative-circle circle-1 animate-float"></div>
        <div class="decorative-circle circle-2 animate-float" style="animation-delay: 1s;"></div>
        
        <div class="container py-5 position-relative" style="z-index: 10; color:white;">
            <div class="text-center">
                <span class="badge-orange mb-4 d-inline-block animate-fade-in-up">
                    🚀 নতুন যাত্রা শুরু!
                </span>
                <h1 class="display-4 fw-bold mb-4 text-white animate-fade-in-up">আমাদের <span class="text-orange">সম্পর্কে</span></h1>
                <p class="lead mb-0 text-white mx-auto animate-fade-in-up" style="max-width: 800px; opacity: 0.9;">
                   আমরা শুধু পণ্য সরবরাহ করি না, বরং প্রতিটি পণ্যের গুণগত মান (Quality Control) কঠোরভাবে যাচাই করি। গ্লোবাল মার্কেটের ট্রেন্ডি এবং ইউনিক পণ্যগুলো বাংলাদেশি গ্রাহকদের জীবনযাত্রার অংশ করে তোলাই আমাদের লক্ষ্য। স্বচ্ছতা, দ্রুত ডেলিভারি এবং নিরবচ্ছিন্ন কাস্টমার সাপোর্ট—এই তিন মূলনীতির ওপর ভিত্তি করেই অলিভিও এগিয়ে চলছে।
                </p>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container py-4">
            <div class="row g-5">
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="section-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg></div>
                        <h2 class="h3 fw-bold mb-0">আমাদের লক্ষ্য</h2>
                    </div>
                    <p class="text-muted fs-5 lh-lg">
                        আমাদের লক্ষ্য হলো বাংলাদেশের প্রতিটি ঘরে মানসম্মত পণ্য সাশ্রয়ী মূল্যে পৌঁছে দেওয়া। আমরা বিশ্বাস করি, প্রতিটি মানুষ সেরা মানের পণ্য পাওয়ার যোগ্য।
                    </p>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <div class="section-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div>
                        <h2 class="h3 fw-bold mb-0">আমাদের যাত্রা</h2>
                    </div>
                    <p class="text-muted fs-5 lh-lg">
                        আমরা শুরু করেছি একটি সাধারণ স্বপ্ন নিয়ে - অনলাইন শপিংকে সবার জন্য সহজ ও নিরাপদ করা। আপনাদের সাপোর্ট আমাদের অনুপ্রেরণা।
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container py-4">
            <div class="text-center mb-5">
                <div class="section-icon mx-auto mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>
                <h2 class="display-6 fw-bold mb-3">আমাদের ফাউন্ডার্স</h2>
            </div>
            
            <div class="row g-4 justify-content-center">
                <div class="col-md-6 col-lg-5">
                    <div class="team-card h-100">
                        <div class="card-img-wrapper">
                            <img src="{{ asset('aboutus/rasel.webp') }}" alt="রাসেল" class="card-img-top">
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">রাসেল</h3>
                            <span class="role-badge">ফাউন্ডার ও ডেভেলপার</span>
                            <p class="card-text">রাসেল অলিভিওর প্রতিষ্ঠাতা ও প্রধান ডেভেলপার। সফটওয়্যার ডেভেলপমেন্টে তার দক্ষতা ও অভিজ্ঞতার ভিত্তিতে তিনি অলিভিওর পুরো টেকনিক্যাল প্ল্যাটফর্ম পরিকল্পনা, ডিজাইন, ডেভেলপমেন্ট ও পরিচালনা করেন। পাশাপাশি তিনি ব্যবসার মেটা অ্যাডস স্ট্র্যাটেজি, ক্যাম্পেইন সেটআপ ও অপ্টিমাইজেশনও পরিচালনা করেন।</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-5">
                    <div class="team-card h-100">
                        <div class="card-img-wrapper">
                            <img src="{{ asset('aboutus/shakil.webp') }}" alt="শাকিল" class="card-img-top">
                        </div>
                        <div class="card-body">
                            <h3 class="card-title">শাকিল</h3>
                            <span class="role-badge">ফাউন্ডার ও এডিটর</span>
                            <p class="card-text">অলিভিওর প্রতিষ্ঠাতা এবং প্রধান কন্টেন্ট এডিটর। তিনি কন্টেন্ট ক্রিয়েশন, ভিডিও এডিটিং এবং সোশ্যাল মিডিয়ায় পোস্টিংসহ সব ধরনের কন্টেন্ট অপারেশন পরিচালনা করেন। প্রতিটি পণ্যের তথ্য সঠিকভাবে উপস্থাপন করে এবং ব্র্যান্ড ভয়েস বজায় রাখেন।</p>

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

    <section class="hero-bg py-5 text-white">
        <div class="container py-4">
            <h2 class="display-6 fw-bold text-center text-white mb-5">আমাদের মূল্যবোধ</h2>
            <div class="row g-4">
                <div class="col-sm-6 col-lg-3">
                    <div class="value-card">
                        <div class="icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg></div>
                        <h5>গ্রাহক সন্তুষ্টি</h5>
                        <p>আমাদের গ্রাহকদের সন্তুষ্টি আমাদের সর্বোচ্চ অগ্রাধিকার</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="value-card">
                        <div class="icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg></div>
                        <h5>বিশ্বস্ততা</h5>
                        <p>প্রতিটি লেনদেনে সততা ও স্বচ্ছতা বজায় রাখি</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="value-card">
                        <div class="icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"></path><path d="M15 18H9"></path><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"></path><circle cx="17" cy="18" r="2"></circle><circle cx="7" cy="18" r="2"></circle></svg></div>
                        <h5>দ্রুত ডেলিভারি</h5>
                        <p>সারা বাংলাদেশে দ্রুত ও নিরাপদ ডেলিভারি</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <div class="value-card">
                        <div class="icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-award"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div>
                        <h5>মানসম্মত পণ্য</h5>
                        <p>শুধুমাত্র সেরা মানের পণ্য সরবরাহ করি</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container py-4">
            <div class="row g-4 text-center">
                <div class="col-6 col-md-3">
                    <div class="stat-value">১০০%</div>
                    <div class="stat-label">বিশ্বাস গ্যারান্টি</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-value">২৪/৭</div>
                    <div class="stat-label">সাপোর্ট</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-value">নতুন</div>
                    <div class="stat-label">যাত্রা শুরু</div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="stat-value">∞</div>
                    <div class="stat-label">স্বপ্ন ও উদ্যম</div>
                </div>
            </div>
        </div>
    </section>
    </main>
@endsection