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 */}
-        <div className="divider-ornament mb-8">
-          <span className="ornament">✦</span>
+        {/* Logo */}
+        <div className="mb-8">
+          <Logo size="large" />
         </div>
 
-        <p className="text-primary uppercase tracking-[0.4em] text-sm font-semibold mb-4">
-          Sedan 1974
-        </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 className="text-muted-foreground italic text-lg mb-8">
+          Svenskt konditorhantverk sedan 1953
         </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">
-          Kakabonnemang för företag
-        </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 className="max-w-xl mx-auto text-foreground text-xl mb-8 leading-relaxed italic">
+          "Äkta fika levererat till ditt företag — prenumeration eller engångsorder"
         </p>
 
-        <a
-          href="#plans"
-          className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
-        >
-          Starta ert abonnemang
-        </a>
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <a
+            href="#plans"
+            className="btn-classic inline-block px-10 py-4 text-lg rounded-sm"
+          >
+            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 />