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

design: split 'Güçlü Yapılar' into two lines for better visual rhythm

Browse Source
This commit is contained in:
AyrisAI
2026-04-04 16:10:49 +03:00
parent b3469805b7
commit e05ae0033a
1 changed files with 31 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,7 +56,8 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<h1 className="text-[clamp(2.5rem,8vw,8rem)] font-inter font-black text-white leading-[0.95] uppercase mb-8 break-words hyphens-auto overflow-hidden"> <h1 className="text-[clamp(2.5rem,8vw,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-white border-t border-b border-white/20 block sm:inline-block py-2 md:py-4 my-2 font-inter tracking-tighter w-fit">Mühendislik</span><br /> <span className="text-white border-t border-b border-white/20 block sm:inline-block py-2 md:py-4 my-2 font-inter tracking-tighter w-fit">Mühendislik</span><br />
Güçlü Yapılar Güçlü<br />
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">
<a href="/projeler"> <a href="/projeler">
@@ -183,9 +184,9 @@ export function LandingPage({ projects }: { projects: Project[] }) {
"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070", "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070",
"https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1974" "https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1974"
].map((url, i) => ( ].map((url, i) => (
<div key={i} className="aspect-[4/5] bg-gray-100 relative grayscale opacity-50 overflow-hidden" tabIndex={0}> <div key={i} className="aspect-[4/5] bg-gray-100 relative grayscale opacity-50 overflow-hidden" tabIndex={0}>
<Image src={url} alt="Fallback" fill className="object-cover" sizes="(max-width: 768px) 100vw, 33vw" /> <Image src={url} alt="Fallback" fill className="object-cover" sizes="(max-width: 768px) 100vw, 33vw" />
</div> </div>
)) ))
)} )}
</div> </div>
@@ -197,7 +198,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-24 items-center"> <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-24 items-center">
<motion.div {...fadeInUp} className="relative aspect-square bg-[#FFFFFF] p-4 shadow-2xl"> <motion.div {...fadeInUp} className="relative aspect-square bg-[#FFFFFF] p-4 shadow-2xl">
<div className="relative w-full h-full overflow-hidden"> <div className="relative w-full h-full overflow-hidden">
<Image <Image
src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1974" src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1974"
alt="Office" alt="Office"
fill fill
@@ -206,8 +207,8 @@ export function LandingPage({ projects }: { projects: Project[] }) {
/> />
</div> </div>
<div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 bg-[#FFBF00] p-8 md:p-12 text-[#1A1C1C] shadow-xl"> <div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 bg-[#FFBF00] p-8 md:p-12 text-[#1A1C1C] shadow-xl">
<span className="text-5xl md:text-7xl font-inter font-black">10+</span> <span className="text-5xl md:text-7xl font-inter font-black">10+</span>
<p className="label-editorial text-xs md:text-base">Yıllık Güven</p> <p className="label-editorial text-xs md:text-base">Yıllık Güven</p>
</div> </div>
</motion.div> </motion.div>
<motion.div {...fadeInUp}> <motion.div {...fadeInUp}>
@@ -276,7 +277,7 @@ export function LandingPage({ projects }: { projects: Project[] }) {
<Textarea className="border-0 border-b border-gray-200 rounded-none bg-transparent px-0 focus-visible:ring-0 focus-visible:border-[#FFBF00] min-h-[120px] resize-none transition-all" placeholder="PROJENİZ HAKKINDA KISA BİLGİ..." /> <Textarea className="border-0 border-b border-gray-200 rounded-none bg-transparent px-0 focus-visible:ring-0 focus-visible:border-[#FFBF00] min-h-[120px] resize-none transition-all" placeholder="PROJENİZ HAKKINDA KISA BİLGİ..." />
</div> </div>
<Button className="w-full bg-[#1A1C1C] hover:bg-[#795900] text-white font-bold h-20 rounded-none uppercase transition-all shadow-xl group"> <Button className="w-full bg-[#1A1C1C] hover:bg-[#795900] text-white font-bold h-20 rounded-none uppercase transition-all shadow-xl group">
Formu Gönder <ArrowUpRight className="ml-4 group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform" /> Formu Gönder <ArrowUpRight className="ml-4 group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform" />
</Button> </Button>
</form> </form>
</motion.div> </motion.div>