ayrisdev/utkukirkan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve horizontal overflow and text cutting on mobile viewports

Browse Source
This commit is contained in:
AyrisAI
2026-04-04 12:13:49 +03:00
parent 677aa383cd
commit 614ab9af0e
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/landing-page.tsx
View File

@@ -52,10 +52,10 @@ export function LandingPage({ projects }: { projects: Project[] }) {
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ duration: 1 }} transition={{ duration: 1 }}
> >
<p className="label-editorial text-[#FFBF00] mb-6">Muğla • Mühendislik & Müteahhitlik</p> <p className="label-editorial text-[#FFBF00] mb-6 whitespace-normal max-w-[280px] sm:max-w-none leading-relaxed">Muğla • Mühendislik & Müteahhitlik</p>
<h1 className="text-[clamp(2.5rem,10vw,8rem)] font-inter font-black text-white leading-[1.05] uppercase mb-8"> <h1 className="text-[clamp(2.5rem,9vw,8rem)] font-inter font-black text-white leading-[0.95] uppercase mb-8 break-words hyphens-auto overflow-hidden">
Modern<br /> Modern<br />
<span className="text-transparent border-t-2 border-b-2 border-white/20 inline-block py-2 md:py-4 my-2 font-bebas-neue tracking-normal">Mühendislik</span><br /> <span className="text-white border-t border-b border-white/20 inline-block py-2 md:py-4 my-2 font-inter tracking-tighter">Mühendislik</span><br />
Güçlü Yapılar Güçlü Yapılar
</h1> </h1>
<div className="flex flex-col sm:flex-row gap-6 mt-12"> <div className="flex flex-col sm:flex-row gap-6 mt-12">
@@ -81,7 +81,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-24 items-start px-0"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-24 items-start px-0">
<motion.div {...fadeInUp} className="lg:col-span-5 lg:sticky top-32 z-10 bg-inherit"> <motion.div {...fadeInUp} className="lg:col-span-5 lg:sticky top-32 z-10 bg-inherit">
<p className="label-editorial text-[#795900] mb-4">Uzmanlık Alanlarımız</p> <p className="label-editorial text-[#795900] mb-4">Uzmanlık Alanlarımız</p>
<h2 className="text-5xl md:text-6xl lg:text-7xl font-inter font-black uppercase leading-[1.1] mb-6 md:mb-8 break-words"> <h2 className="text-4xl md:text-6xl lg:text-7xl font-inter font-black uppercase leading-[1.1] mb-6 md:mb-8 break-words">
Mimari<br /> Mimari<br />
<span className="bg-[#FFBF00] px-4 py-1 text-white inline-block mt-2">Mükemmeliyet</span> <span className="bg-[#FFBF00] px-4 py-1 text-white inline-block mt-2">Mükemmeliyet</span>
</h2> </h2>
@@ -140,7 +140,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<section id="projeler" className="py-20 md:py-32 bg-[#FFFFFF] px-5 md:px-12 lg:px-24 overflow-hidden"> <section id="projeler" className="py-20 md:py-32 bg-[#FFFFFF] px-5 md:px-12 lg:px-24 overflow-hidden">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<motion.div {...fadeInUp} className="mb-20 flex flex-col md:flex-row justify-between items-end gap-10"> <motion.div {...fadeInUp} className="mb-20 flex flex-col md:flex-row justify-between items-end gap-10">
<h2 className="text-[clamp(3rem,8vw,8rem)] font-inter font-black uppercase leading-[0.9] tracking-tighter"> <h2 className="text-[clamp(2.5rem,8vw,8rem)] font-inter font-black uppercase leading-[0.9] tracking-tighter break-words">
PROJELER PROJELER
</h2> </h2>
<div className="w-full md:w-1/3 h-px bg-gray-200 hidden md:block" /> <div className="w-full md:w-1/3 h-px bg-gray-200 hidden md:block" />