hazem/yslootahrobotics
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure for improved readability and maintainability
CI/CD / test-and-build (push) Waiting to run
Details
CI/CD / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Najjar\NajjarV02
2026-05-21 15:36:32 +04:00
parent 574d43adb4
commit 37fab3fcaf
14 changed files with 611 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/industries/[slug]/page.tsx
+206
View File
@@ -178,6 +178,20 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
</ul>
</MotionSection>
{/* PROOF POINTS */}
{content.proofPoints && content.proofPoints.length > 0 && (
<MotionSection>
<ul className="ip-proof" role="list" style={{ ['--acc' as string]: accent }}>
{content.proofPoints.map((p) => (
<li key={p.label} className="ip-proof-card">
<span className="ip-proof-value">{p.value}</span>
<span className="ip-proof-label">{p.label}</span>
</li>
))}
</ul>
</MotionSection>
)}
{/* PROBLEM */}
<MotionSection>
<section className="ip-block">
@@ -267,6 +281,56 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
</section>
</MotionSection>
{/* GALLERY */}
{content.gallery && content.gallery.length > 0 && (
<MotionSection>
<section className="ip-block" style={{ ['--acc' as string]: accent }}>
<header className="ip-block-head">
<span className="eyebrow">In the field</span>
<h2 className="ip-block-title">Robots and deployments for this sector.</h2>
</header>
<div className="ip-gallery">
{content.gallery.map((g, i) => (
<figure key={i} className={`ip-gallery-card${i === 0 ? ' ip-gallery-card-lg' : ''}`}>
<div className="ip-gallery-imgwrap">
<Image
src={g.src}
alt={g.alt}
fill
sizes="(max-width: 720px) 100vw, (max-width: 1100px) 50vw, 33vw"
style={{ objectFit: 'cover', objectPosition: 'center' }}
/>
{g.credit && <span className="ip-gallery-credit">{g.credit}</span>}
</div>
{g.caption && <figcaption className="ip-gallery-cap">{g.caption}</figcaption>}
</figure>
))}
</div>
</section>
</MotionSection>
)}
{/* CASE HIGHLIGHTS */}
{content.caseHighlights && content.caseHighlights.length > 0 && (
<MotionSection>
<section className="ip-block" style={{ ['--acc' as string]: accent }}>
<header className="ip-block-head">
<span className="eyebrow">Field-proven</span>
<h2 className="ip-block-title">Where these robots are already deployed.</h2>
</header>
<div className="ip-cases">
{content.caseHighlights.map((c, i) => (
<article key={i} className="ip-case">
<span className="ip-case-brand">{c.brand}</span>
<h3>{c.title}</h3>
<p>{c.body}</p>
</article>
))}
</div>
</section>
</MotionSection>
)}
{/* SUGGESTED ROBOTS */}
<MotionSection>
<section className="ip-block" style={{ ['--acc' as string]: accent }}>
@@ -546,6 +610,148 @@ export default async function IndustryDetailPage({ params }: { params: Promise<P
.ip-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
}
/* PROOF POINTS */
.ip-proof {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.6rem;
}
.ip-proof-card {
position: relative;
display: flex; flex-direction: column; gap: 0.25rem;
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--acc) 28%, rgba(120, 140, 255, 0.18));
background:
radial-gradient(ellipse 70% 100% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 65%),
linear-gradient(135deg, rgba(80, 110, 255, 0.10), rgba(255, 255, 255, 0.03));
overflow: hidden;
transition: border-color 0.3s, transform 0.3s;
}
.ip-proof-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--acc) 55%, rgba(120, 140, 255, 0.35));
}
.ip-proof-value {
font-size: clamp(1.15rem, 3vw, 1.7rem);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1;
background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 65%, #B5BDDB));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ip-proof-label {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
color: #A6B2D8;
}
@media (min-width: 720px) {
.ip-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
}
/* GALLERY */
.ip-gallery {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
}
@media (min-width: 640px) { .ip-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-gallery-card {
display: flex; flex-direction: column; gap: 0.55rem;
border-radius: 18px;
overflow: hidden;
}
.ip-gallery-imgwrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 16px;
overflow: hidden;
background:
radial-gradient(ellipse 70% 50% at 50% 60%, color-mix(in srgb, var(--acc) 18%, transparent) 0%, transparent 65%),
linear-gradient(180deg, rgba(28, 27, 33, 0.78), rgba(8, 8, 10, 0.95));
border: 1px solid rgba(222, 224, 240, 0.10);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-gallery-card:hover .ip-gallery-imgwrap {
transform: translateY(-3px);
border-color: color-mix(in srgb, var(--acc) 45%, rgba(120, 140, 255, 0.28));
box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--acc) 18%, transparent);
}
.ip-gallery-credit {
position: absolute;
top: 0.55rem;
right: 0.55rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: rgba(8, 8, 12, 0.72);
border: 1px solid rgba(222, 224, 240, 0.18);
backdrop-filter: blur(8px);
color: #DEE0F0;
font-size: 0.56rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 800;
}
.ip-gallery-cap {
margin: 0;
padding: 0 0.15rem;
color: #C9CCDE;
font-size: 0.82rem;
line-height: 1.5;
}
@media (min-width: 1100px) {
.ip-gallery-card-lg { grid-column: span 1; }
}
/* CASE HIGHLIGHTS */
.ip-cases {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.9rem;
}
@media (min-width: 720px) { .ip-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ip-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ip-case {
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.15rem 1.2rem 1.2rem;
border-radius: 18px;
border: 1px solid rgba(222, 224, 240, 0.10);
background:
radial-gradient(ellipse 75% 50% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%),
linear-gradient(180deg, rgba(22, 21, 30, 0.9), rgba(10, 10, 14, 0.96));
transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ip-case:hover {
transform: translateY(-3px);
border-color: rgba(74, 102, 216, 0.42);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5);
}
.ip-case-brand {
align-self: flex-start;
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 800;
color: color-mix(in srgb, var(--acc) 72%, white);
padding: 0.3rem 0.55rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent);
background: color-mix(in srgb, var(--acc) 10%, rgba(14, 13, 18, 0.55));
}
.ip-case h3 {
margin: 0; font-size: 1.02rem; font-weight: 600;
color: #FFFFFF; letter-spacing: -0.005em;
}
.ip-case p { margin: 0; color: #C9CCDE; font-size: 0.88rem; line-height: 1.55; }
/* BLOCKS */
.ip-block { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.2vw, 1.75rem); }
.ip-block-head { display: flex; flex-direction: column; gap: 0.55rem; max-width: 760px; }