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");
//for products as type
$sel_product_as_type = $obj->select_all("product", "where status='Active' group by pro_type order by pro_type desc");
$sel_banner_top = $obj->select_all("adv_tbl1", "where status='Active' order by adv_id desc limit 2");
$sel_banner_right = $obj->select_all("adv_tbl3", "where status='Active' order by adv_id desc limit 3");
$sel_slider = $obj->select_all("adv_tbl2", "where status='Active' order by adv_id");
$sel_subcat = $obj->select_all("subcategory", "where home_view='yes' order by subcat_id");
//category details
$cat_query = $obj->select_all("menu", "where status='Active' and menu_id='$_REQUEST[catid]'");
$menuData = mysqli_fetch_array($cat_query);
//sel sub category
$cat_sub_query = $obj->select_all("categories", "where status='Active' and menu_id='$menuData[menu_id]'");
//sel all product
$cat_product_query = $obj->select_all("product", "where status='Active' and menu_id='$menuData[menu_id]'");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php include('title.php') ?> | <?php echo $menuData['menu']?></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);
}
/* Core Variables */
:root {
--primary-yellow: #FFD644;
--text-dark: #2c3e50;
--text-brown: #5D4037;
--accent-green: #8bc34a;
--soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
--bg-cream: #FFFDF5;
}
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: <?php if(!empty($menuData['colorMenu'])) echo $menuData['colorMenu'];else echo "#74a079;"?>;
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: #fff;
margin-bottom: 20px;
max-width: 480px;
font-weight: 500;
}
.custom-btn {
background-color: #7d1116;
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: 480px;
margin-left: -5%;
/* 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 h2 {
font-size: 42px;
margin-bottom: 45px;
margin-top: 0px;
color: #5f8b6a;
}
.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: #f8fefa;
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%);
}
.info-block {
/*background-color: #fff;
border-radius: 20px;
padding: 30px;
border: 1px solid #f0f0f0;*/
}
/* Product Cards */
.product-card {
border-radius: 20px;
padding: 30px;
text-align: center;
margin-bottom: 30px;
border:0.5px solid #c1c1c142;
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;
}
.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 22px;
color: #5f8b6a;
line-height: 1;
}
.split-text {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
}
/* 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;
}
}
/* Categories Section */
.categories-section {
padding: 60px 0;
background-color: #fff;
position: relative;
/* Above other content */
}
.category-grid {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 20px;
}
.category-item {
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
width: 160px;
position: relative;
}
.cat-img-wrapper {
position: relative;
width: 150px;
height: 140px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
}
/* Organic Background Shape */
.cat-bg-shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
background-color: #e2f3e4;
/* More visible soft green */
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transition: all 0.6s ease;
z-index: 1;
opacity: 0.8;
}
/* Decorative Leaf Accents */
.cat-img-wrapper::before,
.cat-img-wrapper::after {
content: '';
position: absolute;
background-color: #73a27a;
/* Prominent green for accents */
border-radius: 50% 0 50% 0;
z-index: 3;
/* Above shape and image */
transition: all 0.4s ease;
}
.cat-img-wrapper::before {
width: 18px;
height: 28px;
top: 5px;
right: 15px;
transform: rotate(25deg);
}
.cat-img-wrapper::after {
width: 12px;
height: 20px;
top: 25px;
right: 5px;
transform: rotate(55deg);
}
.cat-img-box {
width: 120px;
height: 120px;
margin: 0;
overflow: visible;
transition: all 0.4s ease;
z-index: 2;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.cat-img-box img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.category-item span {
font-weight: 700;
color: #222;
font-size: 16px;
display: block;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
}
@media (max-width: 576px) {
.cat-bg-shape {
width: 80px;
height: 80px;
opacity: 0.6;
}
.cat-img-wrapper {
position: relative;
width: 90px;
height: 100px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
}
.cat-img-wrapper::before {
width: 14px;
height: 22px;
top: 6px;
right: 10px;
transform: rotate(25deg);
}
.category-grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
}
/* Hover Effects */
.category-item:hover .cat-bg-shape {
transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
background-color: #c8e6c9;
}
.category-item:hover .cat-img-box img {
transform: translateY(-10px) scale(1.1);
}
/* Active State */
.category-item.active .cat-bg-shape {
background-color: #a5d6a7;
opacity: 1;
transform: translate(-50%, -50%) scale(1.05);
border-radius: 50%;
/* More circular when active */
}
.category-item.active span {
color: #2e7d32;
}
/* Category Specific Colors */
.category-item[data-category="all"] .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="red"] .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="red"].active .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="golden"] .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="golden"].active .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="pink"] .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="pink"].active .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="lal"] .cat-bg-shape {
background-color: #e8f5e9;
}
.category-item[data-category="lal"].active .cat-bg-shape {
background-color: #e8f5e9;
}
.about-image .text-center {
background: #699b70;
border-radius: 50px;
border-radius: 20px;
}
/* Product Filtering Styles */
.product-item {
transition: all 0.4s ease;
}
.product-item.hidden {
display: none !important;
opacity: 0;
}
.product-item.fade-in {
animation: fadeInScale 0.4s ease forwards;
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.product-card h4 {
font-size:22px;
}
.about-section{
padding: 60px 0;
}
.features-section{
padding: 0px 0px 50px 0px;
}
/* Gallery Section */
.gallery-section {
padding: 60px 0;
}
.gallery-title {
text-align: center;
margin-bottom: 50px;
}
.gallery-grid {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.gallery-item {
padding: 10px;
width: 25%;
transition: all 0.4s ease;
}
.gallery-box {
position: relative;
overflow: hidden;
border-radius: 15px;
aspect-ratio: 4/3;
box-shadow: var(--soft-shadow);
}
.gallery-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-box:hover img {
transform: scale(1.1);
}
/* Filtering Visibility */
.product-item.hidden,
.gallery-item.hidden {
display: none !important;
opacity: 0;
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.gallery-item {
width: 50%;
}
}
@media (max-width: 480px) {
.gallery-item {
width: 100%;
}
.category-item {
width: 80px;
}
.cat-img-box {
width: 50px;
height: 50px;
}
}
.about-section .cat-img-wrapper {
position: relative;
width: 280px;
height: 270px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
}
.about-section .cat-bg-shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #e2f3e4;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
transition: all 0.6s ease;
z-index: 1;
opacity: 0.8;
}
.about-section .cat-img-box {
width: 250px;
height: 250px;
margin: 0;
overflow: visible;
transition: all 0.4s ease;
z-index: 2;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 576px) {
.about-section .cat-img-wrapper {
margin-top: 60px !important;
}
}
</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">
<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">
<h1>Organic <br> <?php echo $menuData['menu']?> at Your Farm</h1>
<p><?php echo $menuData['description']?></p>
<a href="contact-us.php" class="btn custom-btn">Enquire Now</a>
</div>
<?php if(!empty($menuData['bannerImage'])){?>
<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="image/product/<?php echo $menuData['bannerImage']?>"
alt="<?php echo $menuData['menu']?>" class="img-responsive main-fruit-img" style="">
</div>
</div>
<?php }?>
</div>
</div>
<div class="wavy-bottom"></div>
</section>
<!-- Categories Section (Filtering Controls) -->
<section class="categories-section">
<div class="container">
<div class="section-head text-center">
<h2>Categories</h2>
</div>
<div class="category-grid">
<div class="category-item active" data-category="all">
<div class="cat-img-wrapper">
<div class="cat-bg-shape"></div>
<div class="cat-img-box">
<img src="image/cat-apple.png" alt="All">
</div>
</div>
<span>All Products</span>
</div>
<?php while($subCat = mysqli_fetch_array($cat_sub_query)){?>
<div class="category-item" data-category="<?php echo "scat".$subCat['cat_id']?>">
<div class="cat-img-wrapper">
<div class="cat-bg-shape"></div>
<div class="cat-img-box">
<img src="image/product/<?php echo $subCat['sub_menu_image']?>" alt="<?php echo $subCat['category_name']?>">
</div>
</div>
<span><?php echo $subCat['category_name']?></span>
</div>
<?php }?>
</div>
</div>
</section>
<!-- Product Grid Section -->
<section class="features-section" id="products">
<div class="container">
<div class="section-head text-center">
<h2> Products</h2>
</div>
<div class="row product-row">
<?php $aboutProduct='';
$galleryImg = [];
while($resu5 = mysqli_fetch_array($cat_product_query)){
$extPrice = explode(",", $resu5['price']);
$extSize = explode(",", $resu5['oldprice']);
$extOldPrice = explode(",", $resu5['oldprc']);
if (!empty($resu5['img'])) {
$dcd_img = json_decode($resu5['img']);
foreach($dcd_img as $img_p){
array_push($galleryImg,$img_p);
}
}
if(!empty($resu5['description']))$aboutProduct .= $resu5['description'];
?>
<div class="col-md-3 product-item" data-category="<?php echo "scat".$resu5['cat_id']?>">
<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>
<!-- About Us Section -->
<section class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="about-text">
<h2 class="split-title">About Us</h2>
<p class="split-text"><?php echo $aboutProduct?></p>
</div>
</div>
<?php if(!empty($menuData['bannerImage'])){?>
<div class="col-lg-6">
<div class="cat-img-wrapper">
<div class="cat-bg-shape"></div>
<div class="cat-img-box">
<img src="image/product/<?php echo $menuData['bannerImage']?>" alt="Red">
</div>
</div>
</div>
<?php }?>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="gallery-section">
<div class="container">
<div class="section-head text-center">
<h2>Gallery</h2>
</div>
<div class="gallery-grid" id="gallery-grid">
<!-- Red Gallery -->
<?php foreach($galleryImg as $g){?>
<div class="gallery-item fade-in" data-category="red">
<div class="gallery-box">
<img src="<?php if (!empty($g) && file_exists("image/product/" . $g)) echo $url . "image/product/" . $g; ?>"
alt="Red Apple">
</div>
</div>
<?php }?>
</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>
<script>
$(document).ready(function () {
console.log("Ready!");
// Creative Parallax Effect on Mouse Move
$('.hero-section').mousemove(function (e) {
var moveX = (e.pageX * -1 / 25);
var moveY = (e.pageY * -1 / 25);
$('.main-fruit-img').css('transform', 'translate(' + moveX + 'px, ' + moveY + 'px) rotate(-5deg)');
});
// Reset on mouse leave
$('.hero-section').mouseleave(function () {
$('.main-fruit-img').css('transform', 'translate(0, 0) rotate(-5deg)');
});
// Product Filtering Logic
$('.category-item').on('click', function () {
// Update active class
$('.category-item').removeClass('active');
$(this).addClass('active');
var filter = $(this).data('category');
if (filter === 'all') {
$('.product-item').removeClass('hidden').addClass('fade-in');
} else {
$('.product-item').each(function () {
var itemCategory = $(this).data('category');
if (itemCategory === filter) {
$(this).removeClass('hidden').addClass('fade-in');
} else {
$(this).addClass('hidden').removeClass('fade-in');
}
});
}
});
});
</script>
</body>
</html>