diff --git a/AGENTS.md b/AGENTS.md deleted file mode 100644 index 8bd0e39..0000000 --- a/AGENTS.md +++ /dev/null @@ -1,5 +0,0 @@ - -# This is NOT the Next.js you know - -This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. - diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 43c994c..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1 +0,0 @@ -@AGENTS.md diff --git a/public/images/Team/1.png b/public/images/Team/1.png deleted file mode 100644 index 2f8146c..0000000 Binary files a/public/images/Team/1.png and /dev/null differ diff --git a/public/images/Team/3 .png b/public/images/Team/3 .png deleted file mode 100644 index 3089f76..0000000 Binary files a/public/images/Team/3 .png and /dev/null differ diff --git a/public/images/Team/4.png b/public/images/Team/4.png deleted file mode 100644 index c958a53..0000000 Binary files a/public/images/Team/4.png and /dev/null differ diff --git a/public/images/Team/5.png b/public/images/Team/5.png deleted file mode 100644 index 0464aca..0000000 Binary files a/public/images/Team/5.png and /dev/null differ diff --git a/src/app/globals.css b/src/app/globals.css index ea8a543..eb5ad7a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -400,3 +400,293 @@ min-width: 64px; } } + +/* Custom premium Industry Solutions hover cards styles */ +.industry-solutions-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + width: 90%; + margin: 30px auto; +} + +@media (max-width: 1024px) { + .industry-solutions-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .industry-solutions-grid { + grid-template-columns: 1fr; + } +}.industry-card-link { + position: relative; + height: 600px; + border-radius: 30px; + overflow: hidden; + display: block; + text-decoration: none; + background: #121212; + box-shadow: 0 10px 30px rgba(0,0,0,0.12); + transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; +} + +/* Elegant glass border highlight */ +.industry-card-link::after { + content: ""; + position: absolute; + inset: 0; + border-radius: 30px; + border: 1px solid rgba(255, 255, 255, 0.08); + z-index: 6; + pointer-events: none; + transition: border-color 0.4s ease; +} + +/* Premium luxury shimmer sweep animation on hover */ +@keyframes shimmer-sweep { + 0% { transform: translateX(-150%) skewX(-25deg); } + 100% { transform: translateX(150%) skewX(-25deg); } +} + +.industry-card-link::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 60%; + height: 100%; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.18) 50%, + rgba(255, 255, 255, 0) 100% + ); + transform: translateX(-150%) skewX(-25deg); + z-index: 7; + pointer-events: none; +} + +.industry-card-link:hover::before { + animation: shimmer-sweep 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; +} + +.industry-card-link:hover { + transform: translateY(-5px); + box-shadow: 0 20px 40px rgba(192, 18, 39, 0.25); +} + +.industry-card-link:hover::after { + border-color: rgba(255, 255, 255, 0.25); +} + +.industry-card-bg { + position: absolute; + inset: 0; + z-index: 1; + transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.industry-card-link:hover .industry-card-bg { + transform: scale(1.04); +} + +.industry-card-overlay { + position: absolute; + inset: 0; + z-index: 2; + background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); + transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +/* Fade out dark overlay on hover to prevent muddying the crimson wash! */ +.industry-card-link:hover .industry-card-overlay { + opacity: 0; +} + +.industry-card-hover-bg { + position: absolute; + inset: 0; + z-index: 3; + /* Glowing vibrant crimson wash matching the reference image exactly */ + background: linear-gradient(to top, rgba(192, 18, 39, 0.88) 0%, rgba(215, 20, 40, 0.8) 100%); + opacity: 0; + transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.industry-card-link:hover .industry-card-hover-bg { + opacity: 1; +} + +/* Default card bottom text state */ +.industry-card-default-content { + position: absolute; + bottom: 40px; + left: 24px; + z-index: 4; + opacity: 1; + transition: opacity 0.3s ease, transform 0.3s ease; + transform: translateY(0); +} + +.industry-card-link:hover .industry-card-default-content { + opacity: 0; + transform: translateY(10px); +} + +.industry-card-default-title { + color: #ffffff !important; + font-size: 28px !important; + font-weight: 700 !important; + margin: 0 !important; + letter-spacing: -0.5px !important; + text-transform: none !important; + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; +} + +/* Hover state content wrapper */ +.industry-card-hover-content { + position: absolute; + inset: 0; + z-index: 5; + padding: 40px 24px; + display: flex; + flex-direction: column; + justify-content: space-between; + opacity: 0; + transform: translateY(6px); + transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); + pointer-events: none; +} + +.industry-card-link:hover .industry-card-hover-content { + opacity: 1; + transform: translateY(0); + pointer-events: auto; +} + +.industry-card-hover-top { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* Premium horizontal top divider line from the prompt design */ +.industry-card-hover-top::before { + content: ""; + display: block; + width: 100%; + height: 1px; + background: rgba(255, 255, 255, 0.25); + margin-bottom: 5px; +} + +.industry-card-description { + color: #ffffff !important; + font-size: 18px !important; + line-height: 1.4 !important; + margin: 0 !important; + font-weight: 600 !important; + letter-spacing: -0.2px !important; + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; +} + +.industry-card-section-title { + color: #ffffff !important; + font-size: 12px !important; + font-weight: 800 !important; + letter-spacing: 1.5px !important; + margin-bottom: 10px !important; + text-transform: uppercase !important; + opacity: 0.9 !important; + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; +} + +.industry-card-list { + list-style: none !important; + padding: 0 !important; + margin: 0 !important; + display: flex !important; + flex-direction: column !important; + gap: 6px !important; +} + +.industry-card-list-item { + color: rgba(255, 255, 255, 0.9) !important; + font-size: 15px !important; + line-height: 1.4 !important; + position: relative !important; + padding-left: 18px !important; + opacity: 0; + transform: translateY(5px); + transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; +} + +.industry-card-link:hover .industry-card-list-item { + opacity: 1; + transform: translateY(0); +} + +/* Staggered animation entry delays - snappier response */ +.industry-card-list-item.bullet-1 { transition-delay: 0.04s; } +.industry-card-list-item.bullet-2 { transition-delay: 0.08s; } +.industry-card-list-item.bullet-3 { transition-delay: 0.12s; } +.industry-card-list-item.bullet-4 { transition-delay: 0.16s; } +.industry-card-list-item.bullet-5 { transition-delay: 0.2s; } +.industry-card-list-item.bullet-6 { transition-delay: 0.24s; } + +/* Custom CSS circular dot for bullet points to guarantee consistent rendering */ +.industry-card-list-item::before { + content: "" !important; + position: absolute !important; + left: 0 !important; + top: 7px !important; + width: 6px !important; + height: 6px !important; + background-color: #ffffff !important; + border-radius: 50% !important; +} + +/* Hover state bottom section */ +.industry-card-hover-bottom { + display: flex; + align-items: center; + gap: 15px; +} + +.industry-card-hover-icon { + width: 48px; + height: 48px; + border-radius: 50%; + background: #ffffff; + display: flex; + align-items: center; + justify-content: center; + color: #c01227; + transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} + +/* Removed rotate(45deg) which turned the ↗ diagonal arrow into a straight right arrow → */ +.industry-card-link:hover .industry-card-hover-icon { + transform: scale(1.08) translateY(-2px); + background-color: #ffffff; + color: #c01227; +} + +.industry-card-hover-title { + color: #ffffff !important; + font-size: 24px !important; + font-weight: 700 !important; + margin: 0 !important; + font-family: 'Inter', system-ui, -apple-system, sans-serif !important; + text-transform: none !important; + letter-spacing: -0.5px !important; +} + +.elementor-element-3b4a7cc > .e-con-inner { + padding-left: clamp(20px, 4vw, 50px) !important; + padding-right: clamp(20px, 4vw, 50px) !important; +} diff --git a/src/components/sections/IndustrySolutions.tsx b/src/components/sections/IndustrySolutions.tsx index 9c97945..7260d08 100644 --- a/src/components/sections/IndustrySolutions.tsx +++ b/src/components/sections/IndustrySolutions.tsx @@ -1,226 +1,279 @@ import React from "react"; import Link from "next/link"; +import Image from "next/image"; export default function IndustrySolutions() { return (
-
-
- -
-
-
-
-
/ Industry Solutions /
-
-
-
-
-

