creating the first version of the landing page

src/components/landing/Header.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@/components/ui/button";
+import logo from "@/assets/tailtrails-logo.png";
+
+const Header = () => {
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border/50">
+      <div className="container mx-auto px-6 h-16 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <img src={logo} alt="TailTrails" className="h-10 w-auto" />
+          <span className="font-display text-xl font-semibold text-foreground">
+            TailTrails
+          </span>
+        </div>
+        
+        <nav className="hidden md:flex items-center gap-8">
+          <a href="#features" className="text-muted-foreground hover:text-foreground transition-colors font-body">
+            Features
+          </a>
+          <a href="#how-it-works" className="text-muted-foreground hover:text-foreground transition-colors font-body">
+            How It Works
+          </a>
+          {/* <a href="#testimonials" className="text-muted-foreground hover:text-foreground transition-colors font-body">
+            Reviews
+          </a> */}
+        </nav>
+
+        <div className="flex items-center gap-3">
+          <Button variant="ghost" size="sm" asChild>
+            <a href="http://tailtrails-webapp.jms.rocks/" target="_blank" rel="noopener noreferrer">
+              Log In
+            </a>
+          </Button>
+          <Button variant="default" size="sm" asChild>
+            <a href="http://tailtrails-webapp.jms.rocks/signup" target="_blank" rel="noopener noreferrer">
+              Get Started
+            </a>
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;