Stable run with tailwind

2026-07-18 12:08:14 +02:00
parent c9a5d3a79c
commit e3a735acda
116 changed files with 8230 additions and 66158 deletions
@@ -0,0 +1,69 @@
+@namespace MidrandBooks.Components
+
+<div id="animated-bg" class="fixed inset-0 -z-50 overflow-hidden bg-[#FDFCFB]">
+    <!-- Abstract Elegant Soft Warm Gradients -->
+    <div class="absolute -top-[30%] -left-[10%] h-[80%] w-[60%] rounded-full bg-amber-500/5 blur-[120px] animate-pulse" 
+         style="animation-duration: 14s;" />
+    <div class="absolute -bottom-[20%] -right-[5%] h-[80%] w-[50%] rounded-full bg-violet-500/5 blur-[150px] animate-pulse" 
+         style="animation-duration: 20s;" />
+    <div class="absolute top-[40%] left-[30%] h-[300px] w-[300px] rounded-full bg-indigo-500/3 blur-[100px] animate-pulse" 
+         style="animation-duration: 16s;" />
+
+    <!-- Grid Pattern Overlay -->
+    <div class="absolute inset-0 opacity-[0.4]" 
+         style="background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 24px 24px;" />
+
+    <!-- Floating Particles/Pages -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden">
+        @for (int i = 0; i < PageCount; i++)
+        {
+            var config = PageConfigs[i];
+            <div class="absolute rounded-lg border border-slate-900/10 bg-white/70 backdrop-blur-[1px] transition-transform duration-1000 ease-out shadow-sm"
+                 style="width: @(config.Size)px;
+                        height: @(config.Size * 1.3)px;
+                        left: @(config.Left)%;
+                        bottom: -100px;
+                        opacity: @(config.Opacity);
+                        transform: rotate(@(config.Rotation)deg);
+                        animation: float-up @(config.Duration)s linear infinite;
+                        animation-delay: @(config.Delay)s;">
+                <!-- Micro lines inside floating "pages" to represent book texture -->
+                <div class="w-4/5 h-[1.5px] bg-slate-900/10 my-2 mx-auto rounded" />
+                <div class="w-3/5 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
+                <div class="w-1/2 h-[1.5px] bg-slate-900/10 my-1 mx-auto rounded" />
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    private const int PageCount = 10;
+    private List<PageConfig> PageConfigs { get; set; } = new();
+
+    protected override void OnInitialized()
+    {
+        var random = new Random(42); // Seeded random for consistent luxury aesthetic
+        for (int i = 0; i < PageCount; i++)
+        {
+            PageConfigs.Add(new PageConfig
+            {
+                Size = random.NextDouble() * 30 + 15,
+                Left = random.NextDouble() * 100,
+                Delay = random.NextDouble() * 15,
+                Duration = random.NextDouble() * 25 + 35,
+                Opacity = random.NextDouble() * 0.12 + 0.04,
+                Rotation = random.NextDouble() * 360
+            });
+        }
+    }
+
+    private class PageConfig
+    {
+        public double Size { get; set; }
+        public double Left { get; set; }
+        public double Delay { get; set; }
+        public double Duration { get; set; }
+        public double Opacity { get; set; }
+        public double Rotation { get; set; }
+    }
+}