Smart solutions built exclusively for your industry

-
-
-
-
-
-
-
-
-
- -
+
+
- {/* Card 1: FMCG */} - -
-
- FMCG Logistics +
+
+
+
+
/ Industry Solutions /
+
+
+
+
+

+ {(() => { + const lines = [ + "Smart solutions built", + "exclusively for your", + "industry" + ]; + let letterCount = 0; + return lines.map((line, lineIdx) => ( + + {line.split(" ").map((word, wordIdx, arr) => { + const letters = word.split("").map((char, charIdx) => { + const delay = `${(letterCount * 0.02).toFixed(2)}s`; + letterCount++; + return ( + + {char} + + ); + }); + return ( + + + {letters} + + {wordIdx < arr.length - 1 && " "} + + ); + })} + {lineIdx < lines.length - 1 &&
} + + )); + })()} +

+
+
+
+
+
+
+
+ +
-
-
-
- +
+ + {/* Card 1: FMCG */} + +
+ FMCG Logistics
-
-
-
-
-
- - - - - - - FMCG +
+
+ + {/* Default state */} +
+

FMCG

-
-
-
-
-

High volume, tight margins, zero tolerance for stockouts.

-
+ + {/* Hover state */} +
+
+

+ High volume, tight margins, zero tolerance for stockouts. +

