Skip to content

feat: improve Landing page hero section #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vishvapatel2047 wants to merge 1 commit into
base: main
Choose a base branch
from
+90 −52
Open

feat: improve Landing page hero section #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,20 @@
80% { transform: translateX(3px); }
}

@keyframes heroFloat {
0%,100% {
transform: translateY(0px);
}

50% {
transform: translateY(-12px);
}
}

.animate-hero-float {
animation: heroFloat 8s ease-in-out infinite;
}

Comment on lines +28 to +41

@coderabbitai coderabbitai Bot Jul 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Rename heroFloat to kebab-case to satisfy Stylelint.

Stylelint reports keyframes-name-pattern violation: heroFloat should be hero-float. Update the keyframes name and the class reference accordingly.

♻️ Proposed fix 
-@keyframes heroFloat {
+@keyframes hero-float {
   0%,100% {
     transform: translateY(0px);
   }
   50% {
     transform: translateY(-12px);
   }
 }

 .animate-hero-float {
-  animation: heroFloat 8s ease-in-out infinite;
+  animation: hero-float 8s ease-in-out infinite;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
@keyframes heroFloat {
0%,100% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
}
.animate-hero-float {
animation: heroFloat 8s ease-in-out infinite;
}
`@keyframes` hero-float {
0%,100% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
}
.animate-hero-float {
animation: hero-float 8s ease-in-out infinite;
}
🧰 Tools
🪛 Stylelint (17.14.0)

[error] 28-28: Expected keyframe name "heroFloat" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/globals.css` around lines 28 - 41, Rename the animation keyframes in
globals.css from heroFloat to hero-float to match the Stylelint
keyframes-name-pattern rule. Update both the `@keyframes` declaration and the
animation reference in .animate-hero-float so they use the same kebab-case name.

Source: Linters/SAST tools

/* Custom global styles */
@layer base {
html, #__next {
Expand Down
126 changes: 75 additions & 51 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,31 +115,31 @@ export default function Home() {
<div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 font-sans transition-colors duration-300">
<Navbar />

<Analytics />
<Analytics />
{/* Hero Section */}
<section className="relative overflow-hidden py-20 px-4 sm:px-6 lg:px-8">
<div className="absolute top-0 left-1/2 -z-10 h-[600px] w-[1000px] -translate-x-1/2 stroke-zinc-200 [mask-image:radial-gradient(100%_100%_at_top,white,transparent)] dark:stroke-zinc-800">
<div className="absolute inset-0 bg-gradient-to-r from-teal-500/10 to-indigo-500/10 blur-3xl" />
<div className="absolute inset-0 bg-gradient-to-r from-teal-500/10 to-indigo-500/10 blur-3xl animate-hero-float" />
</div>

<div className="mx-auto max-w-5xl text-center">
<h1 className="text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl lg:text-6xl">
<span className="block mb-2">Interact with Cryptography,</span>
<span className="block text-teal-600 dark:text-teal-400 min-h-[1.2em] sm:min-h-[1.5em]">
<Typewriter
words={[
"Visualised in Real-Time.",
"Made Simple.",
"Explore the World of Cryptography."
]}
/>
</span>
</h1>
<h1 className="text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl lg:text-6xl">

<span className="block mb-2">Interact with Cryptography,</span>


<span className="block text-teal-600 dark:text-teal-400 min-h-[1.2em] sm:min-h-[1.5em]">
<Typewriter
words={[
"Visualised in Real-Time.",
"Made Simple.",
"Explore the World of Cryptography."
]}
/>
</span>
</h1>


<p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
Expand All @@ -166,7 +166,7 @@ export default function Home() {
Open Interactive Playground
</Link>
<a
href="https://github.com"
href="/docs"
target="_blank"
rel="noreferrer"
Comment on lines +169 to 171

@coderabbitai coderabbitai Bot Jul 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Use <Link> instead of <a> for the internal /docs route.

The href was changed from an external URL to the internal /docs route, but the element is still a plain <a> tag with target="_blank" and rel="noreferrer". This bypasses Next.js client-side navigation (no prefetching, full page reload). The other CTA button correctly uses <Link>. Additionally, target="_blank" opens an internal page in a new tab and rel="noreferrer" is unnecessary for same-origin links.

🔧 Proposed fix 
-            <a
-              href="/docs"
-              target="_blank"
-              rel="noreferrer"
+            <Link
+              href="/docs"
               className="rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-800 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 hover:scale-[1.02]"
             >
               View Documentation
-            </a>
+            </Link>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
href="/docs"
target="_blank"
rel="noreferrer"
<Link
href="/docs"
className="rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-800 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 hover:scale-[1.02]"
>
View Documentation
</Link>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/page.tsx` around lines 169 - 171, The `/docs` CTA in the page component
is still using a plain anchor with new-tab attributes, which skips Next.js
routing. Update the element in the same spot where the other CTA uses `Link` so
it uses Next.js `<Link>` for the internal `/docs` route, and remove
`target="_blank"` and `rel="noreferrer"` since this is same-origin navigation.

className="rounded-lg border border-zinc-200 bg-white px-6 py-3 text-sm font-semibold text-zinc-800 shadow-sm transition-all hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800 hover:scale-[1.02]"
Expand All @@ -175,46 +175,70 @@ export default function Home() {
</a>
</div>
</div>
</section>
<div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3">
<div>
<h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Live cryptography playground
</p>
</div>

<div>
<h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Explore modern cryptographic algorithms
</p>
</div>

<div>
<h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Interactive documentation and resources
</p>
</div>
</div>
Comment on lines +178 to +199

@coderabbitai coderabbitai Bot Jul 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Feature card headings lack a light-mode color variant.

All three headings use text-teal-400, which is a light teal suited for dark backgrounds. In light mode, this has poor contrast against the white page background. The category card icons elsewhere in this file use the text-teal-600 dark:text-teal-400 pattern for proper light/dark adaptation.

🎨 Proposed fix 
-            <h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3>
+            <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">⚡ Interactive</h3>
-            <h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3>
+            <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">🔐 Secure</h3>
-            <h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3>
+            <h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">📚 Learn</h3>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3">
<div>
<h3 className="text-lg font-semibold text-teal-400">⚡ Interactive</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Live cryptography playground
</p>
</div>
<div>
<h3 className="text-lg font-semibold text-teal-400">🔐 Secure</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Explore modern cryptographic algorithms
</p>
</div>
<div>
<h3 className="text-lg font-semibold text-teal-400">📚 Learn</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Interactive documentation and resources
</p>
</div>
</div>
<div className="mt-10 mx-auto grid max-w-3xl grid-cols-1 gap-4 text-center sm:grid-cols-3">
<div>
<h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">⚡ Interactive</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Live cryptography playground
</p>
</div>
<div>
<h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">🔐 Secure</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Explore modern cryptographic algorithms
</p>
</div>
<div>
<h3 className="text-lg font-semibold text-teal-600 dark:text-teal-400">📚 Learn</h3>
<p className="text-sm text-zinc-800 dark:text-zinc-400">
Interactive documentation and resources
</p>
</div>
</div>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@app/page.tsx` around lines 178 - 199, The feature card headings use only the
dark-mode teal style, so they need a light-mode variant for contrast. Update the
heading classes in the three card blocks within the page component to follow the
same light/dark pattern used by the category icons, using the existing heading
elements under the interactive, secure, and learn sections. Keep the current
dark theme styling while adding a stronger teal for light mode.



</section >

{/* Categories Grid */}
<section className="mx-auto max-w-5xl py-12 px-4 sm:px-6 lg:px-8">
< section className="mx-auto max-w-5xl py-12 px-4 sm:px-6 lg:px-8" >
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
{isLoading
? Array.from({ length: 4 }).map((_, idx) => <SkeletonCard key={idx} />)
: categories.map((cat, idx) => (
<div
key={idx}
className={`group relative flex flex-col justify-between rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 dark:border-zinc-850 dark:bg-zinc-900/40 ${cat.glowClass}`}
>
<div>
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-50 dark:bg-zinc-950/50">
{cat.icon}
</div>
<h3 className="mt-4 text-lg font-bold text-zinc-900 dark:text-white transition-colors group-hover:text-teal-600 dark:group-hover:text-teal-400">
{cat.title}
</h3>
<p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
{cat.description}
</p>
<div
key={idx}
className={`group relative flex flex-col justify-between rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 dark:border-zinc-850 dark:bg-zinc-900/40 ${cat.glowClass}`}
>
<div>
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-50 dark:bg-zinc-950/50">
{cat.icon}
</div>
<h3 className="mt-4 text-lg font-bold text-zinc-900 dark:text-white transition-colors group-hover:text-teal-600 dark:group-hover:text-teal-400">
{cat.title}
</h3>
<p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">
{cat.description}
</p>
</div>

<div className="mt-6 border-t border-zinc-100 pt-4 dark:border-zinc-850">
<Link
href={cat.link}
className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-teal-600 hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300"
>
Explore Category
<span className="ml-1 transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
</Link>
</div>
<div className="mt-6 border-t border-zinc-100 pt-4 dark:border-zinc-850">
<Link
href={cat.link}
className="inline-flex items-center text-xs font-bold uppercase tracking-wider text-teal-600 hover:text-teal-500 dark:text-teal-400 dark:hover:text-teal-300"
>
Explore Category
<span className="ml-1 transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
</Link>
</div>
))}
</div>
))}
</div>
</section>
</section >

{/* Tech Stack Info Banner */}
<section className="mx-auto max-w-5xl py-8 px-4 sm:px-6 lg:px-8 text-center">
< section className="mx-auto max-w-5xl py-8 px-4 sm:px-6 lg:px-8 text-center" >
<div className="rounded-2xl border border-zinc-200/60 bg-zinc-50 p-6 dark:border-zinc-850 dark:bg-zinc-900/10">
<span className="text-2xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500">
Performance & Security Stack
Expand All @@ -238,10 +262,10 @@ export default function Home() {
</span>
</div>
</div>
</section>
<Footer />
</section >
<Footer />


</div>
</div >
);
}
2 changes: 1 addition & 1 deletion components/layout/typewriter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function Typewriter({
}, [currentText, isDeleting, currentWordIndex, words, typingSpeed, deletingSpeed, delayBetweenWords]);

return (
<span className="inline-flex items-center text-left min-h-[1.2em]">
<span className="inline-flex items-center justify-center text-center min-h-[1.2em] w-full">

<span className="bg-gradient-to-r from-teal-600 to-indigo-600 bg-clip-text text-transparent dark:from-teal-400 dark:to-indigo-400">
{currentText}
Expand Down