Hvad denne skærm gør
Dette er platformens offentlige landingsside. Tænk på det som hoveddøren til dit produkt — det er det første, besøgende ser, før de logger ind eller opretter sig. Siden fremviser de vigtigste funktioner, designmuligheder, prisplaner og handlingsopfordringer for at hjælpe nye besøgende med at forstå, hvad platformen tilbyder, og opfordre dem til at komme i gang.
Sådan kommer du hertil
Åbn din browser.
Naviger til programmets rod-URL (f.eks.
https://yourdomain.com/).Du er nu på Hjemmesiden.
Bemærk: Denne side er offentligt tilgængelig. Du behøver ikke være logget ind for at se den.
Trin-for-trin-guide
Hjemmesiden er en enkelt scrollbar side, der består af flere sektioner. Der er ingen formularer at udfylde — siden er designet til at læse og udforske. Her er hvad du finder, når du scroller ned.
1. Scroll-fremskridtsindikator
En tynd fremskridtsbjælke vises helt øverst på skærmen.
Når du scroller ned ad siden, fyldes bjælken op for at vise, hvor langt du har læst.
Dette er rent visuelt — du behøver ikke interagere med det.
2. Hero-sektion
Dette er det store banner øverst på siden.
Det viser:
En overskrift, der introducerer platformen (“Start a New Project with Minimal”).
En kort beskrivelse af, hvad platformen er bygget på (MUI).
En stjernebedømmelse, der viser fællesskabets anmeldelser (4,96/5).
En Live Preview-knap, der fører dig til kontrolpanelet.
En Design Preview-knap, der åbner designfilerne i en ny fane.
Et Get Free Version-link til at downloade den gratis udgave.
Ikoner, der viser tilgængelige platforme (Figma, JavaScript, TypeScript, Next.js, Vite).
På desktop vises animerede skærmbillede-slides i højre side.
Når du scroller forbi heroen, fader den ud blødt.
Element | Handling |
Live Preview-knap | Åbner kontrolpanelet i samme fane. |
Design Preview-knap | Åbner designfilen i en ny browserfane. |
Get Free Version-link | Åbner downloadsiden for den gratis version i en ny fane. |
3. Minimal UI-funktioner (Hvad Minimal hjælper dig med)
Tre funktionskort vises side om side (stablet på mobil):
Branding — Forklarer ensartet design til nem branding.
UI & UX Design — Beskriver det atomare designsystem og tilpasning.
Development — Fremhæver nem tilpasning for at spare tid og penge.
Hvert kort har et ikon, en titel og en kort beskrivelse.
Disse kort er kun til information — ingen interaktion er nødvendig.
4. Kæmpe pakke af elementer
Denne sektion fremviser UI-komponentbiblioteket, der følger med platformen.
Du vil se levende, interaktive eksempler på:
Knapper (Add To Cart, Upload)
En søge-flydende handlingsknap
En indlæsningsspinner
Faner (Angular, React, Vue)
Skifteknapper (chat, mail, bell)
Chips, avatarer, avatargrupper
En stjernebedømmelse, du kan ændre
En skyder, du kan trække
En succesalarm
Kontakter, radioknapper, checkbokse (kun desktop)
Et eksempel på socialt mediekort, tekstfelt, valgmenu og tekstområde (kun desktop)
En View All Components-knap linker til den fulde komponentvisningsside.
Element | Handling |
Faner (Angular / React / Vue) | Klik på en fane for at skifte det aktive valg. |
Skifteknapper (chat / mail / bell) | Klik for at skifte mellem muligheder. Bell er deaktiveret. |
Stjernebedømmelse | Klik på en stjerne for at ændre bedømmelsesværdien. |
Skyder | Træk håndtaget for at ændre værdien. |
View All Components-knap | Åbner den fulde komponentside i en ny fane. |
5. For Designer-sektion
En salgsfremmende sektion rettet mod designere.
Viser overskriften “Professional Kit” og “For Designer”.
På desktop vises et baggrundsbillede i højre side.
En Figma Workspace-knap linker til Figma-designfilerne.
Element | Handling |
Figma Workspace-knap | Åbner Figma-arbejdsområdet i en ny browserfane. |
6. Mørk tilstand
Denne sektion demonstrerer platformens mørke tilstandsfunktion.
En overskrift lyder “Dark mode” med beskrivelsen “A dark theme that feels easier on the eyes.”
En skiftekontakt lader dig skifte mellem lys tilstand og mørk tilstand direkte på denne side.
Når du skifter kontakten, ændres hele sidens tema øjeblikkeligt.
Et forhåndsvisningsbillede viser, hvordan kontrolpanelet ser ud i mørk tilstand.
Element | Handling |
Mørk/Lys skiftekontakt | Skifter hele siden mellem mørkt og lyst tema. |
7. Farvepræindstillinger
Denne sektion lader dig forhåndsvise forskellige farvetemaer til platformen.
Seks farvede cirkler vises i en klynge.
Klik på en cirkel for at ændre sidens primærfarve.
Forhåndsvisningsbillederne nedenunder opdateres for at vise, hvordan kontrolpanelet ser ud med den valgte farve.
Element | Handling |
Farvecirkler (6 muligheder) | Klik på en cirkel for at anvende den farvepræindstilling på siden. |
8. Galleri med rene brugerflader
En fremvisning af ti lagdelte skærmbilleder, der demonstrerer platformens rene UI-design.
Overskriften lyder “Beautiful, modern and clean user interfaces.”
Billederne animeres ind, når du scroller dem i syne.
Denne sektion er kun til visning — ingen interaktion påkrævet.
9. Prisplaner
Viser tre prisniveauer side om side (eller som faner på mobil):
Standard — Basislicens med kernefunktioner.
Standard Plus — Mellemniveau med ekstra funktioner.
Extended — Fuldt udstyret licens med alle muligheder.
Hvert plankort viser:
Licensnavnet.
Inkluderede platformikoner.
En liste over fælles funktioner (afkrydsede elementer).
En liste over niveauspecifikke funktioner (afkrydset eller overstreget afhængigt af planen).
Et Læs mere-link.
På mobil, brug fanerne øverst til at skifte mellem planer.
Under planerne er der en “Har du stadig spørgsmål?”-sektion med en Kontakt os-knap.
Element | Handling |
Planfaner (kun mobil) | Tryk på en fane for at se det prisniveau. |
Læs mere-link | Åbner detaljeret planinformation i en ny fane. |
Kontakt os-knap | Åbner din mailklient med en forudfyldt supportmail. |
10. Leder du efter en landingssideskabelon?
En salgsfremmende sektion, der viser en forhåndsvisning af “Zone” landingssideskabelonen.
Inkluderer en Besøg Zone Landingsside-knap.
Element | Handling |
Besøg Zone Landingsside-knap | Åbner Zone-skabelonsiden i en ny browserfane. |
11. Kom godt i gang-reklame
Den afsluttende handlingsopfordringssektion nederst på siden.
Har et animeret raketbillede og beskeden “Get started with Minimal kit today.”
Denne sektion er kun til visning — ingen knapper eller links.
Hvad der sker bag kulisserne
Besøgende åbner rod-URL'en (/)
|
v
React renderer HomeView-komponenten
|
v
Scroll-fremskridtstracker tilknyttes siden
|
v
Hero-sektionen indlæses med animerede slides og parallax fade-effekt
|
v
Hver sektion indlæses med scroll-udløste animationer (Framer Motion)
|
v
Interaktive elementer (mørk tilstand-kontakt, farvepræindstillinger, skyder, bedømmelse, faner)
opdaterer lokal komponenttilstand — ingen API-kald foretages
|
v
"Live Preview"-knappen navigerer til kontrolpanelet (/dashboard)
|
v
Eksterne links (Figma, Zone, Kontakt) åbner i nye faner eller mailklient
Fejlfinding
“Siden er blank eller viser kun en hvid skærm”
Dette betyder normalt, at JavaScript-pakken ikke kunne indlæses. Tjek din internetforbindelse og prøv at genindlæse siden.
Hvis du er udvikler, åbn browserkonsollen (F12) og kig efter fejl. En almindelig årsag er en manglende miljøvariabel eller build-fejl.
“Animationerne er hakkende eller langsomme”
Scroll-animationer bruger Framer Motion og kan være krævende på ældre enheder.
Prøv at lukke andre browserfaner for at frigøre hukommelse.
På meget gammelt hardware kører animationer muligvis ikke glat — dette påvirker ikke funktionaliteten.
“Mørk tilstand-kontakten ændrer ikke noget”
Kontakten opdaterer temaindstillingen gemt i din browser. Hvis den virker fastlåst, prøv at rydde din browsers lokale lager for webstedet og genindlæse.
Sørg for, at JavaScript er aktiveret i din browser — kontakten er afhængig af det.
“Jeg klikkede på Live Preview, men der skete ingenting”
Live Preview-knappen navigerer til kontrolpanelruten (
/dashboard). Hvis du ikke er logget ind, og kontrolpanelet kræver godkendelse, kan du blive omdirigeret til en loginside.Tjek at din applikationsrouting er konfigureret korrekt, hvis du er udvikler.
“Farvepræindstillingscirklerne reagerer ikke på klik”
Hver cirkel er en klikbar knap, der opdaterer temafarven. Hvis klik ikke registreres, prøv at genindlæse siden.
På berøringsenheder skal du sørge for at trykke direkte på den farvede cirkel — de er små (24px).
“Billeder indlæses ikke eller viser ødelagte ikoner”
Siden henter billeder fra mappen
/assets/images/home/. Hvis billeder mangler, er aktivfilerne muligvis ikke blevet implementeret korrekt.Tjek din netværksfane i udviklerværktøjer (F12) for at se, om billedanmodninger returnerer 404-fejl.
Hvis du kører lokalt, sørg for at mappen
public/assetser intakt.
“Prisplanerne vises som faner, men jeg vil se dem side om side”
På skærme mindre end det mellemstore breakpoint (under 900px) vises prisplaner som faner for at spare plads. Dette er designet sådan.
For at se alle tre planer side om side, se siden på en desktop eller udvid dit browservindue.
“Kontakt os-knappen åbner ikke min mail”
Knappen bruger et
mailto:-link. Hvis ingen mailklient er konfigureret på din enhed, sker der ingenting.Du kan kopiere supportmailadressen (
support@minimals.cc) og indsætte den i din foretrukne mailtjeneste manuelt.
“Siden tager lang tid at indlæse”
Hjemmesiden inkluderer flere store billeder (hero-slides, forhåndsvisningsskærmbilleder, raketanimation). På langsomme forbindelser kan disse tage tid at indlæse.
Når de er indlæst, caches billeder af din browser og indlæses hurtigere ved efterfølgende besøg.
Hvis du er udvikler, overvej at aktivere billedoptimering eller lazy loading til produktionsbuilds.