JUSN/Webklar
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Neues WEBklar-Logo, Favicon und Tab-Titel

Browse Source
This commit is contained in:
Kenso Grimm
2026-02-02 00:08:51 +01:00
parent 1d4584e5d9
commit 22d641e4e5
5 changed files with 60 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@@ -1,21 +1,20 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- TODO: Set the document title to the name of your application --> <title>WEBklar</title>
<title>Lovable App</title> <meta name="description" content="WEBklar – Ihre Webagentur" />
<meta name="description" content="Lovable Generated Project" /> <meta name="author" content="WEBklar" />
<meta name="author" content="Lovable" />
<!-- TODO: Update og:title to match your application name --> <meta property="og:title" content="WEBklar" />
<meta property="og:title" content="Lovable App" /> <meta property="og:description" content="WEBklar – Ihre Webagentur" />
<meta property="og:description" content="Lovable Generated Project" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" /> <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@Lovable" /> <meta name="twitter:site" content="@WEBklar" />
<meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" /> <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
</head> </head>

8
public/favicon.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF"/>
<ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)"/>
<circle cx="356" cy="172" r="18" fill="#FFFFFF"/>
<g transform="translate(256 256) rotate(-28)">
<path d="M 0,-170 C 22,-105 60,-72 120,-56 C 60,-40 22,-8 0,64 C -22,-8 -60,-40 -120,-56 C -60,-72 -22,-105 0,-170 Z" fill="#FFFFFF"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

3
src/components/Footer.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import Logo from '@/components/Logo';
const DevStudio: React.FC = () => { const DevStudio: React.FC = () => {
return ( return (
@@ -15,7 +16,7 @@ const Footer: React.FC = () => {
<div> <div>
<div className="mr-0 mb-4 md:mr-4 md:flex"> <div className="mr-0 mb-4 md:mr-4 md:flex">
<a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/"> <a className="relative z-20 mr-4 flex items-center space-x-2 px-2 py-1 text-sm font-normal text-white" href="/">
<img alt="logo" width="30" height="30" src="https://assets.aceternity.com/logo-dark.png" /> <Logo width={30} height={30} />
<span className="font-medium text-white">WEBklar</span> <span className="font-medium text-white">WEBklar</span>
</a> </a>
</div> </div>

3
src/components/Header.tsx
View File

@@ -13,6 +13,7 @@ import {
MobileNavToggle, MobileNavToggle,
MobileNavMenu, MobileNavMenu,
} from "@/components/ui/resizable-navbar"; } from "@/components/ui/resizable-navbar";
import Logo from "@/components/Logo";
const Header = () => { const Header = () => {
const navItems = [ const navItems = [
@@ -30,6 +31,7 @@ const Header = () => {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<NavBody> <NavBody>
<NavbarLogo href="#"> <NavbarLogo href="#">
<Logo width={30} height={30} />
<span className="font-display text-lg font-medium tracking-tight"> <span className="font-display text-lg font-medium tracking-tight">
Webklar Webklar
</span> </span>
@@ -52,6 +54,7 @@ const Header = () => {
<MobileNav> <MobileNav>
<MobileNavHeader> <MobileNavHeader>
<NavbarLogo href="#"> <NavbarLogo href="#">
<Logo width={30} height={30} />
<span className="font-display text-lg font-medium tracking-tight"> <span className="font-display text-lg font-medium tracking-tight">
Webklar Webklar
</span> </span>

39
src/components/Logo.tsx Normal file
View File

@@ -0,0 +1,39 @@
interface LogoProps {
className?: string;
width?: number;
height?: number;
}
const Logo = ({ className, width = 30, height = 30 }: LogoProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
viewBox="0 0 512 512"
className={className}
aria-hidden
>
{/* rounded square background */}
<rect x="48" y="48" width="416" height="416" rx="92" fill="#FFFFFF" />
{/* tilted oval */}
<ellipse cx="256" cy="256" rx="210" ry="150" fill="#111111" transform="rotate(-28 256 256)" />
{/* small dot */}
<circle cx="356" cy="172" r="18" fill="#FFFFFF" />
{/* enlarged sparkle star */}
<g transform="translate(256 256) rotate(-28)">
<path
d="
M 0,-170
C 22,-105 60,-72 120,-56
C 60,-40 22,-8 0,64
C -22,-8 -60,-40 -120,-56
C -60,-72 -22,-105 0,-170
Z
"
fill="#FFFFFF"
/>
</g>
</svg>
);
export default Logo;