hero and features

src/components/ui/button.astro

@@ -1,9 +1,29 @@
 ---
-const { ...rest } = Astro.props;
+const {
+  size = "lg",
+  style = "primary",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const sizes = {
+  lg: "px-5 py-2.5",
+};
+
+const styles = {
+  outline: "border-2 border-black hover:bg-black text-black hover:text-white",
+  primary:
+    "bg-black text-white hover:bg-slate-900  border-2 border-transparent",
+};
 ---
 
 <button
   {...rest}
-  class="bg-black text-white px-5 rounded py-3 hover:bg-slate-700 focus-visible:ring"
+  class:list={[
+    "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    sizes[size],
+    styles[style],
+    className,
+  ]}
   ><slot />
 </button>

src/components/ui/link.astro

@@ -1,4 +1,12 @@
 ---
+interface Props {
+  href: string;
+  size?: string;
+  style?: string;
+  class?: string;
+  [x: string]: any;
+}
+
 const {
   href,
   size = "lg",
@@ -9,6 +17,7 @@ const {
 
 const sizes = {
   lg: "px-5 py-2.5",
+  md: "px-4 py-2",
 };
 
 const styles = {
@@ -22,7 +31,7 @@ const styles = {
   href={href}
   {...rest}
   class:list={[
-    "  rounded  transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    "  rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
     sizes[size],
     styles[style],
     className,