Skip to content

Commit 44d4374

Browse files
vLuckyyyvLuckyyy
committed
Improve responsive.
1 parent c074851 commit 44d4374

File tree

11 files changed

+101
-115
lines changed

11 files changed

+101
-115
lines changed

‎app/blog/[slug]/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
3838
try {
3939
const { slug } = await params;
4040
const post = await getBlogPost(slug);
41-
41+
4242
if (!post) {
4343
return {
4444
title: "Post Not Found | EternalCode.pl",
4545
};
4646
}
4747

48-
const ogImageUrl = post.featuredImage?.url
48+
const ogImageUrl = post.featuredImage?.url
4949
? getImageUrl(post.featuredImage.url)
5050
: generateOgImageUrl({
5151
title: post.title,
@@ -178,4 +178,4 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
178178
console.error("Error fetching blog post:", error);
179179
notFound();
180180
}
181-
}
181+
}

‎app/blog/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ export default async function BlogPage() {
4848

4949
return (
5050
<div className="min-h-screen bg-lightGray-100 dark:bg-gray-900">
51-
<AnimatedSection animationType="fadeDown" className="relative overflow-hidden bg-lightGray-100 dark:bg-gray-900 px-0 pt-40 md:pt-48 pb-0">
51+
<AnimatedSection
52+
animationType="fadeDown"
53+
className="relative overflow-hidden bg-lightGray-100 dark:bg-gray-900 px-0 pt-56 md:pt-60 pb-0"
54+
>
5255
<div className="mx-auto max-w-screen-xl px-4">
5356
<div className="flex flex-col md:flex-row md:items-center md:justify-between">
5457
<div className="flex-1 min-w-0">
@@ -103,4 +106,4 @@ export default async function BlogPage() {
103106
</section>
104107
</div>
105108
);
106-
}
109+
}

‎app/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
4141
className={`${poppins.className} min-h-screen bg-lightGray-100 antialiased transition-colors duration-200 dark:bg-gray-900`}
4242
>
4343
<Navbar />
44-
<div className="mx-auto min-h-[calc(100vh-7rem)] max-w-screen-xl px-4 py-12 pt-36">
44+
<div className="mx-auto min-h-[calc(100vh-7rem)] max-w-screen-xl px-4 py-12 pt-56 md:pt-36">
4545
<div className="flex flex-col gap-8 lg:flex-row">
4646
<SidebarWrapper />
4747
<main className="flex min-w-0 flex-1 flex-col items-stretch">

‎components/docs/sidebar/SidebarWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const SidebarWrapper: FC = () => {
1515
</aside>
1616

1717
{/* Mobile sidebar */}
18-
<div className="lg:hidden">
18+
<div className="lg:hidden flex flex-col gap-4">
1919
<DocsSearch />
2020
<DocSidebar />
2121
</div>

‎components/docs/sidebar/sidebar-structure.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,6 @@ export const docsStructure: DocItem[] = [
2020
],
2121
},
2222
{ title: "FAQ", path: "/docs/eternalcore/faq" },
23-
{
24-
title: "Features, Commands and Permissions",
25-
path: "/docs/eternalcore/features",
26-
},
2723
{ title: "Homes", path: "/docs/eternalcore/homes" },
2824
{ title: "Placeholders", path: "/docs/eternalcore/placeholders" },
2925
{ title: "Developer API", path: "/docs/eternalcore/using-api" },

