Skip to content

Commit e3d50e3

Browse files
mythzmythz
committed
Upgrade AutoQuery page
1 parent 395faed commit e3d50e3

File tree

8 files changed

+341
-323
lines changed

8 files changed

+341
-323
lines changed

‎MyApp/Pages/AutoQuery.cshtml‎

Lines changed: 111 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,118 @@
66
ViewData["Brand"] = "ServiceStack AutoQuery";
77
}
88

9-
<div class="bg-white dark:bg-black">
10-
11-
<div class="relative isolate px-6 pt-14 lg:px-8">
12-
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
13-
<svg class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678">
14-
<path fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)" fill-opacity=".3" d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z" />
15-
<defs>
16-
<linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
17-
<stop stop-color="#9089FC" />
18-
<stop offset="1" stop-color="#FF80B5" />
19-
</linearGradient>
20-
</defs>
21-
</svg>
9+
10+
<div class="relative isolate overflow-hidden bg-white dark:bg-slate-950 transition-colors duration-300 border-b">
11+
12+
<!-- Technical Grid Background -->
13+
<svg class="absolute inset-0 -z-10 h-full w-full stroke-slate-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-slate-800/50" aria-hidden="true">
14+
<defs>
15+
<pattern id="grid-pattern" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse">
16+
<path d="M100 200V.5M.5 .5H200" fill="none" />
17+
</pattern>
18+
</defs>
19+
<svg x="50%" y="-1" class="overflow-visible fill-slate-50 dark:fill-slate-900/50">
20+
<path d="M-100.5 0h201v201h-201Z M699.5 0h201v201h-201Z M499.5 400h201v201h-201Z M-300.5 600h201v201h-201Z" stroke-width="0" />
21+
</svg>
22+
<rect width="100%" height="100%" stroke-width="0" fill="url(#grid-pattern)" />
23+
</svg>
24+
25+
<!-- Content Container (Compacted) -->
26+
<div class="mx-auto max-w-7xl px-6 py-12 sm:py-16 lg:flex lg:items-center lg:gap-x-12 lg:px-8 lg:py-29">
27+
28+
<!-- Left Column: Copy & Logos -->
29+
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
30+
<!-- Badge -->
31+
<div class="mb-6 flex">
32+
<div class="relative rounded-full px-3 py-1 text-sm leading-6 text-slate-600 ring-1 ring-slate-900/10 hover:ring-slate-900/20 dark:text-slate-400 dark:ring-slate-50/10 dark:hover:ring-slate-50/20">
33+
New: Rapid CRUD generation for existing RDBMS's. <a href="https://docs.servicestack.net/autoquery/autogen" class="font-semibold text-blue-600 dark:text-blue-400"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
34+
</div>
35+
</div>
36+
37+
<!-- Main Headline -->
38+
<h1 class="mt-6 max-w-lg text-4xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-6xl">
39+
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-400 dark:to-purple-400">AutoQuery</span>
40+
<br>
41+
Instant APIs from your DTOs.
42+
</h1>
43+
44+
<p class="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
45+
High performance, industrial strength, code-first APIs. Skip the boilerplate and instantly expose queryable &amp; CRUD endpoints for your databases.
46+
</p>
47+
48+
<!-- CTAs -->
49+
<div class="mt-8 flex items-center gap-x-6">
50+
<a href="/start#start" class="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 transition-all">Get Started</a>
51+
<a href="https://docs.servicestack.net/autoquery/" class="text-sm font-semibold leading-6 text-slate-900 dark:text-white flex items-center gap-1 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
52+
View Documentation <span aria-hidden="true">→</span>
53+
</a>
54+
</div>
55+
56+
<!-- Logos Section (Colored & Fixed) -->
57+
<div class="mt-10 border-t border-slate-200 pt-6 dark:border-slate-800">
58+
<p class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-4">Works seamlessly with:</p>
59+
<div class="flex flex-wrap items-center gap-x-8 gap-y-4">
60+
<!-- PostgreSQL -->
61+
<img src="/img/pages/autoquery/postgresql.svg" class="h-12 w-auto" alt="PostgreSQL">
62+
<!-- SQL Server -->
63+
<img src="/img/pages/autoquery/mssql.svg" class="h-12 w-auto" alt="SQL Server">
64+
<!-- SQLite -->
65+
<img src="/img/pages/autoquery/sqlite.svg" class="h-12 w-auto" alt="SQLite">
66+
<!-- MySQL -->
67+
<img src="/img/pages/autoquery/mysql.svg" class="h-12 w-auto" alt="MySQL">
68+
</div>
69+
</div>
2270
</div>
23-
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-32 sm:py-39 text-center">
24-
<h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 dark:text-slate-50 sm:text-6xl">
25-
<div class="pb-4">
26-
AutoQuery
27-
<span class="relative whitespace-nowrap text-blue-600">
28-
<svg aria-hidden="true" viewBox="0 0 418 42" class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70" preserveAspectRatio="none"
29-
><path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path></svg>
30-
<span class="relative">made simple</span>
31-
</span>
32-
</div>
33-
<div>Instant Query & CRUD APIs</div>
34-
</h1>
35-
<p class="mx-auto mt-6 max-w-4xl text-xl tracking-tight text-slate-700 dark:text-slate-200">
36-
High performance, Industrial strength, effortless, code-first APIs
37-
</p>
38-
<div class="mt-36 lg:mt-24">
39-
<p class="font-display text-base text-slate-900 dark:text-slate-50">
40-
Rapidly develop high-performance Queryable &amp; CRUD APIs for
41-
</p>
42-
<ul class="mt-8 flex flex-wrap items-center gap-x-12 gap-y-0 justify-center">
43-
<li title="PostgreSQL">
44-
<img src="/img/svgs/postgresql-notext.svg" class="h-16">
45-
</li>
46-
<li title="Microsoft SQL Server">
47-
<img src="/img/svgs/sqlserver.svg" class="h-16 bg-white px-2">
48-
</li>
49-
<li title="SQLite">
50-
<img src="/img/svgs/sqlite.svg" class="h-16">
51-
</li>
52-
<li title="MySQL">
53-
<img src="/img/svgs/mysql.svg" class="h-16">
54-
</li>
55-
<li title="MariaDB">
56-
<img src="/img/svgs/mariadb.svg" class="h-16">
57-
</li>
58-
</ul>
59-
</div>
71+
72+
<!-- Right Column: Code Visual -->
73+
<div class="mt-12 sm:mt-16 lg:mt-0 lg:flex-shrink-0 lg:flex-grow">
74+
<div class="relative mx-auto w-full max-w-lg lg:max-w-xl">
75+
<!-- Abstract Glow behind code -->
76+
<div class="absolute -top-10 -right-10 -z-10 h-64 w-64 rounded-full bg-purple-500/30 blur-3xl dark:bg-purple-900/30"></div>
77+
<div class="absolute -bottom-10 -left-10 -z-10 h-64 w-64 rounded-full bg-blue-500/30 blur-3xl dark:bg-blue-900/30"></div>
78+
79+
<!-- Code Window -->
80+
<div class="rounded-xl bg-[#0f172a] shadow-2xl ring-1 ring-white/10">
81+
<!-- Window Controls -->
82+
<div class="flex items-center gap-2 border-b border-white/5 px-4 py-3 bg-[#0f172a] rounded-t-xl">
83+
<div class="h-3 w-3 rounded-full bg-red-500"></div>
84+
<div class="h-3 w-3 rounded-full bg-amber-500"></div>
85+
<div class="h-3 w-3 rounded-full bg-green-500"></div>
86+
<div class="ml-2 text-xs font-medium text-slate-500">Bookings.cs</div>
87+
</div>
88+
<!-- Code Block -->
89+
<div class="p-6 overflow-x-auto">
90+
<!-- Added !bg-transparent to pre/code to prevent double background colors -->
91+
<pre class="!bg-transparent text-sm leading-6 text-slate-300 font-mono"><code><span class="text-yellow-300">[Route(</span><span class="text-green-300">"/bookings"</span><span class="text-yellow-300">)]</span>
92+
<span class="text-purple-400">public class</span> <span class="text-yellow-300">SearchBookings</span> : <span class="text-blue-400">QueryDb</span>&lt;<span class="text-green-400">Booking</span>&gt;
93+
{
94+
<span class="text-purple-400">public</span> <span class="text-blue-400">string</span>? Name { <span class="text-purple-400">get</span>; <span class="text-purple-400">set</span>; }
95+
96+
<span class="text-purple-400">public</span> <span class="text-blue-400">int</span>? AboveCost { <span class="text-purple-400">get</span>; <span class="text-purple-400">set</span>; }
97+
98+
<span class="text-purple-400">public</span> <span class="text-blue-400">DateTime</span>? FromDate { <span class="text-purple-400">get</span>; <span class="text-purple-400">set</span>; }
99+
}
100+
101+
<span class="text-slate-500">/* Immediately available from:
102+
GET /bookings?Name=John&AboveCost=50
103+
*/</span></code></pre>
104+
</div>
105+
</div>
60106

