joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update logo component to use SVG instead of PNG

Browse Source
This commit is contained in:
Mauro Balades
2024-08-20 22:33:58 +02:00
parent bd6afdd929
commit 5d4ed0956f
53 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/branding-assets.tsx
View File

@@ -15,11 +15,10 @@ export function BrandingAssets() {
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 mt-10 w-full">
{LOGO_COLORS.map((color) => (
<div key={color} className="flex flex-col items-center">
<img src={`/logos/zen-${color}.png`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
<img src={`/logos/zen-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
<div className="flex items-center my-2">
<a
href={`/logos/zen-${color}.png`}
download={`zen-${color}.png`}
href={`/logos/zen-${color}.svg`}
className="text-blue-500 text-md ml-2"
>
{color}
@@ -37,10 +36,10 @@ export function BrandingAssets() {
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 mt-10 w-full">
{LOGO_COLORS.map((color) => (
<div key={color} className="flex flex-col items-center">
<img src={`/logos/zen-alpha-${color}.png`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
<img src={`/logos/zen-alpha-${color}.svg`} alt={`Zen Browser ${color} logo`} className="w-24 h-24 mt-4" />
<div className="flex items-center my-2">
<a
href={`/logos/zen-alpha-${color}.png`}
href={`/logos/zen-alpha-${color}.svg`}
download={`zen-alpha-${color}.png`}
className="text-blue-500 text-md ml-2"
>

10
src/components/features.tsx
View File

@@ -73,7 +73,7 @@ export default function Features() {
</div>
<div className="relative hidden ml-auto xl:flex h-[500px] w-full max-w-xl items-center justify-center overflow-hidden">
<span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">
<Image src="/logos/zen-black.png" width={100} height={100} alt="Zen Logo" />
<Image src="/logos/zen-black.svg" width={100} height={100} alt="Zen Logo" />
</span>
{/* Inner Circles */}
@@ -83,7 +83,7 @@ export default function Features() {
delay={20}
radius={80}
>
<Image src="/logos/zen-indigo.png" width={30} height={30} alt="Zen Logo" />
<Image src="/logos/zen-indigo.svg" width={30} height={30} alt="Zen Logo" />
</OrbitingCircles>
<OrbitingCircles
className="size-[30px] border-none bg-transparent"
@@ -91,7 +91,7 @@ export default function Features() {
delay={10}
radius={80}
>
<Image src="/logos/zen-yellow.png" width={30} height={30} alt="Zen Logo" />
<Image src="/logos/zen-alpha-yellow.svg" width={30} height={30} alt="Zen Logo" />
</OrbitingCircles>
{/* Outer Circles (reverse) */}
@@ -101,7 +101,7 @@ export default function Features() {
duration={20}
reverse
>
<Image src="/logos/zen-blue.png" width={50} height={50} alt="Zen Logo" />
<Image src="/logos/zen-alpha-blue.svg" width={50} height={50} alt="Zen Logo" />
</OrbitingCircles>
<OrbitingCircles
className="size-[50px] border-none bg-transparent"
@@ -110,7 +110,7 @@ export default function Features() {
delay={20}
reverse
>
<Image src="/logos/zen-pink.png" width={50} height={50} alt="Zen Logo" />
<Image src="/logos/zen-pink.svg" width={50} height={50} alt="Zen Logo" />
</OrbitingCircles>
</div>
</div>

2
src/components/logo.tsx
View File

@@ -14,7 +14,7 @@ export default function Logo({ withText, ...props }: any) {
}, []);
return (
<div className="flex items-center m-0" {...props}>
<Image src={`/logos/zen-${randomColor}.png`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
<Image src={`/logos/zen-${randomColor}.svg`} width={40} height={40} alt="Zen Logo" className={ny("transition-all duration-300 hover:scale-110", withText && "mr-2")} />
{withText && <span className="text-2xl font-bold ml-2">zen</span>}
</div>
);

2
src/components/release-note.tsx
View File

@@ -6,7 +6,7 @@ import Link from "next/link";
export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
return (
<div className="flex flex-col mt-52 mb-24">
<div className="mx-auto w-full px-10 md:px-0 md:w-1/2">
<div className="mx-auto w-full px-10 md:px-0 lg:w-2/3">
<h1 className="text-4xl font-bold">
Release notes for {data.version} 🎉
</h1>

2
src/lib/logos.ts
View File

@@ -1,4 +1,4 @@
export const LOGO_COLORS = [
"black", "blue", "brown", "buff", "indigo", "mantis", "orchid", "pink", "tangerine", "turquise", "white", "yellow"
"black", "blue", "brown", "buff", "indigo", "mantis", "orchid", "pink", "tangerine", "turqoise", "white", "yellow"
]