|
1 | 1 | <template> |
2 | 2 | <section class="mt-10 grid items-center gap-8 pt-2 md:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)]"> |
3 | 3 | <div> |
4 | | - <div class="mb-4 text-[0.78rem] font-bold uppercase tracking-[0.16em] "> |
5 | | - Product Preview |
6 | | - </div> |
7 | | - <h2 class="mb-4 text-[clamp(1.9rem,3vw,3rem)] leading-[1.02] tracking-[-0.05em] "> |
8 | | - Built for real data work, without looking like a generic admin panel. |
| 4 | + <h2 class="mb-4 text-[clamp(1.9rem,3vw,3rem)] leading-[1.02] tracking-[-0.05em] !border-t-0 !pt-0"> |
| 5 | + Manage your favorite Databases - With the App or on a Server with the Web Panel |
9 | 6 | </h2> |
10 | 7 | <p class="m-0 "> |
11 | 8 | StarQuery combines dense operational workflows with a calmer interface language. The goal |
|
14 | 11 |
|
15 | 12 | <div class="mt-5 grid gap-4"> |
16 | 13 | <div |
17 | | - class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4" |
18 | | - > |
19 | | - <strong class="text-[0.98rem] tracking-[-0.02em] ">One consistent workspace</strong> |
20 | | - <span>Queries, browsers, editors, exports and admin workflows follow the same design logic.</span> |
21 | | - </div> |
22 | | - <div |
23 | | - class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4" |
24 | | - > |
25 | | - <strong class="text-[0.98rem] tracking-[-0.02em] ">Dense, but readable</strong> |
26 | | - <span>Power features stay accessible without collapsing into noisy, cramped tooling.</span> |
27 | | - </div> |
28 | | - <div |
29 | | - class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] bg-[linear-gradient(180deg,var(--vp-c-bg),var(--vp-c-bg-soft))] px-4 py-4" |
| 14 | + class="grid gap-1 rounded-[18px] border border-[var(--vp-c-border)] px-4 py-4" |
| 15 | + v-for="item of [ |
| 16 | + { |
| 17 | + title: 'Browse Tables', |
| 18 | + description: |
| 19 | + 'Browse your tables and their contents with ease. No more jumping back and forth between your databases.', |
| 20 | + }, |
| 21 | + { |
| 22 | + title: 'SQL Editor', |
| 23 | + description: |
| 24 | + 'Write and run SQL queries directly in the app. Get instant feedback and see your results in a clear, organized way.', |
| 25 | + }, |
| 26 | + { |
| 27 | + title: 'Host it on your Server', |
| 28 | + description: |
| 29 | + 'Still using PHPMyAdmin or Adminer? Host StarQuery on your server and give your team a more modern, user-friendly way to manage your databases.', |
| 30 | + } |
| 31 | + ]" |
30 | 32 | > |
31 | | - <strong class="text-[0.98rem] tracking-[-0.02em] ">Use it solo or with a team</strong> |
32 | | - <span>The same experience works for quick local sessions and for shared, browser-based deployments.</span> |
| 33 | + <strong class="text-[0.98rem] tracking-[-0.02em] ">{{ item.title }}</strong> |
| 34 | + <span>{{ item.description }}</span> |
33 | 35 | </div> |
34 | 36 | </div> |
35 | 37 | </div> |
36 | 38 |
|
37 | 39 | <div class="relative"> |
38 | 40 | <img |
39 | | - class="block h-auto w-full drop-shadow-[0_30px_80px_rgba(17,24,39,0.14)]" |
| 41 | + class="block h-auto w-full" |
40 | 42 | src="/screenshot.png" |
41 | 43 | alt="StarQuery screenshot" |
42 | 44 | /> |
|
0 commit comments