Update routing in next.config.ts to redirect "/tercih-robotu" to the hero form, add simple-icons dependency in package.json, and enhance database indexing for improved query performance. Remove unused SVG files and update metadata across various pages for better SEO and clarity.
All checks were successful
Deploy / deploy (push) Successful in 14m14s
All checks were successful
Deploy / deploy (push) Successful in 14m14s
This commit is contained in:
bilalgursen
159
src/components/rehber-kapak.tsx
Normal file
159
src/components/rehber-kapak.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
type RehberKapakProps = {
|
||||
baslik: string;
|
||||
className?: string;
|
||||
compact?: boolean;
|
||||
};
|
||||
|
||||
const VURGU_DESENLERI = [
|
||||
/^YKS Tercih Listesi/i,
|
||||
/^Ölü Tercih/i,
|
||||
/^Kaç Sıralama/i,
|
||||
/^Ek Yerleştirme/i,
|
||||
/^Taban Puan/i,
|
||||
/^YKS 2026 Tercih Takvimi/i,
|
||||
/^Devlet mi Vakıf mı\?/i,
|
||||
/^Baraj ve Başarı Sıralaması Şartları/i,
|
||||
/^TYT ile Önlisans Tercihi/i,
|
||||
/^Taban Sıralamalar/i,
|
||||
];
|
||||
|
||||
export function rehberBasliginiBol(baslik: string) {
|
||||
const eslesme = VURGU_DESENLERI.map((desen) => baslik.match(desen)).find(
|
||||
Boolean,
|
||||
);
|
||||
const vurgu = eslesme?.[0] ?? baslik.split(/\s+/).slice(0, 3).join(" ");
|
||||
return { vurgu, kalan: baslik.slice(vurgu.length) };
|
||||
}
|
||||
|
||||
export function rehberMetniniParcala(metin: string) {
|
||||
return metin.split(/(\d+(?:[.,]\d+)*)/g).filter(Boolean);
|
||||
}
|
||||
|
||||
function KapakMetni({ metin }: { metin: string }) {
|
||||
return rehberMetniniParcala(metin).map((parca, i) =>
|
||||
/^\d/.test(parca) ? (
|
||||
<span key={i} className="font-bricolage font-black italic">
|
||||
{parca}
|
||||
</span>
|
||||
) : (
|
||||
parca
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const KAPAK_PIKSELLERI = [
|
||||
[960, 50, 0.16], [980, 50, 0.28], [1020, 50, 0.12],
|
||||
[940, 70, 0.24], [980, 70, 0.12], [1000, 70, 0.3], [1060, 70, 0.18],
|
||||
[960, 90, 0.12], [1000, 90, 0.2], [1040, 90, 0.1], [1080, 90, 0.26],
|
||||
[1080, 110, 0.14], [1120, 110, 0.22], [1140, 110, 0.12],
|
||||
[60, 490, 0.12], [100, 490, 0.25], [120, 490, 0.14],
|
||||
[40, 510, 0.24], [80, 510, 0.12], [120, 510, 0.3], [160, 510, 0.16],
|
||||
[60, 530, 0.14], [100, 530, 0.22], [140, 530, 0.1], [180, 530, 0.27],
|
||||
] as const;
|
||||
|
||||
export function RehberKapak({
|
||||
baslik,
|
||||
className = "",
|
||||
compact = false,
|
||||
}: RehberKapakProps) {
|
||||
const { vurgu, kalan } = rehberBasliginiBol(baslik);
|
||||
const baslikBoyutu = compact
|
||||
? baslik.length > 70
|
||||
? "text-[clamp(15px,1.8vw,20px)]"
|
||||
: baslik.length > 52
|
||||
? "text-[clamp(17px,2.1vw,23px)]"
|
||||
: "text-[clamp(19px,2.4vw,27px)]"
|
||||
: baslik.length > 70
|
||||
? "text-[clamp(28px,4vw,48px)]"
|
||||
: baslik.length > 52
|
||||
? "text-[clamp(32px,4.5vw,54px)]"
|
||||
: "text-[clamp(36px,5vw,62px)]";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative isolate aspect-1200/630 w-full overflow-hidden rounded-3xl border border-[#2563eb]/15 bg-white font-bricolage text-[#2563eb] ${className}`}
|
||||
role="img"
|
||||
aria-label={`${baslik} yazı kapağı`}
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 1200 630"
|
||||
preserveAspectRatio="none"
|
||||
className="absolute inset-0 size-full text-[#2563eb]"
|
||||
aria-hidden
|
||||
>
|
||||
{KAPAK_PIKSELLERI.map(([x, y, opacity]) => (
|
||||
<rect
|
||||
key={`${x}-${y}`}
|
||||
x={x}
|
||||
y={y}
|
||||
width="14"
|
||||
height="14"
|
||||
rx="4"
|
||||
fill="currentColor"
|
||||
fillOpacity={opacity}
|
||||
/>
|
||||
))}
|
||||
<rect x="1040" y="50" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
|
||||
<rect x="80" y="530" width="14" height="14" rx="4" fill="#ff5a00" fillOpacity="0.8" />
|
||||
</svg>
|
||||
|
||||
<div
|
||||
className={`relative flex h-full flex-col justify-between ${
|
||||
compact ? "p-[clamp(14px,2.2vw,24px)]" : "p-[clamp(20px,5vw,60px)]"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`font-sans font-bold uppercase tracking-[0.2em] text-[#2563eb] ${
|
||||
compact
|
||||
? "text-[clamp(8px,1vw,11px)]"
|
||||
: "text-[clamp(10px,1.5vw,18px)]"
|
||||
}`}
|
||||
>
|
||||
Tercih Rehberi
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className={`max-w-[88%] text-balance font-heading font-light leading-[1.02] tracking-tight text-[#2563eb] ${baslikBoyutu}`}
|
||||
>
|
||||
<span className="font-bricolage font-semibold tracking-tighter text-[#ff5a00]">
|
||||
<KapakMetni metin={vurgu} />
|
||||
</span>
|
||||
{kalan ? (
|
||||
<>
|
||||
{/^\s/.test(kalan) ? " " : null}
|
||||
<KapakMetni metin={kalan.trimStart()} />
|
||||
</>
|
||||
) : null}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center justify-end gap-0.5">
|
||||
<svg
|
||||
viewBox="0 0 180 180"
|
||||
className={
|
||||
compact
|
||||
? "size-[clamp(16px,1.8vw,22px)] shrink-0"
|
||||
: "size-[clamp(22px,3vw,38px)] shrink-0"
|
||||
}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
|
||||
<rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
|
||||
<rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
|
||||
</svg>
|
||||
<span
|
||||
className={`tracking-tighter text-[#2563eb] ${
|
||||
compact
|
||||
? "text-[clamp(10px,1.2vw,14px)]"
|
||||
: "text-[clamp(13px,2vw,24px)]"
|
||||
}`}
|
||||
>
|
||||
<span className="font-light">Kolay</span>
|
||||
<span className="font-semibold">Tercih</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user