<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="description" content="AINNOVA - Skräddarsydda webbappar som gör din verksamhet effektivare"> <meta name="format-detection" content="telephone=no"> <title>AINNOVA | Webbappar</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap"> <style> /* AINNOVA färgpalett enligt designprotokoll */ :root { --primary-blue: #007BBF; --white: #FFFFFF; --light-gray: #E6EBF1; --lighter-gray: #F7F9FC; --button-green: #80CB45; --button-green-hover: #3A8C2D; --text-dark-gray: #222222; --text-medium-gray: #56585E; --text-light-gray: #888888; --border-gray: #CCCCCC; --shadow: rgba(0,0,0,0.1); }
/* Grund- och resetstil */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background: var(--primary-blue); }
/* Huvudlayout */
.ainnova-wrapper { padding: 14px 20px 20px; min-height: 100vh; background: var(--primary-blue); }
.container { margin: 0 auto; width: calc(100% - 20px); max-width: 1000px; background: var(--white); padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px var(--shadow); }
/* Typografi */
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: var(--primary-blue);
margin-bottom: 20px;
text-align: center;
}
h2 {
font-size: 24px;
color: var(--text-dark-gray);
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 20px;
color: var(--primary-blue);
margin-top: 20px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: var(--text-dark-gray);
line-height: 1.6;
margin-bottom: 15px;
}
/* Listformat med ikoner utan svarta punkter */
ul {
list-style-type: none;
padding-left: 0;
margin: 15px 0;
}
ul li {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
line-height: 1.5;
color: var(--text-dark-gray);
}
.ainnova-icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('<https://valingeveckan.wordpress.com/wp-content/uploads/2025/04/namnlos-design-4-1.png>');
background-size: contain;
background-repeat: no-repeat;
margin-right: 10px;
flex-shrink: 0;
}
/* Länkar - Subtil stil utan understrykning */
a {
color: var(--primary-blue);
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: var(--button-green-hover);
}
/* Konkurrentlänkar - extra subtil */
.competitor-link {
color: var(--text-light-gray);
font-weight: normal;
transition: color 0.3s;
}
.competitor-link:hover {
color: var(--primary-blue);
}
/* Bilder */
.image-container {
display: flex;
justify-content: space-between;
margin: 25px 0;
gap: 20px;
}
.image-container img {
width: 48%;
border-radius: 5px;
box-shadow: 0 2px 4px var(--shadow);
}
.full-width-image {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 5px;
margin: 25px 0;
box-shadow: 0 2px 4px var(--shadow);
}
/* Betoningsboxar */
.highlight-box {
background-color: var(--light-gray);
border-left: 4px solid var(--primary-blue);
padding: 15px;
margin: 20px 0;
border-radius: 0 5px 5px 0;
}
/* Konkurrentlista */
.competitors-section {
margin: 40px 0 10px;
padding: 15px;
background-color: var(--lighter-gray);
border-radius: 5px;
border-top: 1px solid var(--border-gray);
}
.competitors-section h3 {
font-size: 16px;
color: var(--text-medium-gray);
margin-bottom: 10px;
}
/* Tabellstilar - Exakt som i "våra erbjudanden på ett silverfat" */
.table-title { background: var(--light-gray); color: var(--text-dark-gray); padding: 10px; text-align: center; font-weight: bold; border-radius: 5px; margin-bottom: 5px; }
.table-container { padding: 0 15px; overflow-x: auto; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 20px 0; box-shadow: 0 2px 4px var(--shadow); }
th, td { border: 2px solid var(--border-gray); box-shadow: inset 0 0 3px var(--shadow); padding: 12px; text-align: left; vertical-align: top; }
th { background: var(--primary-blue); color: var(--white); font-weight: bold; text-transform: uppercase; }
tbody:nth-child(odd) { background: var(--white); }
tbody:nth-child(even) { background: var(--light-gray); }
/* Navigationscirklar - UPPDATERAD för att matcha bilden */
.cta-circles {
display: flex;
justify-content: center;
flex-wrap: nowrap; /* ÄNDRAD: Alla på en rad i desktop */
gap: 20px;
margin: 40px 0 20px;
}
.cta-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--button-green);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--text-dark-gray);
font-weight: bold;
text-align: center;
transition: background-color 0.3s, transform 0.3s;
animation: pulse 2s infinite;
font-size: 17px;
}
.cta-circle:nth-child(even) {
background-color: var(--primary-blue);
color: var(--white);
}
.cta-circle:hover {
background-color: var(--button-green-hover);
color: var(--white);
transform: scale(1.05);
animation: none;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Tillbaka till toppen-knapp - UPPDATERAD för att matcha bilden */
.back-to-top {
display: block;
width: 100%;
margin: 20px auto 0;
padding: 10px;
background-color: var(--primary-blue);
color: var(--white);
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.back-to-top:hover {
background-color: var(--button-green-hover);
color: var(--white);
text-decoration: none;
}
/* Responsivitet */
@media (max-width: 768px) {
.container {
padding: 15px;
width: 100%;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p, li { font-size: 15px; }
.image-container {
flex-direction: column;
}
.image-container img {
width: 100%;
}
/* Samma mobilanpassning som i prislistan för tabeller */
thead { display: none; }
table, tbody { display: block; }
tr {
display: grid;
grid-template-areas: "category" "service" "price" "desc";
margin-bottom: 15px;
border: 2px solid var(--border-gray);
border-radius: 5px;
background: var(--white);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
position: relative;
}
/* Visar kategorinamn i mobilvy */
tr::before {
content: attr(data-category);
display: block;
padding: 8px 12px;
background: var(--primary-blue);
color: var(--white);
font-weight: bold;
grid-area: category;
}
tbody:nth-child(odd) tr::before {
background: var(--primary-blue);
}
tbody:nth-child(even) tr::before {
background: var(--button-green-hover);
}
td { display: block; border: none; text-align: center; }
td:nth-child(1) {
grid-area: service;
font-weight: bold;
background: var(--button-green);
color: var(--text-dark-gray);
padding: 10px;
}
td:nth-child(2) {
grid-area: price;
border-bottom: 1px solid var(--border-gray);
padding: 10px;
}
td:nth-child(3) {
grid-area: desc;
background: var(--lighter-gray);
padding: 10px;
}
/* UPPDATERAD: Navigationscirklar i par på mobil */
.cta-circles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.cta-circle {
width: 90px;
height: 90px;
font-size: 15px;
}
.back-to-top { font-size: 14px; padding: 8px 20px; }
}
</style>
</head> <body> <div class="ainnova-wrapper" id="top"> <div class="container"> <!-- HUVUDRUBRIK OCH INLEDNING --> <h1>Webbappar</h1> <p><strong>Kostnadseffektiva, skalbara och tillgängliga applikationer som fungerar i alla webbläsare utan installation.</strong></p> <p>Moderna webbappar erbjuder samma funktionalitet som traditionella program men utan krånglig installation och med direkt tillgång från alla enheter. Vi utvecklar skräddarsydda webbappar som hjälper din verksamhet att effektivisera processer, automatisera arbetsflöden och nå nya kunder – allt tillgängligt via en vanlig webbläsare.</p>
<!-- BILDCONTAINER -->
<div class="image-container">
<img src="<https://images.unsplash.com/photo-1565106430482-8f6e74349ca1?q=80&w=1470&auto=format&fit=crop>" alt="Modern webbapp på olika enheter">
<img src="<https://images.unsplash.com/photo-1504639725590-34d0984388bd?q=80&w=1474&auto=format&fit=crop>" alt="Person som utvecklar webbapp">
</div>
<!-- FÖRSTA SEKTIONEN -->
<h2>Fördelar med webbappar</h2>
<p>Webbappar kombinerar det bästa från två världar – tillgängligheten hos webbsidor och funktionaliteten hos traditionella applikationer.</p>
<!-- LISTA MED IKONER -->
<ul>
<li>
<span class="ainnova-icon"></span>
<span><strong>Tillgängliga överallt:</strong> Fungerar i alla webbläsare på alla enheter utan installation eller uppdateringar</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Kostnadseffektiva:</strong> Utvecklas snabbare och till lägre kostnad än motsvarande mobilappar för flera plattformar</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Enkla att uppdatera:</strong> Nya funktioner lanseras direkt till alla användare utan att de behöver göra någon uppdatering</span>
</li>
</ul>
<!-- BETONINGSBOX -->
<div class="highlight-box">
<h3>Moderna tekniker för moderna behov</h3>
<p>Vi bygger våra webbappar med de senaste ramverken som React, Vue och Svelte kombinerat med kraftfulla backend-lösningar som Supabase. Detta ger snabba, responsiva och säkra applikationer som fungerar sömlöst på alla enheter.</p>
</div>
<!-- ANDRA SEKTIONEN - TABELL -->
<h2>Våra webappslösningar</h2>
<p>Vi erbjuder flera olika nivåer av webbappar anpassade efter dina behov och budget.</p>
<div class="table-title">Paket och priser för webbappar. Vårt verkliga värde ligger i att välja rätt verktyg åt dig och att du med hjälp av AI ska kunna bygga allt själv. Detta är av AI framtagna exempelsidor!!!🤺.</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Paket</th>
<th>Pris (ex moms)</th>
<th>Innehåll</th>
</tr>
</thead>
<tbody>
<tr data-category="Grundlösningar">
<td>Enkel webbapp</td>
<td>8 000 kr</td>
<td>Webbapp utan databasintegration för statisk information och grundläggande interaktivitet. Perfekt för informationsportaler, enkla kalkylatorer eller presentationsverktyg.</td>
</tr>
<tr data-category="Grundlösningar">
<td>Standardwebbapp</td>
<td>25 000 kr</td>
<td>Webbapp med Supabase-integration för enklare datalagring, användarhantering och dynamiskt innehåll. Ideal för interna verktyg, kundportaler eller administrativa system.</td>
</tr>
</tbody>
<tbody>
<tr data-category="Avancerade lösningar">
<td>Avancerad webbapp</td>
<td>Från 40 000 kr</td>
<td>Komplex webbapp med omfattande datahantering, anpassade funktioner, API-integrationer och avancerad säkerhet. Lämplig för verksamhetskritiska system och komplexa arbetsflöden.</td>
</tr>
</tbody>
<tbody>
<tr data-category="Tillägg">
<td>Löpande utveckling</td>
<td>800 kr/timme</td>
<td>Kontinuerlig vidareutveckling, nya funktioner och anpassningar av din webbapp efter lansering.</td>
</tr>
<tr data-category="Tillägg">
<td>Resekostnader</td>
<td>Tillkommer</td>
<td>För tjänster utanför Karlstad och Kristinehamn tillkommer resekostnader</td>
</tr>
</tbody>
</table>
</div>
<!-- TREDJE SEKTIONEN -->
<h2>Vår utvecklingsprocess</h2>
<p>Vi följer en strukturerad process för att säkerställa att din webbapp möter dina mål och levereras enligt plan.</p>
<!-- UNDERSEKTIONER -->
<h3>Behovsanalys och kravspecifikation</h3>
<p>Vi börjar med att grundligt analysera dina behov och mål. Tillsammans definierar vi webbappens funktioner, användarupplevelse och tekniska specifikationer i en tydlig kravspecifikation.</p>
<h3>Design och prototyputveckling</h3>
<p>Vi skapar wireframes och interaktiva prototyper som visualiserar webbappens funktionalitet och användarflöden. Detta ger dig möjlighet att se och testa applikationen innan utvecklingen påbörjas.</p>
<h3>Utveckling och testning</h3>
<p>När designen är godkänd påbörjar vi utvecklingen med löpande avstämningar. Vi testar kontinuerligt för att säkerställa att webbappen är bugfri, säker och fungerar på alla plattformar innan lansering.</p>
<!-- BILD I FULLBREDD -->
<img src="<https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=1470&auto=format&fit=crop>" alt="Utvecklingsteam som arbetar med webbappar" class="full-width-image">
<!-- FJÄRDE SEKTIONEN -->
<h2>Därför ska du välja AINNOVA</h2>
<p>Vi kombinerar teknisk expertis med affärsförståelse för att skapa webbappar som ger konkret nytta för din verksamhet.</p>
<!-- LISTA MED IKONER -->
<ul>
<li>
<span class="ainnova-icon"></span>
<span><strong>Lösningsfokus:</strong> Vi börjar med ditt problem eller behov, inte med tekniken, för att skapa webbappar som verkligen löser dina utmaningar</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Flexibel skalbarhet:</strong> Våra webbappar är byggda för att enkelt kunna växa med ditt företag och anpassas till framtida behov</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Användarvänlighet:</strong> Alla våra webbappar utvecklas med användaren i fokus för att säkerställa hög användaracceptans och produktivitet</span>
</li>
</ul>
<!-- KONKURRENTER -->
<div class="competitors-section">
<h3>Andra leverantörer inom webbutveckling:</h3>
<p><a href="<https://delicate-neighbor-37a.notion.site/Webbappar-1cd9c8142e3f80019ff2d1ce31cff714>" class="competitor-link" target="_blank" rel="noopener noreferrer">Se fler leverantörer</a></p>
</div>
<!-- NAVIGATIONSCIRKLAR OCH TILLBAKA TILL TOPPEN -->
<footer>
<nav class="cta-circles">
<a href="<https://ainnova.se/>" class="cta-circle" target="_blank" rel="noopener noreferrer">AINNOVA</a>
<a href="<https://erbjudanden.ainnova.se/>" class="cta-circle" target="_blank" rel="noopener noreferrer">Erbjudanden</a>
<a href="<https://ainnova.se/kontakt>" class="cta-circle" target="_blank" rel="noopener noreferrer">Kontakt</a>
<a href="<https://delicate-neighbor-37a.notion.site/Du-f-r-alltid-AINNOVAS-b-sta-tips-1649c8142e3f805cbf91d9c1fe7d320c>" class="cta-circle" target="_blank" rel="noopener noreferrer">Notion</a>
</nav>
<a href="#top" class="back-to-top">🤺 Opp till topps bestemor! 🤺</a>
</footer>
</div>
</div>
<script>
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('top').scrollIntoView({ behavior: 'smooth' });
});
</script>
</body> </html>