dansk-tech/index.php at main · Avallone-io/dansk-tech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html>
<html lang="da" class="scroll-smooth">
<head>

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-T4G74L3RG0"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-T4G74L3RG0');
  </script>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Den danske tech stack</title>
  <meta name="description" content="Oversigt over danske tech-systemer som alternativer til store internationale spillere. Få inspiration til din tech stack med danske SaaS-løsninger til betalinger, analytics, monitoring og mere.">

  <!-- Canonical URL -->
  <link rel="canonical" href="https://dansktechstack.dk/" />

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-precomposed.png">

  <!-- Preconnect for performance -->
  <link rel="preconnect" href="https://cdn.tailwindcss.com">
  <link rel="dns-prefetch" href="https://cdn.tailwindcss.com">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://dansktechstack.dk/">
  <meta property="og:title" content="Den danske tech stack">
  <meta property="og:description" content="Oversigt over danske tech-systemer som alternativer til store internationale spillere. Få inspiration til din tech stack med danske SaaS-løsninger.">
  <meta property="og:image" content="https://dansktechstack.dk/og-image-dansktechstack.png">
  <meta property="og:locale" content="da_DK">
  <meta property="og:site_name" content="Dansk Tech Stack">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://dansktechstack.dk/">
  <meta property="twitter:title" content="Den danske tech stack">
  <meta property="twitter:description" content="Oversigt over danske tech-systemer som alternativer til store internationale spillere.">
  <meta property="twitter:image" content="https://dansktechstack.dk/og-image-dansktechstack.png">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
    }
  </script>

  <!-- Schema.org JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "Den danske tech stack",
    "description": "Oversigt over danske tech-systemer som alternativer til store internationale spillere. Få inspiration til din tech stack med danske SaaS-løsninger til betalinger, analytics, monitoring og mere.",
    "url": "https://dansktechstack.dk",
    "publisher": {
      "@type": "Organization",
      "name": "langsom.com",
      "url": "https://langsom.com"
    },
    "inLanguage": "da-DK"
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "ItemList",
    "name": "Danske tech-systemer",
    "description": "Liste over danske alternativer til internationale tech-systemer",
    "itemListElement": [
      {
        "@type": "SoftwareApplication",
        "name": "Alunta.com",
        "description": "Abonnementer, betalinger og fakturering",
        "url": "https://alunta.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "GrowPanel.io",
        "description": "Subscription analytics platform",
        "url": "https://growpanel.io",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "PingPuffin.com",
        "description": "Uptime monitoring og alerts",
        "url": "https://pingpuffin.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Sleeknote.com",
        "description": "Email marketing og popups",
        "url": "https://sleeknote.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Clerk.io",
        "description": "Personalisering og anbefalinger",
        "url": "https://clerk.io",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "PageVitals.com",
        "description": "Performance monitoring",
        "url": "https://pagevitals.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Herodesk.io",
        "description": "Customer support og helpdesk",
        "url": "https://herodesk.io",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Morningscore.io",
        "description": "SEO + GEO tracking",
        "url": "https://morningscore.io",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Dreamdata.io",
        "description": "B2B revenue attribution",
        "url": "https://dreamdata.io",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Timelog.com",
        "description": "Tidsregistrering, ressourcestyring og fakturering",
        "url": "https://timelog.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Fenerum.com",
        "description": "SaaS finances",
        "url": "https://fenerum.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "E-conomic.dk",
        "description": "Regnskab og bogholderi",
        "url": "https://e-conomic.dk",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Dinero.dk",
        "description": "Regnskab og bogholderi",
        "url": "https://dinero.dk",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Plecto.com",
        "description": "Performance management og dashboards",
        "url": "https://plecto.com",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "Updatemate.ai",
        "description": "Automatisering og integrationer",
        "url": "https://updatemate.ai",
        "applicationCategory": "BusinessApplication"
      },
      {
        "@type": "SoftwareApplication",
        "name": "SEO.ai",
        "description": "Automatisering af indholdsproduktion",
        "url": "https://seo.ai",
        "applicationCategory": "BusinessApplication"
      }
    ]
  }
  </script>
