💄: some styling

FaSe22 · Dec 14, 2024 · 92a814b · 92a814b
1 parent 7271604
commit 92a814b
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 41 deletions.
diff --git a/components.json b/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.mjs",
     "css": "src/styles/globals.css",
-    "baseColor": "neutral",
+    "baseColor": "Indigo",
     "cssVariables": true,
     "prefix": ""
   },
@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/CallToAction.astro b/src/components/CallToAction.astro
@@ -2,11 +2,10 @@
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 ---
-
-<section class="container mx-auto px-4 py-8">
-    <Card className="bg-muted">
+<section class="container mx-auto px-4 py-16">
+    <Card className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950/10 dark:to-purple-950/10 border-pink-100/20">
         <CardHeader>
-            <CardTitle>Perfect For</CardTitle>
+            <CardTitle class="text-2xl bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">Perfect For</CardTitle>
         </CardHeader>
         <CardContent>
             <ul class="list-disc pl-5 space-y-2 mb-6">
@@ -30,6 +29,10 @@ import { Button } from "@/components/ui/button"
         </CardContent>
     </Card>
     <div class="mt-8 text-center">
-        <Button variant="default" size="lg">Get Started with Laramaid</Button>
+        <Button size="lg" className="bg-gradient-to-r from-pink-600 to-purple-600 text-white hover:from-pink-700 hover:to-purple-700">
+            Get Started with Laramaid
+        </Button>
     </div>
 </section>
+
+
diff --git a/src/components/Features.astro b/src/components/Features.astro
@@ -1,44 +1,57 @@
 ---
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 ---
-<section class="container mx-auto px-4 py-16">
-    <h2 class="text-3xl font-bold tracking-tight mb-8 text-center">Key Features</h2>
+<section class="container mx-auto px-4 py-16 relative">
+    <!-- Background decoration -->
+    <div class="absolute top-1/2 right-0 w-16 h-16 rotate-45 border border-pink-200/20 rounded-xl"></div>
+
+    <h2 class="text-3xl font-bold tracking-tight mb-8 text-center bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">Key Features</h2>
     <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>Bi-Directional Workflow</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    Bi-Directional Workflow
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 Generate Laravel code from diagrams and extract diagrams from existing code
             </CardContent>
         </Card>
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>Complete Structure Generation</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    Complete Structure Generation
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 Creates controllers, models, events, listeners, and more
             </CardContent>
         </Card>
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>Maintains Laravel Best Practices</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    Maintains Laravel Best Practices
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 Follows framework conventions and coding standards
             </CardContent>
         </Card>
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>Smart Code Generation</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    Smart Code Generation
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 Includes methods, properties, and proper PHP type hints
             </CardContent>
         </Card>
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>Documentation Ready</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    Documentation Ready
+                </CardTitle>
             </CardHeader>
             <CardContent>
                 Automatically generates PHPDoc blocks for better code documentation

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,21 +1,22 @@
 ---
 import { Button } from "@/components/ui/button"
 ---
-<footer class="border-t">
+<footer class="border-t border-pink-100/20 bg-gradient-to-b from-transparent to-pink-50/20">
     <div class="container mx-auto px-4 py-8 text-center">
-        <h2 class="text-2xl font-bold tracking-tight mb-4">Open Source</h2>
+        <h2 class="text-2xl font-bold tracking-tight mb-4 bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">Open Source</h2>
         <p class="text-muted-foreground mb-6">Built with love for the Laravel community. Contributions welcome!</p>
         <div class="flex justify-center space-x-4">
-            <Button variant="outline" asChild>
+            <Button variant="outline" className="border-pink-200/20 hover:bg-pink-50" asChild>
                 <a href="https://github.com/fase22/laramaid">GitHub</a>
             </Button>
-            <Button variant="outline" asChild>
+            <Button variant="outline" className="border-pink-200/20 hover:bg-pink-50" asChild>
                 <a href="https://github.com/fase22/laramaid#readme">Documentation</a>
             </Button>
-            <Button variant="outline" asChild>
+            <Button variant="outline" className="border-pink-200/20 hover:bg-pink-50" asChild>
                 <a href="https://github.com/fase22/laramaid/issues">Issues</a>
             </Button>
         </div>
     </div>
 </footer>
 
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,18 +1,25 @@
 ---
 import { Button } from "@/components/ui/button"
 ---
