Skip to content

Resolves: Update Logo and align branding #42

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

Merged
zejzejzej3 merged 1 commit into from
Jul 16, 2025
Merged

Resolves: Update Logo and align branding #42

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
Binary file added src/assets/luxvim-full-logo-with-lettering.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 7 additions & 15 deletions src/components/Navbar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
// src/components/Navbar.astro
import ThemeToggle from './ThemeToggle.astro';
import logoImage from '../assets/luxvim-full-logo-with-lettering.png';

export interface Props {
githubUrl?: string;
Expand Down Expand Up @@ -30,21 +31,12 @@ const {
<!-- Left side - Brand + Nav Links -->
<div class="flex items-center space-x-12 -ml-4">
<!-- Brand -->
<a href={import.meta.env.BASE_URL} class="flex items-center space-x-3 group transition-all duration-300 hover:scale-105">
<!-- Logo -->
<div class="relative">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 flex items-center justify-center shadow-lg group-hover:shadow-purple-500/25 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
</div>
<div class="absolute -inset-1 rounded-lg bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 opacity-20 group-hover:opacity-40 blur transition-all duration-300"></div>
</div>

<!-- Brand Name -->
<span class="text-xl font-bold bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-transparent bg-clip-text group-hover:from-purple-300 group-hover:via-pink-400 group-hover:to-red-400 transition-all duration-300">
LuxVim
</span>
<a href={import.meta.env.BASE_URL} class="flex items-center group transition-all duration-300 hover:scale-105">
<img
src={logoImage.src}
alt="LuxVim"
class="h-20 w-auto object-contain"
/>
</a>

<!-- Navigation Links -->
Expand Down
44 changes: 16 additions & 28 deletions src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import "../styles/global.css";
import Main from "../layouts/main.astro";
import CodeBlock from "../components/CodeBlock.astro";
import logoImage from "../assets/luxvim-full-logo-with-lettering.png";

// TODO: Extract these into a config file
const installCode = `git clone https://github.com/josstei/JoStVIM.git
Expand Down Expand Up @@ -32,16 +33,14 @@ Lux # For Neovim`;

<!-- Gradient overlay for better text contrast -->
<div
class="absolute inset-0 z-5 bg-gradient-to-b from-transparent via-black/5 to-black/15 dark:from-transparent dark:via-black/20 dark:to-black/40"
class="absolute inset-0 z-5 bg-gradient-to-b from-purple-50/20 via-purple-100/30 to-purple-200/40 dark:from-transparent dark:via-black/20 dark:to-black/40"
>
</div>

<!-- Hero Content -->
<div
class="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-6 pt-20 md:pt-0"
>
<div class="relative z-10 flex flex-col items-center justify-center min-h-screen text-center px-6 pt-0 md:pt-6">
<!-- Status Badge -->
<div class="mb-6 md:mb-8">
<div class="mt-20">
<span
class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
>
Expand All @@ -52,16 +51,14 @@ Lux # For Neovim`;
</div>

<!-- Main Headlines -->
<h1
class="text-5xl md:text-7xl lg:text-8xl font-bold mb-6 tracking-tight"
>
<span
class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-transparent bg-clip-text"
>
LuxVim
</span>
</h1>

<!-- Logo -->
<div>
<img
src={logoImage.src}
alt="LuxVim Logo"
class="h-60 md:h-80 lg:h-98 mx-auto object-contain"
/>
</div>
<h2
class="text-2xl md:text-3xl lg:text-4xl font-semibold mb-8 text-slate-800 dark:text-slate-200"
>
Expand All @@ -78,7 +75,7 @@ Lux # For Neovim`;
</p>

<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-4 mb-16">
<div class="flex flex-col sm:flex-row gap-4 mb-12">
<a
href="#installation"
class="inline-flex items-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-purple-500/25"
Expand Down Expand Up @@ -114,11 +111,8 @@ Lux # For Neovim`;
</div>

<!-- Features Preview -->
<div
class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-8 md:mb-0"
>
<div
class="flex items-center justify-center p-4 bg-white/5 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto mb-8 md:mb-12" >
<div class="flex items-center justify-center p-4 bg-white/5 dark:bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-200/10 dark:border-slate-700/30"
>
<div class="text-center">
<div
Expand Down Expand Up @@ -214,9 +208,7 @@ Lux # For Neovim`;
class="py-16 md:py-20
bg-white dark:bg-slate-900
dark:from-slate-800 dark:via-slate-700 dark:to-slate-600
dark:backdrop-blur-sm

"
dark:backdrop-blur-sm"
>
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-16">
Expand Down Expand Up @@ -435,7 +427,6 @@ Lux # For Neovim`;
<section
id="installation"
class="py-20

bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50
dark:bg-gradient-to-r
dark:from-slate-900 dark:via-slate-800 dark:to-slate-700"
Expand Down Expand Up @@ -480,7 +471,6 @@ Lux # For Neovim`;
class="w-full"
>
<CodeBlock code={installCode} lang="bash" />

</div>
</div>
</div>
Expand Down Expand Up @@ -508,7 +498,6 @@ Lux # For Neovim`;
class="w-full"
>
<CodeBlock code={runInstallCode} lang="bash" />

</div>
</div>
</div>
Expand All @@ -535,7 +524,6 @@ Lux # For Neovim`;
class="w-full"
>
<CodeBlock code={launchCode} lang="bash" />

</div>
</div>
</div>
Expand Down