61-
</div>
62-
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
63-
<svg class="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678">
64-
<path fill="url(#ecb5b0c9-546c-4772-8c71-4d3f06d544bc)" fill-opacity=".3" d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z" />
65-
<defs>
66-
<linearGradient id="ecb5b0c9-546c-4772-8c71-4d3f06d544bc" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
67-
<stop stop-color="#9089FC" />
68-
<stop offset="1" stop-color="#FF80B5" />
69-
</linearGradient>
70-
</defs>
71-
</svg>
107+
<!-- Floating Label -->
108+
<div class="absolute -bottom-6 -right-6 rounded-lg bg-white p-4 shadow-lg ring-1 ring-slate-900/5 dark:bg-slate-800 dark:ring-white/10">
109+
<div class="flex items-center gap-3">
110+
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
111+
<svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
112+
</div>
113+
<div>
114+
<p class="text-xs font-medium text-slate-500 dark:text-slate-400">Status</p>
115+
<p class="text-sm font-bold text-slate-900 dark:text-white">API Ready</p>
116+
</div>
117+
</div>
118+
</div>
119+
120+
</div>
72121
</div>
73122
</div>
74123
</div>
@@ -158,7 +207,7 @@
158207
<p class="mt-6 text-xl leading-8">
159208
AutoQuery can be enabled in any ServiceStack project with a few easy steps:
160209
</p>
161-
<div class="mt-10 max-w-2xl">
210+
<div class="mt-10 max-w-3xl">
162211
<h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-50">1. Configure your preferred database</h2>
163212
<p class="my-4">
164213
Configure your .NET App with the