‎components/hero/AnnouncementBanner.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,38 @@ export default function AnnouncementBanner() {
1111
animate={{ y: 0, opacity: 1 }}
1212
transition={{ duration: 0.4, ease: "easeOut" }}
1313
>
14-
<div className="relative isolate z-50 overflow-hidden border-b border-gray-200 bg-gradient-to-r from-blue-50 via-white to-blue-100 px-4 py-3 text-sm dark:border-gray-700 dark:from-[#101010] dark:via-[#0f0f0f] dark:to-[#111] md:flex md:items-center md:justify-center">
14+
<div className="relative isolate z-50 overflow-hidden border-b border-gray-200 bg-gradient-to-r from-blue-50 via-white to-blue-100 px-4 py-3 text-sm dark:border-gray-700 dark:from-[#101010] dark:via-[#0f0f0f] dark:to-[#111] flex flex-col gap-2 md:flex-row md:items-center md:justify-center">
1515
{/* Gradient background */}
1616
<div className="absolute inset-0 -z-10 blur-lg">
1717
<div className="absolute inset-y-0 left-0 w-1/2 bg-gradient-to-tr from-blue-300/30 via-indigo-300/20 to-transparent dark:from-blue-500/10" />
1818
<div className="absolute inset-y-0 right-0 w-1/2 bg-gradient-to-bl from-blue-300/30 via-purple-300/20 to-transparent dark:from-indigo-500/10" />
1919
</div>
2020

2121
{/* Label */}
22-
<span className="inline-flex items-center gap-1 rounded-full bg-white/70 px-3 py-0.5 text-xs font-semibold uppercase tracking-wide text-blue-800 shadow-sm ring-1 ring-inset ring-blue-200 backdrop-blur-sm dark:bg-white/5 dark:text-blue-300 dark:ring-blue-800/30">
22+
<span className="inline-flex items-center gap-1 self-start md:self-auto rounded-full bg-white/70 px-3 py-0.5 text-xs font-semibold uppercase tracking-wide text-blue-800 shadow-sm ring-1 ring-inset ring-blue-200 backdrop-blur-sm dark:bg-white/5 dark:text-blue-300 dark:ring-blue-800/30">
2323
<svg className="h-3.5 w-3.5 animate-pulse text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 8 8">
2424
<circle cx="4" cy="4" r="3" />
2525
</svg>
2626
New feature
2727
</span>
2828

29-
{/* Text */}
30-
<p className="ml-2 font-medium text-gray-900 dark:text-white">
31-
We just launched the new{" "}
32-
<span className="text-blue-700 dark:text-blue-400 font-semibold">
33-
Notification Generator
34-
</span>
35-
, fully interactive and customizable!
36-
</p>
29+
{/* Text and CTA wrapper */}
30+
<div className="flex flex-col gap-1 md:flex-row md:items-center">
31+
<p className="font-medium text-gray-900 dark:text-white">
32+
We just launched the new{" "}
33+
<span className="text-blue-700 dark:text-blue-400 font-semibold">
34+
Notification Generator
35+
</span>
36+
, fully interactive and customizable!
37+
</p>
3738

38-
{/* CTA */}
39-
<Link
40-
href="/notification-generator"
41-
className="ml-3 inline-flex items-center gap-1 text-sm font-semibold text-blue-700 transition-colors hover:text-indigo-700 dark:text-blue-400 dark:hover:text-indigo-300"
42-
>
43-
Try it now <ArrowRight className="h-4 w-4" />
44-
</Link>
39+
<Link
40+
href="/notification-generator"
41+
className="inline-flex items-center gap-1 text-sm font-semibold text-blue-700 transition-colors hover:text-indigo-700 dark:text-blue-400 dark:hover:text-indigo-300"
42+
>
43+
Try it now <ArrowRight className="h-4 w-4" />
44+
</Link>
45+
</div>
4546
</div>
4647
</motion.div>
4748
);

