Skip to content

Commit 18f36ab

Browse files
nicnocqueeharicnugraha
nicnocquee
and
haricnugraha
authored
Update the pages to look premium (#186)
* update lock * Enhance styling and animations in Hyperjump layout - Update Tailwind CSS configuration with new color variables and animations. - Refactor global CSS for improved design consistency and added new styles for glass morphism and gradient text. - Revamp layout components to utilize new styles, including hero section and service cards. - Introduce motion wrappers for scroll-triggered animations in service sections. - Update navigation and footer components for better responsiveness and visual appeal. - Revise text content for clarity and impact across various sections. * Update * update * Add comprehensive guide on premium website psychology and implement case study carousel - Introduce a new markdown file detailing the psychological principles behind premium websites, including the halo effect, cognitive fluency, and micro-interactions. - Add a case study carousel component to enhance the presentation of case studies, improving user engagement. - Update data structure to include image URLs for case studies, ensuring visual content is integrated. - Include new images for case studies to support the updated layout and design. * update text * update * update * update * update * update * update * update * update mobile * update services * update teams * update * update * update * update team * update hero landing * update product title * fix typewriter on mobile * fix performance * fix scrolling * fix performance * update service page * update case study * update format * remove unnecessary * feat: replace hardcoded content to support i18n * test: fix test * ci: fix format * ci: fix test --------- Co-authored-by: Nico Prananta <311343+nicnocquee@users.noreply.github.com> Co-authored-by: Hari Nugraha <haricnugraha@gmail.com>
1 parent d910e1a commit 18f36ab

46 files changed

Lines changed: 11950 additions & 1082 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx‎

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Metadata } from "next";
2-
import Image from "next/image";
32
import Link from "next/link";
43
import { notFound } from "next/navigation";
54
import { BreadcrumbJsonLd } from "next-seo";
@@ -11,11 +10,15 @@ import { dynamicOpengraph } from "@/lib/default-metadata";
1110
import {
1211
caseStudyButton,
1312
caseStudyMore,
14-
caseStudyQuestion
13+
caseStudyQuestion,
14+
mainHome,
15+
mainCaseStudiesLabel
1516
} from "@/locales/.generated/strings";
1617
import type { SupportedLanguage } from "@/locales/.generated/types";
1718
import { supportedLanguages } from "@/locales/.generated/types";
1819