‎MyApp/Pages/Start.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.06 10.94a1.5 1.5 0 0 1 0 2.12l-5.656 5.658a1.5 1.5 0 1 1-2.121-2.122L12.879 12L8.283 7.404a1.5 1.5 0 0 1 2.12-2.122l5.658 5.657Z"/></g></svg>
1818
</a>
1919
</div>
20-
<div class="mx-auto max-w-4xl text-base leading-7 text-gray-700 dark:text-gray-200">
20+
<div id="start" class="mx-auto max-w-4xl text-base leading-7 text-gray-700 dark:text-gray-200">
2121
<p class="text-base font-semibold leading-7 text-indigo-600 dark:text-gray-300">Getting Started</p>
2222
<h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">
2323
Customize & Download a new C# Project

‎MyApp/Pages/StartAuth.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@await Html.PartialAsync("StartHeader")
99

1010
<section>
11-
<div class="bg-white dark:bg-black py-32 px-6 lg:px-8">
11+
<div id="start" class="bg-white dark:bg-black py-32 px-6 lg:px-8">
1212
<div class="mx-auto max-w-4xl text-base leading-7 text-gray-700 dark:text-gray-200">
1313
<p class="text-base font-semibold leading-7 text-indigo-600 dark:text-gray-300">Getting Started</p>
1414
<h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl">

0 commit comments

Comments
 (0)