Skip to content

Commit 85eaafa

Browse files
author
James O'Claire
committed
Organize app explorer page for when user is not logged in
1 parent 10f86f2 commit 85eaafa

File tree

2 files changed

+93
-147
lines changed

2 files changed

+93
-147
lines changed

‎frontend/src/routes/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,11 @@
6565
Free App Marketing Insights and Research
6666
</h2>
6767
<p class="text-lg md:text-xl max-w-3xl mb-6 text-primary-900-100 mx-auto">
68-
Real time app intelligence • Live advertising data • Competitor insights • No signup required
68+
Real time app intelligence • Live advertising data • Competitor insights
6969
</p>
7070
<div class="flex flex-wrap justify-center gap-4 text-sm text-primary-900-100 mb-6">
7171
<span class="px-3 py-1 bg-primary-100-900/20 rounded-full">⚡ Real-time Data</span>
72-
<span class="px-3 py-1 bg-warning-100-900/20 rounded-full">🚀 Free Data</span>
72+
<span class="px-3 py-1 bg-warning-100-900/20 rounded-full">🚀 Free Reports</span>
7373
<span class="px-3 py-1 bg-success-100-900/20 rounded-full">✨ Ad and Creative Insights</span>
7474
</div>
7575
<p class="text-base md:text-lg max-w-2xl mx-auto">

‎frontend/src/routes/app-explorer/+page.svelte‎

Lines changed: 91 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import { countryCodeToEmoji } from '$lib/utils/countryCodeToEmoji';
99
import { enhance } from '$app/forms';
1010
import CrossfilterAppsTable from '$lib/CrossfilterAppsTable.svelte';
11-
import WhiteCard from '$lib/WhiteCard.svelte';
1211
1312
import type { CatData, CrossfilterApp } from '../.././types';
1413
@@ -185,112 +184,14 @@
185184
<div class="container mx-auto px-2 md:px-4 py-4 md:py-8">
186185
<div class="mb-6">
187186
<h1 class="text-2xl md:text-3xl font-bold text-primary-900-100">App Explorer</h1>
188-
<p class="text-sm md:text-base text-surface-600-400 mt-2">
187+
<p class="text-sm md:text-base text-primary-900-100 mt-2">
189188
Powerful app discovery and filtering tool for sales teams, market researchers, and app
190189
developers.
191190
</p>
192191
</div>
193192