-
-<header class="container mx-auto px-4 py-16 text-center">
-    <h1 class="text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">Laramaid</h1>
-    <p class="text-xl text-muted-foreground mb-8">Seamlessly Bridge Mermaid Class Diagrams and Laravel Code</p>
-    <Button size="lg">Get Started</Button>
+<header class="relative overflow-hidden bg-gradient-to-br from-pink-500 via-purple-500 to-pink-400">
+    <div class="absolute inset-0 bg-grid-white/[0.1] bg-[size:60px_60px]"></div>
+    <!-- Floating cubes -->
+    <div class="absolute top-1/4 -left-12 w-24 h-24 rotate-12 border border-white/20 rounded-xl"></div>
+    <div class="absolute bottom-1/4 -right-12 w-24 h-24 -rotate-12 border border-white/20 rounded-xl"></div>
+
+    <div class="container relative mx-auto px-4 py-24 text-center">
+        <h1 class="text-5xl font-extrabold tracking-tight lg:text-6xl mb-4 text-white">Laramaid</h1>
+        <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">Seamlessly Bridge Mermaid Class Diagrams and Laravel Code</p>
+        <Button size="lg" variant="secondary" class="bg-white text-pink-600 hover:bg-white/90">Get Started</Button>
+    </div>
 </header>
 
-<section class="container mx-auto px-4 py-8">
-    <h2 class="text-3xl font-bold tracking-tight mb-4">Transform Your Design Into Code</h2>
-    <p class="text-muted-foreground">
+<section class="container mx-auto px-4 py-16">
+    <h2 class="text-3xl font-bold tracking-tight mb-4 bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">Transform Your Design Into Code</h2>
+    <p class="text-muted-foreground text-lg">
         Convert your Mermaid class diagrams directly into fully structured Laravel applications. 
         Laramaid bridges the gap between design and implementation, saving you valuable development time.
     </p>
 </section>
 
+
diff --git a/src/components/HowItWorks.astro b/src/components/HowItWorks.astro
@@ -1,17 +1,18 @@
 ---
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
 ---
-
-<section class="container mx-auto px-4 py-16">
-    <h2 class="text-3xl font-bold tracking-tight mb-8 text-center">How It Works</h2>
+<section class="container mx-auto px-4 py-16 relative">
+    <h2 class="text-3xl font-bold tracking-tight mb-8 text-center bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">How It Works</h2>
 
     <div class="grid gap-6 md:grid-cols-2">
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>From Diagram to Code</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    From Diagram to Code
+                </CardTitle>
             </CardHeader>
             <CardContent>
-                <pre class="bg-muted p-2 rounded"><code>php artisan laramaid diagram.md</code></pre>
+                <pre class="bg-gray-900 p-4 rounded-lg text-white"><code>php artisan laramaid diagram.md</code></pre>
                 <p class="mt-4">Takes your Mermaid class diagram and generates:</p>
                 <ul class="list-disc pl-5 mt-2 space-y-1">
                     <li>Laravel class structures</li>
@@ -23,12 +24,14 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
             </CardContent>
         </Card>
 
-        <Card>
+        <Card className="transition-all hover:shadow-lg hover:shadow-pink-500/10 border-pink-100/20">
             <CardHeader>
-                <CardTitle>From Code to Diagram</CardTitle>
+                <CardTitle className="bg-gradient-to-r from-pink-600 to-purple-600 text-transparent bg-clip-text">
+                    From Code to Diagram
+                </CardTitle>
             </CardHeader>
             <CardContent>
-                <pre class="bg-muted p-2 rounded"><code>php artisan laramaid:extract</code></pre>
+                <pre class="bg-gray-900 p-4 rounded-lg text-white"><code>php artisan laramaid:extract</code></pre>
                 <p class="mt-4">Analyzes your Laravel application and creates a comprehensive Mermaid class diagram, perfect for:</p>
                 <ul class="list-disc pl-5 mt-2 space-y-1">
                     <li>Documentation</li>
@@ -41,3 +44,4 @@ import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
     </div>
 </section>
 
+