‎components/hero/Hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Terminal from "@/components/hero/terminal/Terminal";
88
export default function Hero() {
99
return (
1010
<AnimatedSection
11-
className="relative mx-auto mt-16 max-w-screen-xl px-4 pt-20 lg:pt-28"
11+
className="relative mx-auto mt-16 max-w-screen-xl px-4 pt-28"
1212
animationType="fade"
1313
aria-labelledby="hero-heading"
1414
>

‎components/projects/ProjectItem.tsx‎

Lines changed: 32 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,58 @@ import ProjectButton from "./ProjectButton";
88
import { ProjectItemProps } from "./types";
99

1010
export default function ProjectItem({ repo, index }: ProjectItemProps) {
11-
// Track if component is in viewport for animation
12-
const { ref, inView } = useInView({
13-
triggerOnce: false,
14-
});
11+
const { ref, inView } = useInView({ triggerOnce: true });
12+
13+
const isReversed = index % 2 === 0;
1514

1615
return (
1716
<motion.div
1817
ref={ref}
19-
key={repo.documentId}
20-
className={`flex flex-col items-center justify-between gap-12 text-center sm:flex-row sm:text-left ${
21-
index % 2 === 0 ? "sm:flex-row-reverse" : ""
18+
className={`flex flex-col-reverse items-center justify-between gap-12 sm:flex-row ${
19+
isReversed ? "sm:flex-row-reverse" : ""
2220
}`}
23-
initial={{ opacity: 0 }}
24-
animate={{ opacity: inView ? 1 : 0 }}
25-
transition={{ duration: 0.3 }}
21+
initial={{ opacity: 0, y: 50 }}
22+
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : 50 }}
23+
transition={{ duration: 0.6, ease: "easeOut" }}
2624
>
27-
{/* Project content - alternates left/right based on index */}
28-
<div className="mx-auto w-full md:w-1/2 lg:w-1/2">
29-
<motion.h1
30-
className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight dark:text-white md:text-5xl xl:text-6xl"
31-
initial={{ y: -50, opacity: 0 }}
32-
animate={{ y: 0, opacity: 1 }}
33-
transition={{ duration: 0.3 }}
25+
<div className="w-full sm:w-1/2">
26+
<motion.h2
27+
className="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl"
28+
initial={{ opacity: 0, y: -20 }}
29+
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : -20 }}
30+
transition={{ delay: 0.1, duration: 0.4 }}
3431
>
3532
{repo.name}
36-
</motion.h1>
33+
</motion.h2>
34+
3735
<motion.p
38-
className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl"
39-
initial={{ y: -50, opacity: 0 }}
40-
animate={{ y: 0, opacity: 1 }}
41-
transition={{ duration: 0.3 }}
36+
className="mb-6 text-gray-600 dark:text-gray-400"
37+
initial={{ opacity: 0, y: -20 }}
38+
animate={{ opacity: inView ? 1 : 0, y: inView ? 0 : -20 }}
39+
transition={{ delay: 0.2, duration: 0.4 }}
4240
>
4341
{repo.description}
4442
</motion.p>
45-
<div className="flex justify-center sm:justify-start">
46-
<a href={repo.repository_url} target="_blank" rel="noreferrer">
47-
<ProjectButton title="Repository" />
48-
</a>
49-
</div>
43+
44+
<a href={repo.repository_url} target="_blank" rel="noreferrer">
45+
<ProjectButton title="Repository" />
46+
</a>
5047
</div>
5148

52-
{/* Project image with animation */}
53-
<div className="w-full overflow-hidden md:w-1/2 lg:w-1/2">
49+
<div className="w-full sm:w-1/2 overflow-hidden rounded-xl shadow-lg">
5450
<motion.div
55-
initial={{ y: -50, opacity: 0 }}
56-
animate={{ y: 0, opacity: 1 }}
57-
transition={{ duration: 0.3 }}
51+
className="group relative"
52+
initial={{ scale: 0.98, opacity: 0 }}
53+
animate={{ scale: inView ? 1 : 0.98, opacity: inView ? 1 : 0 }}
54+
transition={{ delay: 0.1, duration: 0.5 }}
5855
>
5956
<Image
60-
alt={`${repo.name} project image`}
6157
src={repo.banner_url}
62-
className="mx-auto hidden rounded-xl object-cover sm:block"
63-
height={500}
58+
alt={repo.name}
6459
width={1000}
65-
priority={index < 2}
60+
height={500}
61+
className="h-auto w-full transform object-cover transition-transform duration-500 group-hover:scale-105"
6662
quality={85}
67-
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
6863
/>
6964
</motion.div>
7065
</div>

‎components/projects/Projects.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export default function Projects() {
2424
} catch (error) {
2525
const err = error as Error;
2626
setError(err.message);
27-
console.error("Error fetching projects:", err);
2827
} finally {
2928
setLoading(false);
3029
}
@@ -33,24 +32,19 @@ export default function Projects() {
3332
loadProjects();
3433
}, []);
3534

36-
if (loading) {
37-
return <ProjectsSkeleton />;
38-
}
39-
40-
if (error) {
41-
return <ProjectsError error={error} />;
42-
}
35+
if (loading) return <ProjectsSkeleton />;
36+
if (error) return <ProjectsError error={error} />;
4337

4438
return (
45-
<section id="projects">
46-
<div className="mx-auto max-w-screen-xl px-4 py-16">
39+
<section id="projects" className="relative isolate overflow-hidden">
40+
41+
<div className="relative z-10 mx-auto max-w-screen-xl px-4 py-20">
4742
<SectionTitle
48-
title="Our project"
49-
description="Below you will find a list of our projects."
43+
title="Our Projects"
44+
description="Crafted with passion, loved by the community — explore our work below."
5045
/>
5146

52-
{/* Projects list with alternating layout */}
53-
<div className="lg:alternate mt-8 space-y-8 lg:mt-12">
47+
<div className="mt-12 space-y-16">
5448
{projects.map((repo, index) => (
5549
<ProjectItem key={repo.documentId} repo={repo} index={index} />
5650
))}

‎components/projects/ProjectsSkeleton.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,25 @@
11
"use client";
22

3-
import React from "react";
4-
53
import SectionTitle from "@/components/SectionTitle";
64

75
export default function ProjectsSkeleton() {
86
return (
9-
<section id="projects">
10-
<div className="mx-auto max-w-screen-xl px-4 py-16">
7+
<section id="projects" className="animate-pulse">
8+
<div className="mx-auto max-w-screen-xl px-4 py-20">
119
<SectionTitle
12-
title="Our project"
13-
description="Below you will find a list of our projects."
10+
title="Loading Projects..."
11+
description="Please wait while we load our creations."
1412
/>
1513

16-
{/* Project fake cards */}
17-
<div className="lg:alternate mt-8 space-y-8 lg:mt-12">
14+
<div className="mt-12 space-y-16">
1815
{[...Array(3)].map((_, index) => (
19-
<div key={index} className="animate-pulse">
20-
<div className="flex flex-col lg:flex-row lg:items-center lg:space-x-8">
21-
{/* Project image placeholder */}
22-
<div className="h-64 w-full rounded-lg bg-gray-200 dark:bg-gray-700 lg:w-1/2"></div>
23-
<div className="mt-4 w-full lg:mt-0 lg:w-1/2">
24-
{/* Project title placeholder */}
25-
<div className="mb-4 h-8 w-3/4 rounded-md bg-gray-200 dark:bg-gray-700"></div>
26-
{/* Project description placeholder */}
27-
<div className="mb-6 h-4 w-full rounded-md bg-gray-200 dark:bg-gray-700"></div>
28-
<div className="h-4 w-full rounded-md bg-gray-200 dark:bg-gray-700"></div>
29-
{/* Button placeholder */}
30-
<div className="mt-8 h-10 w-40 rounded-md bg-gray-200 dark:bg-gray-700"></div>
31-
</div>
16+
<div key={index} className="flex flex-col gap-8 sm:flex-row sm:items-center">
17+
<div className="h-64 w-full rounded-xl bg-gray-200 dark:bg-gray-700 sm:w-1/2" />
18+
<div className="w-full space-y-4 sm:w-1/2">
19+
<div className="h-8 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
20+
<div className="h-4 w-full rounded bg-gray-200 dark:bg-gray-700" />
21+
<div className="h-4 w-5/6 rounded bg-gray-200 dark:bg-gray-700" />
22+
<div className="mt-6 h-10 w-40 rounded bg-gray-200 dark:bg-gray-700" />
3223
</div>
3324
</div>
3425
))}

0 commit comments

Comments
 (0)