+
+
Challenges
+
    +
  • Unpredictable demand spikes
    • +
  • Fresh product expiry constraints
    • +
  • Multi-stop route complexity
    • +
+
+
+
Doormile Solutions
+
    +
  • AI-driven demand-responsive routing
    • +
  • Freshness-aware delivery prioritization
    • +
  • Dynamic batch optimization
    • +
+
+
+ +
+
+ + + + +
+

FMCG

+
+
+ + + {/* Card 2: Pharmaceutical */} + +
+ Pharma Logistics +
+
+
+ + {/* Default state */} +
+

Pharmaceutical

+
+ + {/* Hover state */} +
+
+

+ Temperature-sensitive, compliance-critical, life-saving. +

+
+
Challenges
+
    +
  • Cold chain integrity requirements
    • +
  • Regulatory compliance tracking
    • +
  • Critical delivery time windows
    • +
+
+
+
Doormile Solutions
+
    +
  • Real-time temperature monitoring
    • +
  • Chain-of-custody documentation
    • +
  • Priority override for critical shipments
    • +
+
+
+ +
+
+ + + + +
+

Pharmaceutical

+
+
+ + + {/* Card 3: Enterprise & B2B */} + +
+ Enterprise Logistics +
+
+
+ + {/* Default state */} +
+

Enterprise & B2B

+
+ + {/* Hover state */} +
+
+

+ High-value shipments with complex delivery requirements. +

+
+
Challenges
+
    +
  • Appointment scheduling coordination
    • +
  • White-glove delivery standards
    • +
  • Multi-location routing complexity
    • +
+
+
+
Doormile Solutions
+
    +
  • Automated appointment optimization
    • +
  • Service level guarantee tracking
    • +
  • Enterprise integration APIs
    • +
+
+
+ +
+
+ + + + +
+

Enterprise & B2B

+
+
+ +
- {/* Hover content list */} -
-
-

CHALLENGES

-
    -
  • Unpredictable demand spikes
    • -
  • Fresh product expiry constraints
    • -
  • Multi-stop route complexity
    • -
-
-
-

DOORMILE SOLUTIONS

-
    -
  • AI-driven demand-responsive routing
    • -
  • Freshness-aware delivery prioritization
    • -
  • Dynamic batch optimization
    • -
-
-
- - - {/* Card 2: Pharmaceutical */} - -
-
- Pharma Logistics -
-
- -
-
-
- -
-
-
-
-
-
- - - - - - - Pharmaceutical -
-
-
-
-
-

Temperature-sensitive, compliance-critical, life-saving.

-
-
- - {/* Hover content list */} -
-
-

CHALLENGES

-
    -
  • Cold chain integrity requirements
    • -
  • Regulatory compliance tracking
    • -
  • Critical delivery time windows
    • -
-
-
-

DOORMILE SOLUTIONS

-
    -
  • Real-time temperature monitoring
    • -
  • Chain-of-custody documentation
    • -
  • Priority override for critical shipments
    • -
-
-
- - - {/* Card 3: Enterprise & B2B */} - -
-
- Enterprise Logistics -
-
- -
-
-
- -
-
-
-
-
-
- - - - - - - Enterprise & B2B -
-
-
-
-
-

High-value shipments with complex delivery requirements.

-
-
- - {/* Hover content list */} -
-
-

CHALLENGES

-
    -
  • Appointment scheduling coordination
    • -
  • White-glove delivery standards
    • -
  • Multi-location routing complexity
    • -
-
-
-

DOORMILE SOLUTIONS

-
    -
  • Automated appointment optimization
    • -
  • Service level guarantee tracking
    • -
  • Enterprise integration APIs
    • -
-
-
- - +
-
); } diff --git a/src/components/sections/Workflow2.tsx b/src/components/sections/Workflow2.tsx index 3126b0e..2585b48 100644 --- a/src/components/sections/Workflow2.tsx +++ b/src/components/sections/Workflow2.tsx @@ -1,6 +1,7 @@ "use client"; import React, { useState } from "react"; +import Image from "next/image"; export default function Workflow2() { const [activeSlide, setActiveSlide] = useState(0); @@ -59,11 +60,9 @@ export default function Workflow2() {
- Workflow 2
-