| <!DOCTYPE html>
|
| <html lang="en" class="dark">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <title>MultiDom RAG</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link
|
| rel="stylesheet"
|
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
| />
|
| <link rel="stylesheet" href="style.css" />
|
| <script>
|
| tailwind.config = {
|
| darkMode: "class",
|
| theme: {
|
| extend: {
|
| colors: {
|
| primary: {
|
| dark: "#579be8",
|
| light: "#3B82F6",
|
| },
|
| secondary: {
|
| dark: "#9F1239",
|
| light: "#EC4899",
|
| },
|
| accent: {
|
| dark: "#047857",
|
| light: "#10B981",
|
| },
|
| dark: {
|
| 900: "#0F172A",
|
| 800: "#1E293B",
|
| 700: "#334155",
|
| 600: "#475569",
|
| },
|
| },
|
| fontFamily: {
|
| sans: ["Inter", "sans-serif"],
|
| mono: ["Fira Code", "monospace"],
|
| },
|
| animation: {
|
| float: "float 6s ease-in-out infinite",
|
| "float-fast": "float 4s ease-in-out infinite",
|
| "spin-slow": "spin 10s linear infinite",
|
| "pulse-slow": "pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
| "bounce-slow": "bounce 3s infinite",
|
| wiggle: "wiggle 1s ease-in-out infinite",
|
| wave: "wave 2s linear infinite",
|
| blink: "blink 1.5s step-end infinite",
|
| },
|
| keyframes: {
|
| float: {
|
| "0%, 100%": { transform: "translateY(0)" },
|
| "50%": { transform: "translateY(-10px)" },
|
| },
|
| wiggle: {
|
| "0%, 100%": { transform: "rotate(-3deg)" },
|
| "50%": { transform: "rotate(3deg)" },
|
| },
|
| wave: {
|
| "0%": { transform: "rotate(0deg)" },
|
| "10%": { transform: "rotate(14deg)" },
|
| "20%": { transform: "rotate(-8deg)" },
|
| "30%": { transform: "rotate(14deg)" },
|
| "40%": { transform: "rotate(-4deg)" },
|
| "50%": { transform: "rotate(10deg)" },
|
| "60%": { transform: "rotate(0deg)" },
|
| "100%": { transform: "rotate(0deg)" },
|
| },
|
| blink: {
|
| "0%, 100%": { opacity: "1" },
|
| "50%": { opacity: "0" },
|
| },
|
| },
|
| },
|
| },
|
| };
|
| </script>
|
| <style>
|
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
|
|
|
| body {
|
| font-family: "Inter", sans-serif;
|
| transition: all 0.3s ease;
|
| scroll-behavior: smooth;
|
| }
|
|
|
| .gradient-bg {
|
| background: linear-gradient(
|
| 135deg,
|
| #1e40af 0%,
|
| #9f1239 50%,
|
| #047857 100%
|
| );
|
| }
|
|
|
| .card-hover {
|
| transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| }
|
|
|
| .card-hover:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
|
| 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .pulse-animation {
|
| animation: pulse 2s infinite;
|
| }
|
|
|
| @keyframes pulse {
|
| 0% {
|
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
|
| }
|
| 70% {
|
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
|
| }
|
| 100% {
|
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
|
| }
|
| }
|
|
|
| .chat-bubble {
|
| border-radius: 1.5rem;
|
| position: relative;
|
| }
|
|
|
| .chat-bubble:after {
|
| content: "";
|
| position: absolute;
|
| bottom: 0;
|
| left: 20%;
|
| width: 0;
|
| height: 0;
|
| border: 10px solid transparent;
|
| border-top-color: #3b82f6;
|
| border-bottom: 0;
|
| margin-left: -10px;
|
| margin-bottom: -10px;
|
| }
|
|
|
| .dark .chat-bubble:after {
|
| border-top-color: #1e40af;
|
| }
|
|
|
| .glow {
|
| filter: drop-shadow(0 0 8px currentColor);
|
| }
|
|
|
| .feature-icon {
|
| transition: all 0.3s ease;
|
| }
|
|
|
| .feature-card:hover .feature-icon {
|
| transform: scale(1.2) rotate(10deg);
|
| }
|
|
|
| .swarm-particle {
|
| position: absolute;
|
| border-radius: 50%;
|
| opacity: 0.7;
|
| animation: swarm-move 15s linear infinite;
|
| }
|
|
|
| @keyframes swarm-move {
|
| 0%,
|
| 100% {
|
| transform: translate(0, 0);
|
| }
|
| 25% {
|
| transform: translate(20px, 20px);
|
| }
|
| 50% {
|
| transform: translate(10px, -20px);
|
| }
|
| 75% {
|
| transform: translate(-20px, 10px);
|
| }
|
| }
|
|
|
| .typing-indicator {
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| }
|
|
|
| .typing-dot {
|
| width: 8px;
|
| height: 8px;
|
| margin: 0 2px;
|
| background-color: currentColor;
|
| border-radius: 50%;
|
| display: inline-block;
|
| animation: typing-dot 1.4s infinite ease-in-out;
|
| }
|
|
|
| .typing-dot:nth-child(1) {
|
| animation-delay: 0s;
|
| }
|
|
|
| .typing-dot:nth-child(2) {
|
| animation-delay: 0.2s;
|
| }
|
|
|
| .typing-dot:nth-child(3) {
|
| animation-delay: 0.4s;
|
| }
|
|
|
| @keyframes typing-dot {
|
| 0%,
|
| 60%,
|
| 100% {
|
| transform: translateY(0);
|
| }
|
| 30% {
|
| transform: translateY(-5px);
|
| }
|
| }
|
|
|
| .progress-bar {
|
| height: 4px;
|
| width: 0;
|
| background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
|
| transition: width 0.4s ease;
|
| }
|
|
|
| .scroll-indicator {
|
| position: fixed;
|
| bottom: 30px;
|
| right: 30px;
|
| width: 50px;
|
| height: 50px;
|
| border-radius: 50%;
|
| background-color: #3b82f6;
|
| color: white;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| cursor: pointer;
|
| opacity: 0;
|
| transform: translateY(20px);
|
| transition: all 0.3s ease;
|
| z-index: 999;
|
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| }
|
|
|
| .scroll-indicator.visible {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
|
|
| .scroll-indicator:hover {
|
| transform: translateY(-5px) scale(1.1);
|
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
|
| }
|
|
|
| .tooltip {
|
| position: relative;
|
| }
|
|
|
| .tooltip-text {
|
| visibility: hidden;
|
| width: 120px;
|
| background-color: #1e293b;
|
| color: #fff;
|
| text-align: center;
|
| border-radius: 6px;
|
| padding: 5px;
|
| position: absolute;
|
| z-index: 1;
|
| bottom: 125%;
|
| left: 50%;
|
| margin-left: -60px;
|
| opacity: 0;
|
| transition: opacity 0.3s;
|
| }
|
|
|
| .tooltip:hover .tooltip-text {
|
| visibility: visible;
|
| opacity: 1;
|
| }
|
|
|
| .parallax {
|
| background-attachment: fixed;
|
| background-position: center;
|
| background-repeat: no-repeat;
|
| background-size: cover;
|
| }
|
|
|
| .floating-label {
|
| position: relative;
|
| margin-bottom: 20px;
|
| }
|
|
|
| .floating-label input,
|
| .floating-label textarea {
|
| font-size: 16px;
|
| padding: 20px 16px 10px;
|
| display: block;
|
| width: 100%;
|
| border: 1px solid #cbd5e1;
|
| border-radius: 8px;
|
| background: #f8fafc;
|
| }
|
|
|
| .floating-label input:focus,
|
| .floating-label textarea:focus {
|
| outline: none;
|
| border-color: #3b82f6;
|
| }
|
|
|
| .floating-label label {
|
| color: #64748b;
|
| font-size: 16px;
|
| position: absolute;
|
| pointer-events: none;
|
| left: 16px;
|
| top: 16px;
|
| transition: 0.2s ease all;
|
| }
|
|
|
| .floating-label input:focus ~ label,
|
| .floating-label input:valid ~ label,
|
| .floating-label textarea:focus ~ label,
|
| .floating-label textarea:valid ~ label {
|
| top: 6px;
|
| font-size: 12px;
|
| color: #3b82f6;
|
| }
|
|
|
| .dark .floating-label input,
|
| .dark .floating-label textarea {
|
| background: #1e293b;
|
| border-color: #334155;
|
| color: #f8fafc;
|
| }
|
|
|
| .dark .floating-label label {
|
| color: #94a3b8;
|
| }
|
|
|
| .dark .floating-label input:focus ~ label,
|
| .dark .floating-label input:valid ~ label,
|
| .dark .floating-label textarea:focus ~ label,
|
| .dark .floating-label textarea:valid ~ label {
|
| color: #60a5fa;
|
| }
|
|
|
| .toggle-switch {
|
| position: relative;
|
| display: inline-block;
|
| width: 60px;
|
| height: 34px;
|
| }
|
|
|
| .toggle-switch input {
|
| opacity: 0;
|
| width: 0;
|
| height: 0;
|
| }
|
|
|
| .toggle-slider {
|
| position: absolute;
|
| cursor: pointer;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| background-color: #cbd5e1;
|
| transition: 0.4s;
|
| border-radius: 34px;
|
| }
|
|
|
| .toggle-slider:before {
|
| position: absolute;
|
| content: "";
|
| height: 26px;
|
| width: 26px;
|
| left: 4px;
|
| bottom: 4px;
|
| background-color: white;
|
| transition: 0.4s;
|
| border-radius: 50%;
|
| }
|
|
|
| input:checked + .toggle-slider {
|
| background-color: #3b82f6;
|
| }
|
|
|
| input:checked + .toggle-slider:before {
|
| transform: translateX(26px);
|
| }
|
|
|
| .ripple {
|
| position: relative;
|
| overflow: hidden;
|
| }
|
|
|
| .ripple-effect {
|
| position: absolute;
|
| border-radius: 50%;
|
| background-color: rgba(255, 255, 255, 0.4);
|
| transform: scale(0);
|
| animation: ripple 0.6s linear;
|
| pointer-events: none;
|
| }
|
|
|
| @keyframes ripple {
|
| to {
|
| transform: scale(4);
|
| opacity: 0;
|
| }
|
| }
|
|
|
| .scroll-progress {
|
| position: fixed;
|
| top: 0;
|
| left: 0;
|
| width: 0%;
|
| height: 4px;
|
| background: linear-gradient(90deg, #3b82f6, #ec4899, #10b981);
|
| z-index: 1000;
|
| transition: width 0.1s;
|
| }
|
|
|
| .confetti {
|
| position: fixed;
|
| width: 10px;
|
| height: 10px;
|
| background-color: #3b82f6;
|
| opacity: 0;
|
| z-index: 9999;
|
| animation: confetti-fall 5s linear forwards;
|
| }
|
|
|
| @keyframes confetti-fall {
|
| 0% {
|
| transform: translateY(-100px) rotate(0deg);
|
| opacity: 1;
|
| }
|
| 100% {
|
| transform: translateY(100vh) rotate(360deg);
|
| opacity: 0;
|
| }
|
| }
|
| .hero-slide {
|
| position: absolute;
|
| inset: 0;
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| opacity: 0;
|
| transition: opacity 1.5s ease-in-out;
|
|
|
| animation: kenBurns 15s ease-out forwards;
|
| }
|
|
|
| .hero-slide.active {
|
| opacity: 1;
|
| }
|
|
|
| @keyframes kenBurns {
|
| 0% {
|
| transform: scale(1.1);
|
| }
|
| 100% {
|
| transform: scale(1);
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body
|
| class="bg-gray-100 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen"
|
| >
|
|
|
| <div class="scroll-progress"></div>
|
|
|
|
|
| <nav class="bg-white dark:bg-dark-800 shadow-lg sticky top-0 z-50">
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| <div class="flex justify-between h-16 items-center relative">
|
| <div class="flex items-center">
|
| <i
|
| class="fa-solid fa-file-medical text-primary-light dark:text-primary-dark text-2xl mr-5"
|
| ></i>
|
| <span
|
| class="text-2xl font-bold text-primary-light dark:text-primary-dark"
|
| >MultiDom RAG</span
|
| >
|
| </div>
|
| <div class="hidden sm:flex flex-1 justify-center space-x-8">
|
| <a
|
| href="{{ url_for('homePage') }}"
|
| class="border-primary-light dark:border-primary-dark text-gray-900 dark:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
|
| >Home</a
|
| >
|
|
|
| <div class="relative group">
|
| <button
|
| class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
|
| >
|
| Demo
|
| <svg
|
| class="w-4 h-4 ml-1"
|
| fill="none"
|
| stroke="currentColor"
|
| viewBox="0 0 24 24"
|
| xmlns="http://www.w3.org/2000/svg"
|
| >
|
| <path
|
| stroke-linecap="round"
|
| stroke-linejoin="round"
|
| stroke-width="2"
|
| d="M19 9l-7 7-7-7"
|
| ></path>
|
| </svg>
|
| </button>
|
|
|
|
|
| <div
|
| class="absolute left-1/2 transform -translate-x-1/2 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-dark-700 ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out z-50"
|
| >
|
| <div class="py-1" role="menu" aria-orientation="vertical">
|
| <a
|
| href="{{ url_for('medical_page') }}"
|
| class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
|
| role="menuitem"
|
| >Medical</a
|
| >
|
| <a
|
| href="{{ url_for('islamic_page') }}"
|
| class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
|
| role="menuitem"
|
| >Islamic</a
|
| >
|
| <a
|
| href="{{ url_for('insurance_page') }}"
|
| class="block px-4 py-2 text-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
|
| role="menuitem"
|
| >Insurance</a
|
| >
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <a
|
| href="{{ url_for('about') }}"
|
| class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center px-1 pt-1 border-b-2 text-sm text-xl hover:animate-pulse"
|
| >About</a
|
| >
|
| </div>
|
|
|
| <div class="hidden sm:flex items-center space-x-4">
|
| <button
|
| id="theme-toggle"
|
| type="button"
|
| class="p-1 rounded-full text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-light dark:focus:ring-primary-dark ripple"
|
| >
|
| <i class="fas fa-moon dark:hidden"></i>
|
| <i class="fas fa-sun hidden dark:block"></i>
|
| </button>
|
| <button
|
| onclick="window.location.href = '{{ url_for('medical_page') }}'"
|
| class="ml-4 bg-primary-light dark:bg-primary-dark hover:bg-primary-dark dark:hover:bg-primary-light text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300 hover:scale-105 transform ripple"
|
| >
|
| Try Demo
|
| </button>
|
| </div>
|
| <div class="-mr-2 flex items-center sm:hidden">
|
| <button
|
| type="button"
|
| class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-light dark:focus:ring-primary-dark ripple"
|
| aria-controls="mobile-menu"
|
| aria-expanded="false"
|
| >
|
| <span class="sr-only">Open main menu</span>
|
| <i class="fas fa-bars"></i>
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
| </nav>
|
|
|
|
|
| <div class="bg-gray-100 px-4 py-4 dark:bg-dark-900">
|
|
|
| <div
|
| id="home"
|
| class="relative h-[70vh] max-w-8xl mx-auto flex items-center justify-center text-center text-white overflow-hidden rounded-xl shadow-2xl"
|
| >
|
|
|
|
|
| <div id="hero-slideshow" class="absolute inset-0 w-full h-full z-0">
|
|
|
| <img
|
| src="https://apicms.thestar.com.my/uploads/images/2019/11/20/397347.jpg"
|
| alt="MedicalBg"
|
| class="hero-slide active object-top"
|
| />
|
|
|
| <img
|
| src="https://images.unsplash.com/photo-1579305796288-c534f6cf17ab?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fG1lY2NhJTIwa2FhYmF8ZW58MHx8MHx8fDA%3D&fm=jpg&q=60&w=3000"
|
| alt="IslamicBg"
|
| class="hero-slide object-center"
|
| />
|
|
|
| <img
|
| src="https://www.worldfinance.com/wp-content/uploads/2015/01/Etiqa-Insurance.jpg"
|
| alt="InsuranceBg"
|
| class="hero-slide object-top"
|
| />
|
| </div>
|
|
|
|
|
| <div class="absolute inset-0 bg-black/65 z-10"></div>
|
|
|
|
|
| <div class="relative z-20 px-4 animate-fade-in">
|
| <h1
|
| class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl"
|
| >
|
| <span class="block">Multimodal Swarm-Based RAG</span>
|
| <span class="block text-blue-400 mt-2">for Domains Specific</span>
|
| </h1>
|
| <p
|
| class="mt-4 max-w-2xl mx-auto text-lg text-gray-200 sm:text-xl md:mt-6"
|
| >
|
| A versatile, multi-agent system combining text and images to provide
|
| deep, accurate, and context-aware information for a wide range of
|
| fields.
|
| </p>
|
| <div class="mt-8 flex justify-center gap-4">
|
| <a
|
| href="{{ url_for('medical_page') }}"
|
| class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 hover:bg-blue-800 md:text-lg transition-transform transform hover:scale-105"
|
| >
|
| Get Started
|
| </a>
|
| <a
|
| href="{{ url_for('about') }}"
|
| class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-primary hover:bg-blue-200 hover:text-blue-800 md:text-lg transition-transform transform hover:scale-105"
|
| >
|
| Learn More
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="domains" class="py-16 bg-white dark:bg-dark-900">
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| <div class="lg:text-center">
|
| <h2
|
| class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
|
| >
|
| Domains
|
| </h2>
|
| <p
|
| class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
|
| >
|
| Multiple Fields of Expertise
|
| </p>
|
| <p
|
| class="mt-4 max-w-3xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto"
|
| >
|
| Our RAG system is trained to navigate the unique terminologies and
|
| complex data of distinct, high-stakes domains. Click any domain to
|
| try the demo.
|
| </p>
|
| </div>
|
|
|
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-20">
|
|
|
| <a
|
| href="{{ url_for('medical_page') }}"
|
| class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-primary-light/20 dark:hover:shadow-primary-dark/20 hover:-translate-y-2"
|
| >
|
| <img
|
| class="w-full h-48 object-cover"
|
| src="https://www.malaymail.com/malaymail/uploads/images/2023/09/05/144179.jpg"
|
| alt="Medical Domain"
|
| />
|
| <div class="p-6">
|
| <div class="flex items-center space-x-3">
|
| <i
|
| class="fa-solid fa-heart-pulse text-2xl text-primary-light dark:text-primary-dark"
|
| ></i>
|
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
| Medical
|
| </h3>
|
| </div>
|
| <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
|
| Analyze medical records, and diagnostic images with high
|
| accuracy.
|
| </p>
|
| </div>
|
| </a>
|
|
|
|
|
| <a
|
| href="{{ url_for('islamic_page') }}"
|
| class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-accent-light/20 dark:hover:shadow-accent-dark/20 hover:-translate-y-2"
|
| >
|
| <img
|
| class="w-full h-48 object-cover"
|
| src="https://alwisequranacademy.com/wp-content/uploads/2025/09/Quran-reading-classes-in-Malaysia.jpg"
|
| alt="Islamic Domain"
|
| />
|
| <div class="p-6">
|
| <div class="flex items-center space-x-3">
|
| <i
|
| class="fa-solid fa-moon text-2xl text-accent-light dark:text-accent-dark"
|
| ></i>
|
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
| Islamic
|
| </h3>
|
| </div>
|
| <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
|
| Retrieve and synthesize knowledge from vast libraries of
|
| historical texts and scholarly interpretations.
|
| </p>
|
| </div>
|
| </a>
|
|
|
|
|
| <a
|
| href="{{ url_for('insurance_page') }}"
|
| class="block rounded-lg shadow-lg bg-white dark:bg-dark-800 overflow-hidden transition-all duration-300 ease-in-out hover:shadow-2xl hover:shadow-secondary-light/20 dark:hover:shadow-secondary-dark/20 hover:-translate-y-2"
|
| >
|
| <img
|
| class="w-full h-48 object-bottom"
|
| src="https://theedgemalaysia.com/_next/image?url=https%3A%2F%2Fassets.theedgemarkets.com%2FEtiqa_TEM1464_20230321165006_theedgemarkets.jpg&w=1920&q=75"
|
| alt="Insurance Domain"
|
| />
|
| <div class="p-6">
|
| <div class="flex items-center space-x-3">
|
| <i
|
| class="fa-solid fa-shield-halved text-2xl text-amber-400 dark:text-amber-400"
|
| ></i>
|
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
|
| Insurance
|
| </h3>
|
| </div>
|
| <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
|
| Process claims, analyze policy documents, and assess risk with
|
| multimodal data inputs.
|
| </p>
|
| </div>
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| id="features"
|
| class="sm:text-center py-12 bg-gray-100 dark:bg-dark-800"
|
| >
|
| <div class="sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| <div class="lg:text-center">
|
| <h2
|
| class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
|
| >
|
| Features
|
| </h2>
|
| <p
|
| class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
|
| >
|
| Advanced Information Retrieval System
|
| </p>
|
| <p
|
| class="mt-4 max-w-2xl text-xl text-gray-500 dark:text-gray-400 lg:mx-auto"
|
| >
|
| Our system combines cutting-edge technologies to deliver
|
| comprehensive insights across all fields.
|
| </p>
|
| </div>
|
|
|
| <div class="mt-10">
|
| <div
|
| class="space-y-5"
|
| >
|
| <div
|
| class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
|
| >
|
| <div
|
| class="absolute -top-6 left-6 rounded-full p-4 bg-primary-light dark:bg-primary-dark text-white feature-icon animate-float"
|
| >
|
| <i class="fas fa-robot text-xl"></i>
|
| </div>
|
| <h3
|
| class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
|
| >
|
| Swarm-Based Multi-Agent System
|
| </h3>
|
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
|
| Specialized agents collaboratively query diverse knowledge
|
| bases from medical databases to classical Islamic texts to
|
| retrieve and synthesize the most relevant information.
|
| </p>
|
| </div>
|
|
|
| <div
|
| class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
|
| >
|
| <div
|
| class="absolute -top-6 left-6 rounded-full p-4 bg-secondary-light dark:bg-secondary-dark text-white feature-icon animate-float"
|
| style="animation-delay: 1s"
|
| >
|
| <i class="fas fa-images text-xl animate-wiggle"></i>
|
| </div>
|
| <h3
|
| class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
|
| >
|
| Multimodal Integration
|
| </h3>
|
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
|
| Processes both textual and visual data, including research
|
| papers, notes, image, and documents for comprehensive
|
| analysis.
|
| </p>
|
| </div>
|
|
|
| <div
|
| class="relative card-hover bg-white dark:bg-dark-700 p-6 rounded-lg shadow-lg feature-card"
|
| >
|
| <div
|
| class="absolute -top-6 left-6 rounded-full p-4 bg-accent-light dark:bg-accent-dark text-white feature-icon animate-float"
|
| style="animation-delay: 2s"
|
| >
|
| <i class="fas fa-book-medical text-xl animate-wave"></i>
|
| </div>
|
| <h3
|
| class="mt-2 text-xl leading-6 font-medium text-gray-900 dark:text-white"
|
| >
|
| Retrieval-Augmented Generation
|
| </h3>
|
| <p class="mt-2 text-base text-gray-500 dark:text-gray-400">
|
| Combines information retrieval with generative AI to provide
|
| accurate, context-aware answers with verifiable citations
|
| from both medical journals and scholarly Islamic sources.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="sm:text-center py-12 bg-gray-50 dark:bg-dark-900">
|
| <div class="sm:text-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| <div class="lg:text-center">
|
| <h2
|
| class="text-base text-primary-light dark:text-primary-dark font-semibold tracking-wide uppercase"
|
| >
|
| Technology Stack
|
| </h2>
|
| <p
|
| class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
|
| >
|
| Powered by Cutting-Edge Technologies
|
| </p>
|
| </div>
|
|
|
| <div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4">
|
| <div class="col-span-1 flex justify-center">
|
| <div class="flex items-center">
|
| <i
|
| class="fab fa-python text-5xl text-blue-500 mr-3 animate-float"
|
| style="animation-delay: 0s"
|
| ></i>
|
| <span class="text-lg font-medium text-gray-900 dark:text-white"
|
| >Flask</span
|
| >
|
| </div>
|
| </div>
|
| <div class="col-span-1 flex justify-center">
|
| <div class="flex items-center">
|
| <i
|
| class="fa-solid fa-users-between-lines text-5xl text-purple-500 mr-3 animate-float"
|
| style="animation-delay: 0.5s"
|
| ></i>
|
| <span class="text-lg font-medium text-gray-900 dark:text-white"
|
| >Swarm-Based Agent</span
|
| >
|
| </div>
|
| </div>
|
| <div class="col-span-1 flex justify-center">
|
| <div class="flex items-center">
|
| <i
|
| class="fas fa-database text-5xl text-green-500 mr-3 animate-float"
|
| style="animation-delay: 1s"
|
| ></i>
|
| <span class="text-lg font-medium text-gray-900 dark:text-white"
|
| >ChromaDB</span
|
| >
|
| </div>
|
| </div>
|
| <div class="col-span-1 flex justify-center">
|
| <div class="flex items-center">
|
| <i
|
| class="fas fa-robot text-5xl text-red-500 mr-3 animate-float"
|
| style="animation-delay: 1.5s"
|
| ></i>
|
| <span class="text-lg font-medium text-gray-900 dark:text-white"
|
| >Gemini</span
|
| >
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| class="scroll-indicator ripple"
|
| onclick="window.scrollTo({top: 0, behavior: 'smooth'})"
|
| >
|
| <i class="fas fa-arrow-up"></i>
|
| </div>
|
|
|
| <script>
|
|
|
| const themeToggle = document.getElementById("theme-toggle");
|
| const html = document.documentElement;
|
|
|
| themeToggle.addEventListener("click", () => {
|
| html.classList.toggle("dark");
|
| localStorage.setItem(
|
| "theme",
|
| html.classList.contains("dark") ? "dark" : "light"
|
| );
|
| });
|
|
|
|
|
| if (
|
| localStorage.getItem("theme") === "dark" ||
|
| (!localStorage.getItem("theme") &&
|
| window.matchMedia("(prefers-color-scheme: dark)").matches)
|
| ) {
|
| html.classList.add("dark");
|
| } else {
|
| html.classList.remove("dark");
|
| }
|
|
|
|
|
| document.addEventListener("DOMContentLoaded", () => {
|
| const heroSection = document.querySelector(
|
| ".lg\\:absolute.lg\\:inset-y-0.lg\\:right-0.lg\\:w-1\\/2"
|
| );
|
| if (heroSection) {
|
| for (let i = 0; i < 10; i++) {
|
| const particle = document.createElement("div");
|
| particle.className = "swarm-particle";
|
| particle.style.width = `${Math.random() * 6 + 2}px`;
|
| particle.style.height = particle.style.width;
|
| particle.style.top = `${Math.random() * 100}%`;
|
| particle.style.left = `${Math.random() * 100}%`;
|
| particle.style.animationDelay = `${Math.random() * 10}s`;
|
|
|
|
|
| const colors = [
|
| "bg-primary-light",
|
| "bg-secondary-light",
|
| "bg-accent-light",
|
| "bg-primary-dark",
|
| "bg-secondary-dark",
|
| "bg-accent-dark",
|
| ];
|
| const color = colors[Math.floor(Math.random() * colors.length)];
|
| particle.classList.add(color);
|
|
|
| heroSection.appendChild(particle);
|
| }
|
| }
|
|
|
|
|
| window.addEventListener("scroll", () => {
|
| const scrollTop =
|
| document.documentElement.scrollTop || document.body.scrollTop;
|
| const scrollHeight =
|
| document.documentElement.scrollHeight -
|
| document.documentElement.clientHeight;
|
| const scrollProgress = (scrollTop / scrollHeight) * 100;
|
| document.querySelector(".scroll-progress").style.width =
|
| scrollProgress + "%";
|
|
|
|
|
| const scrollIndicator = document.querySelector(".scroll-indicator");
|
| if (scrollTop > 300) {
|
| scrollIndicator.classList.add("visible");
|
| } else {
|
| scrollIndicator.classList.remove("visible");
|
| }
|
|
|
|
|
| const timelineProgress = Math.min(scrollTop / 3000, 1) * 100;
|
| document.querySelector(".progress-bar").style.width =
|
| timelineProgress + "%";
|
| });
|
|
|
|
|
| document.querySelectorAll(".ripple").forEach((button) => {
|
| button.addEventListener("click", function (e) {
|
| const rect = this.getBoundingClientRect();
|
| const x = e.clientX - rect.left;
|
| const y = e.clientY - rect.top;
|
|
|
| const ripple = document.createElement("span");
|
| ripple.className = "ripple-effect";
|
| ripple.style.left = x + "px";
|
| ripple.style.top = y + "px";
|
|
|
| this.appendChild(ripple);
|
|
|
| setTimeout(() => {
|
| ripple.remove();
|
| }, 600);
|
| });
|
| });
|
|
|
|
|
| document
|
| .querySelector('button[class*="Try Demo"]')
|
| .addEventListener("click", function () {
|
| for (let i = 0; i < 50; i++) {
|
| const confetti = document.createElement("div");
|
| confetti.className = "confetti";
|
| confetti.style.left = Math.random() * 100 + "vw";
|
| confetti.style.backgroundColor = `hsl(${
|
| Math.random() * 360
|
| }, 100%, 50%)`;
|
| confetti.style.animationDuration = Math.random() * 3 + 2 + "s";
|
| document.body.appendChild(confetti);
|
|
|
| setTimeout(() => {
|
| confetti.remove();
|
| }, 5000);
|
| }
|
| });
|
|
|
|
|
| document
|
| .querySelectorAll(".floating-label input, .floating-label textarea")
|
| .forEach((input) => {
|
| input.addEventListener("focus", () => {
|
| input.nextElementSibling.classList.add("active");
|
| });
|
|
|
| input.addEventListener("blur", () => {
|
| if (!input.value) {
|
| input.nextElementSibling.classList.remove("active");
|
| }
|
| });
|
|
|
|
|
| if (input.value) {
|
| input.nextElementSibling.classList.add("active");
|
| }
|
| });
|
|
|
|
|
| const contactDarkMode = document.getElementById("contact-dark-mode");
|
| contactDarkMode.addEventListener("change", () => {
|
| const contactSection = document.getElementById("contact");
|
| if (contactDarkMode.checked) {
|
| contactSection.classList.add("dark");
|
| } else {
|
| contactSection.classList.remove("dark");
|
| }
|
| });
|
| });
|
| </script>
|
| <script>
|
| document.addEventListener("DOMContentLoaded", function () {
|
| const slideshow = document.getElementById("hero-slideshow");
|
| const slides = slideshow.querySelectorAll(".hero-slide");
|
| let currentSlide = 0;
|
|
|
| function showNextSlide() {
|
| slides[currentSlide].classList.remove("active");
|
| currentSlide = (currentSlide + 1) % slides.length;
|
| slides[currentSlide].classList.add("active");
|
| }
|
|
|
|
|
| setInterval(showNextSlide, 3000);
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
