Skip to content

Commit 015b763

Browse files
HarshCasperHarshCasper
committed
move the styles over
1 parent b45c9e3 commit 015b763

File tree

2 files changed

+459
-455
lines changed

2 files changed

+459
-455
lines changed

‎src/components/ApplicationsShowcase.astro‎

Lines changed: 13 additions & 341 deletions
Original file line numberDiff line numberDiff line change
@@ -1,349 +1,21 @@
11
---
2-
import applicationsData from '../data/developerhub/applications.json';
3-
import servicesData from '../data/developerhub/services.json';
4-
import platformsData from '../data/developerhub/platforms.json';
5-
import deploymentsData from '../data/developerhub/deployments.json';
6-
import complexitiesData from '../data/developerhub/complexities.json';
72
import { ApplicationsShowcase } from './applications/ApplicationsShowcase';
83
4+
// Import data
5+
import applicationsData from '../data/developerhub/applications.json';
6+
import services from '../data/developerhub/services.json';
7+
import platforms from '../data/developerhub/platforms.json';
8+
import deployments from '../data/developerhub/deployments.json';
9+
import complexities from '../data/developerhub/complexities.json';
10+
911
const applications = applicationsData.applications;
1012
---
1113

12-
<ApplicationsShowcase
14+
<ApplicationsShowcase
1315
applications={applications}
14-
services={servicesData}
15-
platforms={platformsData}
16-
deployments={deploymentsData}
17-
complexities={complexitiesData}
16+
services={services}
17+
platforms={platforms}
18+
deployments={deployments}
19+
complexities={complexities}
1820
client:load
19-
/>
20-
21-
<style>
22-
/* Clean Applications Showcase */
23-
:global(.applications-showcase) {
24-
max-width: 1200px;
25-
margin: 0 auto;
26-
padding: 0 1rem;
27-
}
28-
29-
/* Top Bar */
30-
:global(.top-bar) {
31-
display: flex;
32-
gap: 1rem;
33-
align-items: center;
34-
margin-bottom: 1.5rem;
35-
padding: 1rem;
36-
background: var(--sl-color-bg-sidebar);
37-
border: 1px solid var(--sl-color-gray-6);
38-
border-radius: 0.5rem;
39-
flex-wrap: wrap;
40-
}
41-
42-
:global(.search-container) {
43-
position: relative;
44-
flex: 1;
45-
min-width: 300px;
46-
}
47-
48-
:global(.search-input) {
49-
width: 100%;
50-
padding: 0.75rem;
51-
border: 1px solid var(--sl-color-gray-5);
52-
border-radius: 0.375rem;
53-
background: var(--sl-color-bg);
54-
color: var(--sl-color-white);
55-
font-size: 0.875rem;
56-
}
57-
58-
:global(.search-input:focus) {
59-
outline: none;
60-
border-color: var(--sl-color-accent);
61-
}
62-
63-
:global(.search-clear) {
64-
position: absolute;
65-
right: 0.75rem;
66-
top: 50%;
67-
transform: translateY(-50%);
68-
background: none;
69-
border: none;
70-
color: var(--sl-color-gray-3);
71-
font-size: 1.25rem;
72-
cursor: pointer;
73-
width: 1.5rem;
74-
height: 1.5rem;
75-
display: flex;
76-
align-items: center;
77-
justify-content: center;
78-
}
79-
80-
:global(.search-clear:hover) {
81-
color: var(--sl-color-white);
82-
}
83-
84-
:global(.filter-select) {
85-
padding: 0.75rem;
86-
border: 1px solid var(--sl-color-gray-5);
87-
border-radius: 0.375rem;
88-
background: var(--sl-color-bg);
89-
color: var(--sl-color-white);
90-
font-size: 0.875rem;
91-
min-width: 140px;
92-
}
93-
94-
:global(.filter-select:focus) {
95-
outline: none;
96-
border-color: var(--sl-color-accent);
97-
}
98-
99-
:global(.pro-toggle) {
100-
display: flex;
101-
align-items: center;
102-
gap: 0.5rem;
103-
font-size: 0.875rem;
104-
color: var(--sl-color-white);
105-
cursor: pointer;
106-
white-space: nowrap;
107-
}
108-
109-
:global(.sort-select) {
110-
padding: 0.75rem;
111-
border: 1px solid var(--sl-color-gray-5);
112-
border-radius: 0.375rem;
113-
background: var(--sl-color-bg);
114-
color: var(--sl-color-white);
115-
font-size: 0.875rem;
116-
min-width: 120px;
117-
}
118-
119-
:global(.clear-filters) {
120-
background: var(--sl-color-accent);
121-
color: white;
122-
border: none;
123-
padding: 0.75rem 1rem;
124-
border-radius: 0.375rem;
125-
font-size: 0.875rem;
126-
cursor: pointer;
127-
white-space: nowrap;
128-
}
129-
130-
:global(.clear-filters:hover) {
131-
background: var(--sl-color-accent-high);
132-
}
133-
134-
:global(.results-info) {
135-
margin-bottom: 1rem;
136-
color: var(--sl-color-gray-2);
137-
font-size: 0.875rem;
138-
}
139-
140-
/* Applications Grid */
141-
:global(.applications-grid) {
142-
display: grid;
143-
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
144-
gap: 1.5rem;
145-
}
146-
147-
/* Application Cards */
148-
:global(.app-card) {
149-
background: var(--sl-color-bg-sidebar);
150-
border: 1px solid var(--sl-color-gray-6);
151-
border-radius: 0.75rem;
152-
overflow: hidden;
153-
transition: transform 0.2s ease, box-shadow 0.2s ease;
154-
}
155-
156-
:global(.app-card:hover) {
157-
transform: translateY(-2px);
158-
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
159-
}
160-
161-
:global(.card-image) {
162-
position: relative;
163-
width: 100%;
164-
height: 180px;
165-
overflow: hidden;
166-
}
167-
168-
:global(.card-image img) {
169-
width: 100%;
170-
height: 100%;
171-
object-fit: cover;
172-
}
173-
174-
:global(.card-badges) {
175-
position: absolute;
176-
top: 0.75rem;
177-
right: 0.75rem;
178-
display: flex;
179-
gap: 0.5rem;
180-
flex-direction: column;
181-
align-items: flex-end;
182-
}
183-
184-
:global(.pro-badge) {
185-
background: var(--sl-color-accent);
186-
color: white;
187-
padding: 0.25rem 0.5rem;
188-
border-radius: 0.25rem;
189-
font-size: 0.75rem;
190-
font-weight: 600;
191-
}
192-
193-
:global(.complexity-badge) {
194-
background: rgba(255, 255, 255, 0.9);
195-
color: var(--sl-color-gray-6);
196-
padding: 0.25rem 0.5rem;
197-
border-radius: 0.25rem;
198-
font-size: 0.75rem;
199-
font-weight: 600;
200-
text-transform: capitalize;
201-
}
202-
203-
:global(.card-content) {
204-
padding: 1.25rem;
205-
}
206-
207-
:global(.card-title) {
208-
margin: 0 0 0.75rem 0;
209-
font-size: 1.125rem;
210-
font-weight: 700;
211-
color: var(--sl-color-white);
212-
line-height: 1.3;
213-
}
214-
215-
:global(.card-description) {
216-
margin: 0 0 1.25rem 0;
217-
color: var(--sl-color-gray-2);
218-
line-height: 1.5;
219-
font-size: 0.875rem;
220-
}
221-
222-
:global(.card-footer) {
223-
display: flex;
224-
justify-content: space-between;
225-
align-items: center;
226-
gap: 1rem;
227-
}
228-
229-
:global(.service-icons) {
230-
display: flex;
231-
gap: 0.375rem;
232-
align-items: center;
233-
flex-wrap: wrap;
234-
flex: 1;
235-
}
236-
237-
:global(.service-icon) {
238-
width: 1.75rem;
239-
height: 1.75rem;
240-
padding: 0.125rem;
241-
display: flex;
242-
align-items: center;
243-
justify-content: center;
244-
transition: all 0.2s ease;
245-
}
246-
247-
:global(.service-icon:hover) {
248-
transform: scale(1.1);
249-
}
250-
251-
:global(.service-icon img) {
252-
width: 100%;
253-
height: 100%;
254-
object-fit: contain;
255-
}
256-
257-
:global(.service-more) {
258-
padding: 0.25rem 0.5rem;
259-
background: var(--sl-color-bg);
260-
border: 1px solid var(--sl-color-gray-6);
261-
border-radius: 0.25rem;
262-
font-size: 0.75rem;
263-
color: var(--sl-color-gray-3);
264-
}
265-
266-
:global(.card-link) {
267-
display: inline-flex;
268-
align-items: center;
269-
gap: 0.5rem;
270-
color: white;
271-
text-decoration: none;
272-
font-weight: 500;
273-
font-size: 0.875rem;
274-
padding: 0.5rem 0.75rem;
275-
border-radius: 0.375rem;
276-
transition: all 0.2s ease;
277-
white-space: nowrap;
278-
}
279-
280-
:global(.card-link:hover) {
281-
color: var(--sl-color-accent);
282-
}
283-
284-
/* No Results */
285-
:global(.no-results) {
286-
grid-column: 1 / -1;
287-
text-align: center;
288-
padding: 3rem 1rem;
289-
color: var(--sl-color-gray-2);
290-
}
291-
292-
:global(.no-results h3) {
293-
margin: 0 0 0.5rem 0;
294-
color: var(--sl-color-white);
295-
}
296-
297-
:global(.no-results p) {
298-
margin: 0 0 1.5rem 0;
299-
}
300-
301-
:global(.reset-button) {
302-
background: var(--sl-color-accent);
303-
color: white;
304-
border: none;
305-
padding: 0.75rem 1.5rem;
306-
border-radius: 0.375rem;
307-
cursor: pointer;
308-
}
309-
310-
:global(.reset-button:hover) {
311-
background: var(--sl-color-accent-high);
312-
}
313-
314-
/* Responsive */
315-
@media (max-width: 768px) {
316-
:global(.applications-showcase) {
317-
padding: 0 0.75rem;
318-
}
319-
320-
:global(.top-bar) {
321-
flex-direction: column;
322-
align-items: stretch;
323-
}
324-
325-
:global(.search-container) {
326-
min-width: auto;
327-
flex: none;
328-
}
329-
330-
:global(.filter-select),
331-
:global(.sort-select) {
332-
min-width: auto;
333-
}
334-
335-
:global(.applications-grid) {
336-
grid-template-columns: 1fr;
337-
}
338-
339-
:global(.card-footer) {
340-
flex-direction: column;
341-
align-items: stretch;
342-
gap: 0.75rem;
343-
}
344-
345-
:global(.service-icons) {
346-
justify-content: center;
347-
}
348-
}
349-
</style>
21+
/>

0 commit comments

Comments
 (0)