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

new version

Browse Source
This commit is contained in:
Basilosaurusrex
2026-02-02 21:42:41 +01:00
parent 7e8d40878b
commit 217bbdc6a7
10 changed files with 410 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Contact.tsx
View File

@@ -36,13 +36,13 @@ const Contact = () => {
{/* Contact Info */}
<div className="divider mb-12" />
<div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
<a href="mailto:hello@webklar.de" className="flex items-center gap-3 hover:text-foreground transition-colors group">
<a href="mailto:support@webklar.com" className="flex items-center gap-3 hover:text-foreground transition-colors group">
<Mail className="w-5 h-5" />
<span>hello@webklar.de</span>
<span>support@webklar.com</span>
</a>
<a href="tel:+4912345678" className="flex items-center gap-3 hover:text-foreground transition-colors group">
<a href="tel:+491704969375" className="flex items-center gap-3 hover:text-foreground transition-colors group">
<Phone className="w-5 h-5" />
<span>+49 123 456 78</span>
<span>0170 4969375</span>
</a>
</div>
</div>

64
src/components/Hero.tsx
View File

@@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import Silk from "@/components/Silk";
import CountUp from "@/components/CountUp";
@@ -15,10 +15,28 @@ const SPARKLE_SVG = (
);
function DemoButtonLetters({ text }: { text: string }) {
// #region agent log
const chars = text.split("");
const spaceIndex = chars.findIndex((c) => c === " ");
const lastIndex = chars.length - 1;
const lastChar = chars[lastIndex];
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
location: "Hero.tsx:DemoButtonLetters",
message: "Letter split for button text",
data: { text, len: chars.length, spaceIndex, spaceChar: spaceIndex >= 0 ? chars[spaceIndex] : null, lastIndex, lastChar },
timestamp: Date.now(),
sessionId: "debug-session",
hypothesisId: "A,C",
}),
}).catch(() => {});
// #endregion
return (
<>
{text.split("").map((char, i) => (
<span key={i} className="btn-letter">
{chars.map((char, i) => (
<span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
{char}
</span>
))}
@@ -31,6 +49,31 @@ const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
const Hero = () => {
const navigate = useNavigate();
const [companyAge, setCompanyAge] = useState("");
const secondBtnRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
const el = secondBtnRef.current;
if (!el) return;
const firstTxtWrapper = el.querySelector(".txt-wrapper");
const letters = firstTxtWrapper ? firstTxtWrapper.querySelectorAll(".btn-letter") : [];
const spaceIdx = 8;
const lastIdx = 16;
const wSpace = letters[spaceIdx]?.getBoundingClientRect?.()?.width ?? -1;
const wLast = letters[lastIdx]?.getBoundingClientRect?.()?.width ?? -1;
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
location: "Hero.tsx:useEffect:measure",
message: "Measured btn-letter widths (space + last)",
data: { letterCount: letters.length, wSpace, wLast, spaceIdx, lastIdx },
timestamp: Date.now(),
sessionId: "debug-session",
runId: "post-fix",
hypothesisId: "B,D,E",
}),
}).catch(() => {});
}, []);
useEffect(() => {
const calculateAge = () => {
@@ -113,21 +156,26 @@ const Hero = () => {
</div>
<div className="btn-wrapper w-full sm:w-auto">
<button
ref={secondBtnRef}
type="button"
className="btn w-full sm:w-auto justify-center"
onClick={() => navigate("/kontakt")}
aria-label="System-Demo anfordern"
onClick={() => {
const el = document.getElementById("projects");
if (el) el.scrollIntoView({ behavior: "smooth" });
else navigate("/#projects");
}}
aria-label="Projekte ansehen"
>
{SPARKLE_SVG}
<div className="txt-wrapper">
<span className="txt-width-helper" aria-hidden="true">
<DemoButtonLetters text="System-Demo anfordern" />
<DemoButtonLetters text="Projekte ansehen" />
</span>
<div className="txt-1">
<DemoButtonLetters text="System-Demo anfordern" />
<DemoButtonLetters text="Projekte ansehen" />
</div>
<div className="txt-2">
<DemoButtonLetters text="Wird angefordert..." />
<DemoButtonLetters text="Wird geladen..." />
</div>
</div>
</button>

2
src/components/ProblemSection.tsx
View File

@@ -58,7 +58,7 @@ const ProblemSection = () => {
{problems.map((problem, index) => (
<div
key={index}
className="flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
className="problem-section-tint flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
>
<div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
<problem.icon className="w-5 h-5 text-destructive" />

24
src/components/ProjectShowcase.tsx
View File

@@ -1,30 +1,42 @@
import { ArrowUpRight } from "lucide-react";
const projects = [
type Project = {
title: string;
description: string;
image: string;
url: string;
};
const projects: Project[] = [
{
title: "Triple AI",
description: "Webentwicklung / UI Design / Custom Code",
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
title: "Email Sorter",
description: "E-Mails automatisch sortieren",
image: "/project%20pics/emailsorter.png",
url: "https://emailsorter.webklar.com/",
},
{
title: "Neutral",
description: "Webentwicklung / Custom Code",
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
url: "#",
},
{
title: "Verbatim Labs",
description: "Webentwicklung / UI Design / Custom Code",
image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
url: "#",
},
{
title: "JMK Engineers",
description: "Webentwicklung / UI Design / Custom Code",
image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
url: "#",
},
{
title: "GOODZ Club",
description: "Webentwicklung / Custom Code / Lokalisierung",
image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
url: "#",
},
];
@@ -45,7 +57,9 @@ const ProjectShowcase = () => {
{projects.map((project, index) => (
<a
key={project.title}
href="#"
href={project.url}
target={project.url.startsWith("http") ? "_blank" : undefined}
rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
className="group block project-card rounded-lg p-6 md:p-8"
style={{ animationDelay: `${index * 0.1}s` }}
>

2
src/components/SolutionSection.tsx
View File

@@ -66,7 +66,7 @@ const SolutionSection = () => {
{/* Right Content - Visual Element */}
<div className="relative">
<div className="aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
<div className="solution-section-tint aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
<div className="space-y-6">
<div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">