</head>
<body class="bg-white dark:bg-gray-900">
  <div class="min-h-screen flex items-center justify-center relative" style="background-image: url('./images/danmark.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
    <div class="absolute inset-0 bg-white/70 dark:bg-gray-900/70"></div>
    <div class="mx-auto max-w-7xl px-6 lg:px-8 w-full relative z-10">
      <div class="mx-auto max-w-3xl text-center">
        <h1 class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-6xl lg:text-7xl dark:text-white">
          Den danske tech stack
        </h1>
        <p class="mt-8 text-xl/8 text-gray-600 dark:text-gray-400 max-[450px]:hidden">
          Vi er en gruppe iværksættere, der ønsker at sætte fokus på dansk software. I en tid hvor der ofte tales om Danmarks afhængighed af udenlandsk software, har vi udgivet en liste af danske software-virkomsheder, man kan vælge som alternativ til dem udenfor EU.
          Danmark har nemlig en stolt tradition inden for softwareudvikling. Teknologier som Ruby on Rails, C++ og PHP har danske rødder, og nedenfor har vi samlet en liste over stærke danske alternativer til software, der ellers typisk købes i udlandet.
        </p>
        <p class="mt-8 text-xl/8 text-gray-600 dark:text-gray-400 hidden max-[450px]:block">
          Vi er en gruppe iværksættere, der ønsker at sætte fokus på danske produkter, man kan bruge i sin tech stack. I en tid hvor der ofte tales om Danmarks afhængighed af udenlandsk software, vil vi fremhæve danske systemer, vi selv har tillid til.
        </p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <a href="#produkter" class="rounded-md bg-gray-900 px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">
            Produkter fra 🇩🇰
          </a>
          <a href="#iværksættere" class="text-base font-semibold text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-300">
            Hvem står bag? <span aria-hidden="true">→</span>
          </a>
        </div>

        <!-- Media mentions section -->
        <div class="mt-16 pt-12 border-t border-gray-200/50 dark:border-gray-700/50">
          <p class="text-xs font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-8">Omtalt i bl.a.</p>
          <div class="flex flex-wrap items-center justify-center gap-10 sm:gap-16">
            <!-- TechSavvy logo -->
            <div class="group flex items-center justify-center h-12 opacity-90 hover:opacity-100 transition-opacity duration-300">
              <img src="techsavvy.png" alt="TechSavvy" class="h-full w-auto max-w-[140px] object-contain transition-all duration-300" />
            </div>
            <!-- Berlingske logo -->
            <div class="group flex items-center justify-center h-12 opacity-90 hover:opacity-100 transition-opacity duration-300">
              <img src="berlingske.png" alt="Berlingske" class="h-full w-auto max-w-[140px] object-contain transition-all duration-300" />
            </div>
            <!-- Zetland logo -->
            <div class="group flex items-center justify-center h-12 opacity-90 hover:opacity-100 transition-opacity duration-300">
              <img src="zetland.png" alt="Zetland" class="h-full w-auto max-w-[140px] object-contain transition-all duration-300" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="produkter" class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Tech fra 🇩🇰</h2>
        <p class="mt-6 text-base text-gray-600 dark:text-gray-400">
          Oversigt over danske systemer til din tech stack
        </p>
      </div>
      <div class="mt-8">
        <div class="max-w-md mx-auto">
          <input type="text" id="product-search" placeholder="Søg efter international software, dansk software eller kategori..."
                 class="w-full px-4 py-3 text-base border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-600 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-900 dark:focus:ring-white" />
          <div class="mt-2 flex flex-wrap items-center justify-center gap-2">
            <span class="text-xs text-gray-500 dark:text-gray-400">Eksempel:</span>
            <button type="button" class="search-example text-xs px-2.5 py-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-search="Stripe">Stripe</button>
            <button type="button" class="search-example text-xs px-2.5 py-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-search="DownDetector">DownDetector</button>
            <button type="button" class="search-example text-xs px-2.5 py-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-search="Mailchimp">Mailchimp</button>
            <button type="button" class="search-example text-xs px-2.5 py-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-search="Zendesk">Zendesk</button>
          </div>
        </div>
      </div>
      <?php
      // Load all products from JSON file
      $products = [];
      $productsFile = __DIR__ . '/products.json';

      if (file_exists($productsFile)) {
        $productsContent = file_get_contents($productsFile);
        $decoded = json_decode($productsContent, true);

        if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
          $products = $decoded;
        }
      }

      // Load original products list
      $originalProducts = [];
      $originalFile = __DIR__ . '/original-products.json';

      if (file_exists($originalFile)) {
        $originalContent = file_get_contents($originalFile);
        $decoded = json_decode($originalContent, true);

        if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
          $originalProducts = $decoded;
        }
      }

      // Sort products alphabetically by name
      usort($products, function($a, $b) {
        return strcasecmp($a['name'], $b['name']);
      });
      ?>
      <div id="products-container">
        <ul role="list" class="mx-auto mt-10 grid max-w-5xl grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 xl:grid-cols-4">
        <?php foreach ($products as $index => $product):
          // Validate required fields
          if (!isset($product['name']) || !isset($product['url']) || !isset($product['description'])) {
            continue;
          }

          $name = htmlspecialchars($product['name'], ENT_QUOTES, 'UTF-8');
          $url = htmlspecialchars($product['url'], ENT_QUOTES, 'UTF-8');
          $description = htmlspecialchars($product['description'], ENT_QUOTES, 'UTF-8');
          $alternatives = isset($product['alternatives']) && is_array($product['alternatives'])
            ? $product['alternatives']
            : [];
          $alternativesText = !empty($alternatives) ? implode(', ', array_map('htmlspecialchars', $alternatives)) : '';

          // Extract domain from URL for favicon
          $domain = parse_url($url, PHP_URL_HOST);
          if ($domain) {
            $domain = str_replace('www.', '', $domain);
            $faviconUrl = 'https://www.google.com/s2/favicons?domain=' . urlencode($domain) . '&sz=32';
          } else {
            $faviconUrl = '';
          }

          $isOriginal = in_array($url, $originalProducts);
          $productDataAttributes = 'data-product data-name="' . htmlspecialchars(strtolower($name), ENT_QUOTES, 'UTF-8') . '" data-description="' . htmlspecialchars(strtolower($description), ENT_QUOTES, 'UTF-8') . '" data-alternatives="' . htmlspecialchars(strtolower(implode(' ', $alternatives)), ENT_QUOTES, 'UTF-8') . '"';
        ?>
        <li <?php echo $productDataAttributes; ?>>
          <a href="<?php echo $url; ?>" target="_blank" rel="noopener noreferrer" class="group block p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-md transition-all duration-200">
            <div class="flex items-start gap-3">
              <div class="flex-shrink-0 mt-0.5 w-8 h-8 rounded bg-gray-200 dark:bg-gray-700 flex items-center justify-center relative overflow-hidden">
                <?php if ($faviconUrl): ?>
                <img src="<?php echo $faviconUrl; ?>" alt="<?php echo $name; ?>" width="32" height="32" class="rounded w-full h-full object-contain" onerror="this.style.display='none'; this.parentElement.querySelector('.favicon-fallback').style.display='flex';" />
                <?php endif; ?>
                <span class="favicon-fallback text-sm font-bold text-gray-500 dark:text-gray-400" style="<?php echo $faviconUrl ? 'display: none;' : 'display: flex;'; ?>"><?php echo strtoupper(substr($name, 0, 1)); ?></span>
              </div>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 mb-1 flex-wrap">
                  <h3 class="text-base font-semibold text-gray-900 dark:text-white group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors truncate">
                    <?php echo $name; ?>
                  </h3>
                  <?php if ($isOriginal): ?>
                  <span class="inline-flex items-center rounded-full bg-blue-600 px-2 py-0.5 text-xs font-medium text-white flex-shrink-0">Original</span>
                  <?php endif; ?>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-2">
                  <?php echo $description; ?>
                </p>
                <?php if (!empty($alternativesText)): ?>
                <p class="text-xs text-gray-500 dark:text-gray-500">
                  <span class="font-medium">Alternativ til:</span> <span class="text-gray-400 dark:text-gray-500"><?php echo htmlspecialchars(strlen($alternativesText) > 60 ? substr($alternativesText, 0, 60) . '...' : $alternativesText); ?></span>
                </p>
                <?php endif; ?>
              </div>
            </div>
          </a>
        </li>
        <?php endforeach; ?>
      </ul>
      <div id="no-results" class="mt-10 text-center text-gray-500 dark:text-gray-400 hidden">
        <p>Ingen produkter fundet. Prøv at søge efter et andet navn eller international software.</p>
      </div>
      </div>
    </div>
  </div>

  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>

  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>
  <div id="iværksættere" class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl dark:text-white">Tusind tak til dem der støttede projektet helt fra start</h2>
        <p class="mt-6 text-lg/8 text-gray-600 dark:text-gray-400">Vi har talt med bekendte i tech-miljøet og fået dem med til også at lægge navn til anbefalingerne. Disse personer støtter initiativet og bygger og investerer selv i de danske systemer. Alle på listen her har fået lov at udnævne et stykke software til listen, som så har fået <span class="inline-flex items-center rounded-full bg-blue-600 px-2 py-0.5 text-xs font-medium text-white">Original</span> label'en i oversigten over produkter.</p>
      </div>
      <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-2 gap-x-8 gap-y-16 text-center sm:grid-cols-3 md:grid-cols-4 lg:mx-0 lg:max-w-none lg:grid-cols-7">
        <li>
          <img src="images/lasse-schou.png" alt="Lasse Schou Holbøll" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Lasse Schou Holbøll</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af GrowPanel, Soundvenue, Mouseflow og PageVitals</p>
        </li>
        <li>
          <img src="images/mogens-moller.png" alt="Mogens Møller" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Mogens Møller</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af Sleeknote og medejer af Drip.com</p>
        </li>
        <li>
          <img src="images/hans-kristian.png" alt="Hans-Kristian Bjerregaard" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Hans-Kristian Bjerregaard</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af Clerk.io</p>
        </li>
        <li>
          <img src="images/anders-eiler.png" alt="Anders Eiler" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Anders Eiler</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af Herodesk og Meebox</p>
        </li>
        <li>
          <img src="images/karsten-madsen.png" alt="Karsten Madsen" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Karsten Madsen</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af Morningscore og Morningtrain</p>
        </li>
        <li>
          <img src="images/steffen-hedebrandt.jpg" alt="Steffen Hedebrandt" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Steffen Hedebrandt</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Medstifter af DreamData.io</p>
        </li>
        <li>
          <img src="images/pelle-timelog.png" alt="Pelle Nielsen" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Pelle Nielsen</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Adm. direktør i Timelog</p>
        </li>
        <li>
          <img src="images/soren-lund.png" alt="Søren Lund" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Søren Lund</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af Timelog</p>
        </li>
        <li>
          <img src="images/bo-moller.png" alt="Bo Møller" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Bo Møller</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Easypractice, Twentyfour, Boligforeningsweb, PingPuffin og Alunta</p>
        </li>
        <li>
          <img src="images/oliver-lindebod.png" alt="Oliver Lindebod" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Oliver Lindebod</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Boligforeningsweb, Alunta og PingPuffin</p>
        </li>
        <li>
          <img src="images/emil-hoejbjerg.png" alt="Emil Højbjerg" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Emil Højbjerg</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Boligforeningsweb, EasyPractice, Alunta og PingPuffin</p>
        </li>
        <li>
          <img src="images/martin-thorborg.jpg" alt="Martin Thorborg" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Martin Thorborg</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Dinero, SPAMFighter, Amino og Jubii</p>
        </li>
        <li>
          <img src="images/jeff-blaavand.jpg" alt="Jeff Blaavand" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Jeff Blaavand</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">CMO i Plecto</p>
        </li>
        <li>
          <img src="images/daniel.jpg" alt="Daniel Højris Bæk" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Daniel Højris Bæk</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. SEO.ai og Nodes</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>

  <div class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-3xl text-center">
        <h2 class="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl dark:text-white">De 4 oprindelige bagmænd</h2>
        <p class="mt-6 text-lg/8 text-gray-600 dark:text-gray-400">Vi er fire glade iværksættere og udviklere fra Danmark som elsker tech, business og at bygge virksomheder. Vi har fulgt debatten omkring at Danmark måske "falder bagud" internationalt og vi er nok desværre enige. Derfor vil vi gerne prøve at kaste lidt lys på danske tech-firmaer som vi mener er gode alternativer til de store internationale spillere, når man leder efter produkter.</p>
      </div>
      <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-center sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4 lg:justify-items-center">
        <li>
          <img src="images/bo-moller.png" alt="Bo Møller" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Bo Møller</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Easypractice, Twentyfour, Boligforeningsweb, PingPuffin og Alunta</p>
        </li>
        <li>
          <img src="images/oliver-lindebod.png" alt="Oliver Lindebod" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Oliver Lindebod</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Boligforeningsweb, Alunta og PingPuffin</p>
        </li>
        <li>
          <img src="images/emil-hoejbjerg.png" alt="Emil Højbjerg" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Emil Højbjerg</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400">Stifter af bl.a. Boligforeningsweb, EasyPractice, Alunta og PingPuffin</p>
        </li>
        <li>
          <img src="images/jonas.jpg" alt="Jonas Kaas Kristensen" width="96" height="96" loading="lazy" class="mx-auto size-24 rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10" />
          <h3 class="mt-6 text-base/7 font-semibold tracking-tight text-gray-900 dark:text-white">Jonas Kaas Kristensen</h3>
          <p class="text-sm/6 text-gray-600 dark:text-gray-400"><a target="_blank" href="https://midear.dk">Freelance udvikler</a> og administrator på dansktechstack.dk sammen med Bo Møller.</p>
        </li>
      </ul>
    </div>
  </div>


  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>
  <div id="forslag"class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Send dit forslag via <a href="https://github.com/Boligforeningsweb/dansk-tech" class="underline">GitHub</a></h2>
        <p class="mt-6 text-lg/8 text-gray-600 dark:text-gray-400">
          Er du selv udvikler og kender lige præcis dét stykke software fra Danmark som mangler på listen? Så kan du sende os en pull request og foreslå til listen af produkter fra eksterne bidragydere. Herunder kan du se dem der har bidraget indtil videre. Det er hhv. <a href="https://github.com/BoMoellerDK" class="underline">Bo Møller</a> og <a href="https://github.com/jonasdev" class="underline">Jonas Kaas Kristensen</a> der styrer repo'et.
        </p>
        <div id="contributors" class="mt-10 flex flex-wrap items-center justify-center gap-x-4 gap-y-2">
        </div>
      </div>
    </div>
  </div>

  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>
  <div class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-3xl text-center">
        <img src="images/dhh.webp" alt="David Heinemeier Hansson" width="288" height="288" loading="lazy" class="mx-auto w-28 h-28 md:w-32 md:h-32 rounded-full object-cover ring-4 ring-white dark:ring-gray-900 shadow-lg" />
        <figure class="mt-8 inline-block bg-gray-50 dark:bg-gray-800 rounded-lg p-6 md:p-8 text-center">
          <blockquote class="text-lg md:text-xl text-gray-700 dark:text-gray-300 leading-relaxed italic">“Danmark kan og skal være langt mere selvforsynende med software. Vi kan ikke bygge et resistent samfund på en digital infrastruktur, der er næsten udelukkende leveret af Amerikanerne eller Kineserne. Så et fokus på hvad der allerede findes i dag og danske virksomheder og institutioner kan komme igang med i morgen er super”</blockquote>
          <figcaption class="mt-4 text-sm text-gray-600 dark:text-gray-400 font-medium">David Heinemeier Hansson <br/> Stifter af Ruby on Rails, Bestseller-forfatter og medejer af flere danske startups</figcaption>
        </figure>
      </div>
    </div>
  </div>

  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="border-t border-gray-300 dark:border-white/15"></div>
  </div>
  <div class="bg-white py-24 sm:py-32 dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Del budskabet</h2>
        <p class="mt-6 text-lg/8 text-gray-600 dark:text-gray-400">
          Hjælp os med at sprede budskabet om den danske tech stack. Del dette med andre danske virksomheder, der leder efter alternativer.
        </p>
        <div class="mt-10 flex items-center justify-center gap-x-4">
          <a href="https://twitter.com/intent/tweet?text=Tjek%20lige%20den%20danske%20tech%20stack%20ud.%20Man%20kan%20sagtens%20k%C3%B8be%20fed%20software%20i%20Danmark.%20Se%20dansktechstack.dk&url=https://dansktechstack.dk" target="_blank" rel="noopener noreferrer" class="rounded-md bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100">
            Del på Twitter
          </a>
          <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://dansktechstack.dk" target="_blank" rel="noopener noreferrer" class="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
            Del på LinkedIn
          </a>
          <a href="https://www.facebook.com/sharer/sharer.php?u=https://dansktechstack.dk" target="_blank" rel="noopener noreferrer" class="rounded-md bg-blue-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500">
            Del på Facebook
          </a>

        </div>
      </div>
    </div>
  </div>

  <footer class="bg-white dark:bg-gray-900">
    <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8">
      <div class="flex justify-center gap-x-6 md:order-2">
        <a href="mailto:kontakt@langsom.com" class="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white">
          Kontakt os på kontakt@langsom.com
        </a>
      </div>
      <p class="mt-8 text-center text-sm/6 text-gray-600 md:order-1 md:mt-0 dark:text-gray-400">Bygget i København af folkene fra <a href="https://langsom.com">langsom.com</a> + venner fra branchen.</p>
    </div>
  </footer>
  <script type="text/javascript">
    // Product search functionality
    (function() {
      const searchInput = document.getElementById('product-search');
      const productItems = document.querySelectorAll('[data-product]');
      const productsList = document.querySelector('[role="list"]');
      const noResults = document.getElementById('no-results');

      if (!searchInput || !productItems.length) return;

      // Function to perform search
      function performSearch(query) {
        const searchQuery = query.toLowerCase().trim();
        let visibleCount = 0;

        productItems.forEach(function(item) {
          const name = item.getAttribute('data-name') || '';
          const description = item.getAttribute('data-description') || '';
          const alternatives = item.getAttribute('data-alternatives') || '';

          const matches = !searchQuery ||
            name.includes(searchQuery) ||
            description.includes(searchQuery) ||
            alternatives.includes(searchQuery);

          if (matches) {
            item.style.display = '';
            visibleCount++;
          } else {
            item.style.display = 'none';
          }
        });

        // Show/hide no results message
        if (searchQuery && visibleCount === 0) {
          noResults.classList.remove('hidden');
          productsList.classList.add('hidden');
        } else {
          noResults.classList.add('hidden');
          productsList.classList.remove('hidden');
        }
      }

      // Search input handler
      searchInput.addEventListener('input', function(e) {
        performSearch(e.target.value);
      });

      // Clickable search examples
      const searchExamples = document.querySelectorAll('.search-example');
      searchExamples.forEach(function(button) {
        button.addEventListener('click', function() {
          const searchTerm = this.getAttribute('data-search');
          searchInput.value = searchTerm;
          searchInput.focus();
          performSearch(searchTerm);
          // Scroll to products
          document.getElementById('produkter').scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      });
    })();

    // GitHub contributors
    (async () => {
      const response = await fetch('https://api.github.com/repos/Boligforeningsweb/dansk-tech/contributors?per_page=500&page=1');
      const contributors = await response.json();
      const container = document.getElementById('contributors');

      contributors.forEach(contributor => {
        const link = document.createElement('a');
        link.href = contributor.html_url;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';

        const img = document.createElement('img');
        img.src = contributor.avatar_url;
        img.alt = contributor.login;
        img.width = 48;
        img.height = 48;
        img.className = 'rounded-full object-cover outline-1 -outline-offset-1 outline-black/5 dark:outline-white/10';

        link.appendChild(img);
        container.appendChild(link);
      });
    })();
  </script>
</body>
</html>