Add header with logo

Implemented new Header and Logo components, integrated into Index, replacing plain header. Added SVG logo, responsive sizing, and nav links. Updated HeroSection to use the new Logo and adjusted layout.

X-Lovable-Edit-ID: edt-56da09b4-0ef3-4ae8-9b02-972a59fae69c

src/components/Header.tsx

@@ -0,0 +1,24 @@
+import Logo from "./Logo";
+
+const Header = () => {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
+      <div className="max-w-6xl mx-auto px-6 py-3 flex items-center justify-between">
+        <a href="/" className="flex items-center">
+          <Logo size="small" />
+        </a>
+        
+        <nav className="hidden md:flex items-center gap-8 text-sm">
+          <a href="#gallery" className="text-muted-foreground hover:text-primary transition-colors">
+            Sortiment
+          </a>
+          <a href="#plans" className="text-muted-foreground hover:text-primary transition-colors">
+            Prenumeration
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/HeroSection.tsx

@@ -1,48 +1,43 @@
+import Logo from "./Logo";
+
 const HeroSection = () => {
   return (
-    <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 relative">
+    <section className="hero-gradient min-h-screen flex flex-col justify-center items-center text-center px-6 py-20 pt-32 relative">
       {/* Decorative top border */}
       <div className="absolute top-0 left-0 right-0 h-2 bg-primary/20" />
       
       <div className="animate-fade-up max-w-4xl">
-        {/* Ornamental divider */}
+        {/* Logo */}
-        <div className="divider-ornament mb-8">
+        <div className="mb-8">
-          <span className="ornament">✦</span>
+          <Logo size="large" />
         </div>
 
-        <p className="text-primary uppercase tracking-[0.4em] text-sm font-semibold mb-4">
+        <p className="text-muted-foreground italic text-lg mb-8">
-          Sedan 1974
+          Svenskt konditorhantverk sedan 1953
-        </p>
-
-        <h1 className="font-display text-5xl md:text-7xl font-semibold mb-4 leading-tight text-foreground italic">
-          Lennart Svenssons
-        </h1>
-        
-        <p className="font-display text-3xl md:text-4xl mb-2 text-primary font-medium">
-          Konditorivaror
         </p>
 
         <div className="divider-ornament my-8">
           <span className="ornament">❧</span>
         </div>
 
-        <h2 className="font-display text-2xl md:text-3xl font-medium mb-6 text-foreground">
+        <p className="max-w-xl mx-auto text-foreground text-xl mb-8 leading-relaxed italic">
-          Kakabonnemang för företag
+          "Äkta fika levererat till ditt företag — prenumeration eller engångsorder"
-        </h2>
-
-        <p className="max-w-xl mx-auto text-muted-foreground text-lg mb-12 leading-relaxed">
-          Genuina konditorikakor bakade med tradition och omsorg, 
-          levererade direkt till ert kontor. 
-          <br />
-          <em>Smaken av äkta svenskt hantverk.</em>
         </p>
 
-        <a
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
-          href="#plans"
+          <a
-          className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
+            href="#plans"
-        >
+            className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
-          Starta ert abonnemang
+          >
-        </a>
+            Starta Prenumeration
+          </a>
+          <a
+            href="#gallery"
+            className="inline-block px-10 py-4 text-lg rounded-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
+          >
+            Se Produkter
+          </a>
+        </div>
       </div>
 
       {/* Bottom ornament */}

src/components/Logo.tsx

@@ -0,0 +1,34 @@
+const Logo = ({ className = "", size = "default" }: { className?: string; size?: "small" | "default" | "large" }) => {
+  const sizeClasses = {
+    small: "w-16 h-12",
+    default: "w-24 h-18",
+    large: "w-48 h-36"
+  };
+
+  return (
+    <div className={`inline-flex items-center justify-center ${sizeClasses[size]} ${className}`}>
+      <svg viewBox="0 0 200 150" className="w-full h-full" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {/* Outer oval border */}
+        <ellipse cx="100" cy="75" rx="95" ry="70" stroke="currentColor" strokeWidth="2" className="text-primary" fill="none" />
+        {/* Inner oval border */}
+        <ellipse cx="100" cy="75" rx="85" ry="62" stroke="currentColor" strokeWidth="1" className="text-primary" fill="none" />
+        
+        {/* Text */}
+        <text x="100" y="35" textAnchor="middle" className="fill-primary" style={{ fontSize: '10px', fontFamily: 'serif', letterSpacing: '0.2em' }}>
+          AKTIEBOLAGET
+        </text>
+        <text x="100" y="60" textAnchor="middle" className="fill-primary" style={{ fontSize: '22px', fontFamily: 'serif', fontWeight: '600', letterSpacing: '0.1em' }}>
+          LENNART
+        </text>
+        <text x="100" y="85" textAnchor="middle" className="fill-primary" style={{ fontSize: '22px', fontFamily: 'serif', fontWeight: '600', letterSpacing: '0.1em' }}>
+          SVENSSON
+        </text>
+        <text x="100" y="110" textAnchor="middle" className="fill-primary" style={{ fontSize: '10px', fontFamily: 'serif', letterSpacing: '0.25em' }}>
+          KONDITORIVAROR
+        </text>
+      </svg>
+    </div>
+  );
+};
+
+export default Logo;

src/pages/Index.tsx

@@ -1,3 +1,4 @@
+import Header from "@/components/Header";
 import HeroSection from "@/components/HeroSection";
 import GallerySection from "@/components/GallerySection";
 import PlansSection from "@/components/PlansSection";
@@ -6,6 +7,7 @@ import Footer from "@/components/Footer";
 const Index = () => {
   return (
     <div className="bg-background text-foreground min-h-screen">
+      <Header />
       <HeroSection />
       <GallerySection />
       <PlansSection />