update home,about,solutions
This commit is contained in:
@@ -1,12 +1,81 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
}
|
||||
|
||||
export default function CompetitiveEdge() {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const tableWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const moatRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = sectionRef.current;
|
||||
const tableWrapper = tableWrapperRef.current;
|
||||
const moat = moatRef.current;
|
||||
|
||||
if (!section || !tableWrapper || !moat) return;
|
||||
|
||||
// GSAP Timeline ScrollTrigger for viewport entrances
|
||||
const entryTl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: section,
|
||||
start: "top 78%",
|
||||
toggleActions: "play none none none",
|
||||
}
|
||||
});
|
||||
|
||||
entryTl
|
||||
// 1. Reveal Table & Right panel
|
||||
.fromTo([tableWrapper, moat], {
|
||||
opacity: 0,
|
||||
y: 45,
|
||||
}, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.95,
|
||||
stagger: 0.12,
|
||||
ease: "power4.out",
|
||||
})
|
||||
// 2. Stagger slide up row items
|
||||
.fromTo(section.querySelectorAll(".table-row-hover"), {
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
}, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 0.75,
|
||||
stagger: 0.05,
|
||||
ease: "power3.out",
|
||||
}, "-=0.6")
|
||||
// 3. Pop checkmarks and badges cleanly
|
||||
.fromTo(section.querySelectorAll(".yes-badge, .advanced-badge"), {
|
||||
opacity: 0,
|
||||
scale: 0.8,
|
||||
}, {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.55,
|
||||
stagger: 0.03,
|
||||
ease: "back.out(1.6)",
|
||||
}, "-=0.45");
|
||||
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section id="comparison" className="comparison-section">
|
||||
<section id="comparison" className="comparison-section" ref={sectionRef}>
|
||||
{/* Visual background layers */}
|
||||
<div className="comparison-bg-glow" />
|
||||
<div className="comparison-bg-dots" />
|
||||
|
||||
<div className="container">
|
||||
<div className="comparison-layout">
|
||||
{/* Comparison matrix Table */}
|
||||
<div className="table-wrapper">
|
||||
{/* Comparison Matrix Table (69% on Desktop) */}
|
||||
<div className="table-wrapper" ref={tableWrapperRef}>
|
||||
<table className="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -20,7 +89,7 @@ export default function CompetitiveEdge() {
|
||||
<tbody>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<rect x="1" y="3" width="15" height="13"></rect>
|
||||
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"></circle>
|
||||
@@ -35,7 +104,7 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
|
||||
<path d="M12 6v6l4 2"></path>
|
||||
</svg>
|
||||
@@ -48,7 +117,7 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
|
||||
</svg>
|
||||
EV-aware planning
|
||||
@@ -60,8 +129,8 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h32a2 2 0 0 0 2-2V8z"></path>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
@@ -76,7 +145,7 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
@@ -89,20 +158,20 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
Verified handling
|
||||
</td>
|
||||
<td className="col-highlight"><span className="yes-badge">✓ Yes</span></td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="partial-text">Partial</td>
|
||||
<td className="no-text">No</td>
|
||||
<td className="no-text">No</td>
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h38s-3-2-3-9"></path>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
||||
</svg>
|
||||
Hyperlocal learning
|
||||
@@ -114,7 +183,7 @@ export default function CompetitiveEdge() {
|
||||
</tr>
|
||||
<tr className="table-row-hover">
|
||||
<td className="capability-cell">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "8px", display: "inline-block", verticalAlign: "middle" }}>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="22" y1="12" x2="18" y2="12"></line>
|
||||
<line x1="6" y1="12" x2="2" y2="12"></line>
|
||||
@@ -132,20 +201,379 @@ export default function CompetitiveEdge() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Strategic Moat Side cards */}
|
||||
<div className="moat-panel">
|
||||
<div className="elementor-element elementor-element-54d05ac elementor-widget elementor-widget-logico_heading" data-id="54d05ac" data-element_type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="section-header">
|
||||
<span className="section-tag">Competitive Edge</span>
|
||||
<h3 className="logico-title" style={{ marginTop: "10px", marginBottom: "15px" }}>Where Doormile Sits And Why It Wins</h3>
|
||||
<p className="section-desc">A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Moat Highlight Card (28% on Desktop) */}
|
||||
<div className="moat-panel" ref={moatRef}>
|
||||
<div className="moat-accent-line" />
|
||||
<div className="advantage-badge">DoorMile Advantage</div>
|
||||
<h3 className="moat-heading">WHERE DOORMILE SITS AND WHY IT WINS</h3>
|
||||
<p className="moat-desc">
|
||||
A side-by-side technical capabilities comparison showing how operational fleet ownership and dynamic AI planning disrupt basic aggregators.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* --- HIGH-IMPACT PREMIUM CAPABILITIES SECTION STYLE --- */
|
||||
.comparison-section {
|
||||
position: relative;
|
||||
padding: 120px 0;
|
||||
background-color: #fafafa;
|
||||
overflow: hidden;
|
||||
font-family: "Manrope", sans-serif;
|
||||
}
|
||||
|
||||
/* Spotlight radial background glow */
|
||||
.comparison-bg-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 900px;
|
||||
height: 900px;
|
||||
background: radial-gradient(circle, rgba(200, 16, 46, 0.03) 0%, transparent 70%);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtle logistics dot grid overlay */
|
||||
.comparison-bg-dots {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(#e2e4e8 1.5px, transparent 1.5px);
|
||||
background-size: 32px 32px;
|
||||
opacity: 0.45;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.comparison-section .container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
/* Proportional flex layout scaling */
|
||||
.comparison-layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
/* Spacious table styling wrapper (69% width) */
|
||||
.table-wrapper {
|
||||
flex: 0 0 69%;
|
||||
max-width: 69%;
|
||||
background: #ffffff;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.015), 0 1px 3px rgba(0, 0, 0, 0.01);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.table-wrapper:hover {
|
||||
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.035), 0 1px 3px rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Enlarge row paddings and metrics size */
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 22px 24px;
|
||||
border-bottom: 1px solid #f0f0f4;
|
||||
font-size: 0.96rem;
|
||||
color: #2b2b2b;
|
||||
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.comparison-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.comparison-table th {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: #8a8f9d;
|
||||
background: rgba(15, 23, 42, 0.02);
|
||||
}
|
||||
|
||||
/* High weight column header highlights */
|
||||
th.col-highlight {
|
||||
background: #c8102e !important;
|
||||
color: #ffffff !important;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.1em;
|
||||
border-left: 2.5px solid #c8102e;
|
||||
border-right: 2.5px solid #c8102e;
|
||||
box-shadow: 0 4px 20px rgba(200, 16, 46, 0.1);
|
||||
}
|
||||
|
||||
/* High weight cells gradient & highlights */
|
||||
td.col-highlight {
|
||||
text-align: center;
|
||||
color: #c8102e !important;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(180deg, rgba(200, 16, 46, 0.02) 0%, rgba(200, 16, 46, 0.005) 100%) !important;
|
||||
border-left: 2.5px solid rgba(200, 16, 46, 0.12);
|
||||
border-right: 2.5px solid rgba(200, 16, 46, 0.12);
|
||||
position: relative;
|
||||
will-change: transform, box-shadow, background;
|
||||
animation: doormile-glow-pulse 4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* Row Hover Enhancements: brighten row & trigger DoorMile glow expand */
|
||||
.table-row-hover {
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.table-row-hover:hover {
|
||||
background-color: #fafbfd;
|
||||
}
|
||||
|
||||
.table-row-hover:hover td.col-highlight {
|
||||
background: linear-gradient(180deg, rgba(200, 16, 46, 0.045) 0%, rgba(200, 16, 46, 0.015) 100%) !important;
|
||||
border-left-color: rgba(200, 16, 46, 0.35);
|
||||
border-right-color: rgba(200, 16, 46, 0.35);
|
||||
box-shadow: inset 0 0 16px rgba(200, 16, 46, 0.04);
|
||||
transform: scale(1.015);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Soft Breathing Box Shadow Red Glow Pulse Loop */
|
||||
@keyframes doormile-glow-pulse {
|
||||
0% {
|
||||
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: inset 0 0 15px 1.5px rgba(200, 16, 46, 0.045);
|
||||
}
|
||||
100% {
|
||||
box-shadow: inset 0 0 0 0px rgba(200, 16, 46, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.capability-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-weight: 700;
|
||||
color: #111111;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.capability-cell svg {
|
||||
color: #c8102e;
|
||||
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-row-hover:hover .capability-cell svg {
|
||||
transform: scale(1.18) rotate(4deg);
|
||||
}
|
||||
|
||||
/* Premium Badge styles */
|
||||
.yes-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #c8102e;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
background: rgba(200, 16, 46, 0.05);
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(200, 16, 46, 0.1);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.advanced-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
background: rgba(200, 16, 46, 0.075);
|
||||
border: 1.5px solid #c8102e;
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 800;
|
||||
color: #c8102e;
|
||||
will-change: transform, opacity;
|
||||
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.06);
|
||||
}
|
||||
|
||||
.no-text {
|
||||
color: #8e94a5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.partial-text {
|
||||
color: #4b5262;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- RIGHT SIDE ADVANTAGE CARD PANEL (Centered content alignment) --- */
|
||||
.moat-panel {
|
||||
flex: 0 0 28%;
|
||||
max-width: 28%;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fbfbfc 100%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 24px;
|
||||
padding: 40px 24px;
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.025), inset 0 1px 0 #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* Centers items horizontally */
|
||||
justify-content: center;
|
||||
text-align: center; /* Centers all text */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.moat-panel:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.045);
|
||||
}
|
||||
|
||||
.moat-accent-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: #c8102e;
|
||||
}
|
||||
|
||||
/* DoorMile Advantage Badge */
|
||||
.advantage-badge {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #c8102e;
|
||||
background: rgba(200, 16, 46, 0.06);
|
||||
padding: 6px 14px;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto 24px auto;
|
||||
border: 1.5px solid rgba(200, 16, 46, 0.15);
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Centered heading with bottom accent underline instead of left bar */
|
||||
.moat-heading {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: clamp(1.4rem, 2.3vw, 2.1rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.25;
|
||||
color: #111111;
|
||||
margin: 0 auto 20px auto;
|
||||
letter-spacing: -0.025em;
|
||||
text-transform: uppercase;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Centered horizontal red underline accent decoration */
|
||||
.moat-heading::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 3.5px;
|
||||
background: #c8102e;
|
||||
margin-top: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.moat-desc {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.62;
|
||||
color: #585c67;
|
||||
margin: 8px auto 0 auto;
|
||||
max-width: 340px; /* Bounded width for beautiful block wrapping */
|
||||
}
|
||||
|
||||
/* --- RESPONSIVE WORKFLOWS & BREAKPOINTS --- */
|
||||
@media (max-width: 1200px) {
|
||||
.comparison-section .container {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.comparison-layout {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.comparison-layout {
|
||||
flex-direction: column-reverse;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.table-wrapper,
|
||||
.moat-panel {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.moat-panel {
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
.moat-heading {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison-section {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
/* Capability Matrix table gains responsive horizontal swipe scrolls */
|
||||
.table-wrapper {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
min-width: 720px; /* Forces optimal reading width swipe trail */
|
||||
}
|
||||
|
||||
.comparison-table th,
|
||||
.comparison-table td {
|
||||
padding: 16px 18px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.capability-cell {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
}
|
||||
`}} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user