File Manager

✏️ Edit File: /home/u414903541/domains/ecomish.com/public_html/aboutUs.php

<?php
// about.php
include 'header.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - Ecomish Men's Khadi Wear</title>
    <style>
        :root {
            --primary-dark: #30493D;
            --primary-light: #E2DED3;
            --accent-gold: #C8A97E;
            --accent-light: #F4F0E5;
            --accent-dark: #2C3E2F;
            --text-dark: #1A1A1A;
            --text-light: #5A5A5A;
            --shadow-soft: 0 15px 35px rgba(48, 73, 61, 0.08);
            --shadow-hard: 0 10px 25px rgba(48, 73, 61, 0.15);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Montserrat', 'Segoe UI', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f1e8 0%, #e8e4d9 100%);
            color: var(--text-dark);
            overflow-x: hidden;
            line-height: 1.6;
        }
        
        .about-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem;
        }
        
        /* Hero Section with Side-by-Side Layout */
        .hero-section {
            position: relative;
            height: 85vh;
            min-height: 650px;
            max-height: 900px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-bottom: 3rem;
            border-radius: 25px;
            background: linear-gradient(135deg, #30493D 0%, #2C3E2F 100%);
            box-shadow: var(--shadow-hard);
        }
        
        .hero-background {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(45deg, transparent 65%, rgba(200, 169, 126, 0.1) 65%),
                linear-gradient(-45deg, transparent 65%, rgba(200, 169, 126, 0.05) 65%);
            background-size: 100px 100px;
            opacity: 0.6;
            animation: patternMove 80s linear infinite;
        }
        
        .hero-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(200, 169, 126, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(200, 169, 126, 0.1) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
            -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
        }
        
        /* Hero Container for side-by-side layout */
        .hero-container {
            position: relative;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            max-width: 1300px;
            height: 100%;
            padding: 3rem;
        }
        
        /* Hero Content on Left */
        .hero-content {
            flex: 0 1 55%;
            padding: 2.5rem;
            background: rgba(48, 73, 61, 0.92);
            backdrop-filter: blur(12px);
            border-radius: 20px;
            border: 1px solid rgba(200, 169, 126, 0.3);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            opacity: 0;
            transform: translateX(-50px);
        }
        
        .hero-title {
            font-size: clamp(2rem, 4vw, 3.2rem);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 800;
            background: linear-gradient(to right, #E2DED3, #C8A97E);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1.2;
        }
        
        .hero-subtitle {
            font-size: clamp(1rem, 2vw, 1.2rem);
            font-weight: 300;
            margin-bottom: 2rem;
            line-height: 1.6;
            color: var(--accent-light);
            opacity: 0.9;
        }
        
        .hero-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, #C8A97E 0%, #B8955A 100%);
            color: white;
            padding: 1rem 1.8rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(200, 169, 126, 0.3);
            border: none;
            cursor: pointer;
            font-size: clamp(0.9rem, 1.8vw, 1rem);
            width: auto;
            min-width: 200px;
        }
        
        .hero-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(200, 169, 126, 0.4);
        }
        
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 2.5rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(200, 169, 126, 0.2);
        }
        
        .stat-item {
            text-align: center;
            padding: 0.5rem;
        }
        
        .stat-number {
            display: block;
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 700;
            color: var(--accent-gold);
            margin-bottom: 0.3rem;
            line-height: 1;
        }
        
        .stat-label {
            font-size: clamp(0.7rem, 1.5vw, 0.85rem);
            color: var(--accent-light);
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1.3;
        }
        
        /* 3D Cube on Right */
        .cube-container {
            flex: 0 1 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            perspective: 1500px;
            animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s;
            opacity: 0;
            transform: translateX(50px);
        }
        
        .khadi-cube {
            width: 280px;
            height: 280px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(-15deg);
            animation: rotateCube 25s infinite linear;
        }
        
        .cube-face {
            position: absolute;
            width: 280px;
            height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            color: var(--primary-light);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: 3px solid var(--accent-gold);
            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            backface-visibility: visible;
        }
        
        .cube-face:hover {
            background: rgba(200, 169, 126, 0.15) !important;
            transform: translateZ(15px);
            box-shadow: inset 0 0 40px rgba(200, 169, 126, 0.2), 0 0 30px rgba(200, 169, 126, 0.3);
        }
        
        .cube-front {
            transform: translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.95) 0%, rgba(44, 62, 47, 0.9) 100%);
        }
        
        .cube-back {
            transform: rotateY(180deg) translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.9) 0%, rgba(44, 62, 47, 0.85) 100%);
        }
        
        .cube-right {
            transform: rotateY(90deg) translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.85) 0%, rgba(44, 62, 47, 0.8) 100%);
        }
        
        .cube-left {
            transform: rotateY(-90deg) translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.8) 0%, rgba(44, 62, 47, 0.75) 100%);
        }
        
        .cube-top {
            transform: rotateX(90deg) translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.75) 0%, rgba(44, 62, 47, 0.7) 100%);
        }
        
        .cube-bottom {
            transform: rotateX(-90deg) translateZ(140px);
            background: linear-gradient(45deg, rgba(48, 73, 61, 0.7) 0%, rgba(44, 62, 47, 0.65) 100%);
        }
        
        /* Running Text Effect */
        .running-text-container {
            overflow: hidden;
            white-space: nowrap;
            background: linear-gradient(90deg, var(--primary-dark), var(--accent-dark));
            padding: 1.2rem 0;
            margin: 2.5rem 0;
            border-radius: 10px;
            position: relative;
        }
        
        .running-text {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 20s linear infinite;
            color: var(--primary-light);
            font-size: clamp(0.9rem, 2vw, 1.1rem);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        
        .running-text span {
            margin: 0 20px;
        }
        
        /* Content Sections */
        .content-section {
            margin-bottom: 4rem;
            padding: 2.5rem;
            border-radius: 18px;
            background: white;
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
        }
        
        .content-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, var(--accent-gold), var(--primary-dark));
        }
        
        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            color: var(--primary-dark);
            margin-bottom: 1.2rem;
            font-weight: 700;
            line-height: 1.2;
        }
        
        .section-content {
            font-size: clamp(1rem, 2vw, 1.1rem);
            color: var(--text-light);
            margin-bottom: 1.2rem;
            line-height: 1.7;
        }
        
        .highlight-box {
            background: linear-gradient(135deg, rgba(48, 73, 61, 0.05) 0%, rgba(44, 62, 47, 0.1) 100%);
            color: var(--text-dark);
            padding: 1.8rem;
            border-radius: 12px;
            margin: 1.8rem 0;
            border-left: 4px solid var(--accent-gold);
        }
        
        /* Enhanced Grid Layout - 4 columns on desktop, 2 on mobile */
        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.8rem;
            margin-top: 2.5rem;
        }
        
        .value-card {
            background: white;
            padding: 1.8rem;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border-top: 3px solid var(--accent-gold);
            text-align: center;
        }
        
        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .value-icon {
            font-size: clamp(2rem, 4vw, 2.5rem);
            margin-bottom: 1rem;
            color: var(--primary-dark);
        }
        
        .value-title {
            font-size: clamp(1.2rem, 2.5vw, 1.4rem);
            color: var(--primary-dark);
            margin-bottom: 0.8rem;
            font-weight: 600;
            line-height: 1.3;
        }
        
        /* Animation Classes */
        @keyframes slideInLeft {
            0% {
                opacity: 0;
                transform: translateX(-50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slideInRight {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes patternMove {
            0% { background-position: 0 0; }
            100% { background-position: 100px 100px; }
        }
        
        @keyframes rotateCube {
            0% {
                transform: rotateX(-15deg) rotateY(0deg);
            }
            100% {
                transform: rotateX(-15deg) rotateY(360deg);
            }
        }
        
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Responsive Design - Mobile First Approach */
        @media (min-width: 992px) {
            /* Desktop specific styles for side-by-side layout */
            .hero-container {
                flex-direction: row;
                gap: 3rem;
            }
            
            .hero-content {
                align-self: center;
                margin-right: 0;
            }
            
            .cube-container {
                align-self: center;
            }
            
            .khadi-cube {
                width: 320px;
                height: 320px;
            }
            
            .cube-face {
                width: 320px;
                height: 320px;
                font-size: 1.5rem;
            }
            
            .cube-front {
                transform: translateZ(160px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(160px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(160px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(160px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(160px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(160px);
            }
        }
        
        @media (max-width: 1200px) {
            .hero-container {
                width: 95%;
                padding: 2rem;
            }
            
            .khadi-cube {
                width: 250px;
                height: 250px;
            }
            
            .cube-face {
                width: 250px;
                height: 250px;
                font-size: 1.2rem;
            }
            
            .cube-front {
                transform: translateZ(125px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(125px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(125px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(125px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(125px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(125px);
            }
            
            .values-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            /* Tablet - Stack vertically */
            .hero-container {
                flex-direction: column;
                justify-content: center;
                gap: 2rem;
                padding: 1.5rem;
            }
            
            .hero-content {
                flex: 1;
                width: 100%;
                max-width: 600px;
                margin: 0 auto;
                text-align: center;
            }
            
            .cube-container {
                flex: 1;
                width: 100%;
                height: 400px;
                margin-top: 1rem;
            }
            
            .khadi-cube {
                width: 220px;
                height: 220px;
            }
            
            .cube-face {
                width: 220px;
                height: 220px;
                font-size: 1.1rem;
            }
            
            .cube-front {
                transform: translateZ(110px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(110px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(110px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(110px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(110px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(110px);
            }
            
            .values-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
            
            .content-section {
                padding: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .hero-section {
                height: auto;
                min-height: auto;
                max-height: none;
                padding: 1rem;
            }
            
            .hero-container {
                padding: 1rem;
                gap: 1.5rem;
            }
            
            .hero-content {
                padding: 1.8rem;
                border-radius: 15px;
            }
            
            .hero-title {
                letter-spacing: 1px;
                margin-bottom: 0.8rem;
            }
            
            .hero-subtitle {
                margin-bottom: 1.5rem;
                line-height: 1.5;
            }
            
            .hero-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                margin-top: 1.5rem;
                padding-top: 1.2rem;
            }
            
            .stat-number {
                margin-bottom: 0.2rem;
            }
            
            .hero-cta {
                padding: 0.9rem 1.5rem;
                min-width: 180px;
            }
            
            .cube-container {
                height: 350px;
                margin-top: 0;
            }
            
            .khadi-cube {
                width: 180px;
                height: 180px;
            }
            
            .cube-face {
                width: 180px;
                height: 180px;
                font-size: 0.95rem;
                letter-spacing: 1.5px;
            }
            
            .cube-front {
                transform: translateZ(90px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(90px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(90px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(90px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(90px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(90px);
            }
            
            .running-text-container {
                padding: 1rem 0;
                margin: 2rem 0;
            }
            
            .running-text span {
                margin: 0 15px;
            }
            
            .content-section {
                padding: 1.8rem;
                margin-bottom: 3rem;
                border-radius: 15px;
            }
            
            .value-card {
                padding: 1.5rem;
            }
        }
        
        @media (max-width: 576px) {
            .about-container {
                padding: 0.8rem;
            }
            
            .hero-section {
                margin-bottom: 2rem;
                border-radius: 15px;
            }
            
            .hero-content {
                padding: 1.5rem;
                border-radius: 12px;
                width: 100%;
            }
            
            .hero-title {
                font-size: 1.8rem;
                letter-spacing: 0.8px;
            }
            
            .hero-subtitle {
                font-size: 1rem;
                line-height: 1.4;
            }
            
            .hero-stats {
                grid-template-columns: repeat(3, 1fr);
                gap: 0.8rem;
                margin-top: 1.2rem;
                padding-top: 1rem;
            }
            
            .stat-item {
                padding: 0.3rem;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .stat-label {
                font-size: 0.7rem;
                letter-spacing: 0.3px;
            }
            
            .hero-cta {
                padding: 0.8rem 1.2rem;
                min-width: 160px;
                font-size: 0.9rem;
                gap: 8px;
            }
            
            .cube-container {
                height: 300px;
            }
            
            .khadi-cube {
                width: 150px;
                height: 150px;
            }
            
            .cube-face {
                width: 150px;
                height: 150px;
                font-size: 0.85rem;
                letter-spacing: 1px;
            }
            
            .cube-front {
                transform: translateZ(75px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(75px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(75px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(75px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(75px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(75px);
            }
            
            .values-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
                margin-top: 2rem;
            }
            
            .value-card {
                padding: 1.2rem;
                border-radius: 10px;
            }
            
            .value-title {
                font-size: 1.1rem;
                margin-bottom: 0.5rem;
            }
            
            .content-section {
                padding: 1.5rem;
                margin-bottom: 2.5rem;
                border-radius: 12px;
            }
            
            .highlight-box {
                padding: 1.2rem;
                border-radius: 10px;
            }
        }
        
        @media (max-width: 375px) {
            .hero-content {
                padding: 1.2rem;
            }
            
            .hero-title {
                font-size: 1.6rem;
            }
            
            .hero-subtitle {
                font-size: 0.95rem;
                margin-bottom: 1.2rem;
            }
            
            .hero-stats {
                gap: 0.6rem;
            }
            
            .stat-number {
                font-size: 1.3rem;
            }
            
            .stat-label {
                font-size: 0.65rem;
            }
            
            .hero-cta {
                padding: 0.7rem 1rem;
                min-width: 140px;
                font-size: 0.85rem;
            }
            
            .cube-container {
                height: 280px;
            }
            
            .khadi-cube {
                width: 130px;
                height: 130px;
            }
            
            .cube-face {
                width: 130px;
                height: 130px;
                font-size: 0.75rem;
                letter-spacing: 0.8px;
            }
            
            .cube-front {
                transform: translateZ(65px);
            }
            
            .cube-back {
                transform: rotateY(180deg) translateZ(65px);
            }
            
            .cube-right {
                transform: rotateY(90deg) translateZ(65px);
            }
            
            .cube-left {
                transform: rotateY(-90deg) translateZ(65px);
            }
            
            .cube-top {
                transform: rotateX(90deg) translateZ(65px);
            }
            
            .cube-bottom {
                transform: rotateX(-90deg) translateZ(65px);
            }
            
            .values-grid {
                gap: 0.8rem;
            }
            
            .value-card {
                padding: 1rem;
            }
            
            .value-title {
                font-size: 1rem;
            }
        }
        
        /* Scroll Progress */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(to right, var(--accent-gold), var(--primary-dark));
            z-index: 1000;
            transition: width 0.1s ease;
        }
        
        /* Section Divider */
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
            margin: 3rem 0;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    
    <div class="scroll-progress" id="scrollProgress"></div>
    
    <div class="about-container">
        
        <section class="hero-section">
            <div class="hero-background"></div>
            <div class="hero-grid"></div>
            
            <div class="hero-container">
                
                <div class="hero-content">
                    <h1 class="hero-title">Ecomish Khadi</h1>
                    <p class="hero-subtitle">
                        Where tradition meets contemporary style. We celebrate authentic craftsmanship through sustainable Khadi wear, empowering artisans while offering you timeless elegance.
                    </p>
                    
                    <div class="hero-stats">
                        <div class="stat-item">
                            <span class="stat-number">500+</span>
                            <span class="stat-label">Artisans Empowered</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">100%</span>
                            <span class="stat-label">Natural Fabric</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">10k+</span>
                            <span class="stat-label">Pieces Crafted</span>
                        </div>
                    </div>
                    
                    <button class="hero-cta">
                        <i class="fas fa-arrow-right" style="font-size: 0.9em;"></i>
                        Explore Collection
                    </button>
                </div>
                
                
                <div class="cube-container">
                    <div class="khadi-cube">
                        <div class="cube-face cube-front">Handspun</div>
                        <div class="cube-face cube-back">Handwoven</div>
                        <div class="cube-face cube-right">Sustainable</div>
                        <div class="cube-face cube-left">Ethical</div>
                        <div class="cube-face cube-top">Khadi</div>
                        <div class="cube-face cube-bottom">Ecomish</div>
                    </div>
                </div>
            </div>
        </section>
        
        
        <div class="running-text-container">
            <div class="running-text">
                <span>✦ Handspun ✦</span>
                <span>Handwoven ✦</span>
                <span>Sustainable Fashion ✦</span>
                <span>Ethical Production ✦</span>
                <span>Support Local Artisans ✦</span>
                <span>Traditional Craftsmanship ✦</span>
                <span>Eco-Friendly ✦</span>
                <span>Khadi Fabric ✦</span>
            </div>
        </div>
        
        
        <div class="section-divider"></div>
        
        
        <section class="content-section">
            <h2 class="section-title">Our Story & Heritage</h2>
            <p class="section-content">
                Welcome to <strong>Ecomish</strong>, your premier destination for authentic Men's Khadi wear. Born from a deep respect for traditional craftsmanship and sustainable fashion, we bring you clothing made from genuine Khadi fabric—a handspun and handwoven material that carries centuries of cultural heritage.
            </p>
            <p class="section-content">
                Our platform is dedicated to promoting sustainable fashion while supporting skilled local artisans. Khadi fabric, known for its natural breathability and eco-friendly qualities, represents more than just clothing—it's a commitment to ethical consumption and cultural preservation.
            </p>
            
            <div class="highlight-box">
                <p style="font-size: clamp(1rem, 2vw, 1.2rem); font-style: italic; line-height: 1.5;">
                    "Each thread in our fabric tells a story of skilled hands, traditional techniques passed down through generations, and sustainable practices that honor our planet."
                </p>
            </div>
            
            <p class="section-content">
                We work directly with artisan cooperatives across India, ensuring fair wages, ethical working conditions, and the preservation of traditional weaving techniques. Every purchase supports these communities and helps keep ancient crafts alive.
            </p>
        </section>
        
        
        <section class="content-section">
            <h2 class="section-title">Our Core Values</h2>
            <p class="section-content" style="margin-bottom: 2.5rem;">
                These principles guide everything we do at Ecomish, from fabric selection to customer service.
            </p>
            
            <div class="values-grid">
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-leaf"></i></div>
                    <h3 class="value-title">Sustainability</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">100% natural, biodegradable Khadi fabric with zero chemical processing.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-hands-helping"></i></div>
                    <h3 class="value-title">Artisan Support</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Fair wages and direct partnerships with skilled weavers.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-palette"></i></div>
                    <h3 class="value-title">Craft Preservation</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Keeping traditional weaving techniques alive for future generations.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-handshake"></i></div>
                    <h3 class="value-title">Community Impact</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Creating sustainable livelihoods in rural artisan communities.</p>
                </div>
            </div>
        </section>
        
        
        <section class="content-section">
            <h2 class="section-title">The Ecomish Collection</h2>
            <p class="section-content">
                Discover our curated range of men's Khadi clothing, where traditional craftsmanship meets contemporary design:
            </p>
            
            <div class="values-grid">
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-tshirt"></i></div>
                    <h3 class="value-title">Kurtas & Shirts</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Classic and modern styles for every occasion.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-vest"></i></div>
                    <h3 class="value-title">Jawahar Jackets</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Iconic ethnic statement pieces with intricate detailing.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-socks"></i></div>
                    <h3 class="value-title">Bottoms</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Dhotis, pajamas, and tailored trousers.</p>
                </div>
                
                <div class="value-card">
                    <div class="value-icon"><i class="fas fa-scarf"></i></div>
                    <h3 class="value-title">Accessories</h3>
                    <p class="section-content" style="font-size: clamp(0.9rem, 1.8vw, 1rem);">Stoles, scarves, and traditional accents.</p>
                </div>
            </div>
            
            <p class="section-content" style="margin-top: 1.8rem;">
                Each piece is crafted with meticulous attention to detail, ensuring superior quality and comfort. Our user-friendly platform provides comprehensive product details, sizing guidance, and high-resolution imagery for an informed shopping experience.
            </p>
        </section>
        
        
        <section class="content-section">
            <h2 class="section-title">Our Commitment to Excellence</h2>
            <p class="section-content">
                At Ecomish, we believe in complete transparency and customer satisfaction. Our commitment extends beyond just selling products:
            </p>
            
            <div class="highlight-box">
                <ul style="list-style: none; padding-left: 0; margin: 1rem 0;">
                    <li style="padding: 0.7rem 0; border-bottom: 1px solid rgba(200, 169, 126, 0.2);">
                        <strong><i class="fas fa-check-circle" style="color: var(--accent-gold); margin-right: 0.5rem;"></i> Quality Assurance:</strong> Every garment undergoes rigorous quality checks
                    </li>
                    <li style="padding: 0.7rem 0; border-bottom: 1px solid rgba(200, 169, 126, 0.2);">
                        <strong><i class="fas fa-check-circle" style="color: var(--accent-gold); margin-right: 0.5rem;"></i> Easy Returns:</strong> 30-day hassle-free return policy
                    </li>
                    <li style="padding: 0.7rem 0; border-bottom: 1px solid rgba(200, 169, 126, 0.2);">
                        <strong><i class="fas fa-check-circle" style="color: var(--accent-gold); margin-right: 0.5rem;"></i> Secure Shopping:</strong> Bank-level security for all transactions
                    </li>
                    <li style="padding: 0.7rem 0;">
                        <strong><i class="fas fa-check-circle" style="color: var(--accent-gold); margin-right: 0.5rem;"></i> Personal Support:</strong> Dedicated customer service team
                    </li>
                </ul>
            </div>
            
            <p class="section-content" style="text-align: center; font-size: clamp(1.1rem, 2.5vw, 1.2rem); margin-top: 1.8rem;">
                <strong>Join us in redefining fashion—where every thread matters, every artisan is valued, and every purchase makes a difference.</strong>
            </p>
        </section>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Scroll Progress Indicator
            const scrollProgress = document.getElementById('scrollProgress');
            
            window.addEventListener('scroll', () => {
                const windowHeight = document.documentElement.scrollHeight - window.innerHeight;
                const scrolled = (window.scrollY / windowHeight) * 100;
                scrollProgress.style.width = `${scrolled}%`;
            });
            
            // Interactive 3D Cube
            const cube = document.querySelector('.khadi-cube');
            let mouseX = 0, mouseY = 0;
            let targetRotationX = -15;
            let targetRotationY = -15;
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;
            
            // Mouse move interaction
            document.addEventListener('mousemove', (e) => {
                mouseX = e.clientX;
                mouseY = e.clientY;
                
                // Calculate rotation based on mouse position
                const rotateY = ((mouseX / windowWidth) * 60) - 30;
                const rotateX = ((mouseY / windowHeight) * 40) - 20;
                
                targetRotationY = rotateY;
                targetRotationX = -rotateX;
            });
            
            // Touch interaction for mobile
            document.addEventListener('touchmove', (e) => {
                e.preventDefault();
                if (e.touches.length > 0) {
                    const touch = e.touches[0];
                    mouseX = touch.clientX;
                    mouseY = touch.clientY;
                    
                    const rotateY = ((mouseX / windowWidth) * 40) - 20;
                    const rotateX = ((mouseY / windowHeight) * 30) - 15;
                    
                    targetRotationY = rotateY;
                    targetRotationX = -rotateX;
                }
            }, { passive: false });
            
            // Smooth rotation animation
            let currentRotationX = -15;
            let currentRotationY = -15;
            
            function updateCubeRotation() {
                // Smooth interpolation
                currentRotationX += (targetRotationX - currentRotationX) * 0.05;
                currentRotationY += (targetRotationY - currentRotationY) * 0.05;
                
                // Add continuous slow rotation
                const time = Date.now() / 1000;
                const slowRotation = Math.sin(time * 0.1) * 5;
                
                cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY + slowRotation}deg)`;
                
                requestAnimationFrame(updateCubeRotation);
            }
            
            updateCubeRotation();
            
            // Card hover effects
            const valueCards = document.querySelectorAll('.value-card');
            
            valueCards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.transform = 'translateY(-8px) scale(1.02)';
                });
                
                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'translateY(0) scale(1)';
                });
                
                // Touch feedback for mobile
                card.addEventListener('touchstart', () => {
                    card.style.transform = 'translateY(-8px) scale(1.02)';
                });
                
                card.addEventListener('touchend', () => {
                    setTimeout(() => {
                        card.style.transform = 'translateY(0) scale(1)';
                    }, 150);
                });
            });
            
            // CTA button click
            const ctaButton = document.querySelector('.hero-cta');
            ctaButton.addEventListener('click', () => {
                // Add click animation
                ctaButton.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    ctaButton.style.transform = 'scale(1)';
                }, 150);
                
                // Navigate to collection page
                window.location.href = 'collection.php';
            });
            
            // Animate elements on scroll
            const contentSections = document.querySelectorAll('.content-section');
            
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeIn 0.8s ease forwards';
                        entry.target.style.opacity = '1';
                        
                        // Animate cards within the section
                        const cards = entry.target.querySelectorAll('.value-card');
                        cards.forEach((card, index) => {
                            card.style.opacity = '0';
                            card.style.transform = 'translateY(20px)';
                            setTimeout(() => {
                                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                                card.style.opacity = '1';
                                card.style.transform = 'translateY(0)';
                            }, index * 100);
                        });
                    }
                });
            }, observerOptions);
            
            contentSections.forEach(section => {
                section.style.opacity = '0';
                observer.observe(section);
            });
            
            // Running text animation
            const runningText = document.querySelector('.running-text');
            const originalText = runningText.innerHTML;
            
            // Duplicate text for seamless loop
            runningText.innerHTML = originalText + originalText;
            
            // Cube face hover effect
            const cubeFaces = document.querySelectorAll('.cube-face');
            cubeFaces.forEach(face => {
                face.addEventListener('mouseenter', () => {
                    face.style.fontSize = '1.5rem';
                    face.style.letterSpacing = '3px';
                    face.style.boxShadow = 'inset 0 0 40px rgba(200, 169, 126, 0.3), 0 0 30px rgba(200, 169, 126, 0.5)';
                });
                
                face.addEventListener('mouseleave', () => {
                    face.style.fontSize = '';
                    face.style.letterSpacing = '';
                    face.style.boxShadow = 'inset 0 0 30px rgba(0, 0, 0, 0.3)';
                });
                
                // Touch feedback for mobile
                face.addEventListener('touchstart', () => {
                    face.style.fontSize = '1.3rem';
                    face.style.letterSpacing = '3px';
                    face.style.boxShadow = 'inset 0 0 30px rgba(200, 169, 126, 0.3), 0 0 20px rgba(200, 169, 126, 0.5)';
                });
                
                face.addEventListener('touchend', () => {
                    setTimeout(() => {
                        face.style.fontSize = '';
                        face.style.letterSpacing = '';
                        face.style.boxShadow = 'inset 0 0 30px rgba(0, 0, 0, 0.3)';
                    }, 300);
                });
            });
            
            // Add subtle background animation to hero
            const heroBackground = document.querySelector('.hero-background');
            let offset = 0;
            
            function animateHeroBackground() {
                offset += 0.1;
                heroBackground.style.backgroundPosition = `${offset}px ${offset}px`;
                requestAnimationFrame(animateHeroBackground);
            }
            
            animateHeroBackground();
            
            // Adjust layout based on screen size
            function adjustLayout() {
                const heroContainer = document.querySelector('.hero-container');
                const heroSection = document.querySelector('.hero-section');
                
                if (window.innerWidth >= 992) {
                    // Desktop - side by side
                    heroSection.style.height = '85vh';
                    heroSection.style.minHeight = '650px';
                } else {
                    // Mobile - stacked
                    heroSection.style.height = 'auto';
                    heroSection.style.minHeight = 'auto';
                }
            }
            
            // Initial adjustment
            adjustLayout();
            
            // Adjust on resize
            window.addEventListener('resize', adjustLayout);
            window.addEventListener('orientationchange', adjustLayout);
            
            // Add floating animation to cube for desktop
            if (window.innerWidth >= 992) {
                const cubeContainer = document.querySelector('.khadi-cube');
                let floatOffset = 0;
                
                function floatCube() {
                    floatOffset += 0.01;
                    const floatY = Math.sin(floatOffset) * 10;
                    cubeContainer.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg) translateY(${floatY}px)`;
                    requestAnimationFrame(floatCube);
                }
                
                // Combine with existing rotation
                const originalUpdateCubeRotation = updateCubeRotation;
                updateCubeRotation = function() {
                    originalUpdateCubeRotation();
                    floatCube();
                };
            }
        });
    </script>
</body>
</html>

<?php
include 'footer.php';
?>

Batal

⬅ Naik ke ecomish.com 49 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁PHPMailer-master	dir	—	2026-02-18 06:37	📂 Buka
📁admin	dir	—	2026-04-19 01:30	📂 Buka
📁images	dir	—	2026-02-18 08:01	📂 Buka
📁uploads	dir	—	2026-07-03 18:37	📂 Buka
📁vendor	dir	—	2026-02-02 11:41	📂 Buka
📄.htaccess	htaccess	0 B	2026-02-05 07:26	✏️ Edit 👁️ View
🐘404.php	php	754 B	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️PHPMailer-master.zip	zip	461.7 KB	2026-02-18 06:36	✏️ Edit 👁️ View
🐘aboutUs.php	php	47.8 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘article.php	php	3.3 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘blog.php	php	2.9 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘cart.php	php	19.3 KB	2026-04-10 07:49	✏️ Edit 👁️ View
🐘cashfree_webhook.php	php	2.7 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘category.php	php	7.6 KB	2026-02-25 10:31	✏️ Edit 👁️ View
🐘check_ip.php	php	509 B	2026-02-06 11:31	✏️ Edit 👁️ View
🐘checkout.php	php	67.2 KB	2026-04-10 07:54	✏️ Edit 👁️ View
🐘config.php	php	274 B	2026-02-02 11:43	✏️ Edit 👁️ View
🐘contact.php	php	1.1 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘contactUs.php	php	41 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️ecomish.zip	zip	393.4 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🗜️ecomish260226.zip	zip	37.1 MB	2026-02-26 10:24	✏️ Edit 👁️ View
🗜️ecomishbackup16022026.zip	zip	34.5 MB	2026-02-16 09:46	✏️ Edit 👁️ View
🗜️ecomishbackup18022026.zip	zip	34.6 MB	2026-02-18 06:32	✏️ Edit 👁️ View
🗜️ecomishlive222026.zip	zip	29.5 MB	2026-02-02 11:39	✏️ Edit 👁️ View
🐘faq.php	php	18.7 KB	2026-02-25 12:03	✏️ Edit 👁️ View
🐘footer.php	php	21.5 KB	2026-02-25 12:00	✏️ Edit 👁️ View
🐘forgot_password.php	php	10.8 KB	2026-02-23 08:07	✏️ Edit 👁️ View
🐘functions.php	php	956 B	2026-02-02 11:41	✏️ Edit 👁️ View
🐘header.php	php	19.9 KB	2026-04-10 07:53	✏️ Edit 👁️ View
🐘hu.php	php	176.5 KB	2026-04-19 01:35	✏️ Edit 👁️ View
🐘index.php	php	34.4 KB	2026-04-10 07:12	✏️ Edit 👁️ View
🐘install.php	php	2.8 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘login.php	php	11.7 KB	2026-03-05 08:05	✏️ Edit 👁️ View
🐘logout.php	php	79 B	2026-02-02 11:41	✏️ Edit 👁️ View
🐘nimbus_shipping.php	php	7.3 KB	2026-02-09 06:39	✏️ Edit 👁️ View
🐘order_success.php	php	17.6 KB	2026-02-28 10:40	✏️ Edit 👁️ View
🐘orders.php	php	10.4 KB	2026-02-18 10:28	✏️ Edit 👁️ View
🐘privacypolicy.php	php	39.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘product.php	php	22.9 KB	2026-02-26 11:25	✏️ Edit 👁️ View
🐘products.php	php	15.1 KB	2026-04-10 07:09	✏️ Edit 👁️ View
🐘profile.php	php	32.4 KB	2026-02-25 12:12	✏️ Edit 👁️ View
🐘register.php	php	18.3 KB	2026-03-05 08:01	✏️ Edit 👁️ View
🐘returnRefund.php	php	47.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘search.php	php	13.2 KB	2026-02-16 12:44	✏️ Edit 👁️ View
🐘seller_register.php	php	18.5 KB	2026-02-28 07:52	✏️ Edit 👁️ View
🐘seller_status.php	php	7.9 KB	2026-02-28 07:43	✏️ Edit 👁️ View
🐘shipping-policy.php	php	48.4 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘terms-of-service.php	php	71.5 KB	2026-02-02 11:41	✏️ Edit 👁️ View
🐘wishlist.php	php	9.9 KB	2026-02-02 11:41	✏️ Edit 👁️ View