20+
import { AnimatedLines } from "../../components/animated-lines";
21+
import { SectionReveal } from "../../components/motion-wrappers";
1922
import {
2023
caseStudyBy,
2124
getCaseStudies,
@@ -42,7 +45,7 @@ export async function generateMetadata({
4245
const { lang, slug } = await params;
4346
const caseStudies = caseStudyBy({ lang, slug });
4447
const meta: Metadata = {
45-
title: `Case-Studies - ${caseStudies?.title ?? ""}`,
48+
title: `${mainCaseStudiesLabel(lang)} - ${caseStudies?.title ?? ""}`,
4649
description: caseStudies?.description ?? "",
4750
alternates: {
4851
canonical: `${url}/${lang}/case-studies/${caseStudies?.slug}`,
@@ -83,7 +86,7 @@ export default async function CaseStudy({ params }: CaseStudyProps) {
8386

8487
return (
8588
<main className="bg-white">
86-
<Hero heading={title} />
89+
<Hero lang={lang} heading={title} subheading={caseStudy.description} />
8790
<section className="mx-auto max-w-3xl px-4 md:px-20">
8891
<article className="prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-h4:text-xl prose-h5:text-lg prose-h6:text-md dark:prose-headings:text-white text-left">
8992
<Content slug={slug} lang={lang} />
@@ -108,11 +111,11 @@ export default async function CaseStudy({ params }: CaseStudyProps) {
108111
<BreadcrumbJsonLd
109112
items={[
110113
{
111-
name: "Home",
114+
name: mainHome(lang),
112115
item: `${url}/${lang}`
113116
},
114117
{
115-
name: "Case Studies",
118+
name: mainCaseStudiesLabel(lang),
116119
item: `${url}/${lang}/case-studies`
117120
},
118121
{
@@ -125,30 +128,44 @@ export default async function CaseStudy({ params }: CaseStudyProps) {
125128
);
126129
}
127130

128-
function Hero({ heading }: { heading: string }) {
131+
type HeroProps = {
132+
heading: string;
133+
subheading: string;
134+
} & LangProps;
135+
136+
function Hero({ lang, heading, subheading }: HeroProps) {
129137
return (
130138
<section
131139
id="hero"
132-
className="bg-hyperjump-black relative h-87.75 overflow-hidden text-white">
133-
<div className="absolute inset-0 z-0">
134-
<Image
135-
alt="Hero background"
136-
blurDataURL="/images/case-studies/banner.webp"
137-
className="object-cover object-center"
138-
fill
139-
placeholder="blur"
140-
priority
141-
src="/images/case-studies/banner.webp"
142-
/>
143-
</div>
144-
145-
<div className="relative z-10 mt-10 flex h-87.75 items-center justify-center">
146-
<h1
147-
className="mb-4 max-w-3xl px-4 text-center text-2xl font-medium text-white sm:text-4xl md:px-20 md:text-4xl"
148-
dangerouslySetInnerHTML={{
149-
__html: heading
150-
}}
151-
/>
140+
className="bg-hero-premium relative overflow-hidden text-white">
141+
<div className="hero-glow animate-glow top-[12%] left-1/2 -translate-x-1/2" />
142+
<div className="hero-glow animate-glow -top-32 right-0 [animation-delay:1.5s]" />
143+
<div
144+
className="pointer-events-none absolute inset-0 opacity-40"
145+
style={{
146+
backgroundImage:
147+
"radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px)",
148+
backgroundSize: "24px 24px"
149+
}}
150+
/>
151+
<AnimatedLines className="pointer-events-none absolute inset-0 h-full w-full opacity-30" />
152+
153+
<div className="relative z-10 mx-auto max-w-5xl px-4 md:px-20 xl:px-0">
154+
<div className="flex flex-col items-center pt-40 pb-20 md:pt-48 md:pb-28">
155+
<SectionReveal>
156+
<div className="max-w-3xl text-center">
157+
<span className="mb-5 inline-block text-xs font-semibold tracking-[0.2em] text-yellow-300 uppercase">
158+
{mainCaseStudiesLabel(lang)}
159+
</span>
160+
<h1 className="mb-6 text-4xl leading-[1.08] font-semibold tracking-tight md:text-6xl lg:text-[4.5rem]">
161+
{heading}
162+
</h1>
163+
<p className="mx-auto max-w-2xl text-lg leading-relaxed font-medium text-white/60 md:text-xl">
164+
{subheading}
165+
</p>
166+
</div>
167+
</SectionReveal>
168+
</div>
152169
</div>
153170
</section>
154171
);

‎app/[lang]/(hyperjump)/case-studies/page.tsx‎

Lines changed: 66 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Metadata } from "next";
22
import { BreadcrumbJsonLd } from "next-seo";
33

4-
import { Hero } from "@/app/components/hero";
54
import data from "@/data.json";
65
import { dynamicOpengraph } from "@/lib/default-metadata";
76
import {
@@ -12,11 +11,16 @@ import {
1211
caseStudyExplore,
1312
caseStudyHeroDesc,
1413
caseStudyHeroHeading,
15-
caseStudyTitle
14+
caseStudyTitle,
15+
caseStudyExploreDesc,
16+
mainHome,
17+
mainCaseStudiesLabel
1618
} from "@/locales/.generated/strings";
1719

1820
import { getCaseStudies } from "../data";
19-
import { CaseStudyCard } from "../components/case-study-card";
21+
import { AnimatedLines } from "../components/animated-lines";
22+
import { CaseStudyCarousel } from "../components/case-study-carousel";
23+
import { SectionReveal } from "../components/motion-wrappers";
2024

2125
const { url } = data;
2226

@@ -37,7 +41,7 @@ export async function generateMetadata(props: {
3741
}): Promise<Metadata> {
3842
const { lang } = await props.params;
3943
const meta: Metadata = {
40-
title: `Case Studies - ${caseStudyTitle(lang)}`,
44+
title: `${mainCaseStudiesLabel(lang)} - ${caseStudyTitle(lang)}`,
4145
description: caseStudyHeroDesc(lang),
4246
alternates: {
4347
canonical: `${url}/${lang}/case-studies`,
@@ -56,39 +60,74 @@ export async function generateMetadata(props: {
5660

5761
export default async function CaseStudiesPage({ params }: CaseStudyProps) {
5862
const { lang } = await params;
63+
const caseStudies = getCaseStudies(lang);
5964

6065
return (
61-
<main className="bg-white">
62-
<Hero
63-
title={caseStudyHeroHeading(lang)}
64-
subtitle={caseStudyHeroDesc(lang)}
65-
/>
66-
<div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 py-6 text-center md:px-20 xl:px-0">
67-
<h3 className="text-hyperjump-black w-72 text-[28px] font-medium md:w-full md:text-[40px]">
68-
{caseStudyExplore(lang)}
69-
</h3>
70-
<section className="bg-white pt-5 pb-10">
71-
<div className="mx-auto max-w-5xl">
72-
<div className="grid gap-6 md:grid-cols-3">
73-
{getCaseStudies(lang).map((caseStudy) => (
74-
<CaseStudyCard
75-
key={caseStudy.slug}
76-
caseStudy={caseStudy}
77-
lang={lang}
66+
<main>
67+
<section
68+
id="hero"
69+
className="bg-hero-premium relative overflow-hidden text-white">
70+
<div className="hero-glow animate-glow top-[12%] left-1/2 -translate-x-1/2" />
71+
<div className="hero-glow animate-glow -top-32 right-0 [animation-delay:1.5s]" />
72+
<div
73+
className="pointer-events-none absolute inset-0 opacity-40"
74+
style={{
75+
backgroundImage:
76+
"radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px)",
77+
backgroundSize: "24px 24px"
78+
}}
79+
/>
80+
<AnimatedLines className="pointer-events-none absolute inset-0 h-full w-full opacity-30" />
81+
82+
<div className="relative z-10 mx-auto max-w-5xl px-4 md:px-20 xl:px-0">
83+
<div className="flex flex-col items-center pt-40 pb-20 md:pt-48 md:pb-28">
84+
<SectionReveal>
85+
<div className="max-w-3xl text-center">
86+
<span className="mb-5 inline-block text-xs font-semibold tracking-[0.2em] text-yellow-300 uppercase">
87+
{mainCaseStudiesLabel(lang)}
88+
</span>
89+
<h1
90+
className="mb-6 text-4xl leading-[1.08] font-semibold tracking-tight md:text-6xl lg:text-[4.5rem] [&>span]:text-yellow-300"
91+
dangerouslySetInnerHTML={{
92+
__html: caseStudyHeroHeading(lang)
93+
}}
7894
/>
79-
))}
80-
</div>
95+
<p className="mx-auto max-w-2xl text-lg leading-relaxed font-medium text-white/60 md:text-xl">
96+
{caseStudyHeroDesc(lang)}
97+
</p>
98+
</div>
99+
</SectionReveal>
81100
</div>
82-
</section>
83-
</div>
101+
</div>
102+
</section>
103+
104+
<section className="bg-hyperjump-surface">
105+
<div className="mx-auto max-w-5xl px-4 py-20 md:px-20 md:py-28 xl:px-0">
106+
<SectionReveal>
107+
<div className="mb-16">
108+
<h2 className="text-hyperjump-black max-w-3xl text-4xl font-semibold tracking-tight md:text-5xl">
109+
{caseStudyExplore(lang)}
110+
</h2>
111+
<p className="text-hyperjump-gray mt-5 max-w-2xl text-lg leading-relaxed">
112+
{caseStudyExploreDesc(lang)}
113+
</p>
114+
</div>
115+
</SectionReveal>
116+
117+
<SectionReveal>
118+
<CaseStudyCarousel caseStudies={caseStudies} lang={lang} />
119+
</SectionReveal>
120+
</div>
121+
</section>
122+
84123
<BreadcrumbJsonLd
85124
items={[
86125
{
87-
name: "Home",
126+
name: mainHome(lang),
88127
item: `${url}/${lang}`
89128
},
90129
{
91-
name: "Case Studies",
130+
name: mainCaseStudiesLabel(lang),
92131
item: `${url}/${lang}/case-studies`
93132
}
94133
]}

0 commit comments

Comments
 (0)