System: Windows NT WINDOWS18 10.0 build 17763 (Windows Server 2016) AMD64 | User: IWPD_3544(appclien)
Path: D:\Inetpub\vhosts\appclients.in\fruits-vegitables.nmvm.org
[Back to List]
<?php
include "includes/main-action.php";
$obj = new admin_main();
$sel_cs = $obj->select_all("menu", "where status='Active' order by menu_id");
//for mobile category
$sel_cs_mobile = $obj->select_all("menu", "where status='Active' order by menu_id");
$sel_subcat = $obj->select_all("subcategory", "where home_view='yes' order by subcat_id");
//home banner
$homebanner = $obj->select_all("adv_tbl2", "where status='Active'");
$hbannerData = mysqli_fetch_array($homebanner);
//for products as type
$sel_product = $obj->select_all("product", "where status='Active' order by id desc");
//sel sub category
$cat_sub_query = $obj->select_all("categories", "where status='Active' limit 3");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php include('title.php') ?> | Home</title>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="">
<meta name="robots" content="index, follow" />
<!-- Mobile specific metas
============================================ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" type="image/png" href="<?php echo $url ?>image/icon/favicon.png" />
<!-- Libs CSS
============================================ -->
<link rel="stylesheet" href="<?php echo $url ?>css/bootstrap/css/bootstrap.min.css">
<link href="<?php echo $url ?>css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="<?php echo $url ?>js/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="<?php echo $url ?>js/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/lib.css" rel="stylesheet">
<link href="<?php echo $url ?>js/jquery-ui/jquery-ui.min.css" rel="stylesheet">
<link href="<?php echo $url ?>js/minicolors/miniColors.css" rel="stylesheet">
<script src="https://use.fontawesome.com/b6bf0fe64e.js"></script>
<!-- Theme CSS
============================================ -->
<link href="<?php echo $url ?>css/themecss/so_searchpro.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/so_megamenu.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/so-categories.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/so-listing-tabs.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/so-category-slider.css" rel="stylesheet">
<link href="<?php echo $url ?>css/themecss/so-newletter-popup.css" rel="stylesheet">
<link href="<?php echo $url ?>css/footer/footer2.css" rel="stylesheet">
<link href="<?php echo $url ?>css/header/header2.css" rel="stylesheet">
<link id="color_scheme" href="<?php echo $url ?>css/home2.css" rel="stylesheet">
<link href="<?php echo $url ?>css/responsive.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- Google web fonts
============================================ -->
<style type="text/css">
body {
font-family: 'Poppins', sans-serif
}
.left-content-product .content-product-right .box-info-product .quantity .quantity-control {
float: none;
margin-top: 20px;
}
.products-list.grid .product-layout .product-item-container:hover .right-block .hide-cont,
.products-list .product-grid .product-item-container:hover .right-block .hide-cont {
visibility: visible;
}
.price {
line-height: 0px;
}
.panel-title {
border-bottom: 2px solid #ebebeb;
display: inline-block;
width: 100%;
margin-top: 0;
margin-bottom: 20px;
font-size: 40px;
color: #b55310;
font-weight: 600;
text-transform: capitalize;
line-height: 35px;
}
.img-zoom {
transition: transform 0.6s ease; /* slow smooth zoom */
}
.img-zoom:hover {
transform: scale(1.1); /* zoom */
}
/*New*/
/* Core Variables */
:root {
--primary-yellow: #FFD644;
/* Warmer, more vibrant yellow */
--text-dark: #2c3e50;
--text-brown: #5D4037;
--accent-orange: #F57C00;
--card-bg: #ffffff;
--primary-color: #d4832c;
--bg-light: #fdf8e1;
--text-muted: #777;
--accent-yellow: #f1c40f;
--soft-shadow: 0 20px 40px rgba(93, 64, 55, 0.08);
/* Premium soft shadow */
--hover-shadow: 0 25px 50px rgba(93, 64, 55, 0.15);
--bg-color: #FBF8F1;
--card-bg: #FFFFFF;
--accent-color: #D4A373;
--primary-text: #3A2D28;
--secondary-text: #7C6E6A;
--button-bg: #8B4513;
--button-hover: #6F370F;
--shadow: 0 20px 40px rgba(58, 45, 40, 0.05);
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
line-height: 1.6;
/* background-color: #FFFDF5;*/
/* Very subtle cream background */
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Merriweather', serif;
/* Premium Serif */
color: var(--text-brown);
}
/* Navbar Style Update */
.navbar-default {
background-color: transparent;
border-color: transparent;
transition: all 0.3s;
}
.navbar-brand {
font-family: 'Merriweather', serif;
font-weight: 900;
font-size: 28px;
color: var(--text-brown) !important;
}
.navbar-nav>li>a {
color: var(--text-brown) !important;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.5px;
}
.navbar-nav>.active>a,
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus {
background-color: transparent;
font-weight: 700;
}
.btn-contact {
background-color: var(--text-brown);
color: #fff !important;
border-radius: 25px;
padding: 8px 25px !important;
margin-top: 5px;
transition: transform 0.2s;
}
.btn-contact:hover {
transform: translateY(-2px);
background-color: #4e342e;
}
/* Hero Section */
.hero-section {
background: radial-gradient(circle at 70% 30%, var(--primary-yellow), #FFCA28);
padding-top: 60px;
padding-bottom: 120px;
/* Increased for torn paper effect space */
position: relative;
overflow: hidden;
/* Changed to hidden to prevent scrollbars from floating elements */
}
/* Floating Elements - Adjusted for subtler premium feel */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.float-item {
position: absolute;
opacity: 0.6;
/* More visible */
filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
}
.item-1 {
top: 10%;
left: 5%;
font-size: 30px;
animation: float 8s ease-in-out infinite;
color: #6D4C41;
}
.item-2 {
top: 50%;
left: 2%;
font-size: 24px;
color: #c62828;
animation: float 10s infinite reverse;
}
.item-3 {
top: 15%;
right: 10%;
font-size: 40px;
color: #2E7D32;
animation: float 9s infinite;
}
.item-4 {
top: 60%;
right: 5%;
width: 20px;
height: 20px;
background: #FF7043;
border-radius: 50%;
opacity: 0.8;
}
.display-flex {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.hero-text {
z-index: 5;
position: relative;
padding-left: 15px;
}
.sub-title {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: var(--text-brown);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
display: block;
margin-bottom: 0px;
opacity: 0.9;
}
.hero-text h1 {
font-size: 72px;
line-height: 1;
color: #fff;
margin-top: 0;
margin-bottom: 6px;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.hero-text p {
font-size: 18px;
color: #3e2723;
margin-bottom: 20px;
max-width: 480px;
font-weight: 500;
}
.custom-btn {
background-color: var(--text-brown);
color: #fff;
border: none;
border-radius: 50px;
padding: 18px 50px;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
box-shadow: 0 15px 30px rgba(93, 64, 55, 0.4);
transition: all 0.3s;
}
.custom-btn:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.5);
color: #fff;
text-decoration: none;
}
.secondary-link {
display: inline-block;
margin-top: 20px;
margin-left: 20px;
color: var(--text-brown);
font-size: 14px;
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
border-bottom: 1px solid transparent;
}
.secondary-link:hover {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #fff;
}
.hero-image {
z-index: 2;
text-align: center;
}
.image-wrapper {
position: relative;
}
.main-fruit-img {
max-width: 120%;
/* Bursting out */
width: 600px;
margin-left: -10%;
/* Center alignment correction */
filter: drop-shadow(0 50px 70px rgba(62, 39, 35, 0.3));
transform: rotate(-5deg);
transition: transform 0.5s;
}
.main-fruit-img:hover {
transform: rotate(0deg) scale(1.02);
}
/* Torn Edge Effect */
.custom-shape-divider-bottom-1 {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1 svg {
display: block;
width: calc(100% + 1.3px);
height: 100px;
/* Made substantial */
}
.custom-shape-divider-bottom-1 .shape-fill {
fill: #FFFDF5;
/* Match body bg */
}
/* Products / Features Section */
.section-head {
text-align: center;
margin: 60px 0;
}
.section-head h2 {
font-size: 42px;
margin-bottom: 15px;
}
.product-card {
background: #fff;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
transition: all 0.4s ease;
border: 1px solid rgba(0, 0, 0, 0.02);
position: relative;
top: 0;
margin-bottom: 30px;
}
.product-card:hover {
top: -10px;
box-shadow: var(--hover-shadow);
}
.product-img-wrapper {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
}
.product-img {
max-height: 160px;
max-width: 90%;
filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.1));
transition: transform 0.3s;
}
.product-card:hover .product-img {
transform: scale(1.1);
}
.product-card h3 {
font-size: 24px;
font-family: 'Merriweather', serif;
margin-bottom: 10px;
color: var(--text-dark);
}
.product-desc {
font-size: 14px;
color: #7f8c8d;
margin-bottom: 20px;
}
.product-card .price {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--text-dark);
display: block;
margin-bottom: 0px;
}
.badge-yellow {
background-color: var(--primary-yellow);
padding: 5px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: var(--text-brown);
}
.btn-add {
background-color: var(--primary-yellow);
color: var(--text-brown);
border: none;
border-radius: 30px;
padding: 10px 35px;
font-weight: 600;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
}
.btn-add:hover {
background-color: #FFCA28;
box-shadow: 0 5px 15px rgba(255, 213, 79, 0.4);
text-decoration: none;
color: var(--text-brown);
}
/* Juice Preview Section */
.juice-section {
padding: 80px 0;
background-color: #FFFDF5;
}
.juice-card {
background-color: #FFF8E1;
/* Light yellow tint */
border-radius: 25px;
padding: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.juice-text h2 {
font-size: 36px;
margin-bottom: 20px;
}
.juice-img {
height: 300px;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}
/* Map / Contact Strip (Simplified from footer) */
.contact-strip {
text-align: center;
padding: 50px 0;
color: var(--text-brown);
font-family: 'Merriweather', serif;
font-size: 24px;
}
/* Animations */
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
/* Responsive */
@media (max-width: 991px) {
.container {
width: 100%;
padding: 0 20px;
}
.hero-text {
text-align: center;
padding: 0;
}
.hero-text h1 {
font-size: 48px;
}
.main-fruit-img {
width: 80%;
margin: 40px auto 0;
display: block;
}
.display-flex {
display: block;
}
.juice-card {
display: block;
text-align: center;
}
.juice-img {
margin-top: 30px;
height: 200px;
}
}
h1 {
font-size: 35px;
margin-bottom: 22px;
}
@media (max-width: 991px) {
h1 {
font-size: 26px;
margin-bottom: 22px;
}
}
@media (max-width: 575px) {
h1 {
font-size: 20px;
margin-bottom: 22px;
}
.offer-card {
margin-top: 14px !important;
}
.offers-section {
padding: 20px 0 !important;
}
.services-strip {
padding: 40px 0;
border-top: 1px solid #f0f0f0;
margin-top: 20px;
}
.service-item {
margin-bottom: 20px;
}
.col-xs-4 {
padding: 0 6px;
}
}
/* Service Strip (Icons below banners) */
.services-strip {
padding: 50px 0;
border-top: 1px solid #f0f0f0;
margin-top: 60px;
}
.service-item {
display: flex;
align-items: center;
gap: 20px;
}
.service-icon-box {
width: 60px;
height: 60px;
border: 2px solid #c92a3e;
/* Green border */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #c92a3e;
font-size: 24px;
}
.service-text h5 {
font-weight: 700;
margin: 0 0 5px;
color: var(--text-dark);
font-size: 16px;
text-transform: uppercase;
}
.service-text p {
margin: 0;
color: #999;
font-size: 13px;
line-height: 1.4;
}
.btn-add:hover {
background-color: #FFCA28;
box-shadow: 0 5px 15px rgba(255, 213, 79, 0.4);
text-decoration: none;
color: var(--text-brown);
}
/* Juice Preview Section */
.juice-section {
padding: 80px 0;
background-color: #FFFDF5;
}
.juice-card {
background-color: #FFF8E1;
/* Light yellow tint */
border-radius: 25px;
padding: 40px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.juice-text h2 {
font-size: 36px;
margin-bottom: 20px;
}
.juice-img {
height: 300px;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}
/* Map / Contact Strip (Simplified from footer) */
.contact-strip {
text-align: center;
padding: 50px 0;
color: var(--text-brown);
font-family: 'Merriweather', serif;
font-size: 24px;
}
/* Animations */
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
/* Responsive */
@media (max-width: 991px) {
.container {
width: 100%;
padding: 0 20px;
}
.hero-text {
text-align: center;
padding: 0;
}
.hero-text h1 {
font-size: 48px;
}
.main-fruit-img {
width: 80%;
margin: 40px auto 0;
display: block;
}
.display-flex {
display: block;
}
.juice-card {
display: block;
text-align: center;
}
.juice-img {
margin-top: 30px;
height: 200px;
}
}
/* Products /* Reference Matched Offers Section */
/* Special Offers Section */
.offers-section {
padding: 40px 0;
position: relative;
background: linear-gradient(to bottom, rgb(243 235 212 / 42%) 0%, rgba(243, 235, 212, 0) 100%);
}
.offer-card {
border-radius: 20px;
padding: 40px;
position: relative;
overflow: hidden;
margin-top: 30px;
cursor: pointer;
min-height: 220px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: flex-start;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Overlay removed as requested - Image contains the background color/design */
.offer-card:hover {
transform: translateY(-5px);
}
/* Background Images mimicking "Color + Fruit" */
.offer-organic {
/* Raspberry Theme */
background-image: url('https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&w=800&q=80');
/* Fallback/Loading Color */
background-color: #E57373;
}
.offer-fresh {
/* Peach Theme */
background-image: url('https://images.unsplash.com/photo-1595123550441-d377e017de6a?auto=format&fit=crop&w=800&q=80');
background-color: #FDD835;
}
.offer-sweet {
/* Apple Theme */
background-image: url('https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?auto=format&fit=crop&w=800&q=80');
background-color: #81C784;
}
.offer-content {
width: 65%;
z-index: 2;
position: relative;
/* Adding subtle text shadow for readability since overlay is gone */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.offer-title {
font-family: 'Merriweather', serif;
font-size: 28px;
color: #fff;
/* White Text */
margin-bottom: 10px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.offer-desc {
font-size: 14px;
color: rgba(255, 255, 255, 0.9);
/* White transparent */
margin-bottom: 0;
line-height: 1.5;
font-family: 'Poppins', sans-serif;
font-style: italic;
}
.offer-tag-text {
display: block;
color: #fff;
font-weight: 600;
font-size: 14px;
margin-bottom: 5px;
letter-spacing: 1px;
opacity: 0.9;
}
.offer-img-container {
display: none;
/* User asked for background image only, so hiding the floaty one */
}
.offer-img {
max-width: 130%;
max-height: 110%;
filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.2));
transition: transform 0.4s;
}
.offer-card:hover .offer-img {
transform: scale(1.05) rotate(-5deg);
}
/* Removing old specific styles */
.price-row,
.btn-grab,
.offer-tag {
display: none;
}
.wavy-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 80px;
background-color: #fbecc1;
clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 98% 10%, 95% 35%, 90% 45%, 85% 30%, 80% 10%, 75% 15%, 70% 40%, 65% 55%, 60% 35%, 55% 15%, 50% 25%, 45% 45%, 40% 60%, 35% 40%, 30% 20%, 25% 30%, 20% 50%, 15% 65%, 10% 45%, 5% 25%, 0% 40%);
}
/* Features Section */
.features-section {
padding: 10px 0 40px 0px;
background-color: #fbecc1;
}
.feature-card {
background-color: #fff;
border-radius: 20px;
padding: 20px;
height: 100%;
border: 1px solid #f0f0f0;
margin-bottom: 10px;
}
.badge {
background-color: #f1f1f1;
color: var(--text-dark);
margin-right: 5px;
font-weight: 400;
padding: 5px 10px;
}
.info-block {
/*background-color: #fff;
border-radius: 20px;
padding: 30px;
border: 1px solid #f0f0f0;*/
}
/* Product Cards */
.product-card {
background: #fbecc1;
border-radius: 20px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
border:0.5px solid #ffd54f42;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}
.product-card img {
margin-bottom: 20px;
border-radius: 15px;
}
.price-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.price {
font-weight: 700;
font-size: 18px;
}
.product-card h4 {
font-weight: 700;
margin: 15px 0 5px;
}
.product-card p {
color: var(--text-muted);
font-size: 14px;
}
.price-row .btn-primary {
background-color: var(--accent-yellow);
color: #444;
border: none;
border-radius: 6px;
font-weight: 600;
padding: 10px 12px;
}
.product-grid h4{
font-size:22px;
}
.product-grid {
padding: 70px 0px 0px;
}
.split-section {
padding: 0px 0px 30px;
position: relative;
}
.flex-center {
display: flex;
align-items: center;
}
@media (max-width: 991px) {
.flex-center {
flex-direction: column;
text-align: center;
margin-bottom: 40px;
}
.bowl-image,
.icon-art {
margin-right: 0 !important;
margin-bottom: 20px;
}
.split-text {
margin: 0 auto;
}
}
.bowl-image {
/* width: 200px; */
/* height: 200px; */
/* border-radius: 50%; */
object-fit: cover;
/* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
margin-right: 25px;
}
.orange-label {
color: var(--primary-color);
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
margin-bottom: 5px;
display: block;
}
.split-title {
/* font-family: 'Passion One', cursive; */
font-size: 42px;
margin: 0 0 10px;
color: #333;
line-height: 1;
}
.split-text {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
max-width: 280px;
}
/* Vertical Divider for Desktop */
@media (min-width: 992px) {
.divider-col {
position: relative;
}
.divider-col::after {
content: '';
position: absolute;
right: -1px;
top: 20%;
height: 60%;
width: 1px;
border-right: 2px dotted #e0e0e0;
}
}
.icon-art {
width: 80px;
margin-right: 25px;
}
.right-content {
flex: 1;
}
.premium-card {
background: var(--card-bg);
border-radius: 20px;
padding: 40px;
box-shadow: var(--shadow);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
}
.premium-card:hover {
transform: translateY(-5px);
}
/* Left Card: Info & Brand */
.info-card {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.brand-name {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.brand-icon {
width: 40px;
height: 40px;
background: var(--accent-color);
border-radius: 50%;
display: inline-block;
}
.bullet-list {
list-style: none;
margin-top: 30px;
}
.bullet-item {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
font-size: 1.5rem;
color: var(--secondary-text);
}
.bullet-item i {
color: var(--accent-color);
}
.fruit-decoration {
position: absolute;
right: 20px;
top: 20px;
width: 150px;
opacity: 0.9;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}
.bottom-info {
display: flex;
align-items: center;
gap: 20px;
margin-top: 16px;
padding-top: 28px;
border-top: 2px dotted #e0e0e0;
}
.bottom-info img {
width: 60px;
height: 60px;
border-radius: 6px;
object-fit: cover;
}
/* Right Card: Hero Showcase */
.hero-card {
flex: 2;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #ffffff 0%, #FBF8F1 100%);
}
.hero-content {
<!--- flex: 1;--->
padding-right: 40px;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.1;
margin-bottom: 30px;
}
.cta-button {
background: var(--button-bg);
color: white;
border: none;
padding: 16px 32px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);
}
.cta-button:hover {
background: var(--button-hover);
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(139, 69, 19, 0.3);
}
.product-image-container {
flex: 1.2;
display: flex;
justify-content: center;
position: relative;
}
.main-product-img {
width: 70%;
filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.15));
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Wavy Header Element */
.wavy-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background: #FFF9EF;
z-index: -1;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}
@media (max-width: 991.98px) {
.premium-card {
padding: 30px 20px;
}
.hero-card {
text-align: center;
}
.hero-content {
padding-right: 0;
margin-bottom: 40px;
}
.fruit-decoration {
width: 100px;
}
}
</style>
</head>
<body class="common-home res layout-2" style="">
<div id="wrapper" class="wrapper-fluid banners-effect-7" style="overflow-x: hidden;">
<!-- Header Container -->
<?php include "includes/topbar.php"; ?>
<!-- //Header Top -->
<!-- Header center -->
<?php include "includes/searchbar.php"; ?>
<!-- //Header center -->
<!-- Header Bottom -->
<?php include "includes/navbar.php"; ?>
</header>
<!-- //Header Container -->
<!-- Main Container -->
<div class="main-container">
<div class="row box-content1">
<!-- Start HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End HEAD section -->
<!-- Hero Section -->
<section class="hero-section">
<!-- Floating Background Elements -->
<div class="floating-elements">
<!-- Leaf -->
<i class="fa fa-leaf float-item item-1"></i>
<!-- Berry -->
<i class="fa fa-circle float-item item-2"></i>
<!-- Branch -->
<i class="fa fa-pagelines float-item item-3"></i>
<!-- Abstract Circle -->
<div class="float-item item-4"></div>
</div>
<div class="container">
<div class="row" style="align-items: center;">
<div class="col-md-6 hero-text" style="margin-top:32px">
<span class="sub-title">Smart Era (Est 2018) ~</span>
<h1>Organic <br> Fresh Fruit</h1>
<p><?php echo $hbannerData['pos_ad']?></p>
<a href="<?php echo $hbannerData['Adv']?>" class="btn custom-btn">Start Here</a>
</div>
<div class="col-md-6 hero-image">
<div class="image-wrapper">
<!-- Using the previous image as it's a good bowl of berries -->
<img src="<?php echo $url."image/banner_top/".$hbannerData['img']?>"
alt="" class="img-responsive main-fruit-img" style="">
</div>
</div>
</div>
</div>
<div class="wavy-bottom"></div>
</section>
<!-- Features Section -->
<section class="features-section">
<div class="container">
<div class="row">
<div class="col-md-5">
<h1 style="font-weight: 700;">City Revival</h1>
<div class="row">
<?php while($subCat = mysqli_fetch_array($cat_sub_query)){?>
<div class="col-xs-4 col-lg-4">
<div class="feature-card cry-arrival">
<div class="feature-items">
<img src="image/product/<?php echo $subCat['sub_menu_image']?>" alt="<?php echo $subCat['category_name']?>" class="img-responsive">
</div>
</div>
</div>
<?php }?>
</div>
</div>
.
<div class="col-md-7">
<div class="info-block">
<div class="row">
<div class="col-sm-4">
<img src="https://jthemes.net/themes/html/organic/assets/images/product/product12.png" alt="Walnuts" class="img-responsive">
</div>
<div class="col-sm-8">
<h1>Jenpher Totb</h1>
<p>Essential health components sourced from the best organic farms. Packed with
nutrients for your daily wellness.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Product Grid -->
<section class="product-grid">
<div class="container">
<div class="row">
<?php while($resu5 = mysqli_fetch_array($sel_product)){
$extPrice = explode(",", $resu5['price']);
$extSize = explode(",", $resu5['oldprice']);
$extOldPrice = explode(",", $resu5['oldprc']);
if (!empty($resu5['img'])) {
$dcd_img = json_decode($resu5['img']);
}
?>
<div class="col-md-3">
<div class="product-card">
<img src="<?php if (!empty($dcd_img[0]) && file_exists("image/product/" . $dcd_img[0])) echo $url . "image/product/" . $dcd_img[0];else echo $url . "image/product/demo.jpg";?>" alt="<?php echo $resu5['name']?>" class="img-responsive">
<h4><?php echo $resu5['name']?></h4>
<p><?php echo $extSize[0];?></p>
<div class="price-row">
<span class="price">₹ <?php echo $extPrice[0];?></span>
<a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
</div>
</div>
</div>
<?php }?>
</div>
</div>
</section>
<!-- split-section -->
<section class="split-section">
<div class="container">
<div class="row">
<!-- Left Part -->
<div class="col-md-6 flex-center divider-col">
<img src="https://knitwitenterprises.in/html-items/gambo_supermarket_demo_new/images/product/img-11.jpg"
class="bowl-image" alt="Nuts Bowl">
<div class="left-content">
<span class="orange-label">Fresh</span>
<h2 class="split-title">Appirorton</h2>
<p class="split-text">Mustlerow of dalt with sanch high organic ingredients for your healthy
life.
</p>
</div>
</div>
<!-- Right Part -->
<div class="col-md-6 flex-center">
<img src="https://knitwitenterprises.in/html-items/gambo_supermarket_demo_new/images/product/img-11.jpg"
class="bowl-image" alt="Nuts Bowl">
<div class="left-content">
<span class="orange-label">Search: Smart Organic</span>
<p class="split-text">Freshly captured and traditionally cured organic produce for your wellness routine.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Exclusive Offers Section -->
<section class="offers-section">
<div class="container">
<div class="row g-4 align-items-stretch">
<!-- Left Product Info Card -->
<div class="col-lg-4 col-md-12" style="margin-bottom:12px;">
<section class="premium-card info-card d-flex flex-column justify-content-between">
<div>
<div class="brand-name">
<span class="brand-icon"></span>
KIWI
</div>
<img src="image/kiwi.png"
alt="Fruit Decor" class="fruit-decoration">
<ul class="bullet-list p-0">
<li class="bullet-item">
<i class="fas fa-check-circle"></i>
Hand-picked Organic Fruits
</li>
<li class="bullet-item">
<i class="fas fa-check-circle"></i>
No Added Sugar or Preservatives
</li>
</ul>
</div>
<div class="bottom-info mt-4">
<img src="https://images.unsplash.com/photo-1610832958506-aa56368176cf?auto=format&fit=crop&q=80&w=200"
alt="Fruit slice">
<div class="info-text">
<strong>Naturally Sweet</strong><br>
<span style="color: var(--secondary-text);">From the heart of
orchards</span>
</div>
</div>
</section>
</div>
<!-- Right Hero Card -->
<div class="col-lg-8 col-md-12" style="margin-bottom:12px;">
<section
class="premium-card hero-card">
<div class="row">
<div class="col-lg-6 col-lg-push-6">
<div class="product-image-container">
<img src="image/fruit-juice.png"
alt="Premium Juice Bottles" class="main-product-img">
</div>
</div>
<div class="col-lg-6 col-lg-pull-6">
<div class="hero-content">
<p class="orange-label">Pure Nectar</p>
<h1 class="hero-title">FRESHLY<br>SQUEEZED DELIGHT</h1>
<button class="cta-button">Experience Now</button>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Services Strip -->
<div class="services-strip">
<div class="row">
<div class="col-md-4">
<div class="service-item">
<div class="service-icon-box">
<i class="fa fa-money"></i>
</div>
<div class="service-text">
<h5>Cash on Delivery</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<div class="service-icon-box">
<i class="fa fa-truck"></i>
</div>
<div class="service-text">
<h5>Free Shipping</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="service-item">
<div class="service-icon-box">
<i class="fa fa-refresh"></i>
</div>
<div class="service-text">
<h5>Money Back Guarantee</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //Main Container -->
<!-- Footer Container -->
<?php include "includes/footer.php" ?>
<script type="text/javascript" src="<?php echo $url ?>js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/slick-slider/slick.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/themejs/libs.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/unveil/jquery.unveil.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/countdown/jquery.countdown.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/datetimepicker/moment.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/modernizr/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/minicolors/jquery.miniColors.min.js"></script>
<!-- Theme files
============================================ -->
<script type="text/javascript" src="<?php echo $url ?>js/themejs/application.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/themejs/homepage.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/themejs/toppanel.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/themejs/so_megamenu.js"></script>
<script type="text/javascript" src="<?php echo $url ?>js/themejs/addtocart.js"></script>
<!-- Service Worker
===========================================-->
<script src="js/main.js"></script>
</body>
</html>