ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dm_new: (with-layout) 이하 <Image />로 교체

Browse Source
This commit is contained in:
mind-one005
2026-02-26 15:05:04 +09:00
parent fa21387c55
commit 6dae2896d7
11 changed files with 135 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dm_new/app/(with-layout)/intro/greywater/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/intro/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import greywaterIntro from "@/public/images/landing/intro/greywater_intro.png";
import greywaterMandatory from "@/public/images/landing/intro/greywater_mandatory.png";
import greywaterStandard from "@/public/images/landing/intro/greywater_standard.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>중수 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
<ImgCard src={greywaterIntro} alt="중수 재이용 소개" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>중수도 설치 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상 설명" />
<ImgCard src={greywaterMandatory} alt="중수도 설치 의무 대상 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준 설명" />
<ImgCard src={greywaterStandard} alt="중수도 시설기준 및 관리기준 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/law/page.tsx
+16 -8
View File
@@ -1,7 +1,14 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import lawTimeline from "@/public/images/landing/intro/law_timeline.png";
import performanceLeft from "@/public/images/landing/intro/performance_left.png";
import domesticTextbox from "@/public/images/landing/intro/domestic_textbox.png";
import policyTimeline from "@/public/images/landing/intro/policy_timeline.png";
import relNote from "@/public/images/landing/intro/rel_note.png";
import linkage from "@/public/images/landing/intro/linkage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +28,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +66,7 @@ export default function WaterReuseLawPage() {
<section className="mt-6">
<SectionTitle>법제도 · 계획 및 기본계획 수립</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/law_timeline.png" alt="법제도 타임라인" />
<ImgCard src={lawTimeline} alt="법제도 타임라인" />
</div>
</section>
@@ -68,7 +76,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>제 2차 계획 대비 실적 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/performance_left.png" alt="실적 현황 요약" />
<ImgCard src={performanceLeft} alt="실적 현황 요약" />
</div>
</section>
@@ -78,7 +86,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>국내 관련 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/domestic_textbox.png" alt="국내 관련 현황 설명" />
<ImgCard src={domesticTextbox} alt="국내 관련 현황 설명" />
</div>
</section>
@@ -88,7 +96,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>물 재이용 정책 변천 추이</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/policy_timeline.png" alt="정책 변천 타임라인" />
<ImgCard src={policyTimeline} alt="정책 변천 타임라인" />
</div>
</section>
@@ -98,7 +106,7 @@ export default function WaterReuseLawPage() {
<section>
<SectionTitle>타법령과의 관계도</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rel_note.png" alt="관계도 설명" />
<ImgCard src={relNote} alt="관계도 설명" />
</div>
</section>
@@ -114,7 +122,7 @@ export default function WaterReuseLawPage() {
• 물관리 계획(국가수도기본계획, 국가 및 유역하수도종합계획, 하천유역수자원관리계획 등)과의 연계성 확보 → 통합적인 관점에서 물이용 체계 구축 필요
</p>
</div>
<ImgCard src="/images/landing/intro/linkage.png" alt="국내 연계 현황" />
<ImgCard src={linkage} alt="국내 연계 현황" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/rain/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/intro/law/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import rainreuseIntro from "@/public/images/landing/intro/rainreuse_intro.png";
import rainreuseMandatory from "@/public/images/landing/intro/rainreuse_mandatory.png";
import rainwaterDesign from "@/public/images/landing/intro/rainwater_design.png";
import rainwaterStandards from "@/public/images/landing/intro/rainwater_standards.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물 재이용 소개</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
<ImgCard src={rainreuseIntro} alt="빗물 재이용 소개" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설치 관리 법적 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainreuse_mandatory.png" alt="법적 의무 대상 설명" />
<ImgCard src={rainreuseMandatory} alt="법적 의무 대상 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function RainwaterReusePage() {
<section className="mt-6">
<SectionTitle>빗물이용시설 설계 방안</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안 설명" />
<ImgCard src={rainwaterDesign} alt="빗물이용시설 설계 방안 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function RainwaterReusePage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설 시설기준 및 관리기준</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준 설명" />
<ImgCard src={rainwaterStandards} alt="빗물이용시설 시설기준 및 관리기준 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/intro/sewage/page.tsx
+8 -4
View File
@@ -1,7 +1,10 @@
// apps/dm/app/(landing)/reuse/intro/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import treatedwaterIntro from "@/public/images/landing/intro/treatedwater_intro.png";
import treatedwaterMandatory from "@/public/images/landing/intro/treatedwater_mandatory.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +24,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +62,7 @@ export default function TreatedWaterPage() {
<section className="mt-6">
<SectionTitle>하수처리수</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수 설명" />
<ImgCard src={treatedwaterIntro} alt="하수처리수 설명" />
</div>
</section>
@@ -68,7 +72,7 @@ export default function TreatedWaterPage() {
<section className="pb-[200px]">
<SectionTitle>하수처리수 재이용시설 의무 대상</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상 설명" />
<ImgCard src={treatedwaterMandatory} alt="하수처리수 재이용시설 의무 대상 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/status/greywater/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/greywater/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import greywaterOverall from "@/public/images/landing/cases/greywater_overall.png";
import greywaterFactory from "@/public/images/landing/cases/greywater_factory.png";
import greywaterBuilding from "@/public/images/landing/cases/greywater_building.png";
import greywaterUsage from "@/public/images/landing/cases/greywater_usage.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>전체 중수도 설치 및 이용 현황 (공장 및 발전시설 제외)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_overall.png" alt="전체 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterOverall} alt="전체 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>공장 및 발전시설 내 중수도 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_factory.png" alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
<ImgCard src={greywaterFactory} alt="공장 및 발전시설 내 중수도 설치 및 이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section className="pb-16">
<SectionTitle>중수도 건축물별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_building.png" alt="중수도 건축물별 이용량 현황 설명" />
<ImgCard src={greywaterBuilding} alt="중수도 건축물별 이용량 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>중수도 용도별 이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/greywater_usage.png" alt="중수도 용도별 이용량 현황 설명" />
<ImgCard src={greywaterUsage} alt="중수도 용도별 이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/status/rain/page.tsx
+10 -5
View File
@@ -1,7 +1,11 @@
// apps/dm/app/(landing)/reuse/cases/rain/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import rainwaterBuilding from "@/public/images/landing/cases/rainwater_building.png";
import rainwaterUsage from "@/public/images/landing/cases/rainwater_usage.png";
import rainwaterUsageAmount from "@/public/images/landing/cases/rainwater_usage_amount.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +25,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +63,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>빗물이용시설의 건축물별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_building.png" alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterBuilding} alt="빗물이용시설의 건축물별 빗물이용량 현황 설명" />
</div>
</section>
@@ -68,7 +73,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>빗물이용시설의 용도별 분포 (2023년 기준)</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage.png" alt="빗물이용시설의 용도별 분포 설명" />
<ImgCard src={rainwaterUsage} alt="빗물이용시설의 용도별 분포 설명" />
</div>
</section>
@@ -78,7 +83,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>빗물이용시설의 용도별 빗물이용량 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/rainwater_usage_amount.png" alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
<ImgCard src={rainwaterUsageAmount} alt="빗물이용시설의 용도별 빗물이용량 현황 설명" />
</div>
</section>
</div>
apps/dm_new/app/(with-layout)/status/sewage/page.tsx
+12 -6
View File
@@ -1,7 +1,12 @@
// apps/dm/app/(landing)/reuse/cases/treated/page.tsx
"use client";
import Image, { type StaticImageData } from "next/image";
import SubPageHeader from "@/components/SubPageHeader";
import treatedWaterYear from "@/public/images/landing/cases/treated_water_year.png";
import treatedWaterUsage from "@/public/images/landing/cases/treated_water_usage.png";
import treatedWaterFacility from "@/public/images/landing/cases/treated_water_facility.png";
import treatedWaterRegion from "@/public/images/landing/cases/treated_water_region.png";
function SectionTitle({ children }: { children: React.ReactNode }) {
return (
@@ -21,17 +26,18 @@ function Hr({ className = "" }: HrProps) {
}
type ImgCardProps = {
src: string;
src: StaticImageData;
alt: string;
};
function ImgCard({ src, alt }: ImgCardProps) {
return (
<div className="w-full overflow-x-auto">
<img
<Image
src={src}
alt={alt}
className="block mx-auto max-w-none"
style={{ width: "auto", height: "auto" }}
/>
</div>
);
@@ -58,7 +64,7 @@ export default function GreywaterPage() {
<section className="mt-6">
<SectionTitle>연도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_year.png" alt="연도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterYear} alt="연도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -68,7 +74,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>용도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_usage.png" alt="용도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterUsage} alt="용도별 하수처리수 재이용 현황 설명" />
</div>
</section>
@@ -78,7 +84,7 @@ export default function GreywaterPage() {
<section>
<SectionTitle>하수처리시설 설치 및 이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_facility.png" alt="하수처리시설 설치 및 이용 현황 설명" />
<ImgCard src={treatedWaterFacility} alt="하수처리시설 설치 및 이용 현황 설명" />
</div>
</section>
@@ -88,7 +94,7 @@ export default function GreywaterPage() {
<section className="pb-[200px]">
<SectionTitle>시도별 하수처리수 재이용 현황</SectionTitle>
<div className="mt-8">
<ImgCard src="/images/landing/cases/treated_water_region.png" alt="시도별 하수처리수 재이용 현황 설명" />
<ImgCard src={treatedWaterRegion} alt="시도별 하수처리수 재이용 현황 설명" />
</div>
</section>
</div>
apps/dm_new/components/CaseImageSlider.tsx
+17 -9
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
"use client";
import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
type Slide = { src: string; alt?: string };
@@ -86,10 +87,12 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
src="/images/landing/icon_left_arrow.png"
alt="이전"
className="w-[12px] h-[22px]"
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
src="/images/landing/icon_right_arrow.png"
alt="다음"
className="w-[12px] h-[22px]"
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
>
{safeSlides.map((s, i) => (
<div key={`${s.src}-${i}`} className="min-w-full">
<img
<Image
src={s.src}
alt={s.alt ?? `slide-${i + 1}`}
width={583}
height={400}
className="w-full h-full object-contain"
style={{ width: "100%", height: "100%" }}
draggable={false}
/>
</div>
apps/dm_new/components/CaseTabsCarousel.tsx
+17 -9
View File
@@ -8,6 +8,7 @@ import React, {
useRef,
useState,
} from "react";
import Image from "next/image";
/**
* CaseTabsCarousel.tsx (FINAL OPTIMIZED)
@@ -459,10 +460,12 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="이전"
>
<img
src="/images/landing/icon_left_arrow.png"
alt="이전"
className="w-6 h-6 object-contain"
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -480,10 +483,12 @@ export default function CaseTabsCarousel() {
].join(" ")}
aria-label="다음"
>
<img
src="/images/landing/icon_right_arrow.png"
alt="다음"
className="w-6 h-6 object-contain"
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={24}
height={24}
className="w-6 h-6 object-contain"
/>
</button>
@@ -513,10 +518,13 @@ export default function CaseTabsCarousel() {
className="overflow-hidden rounded-[22px] border-2 border-sky-400 bg-white"
>
<div className="h-[241px] w-full bg-slate-100 border-b border-b-blue-300">
<img
<Image
src={c.imageSrc}
alt={c.title}
width={640}
height={241}
className="h-full w-full object-cover"
style={{ width: "100%", height: "100%" }}
loading="lazy"
/>
</div>
apps/dm_new/components/ImageSlider.tsx
+17 -9
View File
@@ -1,6 +1,7 @@
// apps/dm/app/(landing)/reuse/_components/ImageSlider.tsx
"use client";
import Image from "next/image";
import { useEffect, useMemo, useRef, useState } from "react";
type Slide = { src: string; alt?: string };
@@ -86,10 +87,12 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
src="/images/landing/icon_left_arrow.png"
alt="이전"
className="w-[12px] h-[22px]"
<Image
src="/images/landing/icon_left_arrow.png"
alt="이전"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -102,10 +105,12 @@ export default function CaseImageSlider({
w-[80px] h-[80px] rounded-full border border-black/20 bg-white
grid place-items-center shadow-sm hover:bg-black/[0.03]"
>
<img
src="/images/landing/icon_right_arrow.png"
alt="다음"
className="w-[12px] h-[22px]"
<Image
src="/images/landing/icon_right_arrow.png"
alt="다음"
width={12}
height={22}
className="w-[12px] h-[22px]"
/>
</button>
@@ -129,10 +134,13 @@ export default function CaseImageSlider({
>
{safeSlides.map((s, i) => (
<div key={`${s.src}-${i}`} className="min-w-full">
<img
<Image
src={s.src}
alt={s.alt ?? `slide-${i + 1}`}
width={583}
height={400}
className="w-full h-full object-contain"
style={{ width: "100%", height: "100%" }}
draggable={false}
/>
</div>
apps/dm_new/components/Lnb.tsx
+4 -1
View File
@@ -1,5 +1,6 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
@@ -130,9 +131,11 @@ export default function Lnb() {
isOpen ? "rotate-180" : "rotate-0",
].join(" ")}
>
<img
<Image
src="/images/landing/drop_arrow.svg"
alt="menu toggle icon"
width={28}
height={28}
className="h-7 w-7"
/>
</span>