194-
{#if !hasPaidAccess}
195-
<!-- Explanatory Content - Only shown to non-paid users -->
196-
<WhiteCard>
197-
{#snippet title()}
198-
<span>About App Explorer / App CrossFilter / App Query</span>
199-
{/snippet}
200-
<div class="p-4 flex flex-col gap-4">
201-
<div class="space-y-3">
202-
<p>
203-
The <strong>App Explorer</strong> (also known as <strong>App CrossFilter</strong> or
204-
<strong>App Query</strong>) is a powerful tool that allows you to discover and filter
205-
mobile apps based on multiple criteria simultaneously.
206-
</p>
207-
208-
<div>
209-
<h3 class="font-semibold text-lg mb-2">Key Features:</h3>
210-
<ul class="list-disc list-inside space-y-2 text-sm">
211-
<li>
212-
<strong>SDK & Company Filtering:</strong> Find apps that use specific SDKs or companies
213-
(include/exclude multiple companies)
214-
</li>
215-
<li>
216-
<strong>Monetization Filters:</strong> Filter by in-app purchases, ad support, and SDK/API
217-
detection requirements
218-
</li>
219-
<li>
220-
<strong>Store & Category:</strong> Narrow down by app store (Google Play, Apple App Store)
221-
and category
222-
</li>
223-
<li>
224-
<strong>Metrics Filtering:</strong> Filter by install counts, rating counts, and monthly
225-
installs with min/max ranges
226-
</li>
227-
<li>
228-
<strong>Date Filtering:</strong> Find apps updated after a specific date
229-
</li>
230-
<li>
231-
<strong>Export Results:</strong> Download filtered results as CSV for further analysis
232-
</li>
233-
</ul>
234-
</div>
235-
236-
<div>
237-
<h3 class="font-semibold text-lg mb-2">Use Cases:</h3>
238-
<ul class="list-disc list-inside space-y-2 text-sm">
239-
<li>
240-
<strong>Sales Teams:</strong> Find potential customers by identifying apps using competitor
241-
SDKs or specific technologies
242-
</li>
243-
<li>
244-
<strong>Market Research:</strong> Analyze app ecosystems by filtering apps with specific
245-
monetization strategies
246-
</li>
247-
<li>
248-
<strong>Competitive Analysis:</strong> Discover apps in your category that use certain
249-
SDKs or ad networks
250-
</li>
251-
<li>
252-
<strong>Partnership Opportunities:</strong> Identify apps that could benefit from your
253-
SDK or service
254-
</li>
255-
</ul>
256-
</div>
257-
258-
<div class="mt-4 p-4 bg-surface-100-900 rounded-lg border border-surface-300-700">
259-
<p class="text-sm mb-3">
260-
<strong>Access Required:</strong> The App Explorer is available to paid subscribers at
261-
any level. Please
262-
<a href="/pricing" class="underline hover:text-primary-600-400"
263-
>upgrade your account</a
264-
> to use this tool.
265-
</p>
266-
<a href="/pricing" class="btn preset-filled-primary-500 inline-flex items-center gap-2">
267-
<svg
268-
xmlns="http://www.w3.org/2000/svg"
269-
width="18"
270-
height="18"
271-
viewBox="0 0 24 24"
272-
fill="none"
273-
stroke="currentColor"
274-
stroke-width="2"
275-
stroke-linecap="round"
276-
stroke-linejoin="round"
277-
aria-hidden="true"
278-
>
279-
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
280-
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
281-
</svg>
282-
<span>View Pricing Plans</span>
283-
</a>
284-
</div>
285-
</div>
286-
</div>
287-
</WhiteCard>
288-
{/if}
289-
290193
<div class="mt-6">
291-
{#if hasPaidAccess}
292-
<h2 class="text-xl md:text-2xl font-bold text-primary-900-100 mb-4">Start Exploring</h2>
293-
{:else}
194+
{#if !hasPaidAccess}
294195
<h2 class="text-xl md:text-2xl font-bold text-primary-900-100 mb-4">Preview</h2>
295196
{/if}
296197
</div>
@@ -368,20 +269,21 @@
368269
class="space-y-5"
369270
>
370271
<div class="space-y-4 p-3 rounded-lg border border-surface-300-700 bg-surface-100-900/40">
371-
<h3 class="font-semibold text-sm uppercase tracking-wide text-surface-700-300">
272+
<h3 class="font-semibold text-sm uppercase tracking-wide text-primary-900-100">
372273
App Details & Metrics
373274
</h3>
374275

375276
<!-- App Details -->
376277
<div class="space-y-2">
377-
<label class="label text-xs text-surface-500" for="store-select">Store</label>
278+
<label class="label text-xs text-primary-900-100" for="store-select">Store</label>
378279
<select class="select text-sm" id="store-select" bind:value={selectedStore}>
379280
<option value="">Any Store</option>
380281
<option value="1">Google Play</option>
381282
<option value="2">Apple App Store</option>
382283
</select>
383284

384-
<label class="label text-xs text-surface-500 mt-2" for="category-select">Category</label
285+
<label class="label text-xs text-primary-900-100 mt-2" for="category-select"
286+
>Category</label
385287
>
386288
<select class="select text-sm" id="category-select" bind:value={selectedCategory}>
387289
<option value="">Any Category</option>
@@ -398,7 +300,7 @@
398300
<!-- Installs -->
399301
<div class="grid grid-cols-2 gap-2">
400302
<div class="space-y-1">
401-
<label class="text-xs text-surface-500" for="min-installs">Min Installs</label>
303+
<label class="text-xs text-primary-900-100" for="min-installs">Min Installs</label>
402304
<input
403305
type="number"
404306
id="min-installs"
@@ -408,7 +310,7 @@
408310
/>
409311
</div>
410312
<div class="space-y-1">
411-
<label class="text-xs text-surface-500" for="max-installs">Max Installs</label>
313+
<label class="text-xs text-primary-900-100" for="max-installs">Max Installs</label>
412314
<input
413315
type="number"
414316
id="max-installs"
@@ -422,7 +324,7 @@
422324
<!-- Monthly Installs -->
423325
<div class="grid grid-cols-2 gap-2">
424326
<div class="space-y-1">
425-
<label class="text-xs text-surface-500" for="min-monthly"
327+
<label class="text-xs text-primary-900-100" for="min-monthly"
426328
>Min Monthly Installs</label
427329
>
428330
<input
@@ -434,7 +336,7 @@
434336
/>
435337
</div>
436338
<div class="space-y-1">
437-
<label class="text-xs text-surface-500" for="max-monthly"
339+
<label class="text-xs text-primary-900-100" for="max-monthly"
438340
>Max Monthly Installs</label
439341
>
440342
<input
@@ -450,7 +352,7 @@
450352
<!-- Ratings -->
451353
<div class="grid grid-cols-2 gap-2">
452354
<div class="space-y-1">
453-
<label class="text-xs text-surface-500" for="min-ratings">Min Ratings</label>
355+
<label class="text-xs text-primary-900-100" for="min-ratings">Min Ratings</label>
454356
<input
455357
type="number"
456358
id="min-ratings"
@@ -460,7 +362,7 @@
460362
/>
461363
</div>
462364
<div class="space-y-1">
463-
<label class="text-xs text-surface-500" for="max-ratings">Max Ratings</label>
365+
<label class="text-xs text-primary-900-100" for="max-ratings">Max Ratings</label>
464366
<input
465367
type="number"
466368
id="max-ratings"
@@ -490,13 +392,15 @@
490392
<label class="label font-medium text-sm" for="date-filter">Last Updated After</label>
491393
<input type="date" id="date-filter" class="input text-sm" bind:value={myDate} />
492394
</div>
395+
</div>
493396

494-
<!-- Current Ranking Filter -->
397+
<div class="space-y-4 p-3 rounded-lg border border-surface-300-700 bg-surface-100-900/40">
398+
<h3 class="font-semibold text-sm uppercase tracking-wide text-primary-900-100">
399+
App Store Ranks
400+
</h3>
495401
<div class="space-y-2">
496-
<label class="label font-medium text-sm" for="ranking-filter"
497-
>Apps that Are Currently Ranking</label
498-
>
499-
<p class="text-xs text-surface-500">
402+
<label class="label font-medium text-sm" for="ranking-filter">Ranking Filter</label>
403+
<p class="text-xs text-primary-900-100">
500404
Leave unset for all apps, choose overall for any ranking country, or choose one
501405
specific country.
502406
</p>
@@ -514,7 +418,7 @@
514418
</div>
515419

516420
<div class="space-y-4 p-3 rounded-lg border border-surface-300-700 bg-surface-100-900/40">
517-
<h3 class="font-semibold text-sm uppercase tracking-wide text-surface-700-300">
421+
<h3 class="font-semibold text-sm uppercase tracking-wide text-primary-900-100">
518422
Company Filters
519423
</h3>
520424

@@ -531,7 +435,7 @@
531435
<!-- Include Companies -->
532436
<div class="space-y-2">
533437
<label class="label font-medium text-sm" for="include-search">Include Companies</label>
534-
<p class="text-xs text-surface-500">Apps must use ALL selected SDKs/companies</p>
438+
<p class="text-xs text-primary-900-100">Apps must use ALL selected SDKs/companies</p>
535439
<div class="relative">
536440
<input
537441
type="text"
@@ -556,7 +460,7 @@
556460
onmousedown={() => addIncludeDomain(company.company_domain)}
557461
>
558462
<span>{company.company_name}</span>
559-
<span class="text-xs text-surface-500"
463+
<span class="text-xs text-primary-900-100"
560464
>{formatNumber(company.total_apps)} apps</span
561465
>
562466
</button>
@@ -584,7 +488,7 @@
584488
<!-- Exclude Companies -->
585489
<div class="space-y-2">
586490
<label class="label font-medium text-sm" for="exclude-search">Exclude Companies</label>
587-
<p class="text-xs text-surface-500">Apps must NOT use any of these</p>
491+
<p class="text-xs text-primary-900-100">Apps must NOT use any of these</p>
588492
<div class="relative">
589493
<input
590494
type="text"
@@ -609,7 +513,7 @@
609513
onmousedown={() => addExcludeDomain(company.company_domain)}
610514
>
611515
<span>{company.company_name}</span>
612-
<span class="text-xs text-surface-500"
516+
<span class="text-xs text-primary-900-100"
613517
>{formatNumber(company.total_apps)} apps</span
614518
>
615519
</button>
@@ -692,7 +596,7 @@
692596

693597
<!-- Filter Summary -->
694598
{#if includeDomains.length > 0}
695-
<div class="text-xs text-surface-500 pt-2 border-t border-surface-300-700">
599+
<div class="text-xs text-primary-900-100 pt-2 border-t border-surface-300-700">
696600
<p>
697601
<strong>Query:</strong> Apps using {includeDomains.length} selected SDK{includeDomains.length >
698602
1
@@ -707,11 +611,11 @@
707611
<!-- Results Table -->
708612
<main class="card preset-tonal p-4 overflow-hidden">
709613
{#if !hasPaidAccess}
710-
<div class="text-center py-16 relative">
711-
<div class="absolute inset-0 flex items-center justify-center opacity-10">
614+
<div class="py-10 relative">
615+
<div class="absolute inset-0 flex items-start justify-center opacity-10 pt-8">
712616
<Filter size={120} class="text-surface-500" />
713617
</div>
714-
<div class="relative z-10">
618+
<div class="relative max-w-3xl mx-auto">
715619
<svg
716620
xmlns="http://www.w3.org/2000/svg"
717621
width="64"
@@ -727,29 +631,71 @@
727631
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
728632
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
729633
</svg>
730-
<p class="text-lg font-medium mb-2">Results Area Locked</p>
731-
<p class="text-sm text-surface-600-400 mb-4">
732-
App search results will appear here once you upgrade. Configure filters on the left to
733-
see what you can discover.
634+
<p class="text-lg font-medium mb-3 text-center">Results Area Locked</p>
635+
<p class="text-sm text-primary-900-100 mb-6 text-center">
636+
The <strong>App Explorer</strong> (also known as <strong>App CrossFilter</strong> or
637+
<strong>App Query</strong>) helps you discover and filter mobile apps with advanced
638+
criteria.
734639
</p>
735-
<a href="/pricing" class="btn preset-filled-primary-500 inline-flex items-center gap-2">
736-
<svg
737-
xmlns="http://www.w3.org/2000/svg"
738-
width="18"
739-
height="18"
740-
viewBox="0 0 24 24"
741-
fill="none"
742-
stroke="currentColor"
743-
stroke-width="2"
744-
stroke-linecap="round"
745-
stroke-linejoin="round"
746-
aria-hidden="true"
640+
641+
<div class="space-y-6 text-primary-900-100">
642+
<div>
643+
<h3 class="font-semibold text-lg mb-2">Key Features</h3>
644+
<ul class="list-disc list-inside space-y-2 text-sm">
645+
<li>
646+
<strong>SDK & Company Filtering:</strong> Find apps using specific SDKs and companies.
647+
</li>
648+
<li>
649+
<strong>Monetization Filters:</strong> Filter by in-app purchases, ads, and detection
650+
requirements.
651+
</li>
652+
<li>
653+
<strong>Store & Category:</strong> Narrow down by Google Play / Apple App Store and
654+
category.
655+
</li>
656+
<li>
657+
<strong>Metrics Filtering:</strong> Filter installs, ratings, and monthly installs
658+
ranges.
659+
</li>
660+
<li>
661+
<strong>Date & Rankings:</strong> Filter by recent updates and current store ranking
662+
status.
663+
</li>
664+
</ul>
665+
</div>
666+
667+
<div>
668+
<h3 class="font-semibold text-lg mb-2">Use Cases</h3>
669+
<ul class="list-disc list-inside space-y-2 text-sm">
670+
<li>
671+
<strong>Sales Teams:</strong> Identify potential customers using competitor SDKs.
672+
</li>
673+
<li>
674+
<strong>Market Research:</strong> Analyze ecosystems by monetization strategy.
675+
</li>
676+
<li>
677+
<strong>Competitive Analysis:</strong> Discover peers in your category and store.
678+
</li>
679+
<li>
680+
<strong>Partnership Discovery:</strong> Find apps likely to benefit from your SDK.
681+
</li>
682+
</ul>
683+
</div>
684+
</div>
685+
686+
<div
687+
class="mt-6 p-4 bg-surface-100-900 rounded-lg border border-surface-300-700 text-center"
688+
>
689+
<p class="text-sm mb-3 text-primary-900-100">
690+
<strong>Access Required:</strong> App Explorer is available to paid subscribers.
691+
</p>
692+
<a
693+
href="/pricing"
694+
class="btn preset-filled-primary-500 inline-flex items-center gap-2"
747695
>
748-
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
749-
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
750-
</svg>
751-
<span>Upgrade to Unlock</span>
752-
</a>
696+
<span class="inline text-white"> View Pricing Plans</span>
697+
</a>
698+
</div>
753699
</div>
754700
</div>
755701
{:else if !hasSearched()}

0 commit comments

Comments
 (0)