https://systrastudios.de/assets/EnHome-DXStJzcS.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/KundenLogoLeiste-NQGO4m0n.js","assets/react-DViRqEpY.js","assets/ScrollReveal-KosyZjk3.js","assets/framer-D3ymJ0_W.js","assets/LogoMarquee-B52YMxFm.js","assets/index-BIcjdN0f.js","assets/supabase-CyS4guSS.js","assets/icons-DkOjBtBf.js","assets/index-Y_UOokyS.css","assets/use-mobile-Dz_wMGng.js","assets/useLang-DPAkgKxc.js","assets/projectSlugs-B0ccOqx5.js","assets/TrustSection-BVdELV50.js","assets/embla-carousel-react.esm-CfQF1h12.js","assets/useGoogleReviews-EekPMSnI.js","assets/static-reviews-B0nwcSKa.js","assets/skeleton-x0wwLaZV.js","assets/social-proof-DMT9LN3w.js","assets/reviewAvatars-DlLQ_KAH.js","assets/reviewMeta-gA0gIuFU.js","assets/Squircle-BmkP0qSB.js","assets/ArrowDown01Icon-DJ3rel_9.js","assets/InstagramSection-CHcGApid.js","assets/SliderLinien-D4N7-ChA.js","assets/button-ByWWAJZp.js","assets/index-CHFZhq7L.js","assets/IndexFAQSection-D_Fch2ff.js","assets/Index-BBven-x3.js","assets/Layout-Cgfhk0qH.js","assets/popover-BiAwkTEw.js","assets/useSiteSettings-IKj0gWh-.js","assets/LogoZug-D8bHRfkI.js","assets/TechnikOrbit-DAVoSGEN.js","assets/Tempo-DqoyToUu.js","assets/StackedReveal-CBCzMrL9.js","assets/CharReveal-CkK3hyIL.js","assets/AnimatedIcon-BhUzSP_h.js","assets/KurvenBericht-C9JmIvhq.js","assets/AvatarStack-DAjQ15AE.js","assets/KiPunkt-CulhoK5c.js","assets/SEOHead-BYL9XMYu.js","assets/useProjects-l--qeZC8.js","assets/clientLogos-B2e6SS_U.js","assets/amelie-BEKoNVO1.js","assets/leonie-BIFrhhjk.js","assets/print-card-C7Vs6GI4.js","assets/DeferOnView-Bxqflm0L.js","assets/HeroKicker-Dm3djtBO.js","assets/IndexContactSection-8D94_7ZV.js","assets/input-Cu9koJkN.js","assets/textarea-DBtuwVi5.js","assets/collapsible-Do21_aP2.js","assets/use-toast-De0Ugcpa.js","assets/funktionsFehler-k_Y0c63d.js","assets/grafikFarben-Bw-77N5_.js","assets/types-Q0PWjPRK.js","assets/IndexReferenzenGrid-CitnvEfS.js","assets/ReferenzCard-CIam6Wdg.js","assets/projectTranslations-DzskNwrT.js","assets/DesktopHero-C-xo9tV2.js"])))=>i.map(i=>d[i]);
2import{_ as c,L as j,s as w}from"./index-BIcjdN0f.js";import{r as t,c as v,j as e,L as h}from"./react-DViRqEpY.js";import{R as o,S as N,W as k,h as u,g as _}from"./Index-BBven-x3.js";import{C as E}from"./CharReveal-CkK3hyIL.js";import{A as S}from"./AnimatedIcon-BhUzSP_h.js";import{E as I}from"./EnLayout-CwwYsx6s.js";import{S as C}from"./SEOHead-BYL9XMYu.js";import{B as b}from"./button-ByWWAJZp.js";import{S as y}from"./Squircle-BmkP0qSB.js";import{D as L,a as P,S as A}from"./Layout-Cgfhk0qH.js";import{L as D}from"./TechnikOrbit-DAVoSGEN.js";import{T as R}from"./Tempo-DqoyToUu.js";import{a as z}from"./useProjects-l--qeZC8.js";import{u as O}from"./use-mobile-Dz_wMGng.js";import{D as F}from"./DeferOnView-Bxqflm0L.js";import{C as W}from"./social-proof-DMT9LN3w.js";import{p as G}from"./projectSlugs-B0ccOqx5.js";import{c as M}from"./clientLogos-B2e6SS_U.js";import{a as T}from"./amelie-BEKoNVO1.js";import{l as H}from"./leonie-BIFrhhjk.js";import{H as V}from"./HeroKicker-Dm3djtBO.js";import{aG as q,F as B,A as p,a0 as Y,f as K,M as Q,P as U,I as J}from"./icons-DkOjBtBf.js";import"./supabase-CyS4guSS.js";import"./StackedReveal-CBCzMrL9.js";import"./framer-D3ymJ0_W.js";import"./useLang-DPAkgKxc.js";import"./KurvenBericht-C9JmIvhq.js";import"./AvatarStack-DAjQ15AE.js";import"./reviewAvatars-DlLQ_KAH.js";import"./KiPunkt-CulhoK5c.js";import"./print-card-C7Vs6GI4.js";import"./LogoZug-D8bHRfkI.js";import"./CookieBanner-DVixHjd4.js";import"./switch-D6Rzne74.js";import"./index-CHFZhq7L.js";import"./Footer-C2FhzTN3.js";import"./Smartphone-D1fqoaah.js";import"./useBlogPosts-BtKIVU87.js";import"./usercentrics-academy-CAEI07sV.js";import"./lovable-Dv60_qyB.js";import"./popover-BiAwkTEw.js";import"./useSiteSettings-IKj0gWh-.js";const Z=t.lazy(()=>c(()=>import("./KundenLogoLeiste-NQGO4m0n.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11]))),$=t.lazy(()=>c(()=>import("./TrustSection-BVdELV50.js"),__vite__mapDeps([12,1,13,14,5,6,7,8,15,16,2,3,17,18,11,19,10,20,21]))),X=t.lazy(()=>c(()=>import("./InstagramSection-CHcGApid.js"),__vite__mapDeps([22,1,23,5,6,7,8,20,13,2,3,24,25,10]))),ee=t.lazy(()=>c(()=>import("./IndexFAQSection-D_Fch2ff.js"),__vite__mapDeps([26,1,2,3,27,5,6,7,8,28,24,25,29,30,31,32,33,34,35,36,9,10,20,37,38,18,11,17,39,40,41,42,43,44,45,46,47]))),se=t.lazy(()=>c(()=>import("./IndexContactSection-8D94_7ZV.js"),__vite__mapDeps([48,1,24,25,5,6,7,8,20,49,50,51,52,9,10,53,54,11,3,43,44,55]))),te=t.lazy(()=>c(()=>import("./IndexReferenzenGrid-CitnvEfS.js"),__vite__mapDeps([56,1,57,20,10,58,11,3,7]))),re=t.lazy(()=>c(()=>import("./DesktopHero-C-xo9tV2.js"),__vite__mapDeps([59,1,20,24,25,5,6,7,8,2,3,38,18,11,17,10,27,28,29,30,31,32,33,34,35,36,9,37,39,40,41,42,43,44,45,46,47]))),ie="937647f6-dfa1-4568-aa7e-b676e9010cfb",g="2d3d5a3c-0c4c-4ca1-a2c5-f7994c0e5d78",ae=({children:r})=>e.jsx(j,{children:e.jsx(t.Suspense,{fallback:null,children:r})}),x=({children:r,minHeight:d=300})=>e.jsx(F,{minHeight:d,children:e.jsx(j,{children:e.jsx(t.Suspense,{fallback:null,children:r})})}),ne=[{id:"webdesign",icon:Q,title:"Web Design",tagline:"Websites that turn visitors into inquiries. Structure, copy and the technical side come from us.",link:"/en/web-design/",image:"/projects/heidmeier/detail-leistungen.webp",duration:"from 3 days"},{id:"branding",icon:U,title:"Brand Design",tagline:"A visual identity that works everywhere.",link:"/en/contact/"},{id:"print",icon:L,title:"Print & Marketing",tagline:"Printed materials that leave a lasting impression.",link:"/en/contact/"},{id:"social",icon:J,title:"Social Media",tagline:"Content that looks like you. Without the daily workload.",link:"/en/contact/",image:"/projects/singer/erfahrungen.webp"}],f=[{icon:D,title:"One consistent look",description:"Your website, brand, content and print all fit together."},{icon:P,title:"A process, not chaos",description:"You always know what comes next."},{icon:R,title:"Quick turnaround",description:"We work to clear deadlines with proven templates."},{icon:A,title:"Direct contact",description:"No tickets, no runaround."}];function oe(){const r=Math.floor(u.length/2),d=u.map((a,n)=>n);return e.jsx("section",{className:"relative pt-6 pb-3 overflow-visible bg-background",children:e.jsxs(y,{radius:28,exponent:2.7,className:"mx-3 bg-muted dark:bg-[hsl(220,5%,14%)] pt-10 pb-0 overflow-hidden relative",children:[e.jsxs("div",{className:"max-w-[1440px] mx-auto px-5 text-center relative z-10",children:[e.jsxs(V,{className:"mb-4 text-[10px]",children:[e.jsxs("svg",{className:"w-3.5 h-3.5",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:[e.jsx("path",{d:"M15.5 11C15.5 12.933 13.933 14.5 12 14.5C10.067 14.5 8.5 12.933 8.5 11C8.5 9.067 10.067 7.5 12 7.5C13.933 7.5 15.5 9.067 15.5 11Z"}),e.jsx("path",{d:"M12 2C16.8706 2 21 6.03298 21 10.9258C21 15.8965 16.8033 19.3847 12.927 21.7567C12.6445 21.9162 12.325 22 12 22C11.

2675 22 11.3555 21.9162 11.073 21.7567C7.2039 19.3616 3 15.9137 3 10.9258C3 6.03298 7.12944 2 12 2Z"})]}),"Design studio from Germany"]}),e.jsx("h1",{className:"text-[34px] leading-[1.14] tracking-[-0.02em] text-foreground mb-3 text-balance",children:"Great work deserves a presence that does it justice."}),e.jsx("p",{className:"text-muted-foreground text-[15px] mb-6 max-w-[300px] mx-auto leading-relaxed",children:"We shape your website, brand and content into one presence that gives direction, builds trust and makes it easier for people to choose you."}),e.jsxs("div",{className:"flex flex-col gap-3 justify-center items-center",children:[e.jsx("div",{className:"btn-glow-wrap",children:e.jsx(b,{size:"lg",variant:"hero-glow",asChild:!0,children:e.jsxs("a",{href:"#kontakt",children:["Get a quote",e.jsx(p,{className:"knopf-pfeil","aria-hidden":"true"})]})})}),e.jsxs(h,{to:"/en/projects/",className:"pfeil-link inline-flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors text-sm",children:["Explore projects",e.jsx(p,{className:"w-4 h-4"})]})]}),e.jsx("div",{className:"flex justify-center mt-6",children:e.jsxs("a",{href:"#bewertungen","aria-label":"Read our reviews",className:"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-background/80 px-3 py-1.5 text-[10px] text-muted-foreground transition-opacity hover:opacity-80",children:[e.jsxs("span",{className:"font-medium text-foreground whitespace-nowrap",children:[e.jsx("span",{className:"text-[#FFC53D]",children:"★"})," 5.0 · ",W," reviews"]}),e.jsx("span",{className:"w-px h-3.5 bg-border/50"}),e.jsx("span",{children:"Google & ProvenExpert"})]})})]}),e.jsx("div",{className:"relative mt-6 h-[240px] overflow-hidden",children:e.jsx("div",{className:"absolute inset-0 flex items-end justify-center",children:d.map(a=>{const n=u[a],l=_(a,r,!0,1/1.5),s=a===r;return e.jsx("div",{className:"absolute rounded-md overflow-hidden",style:{transform:l.transform,zIndex:l.zIndex,width:l.width,height:l.height,boxShadow:"0 4px 24px -6px hsl(var(--foreground) / 0.12)"},children:e.jsx(h,{to:G(n.projectId,"en"),"aria-label":n.alt,className:"block w-full h-full",children:e.jsx("img",{src:n.image.replace(/\.webp$/,"-sm.webp"),alt:n.alt,width:600,height:816,loading:s?"eager":"lazy",decoding:"async",fetchpriority:s?"high":"low",draggable:!1,className:"w-full h-full object-cover object-top block pointer-events-none"})})},a)})})})]})})}function le(){return O()?e.jsx(oe,{}):e.jsx(t.Suspense,{fallback:e.jsx("div",{className:"h-[600px]"}),children:e.jsx(re,{heroCardsData:u})})}const Ze=()=>{const{data:r,isLoading:d}=z(),{data:a,isLoading:n}=v({queryKey:["projects","homepage-replacement",g],queryFn:async()=>{const{data:s,error:i}=await w.from("projects").select("id, title, image_url, description, is_featured, display_order, is_concept_study").eq("id",g).maybeSingle();if(i)throw i;return s}}),l=(()=>{const s=(r??[]).filter(m=>m.id!==ie);return a?[...s.filter(m=>m.id!==g),a]:s})();return e.jsxs(I,{children:[e.jsx(C,{title:"Design studio from Germany: web design, branding & AI web apps | Systra Studios",description:"Systra Studios is a founder-led design studio from Germany: web design, branding, social media and AI web apps. Personal service, fair fixed prices, 5.0★ on Google.",canonical:"https://systrastudios.de/en/",locale:"en_US",keywords:"design studio Germany, web design agency, branding studio, AI web apps, web development for international businesses",alternates:[{hreflang:"en",href:"https://systrastudios.de/en/"},{hreflang:"de",href:"https://systrastudios.de/"},{hreflang:"x-default",href:"https://systrastudios.de/"}]}),e.jsx(le,{}),e.jsx(x,{minHeight:180,children:e.jsx(Z,{clientLogos:M})}),e.jsx("section",{className:"pt-8 pb-16 md:pt-16 md:pb-28",children:e.jsxs("div",{className:"max-w-3xl mx-auto px-5 md:px-8 text-center",children:[e.jsx(o,{children:e.jsxs("div",{className:"mb-6 flex items-center justify-center -space-x-3 md:mb-8",children:[e.jsx("div",{className:"relative z-10 h-14 w-14 overflow-hidden rounded-full md:h-16 md:w-16",children:e.jsx("img",{src:T,alt:"Amelie Roesmann, founder of Systra Studios",width:80,height:80,loading:"lazy",decoding:"async",className:"h-full w-full object-cover object-center"})}),e.jsx("div",{className:"h-14 w-14 overflow-hidden rounded-full md:h-16 md:w-16",children:e.jsx("img",{src:H,alt:"Leonie Roesmann, founder of Systra Studios",width:80,height:80,loading:"lazy",decoding:"async",className:"h-full w-full object-cover object-center"})})]})}),e.jsx(E,{className:"text-[22px] md:text-[1.7rem] lg:text-[1.95rem] leading-[1.45] md:leading-[1.42] font-normal text-gray-true",segments:[{text:"“Suddenly your brand just feels right, Google gets it, and your inbox notices. We line up your content and design so trust builds and the inquiries follow.”"}]}),e.jsx(o,{delay:.15,children:e.jsx("p",{className:"font-plex-mono uppercase text-xs tracking-[0.2em] text-foreground

2/55 mt-6 md:mt-7",children:"Amelie & Leonie Roesmann"})})]})}),e.jsx("section",{id:"leistungen",className:"py-16 md:py-28 section-gray cv-auto scroll-mt-24",children:e.jsxs("div",{className:"max-w-[1200px] mx-auto px-5 md:px-8",children:[e.jsxs(o,{className:"sr-initial mb-10 md:mb-16 text-center",children:[e.jsxs("div",{className:"kicker-on-gray mb-3 md:mb-4 justify-center",children:[e.jsx(q,{className:"w-3 h-3"}),"Services"]}),e.jsx("h2",{className:"text-h2 tracking-[-0.02em] text-foreground mb-3 md:mb-4",children:"Everything your presence needs"}),e.jsx("p",{className:"text-body-muted max-w-lg mx-auto",children:"Start with whatever you need most. We'll make sure it all fits together in the end."})]}),e.jsx(N,{items:ne})]})}),e.jsx("section",{className:"py-16 md:py-28 section-white cv-auto",children:e.jsxs("div",{className:"max-w-[1400px] 2xl:max-w-[1600px] mx-auto px-5 md:px-8",children:[e.jsxs(o,{className:"sr-initial mb-10 md:mb-16 text-center",children:[e.jsxs("div",{className:"kicker-on-white mb-3 md:mb-4 justify-center",children:[e.jsx(B,{className:"w-3 h-3"}),"Projects"]}),e.jsx("h2",{className:"text-h2 tracking-[-0.02em] text-foreground mb-3 md:mb-4",children:"Results from recent projects"}),e.jsx("p",{className:"text-body-muted max-w-lg mx-auto",children:"Websites, brands and marketing for businesses that want to look professional online and make it easier for clients to reach out."})]}),d||n?e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:[...Array(6)].map((s,i)=>e.jsx("div",{className:"h-80 bg-muted animate-pulse rundung-apple rounded-2xl"},i))}):l.length>0?e.jsx(ae,{children:e.jsx(te,{projects:l})}):e.jsx("p",{className:"text-center text-body-muted py-12",children:"Loading projects…"}),e.jsx("div",{className:"text-center mt-8 md:mt-10",children:e.jsxs(h,{to:"/en/projects/",className:"inline-flex items-center gap-2 text-sm font-medium text-foreground hover:text-foreground transition-colors",children:["View all projects",e.jsx(p,{className:"w-4 h-4"})]})})]})}),e.jsx("section",{className:"py-16 md:py-28 section-gray cv-auto",children:e.jsxs("div",{className:"max-w-[1120px] mx-auto px-5 md:px-8",children:[e.jsxs(o,{className:"sr-initial max-w-2xl mb-10 md:mb-14 text-center mx-auto",children:[e.jsxs("div",{className:"kicker-on-gray mb-3 md:mb-4 mx-auto",children:[e.jsx(Y,{className:"w-3 h-3"}),"Why us"]}),e.jsx("h2",{className:"text-h2 tracking-[-0.02em] text-foreground mb-3",children:"Why clients enjoy working with us"}),e.jsx("p",{className:"text-body-muted",children:"A clear process, fast feedback and results that fit together, without the endless back-and-forth."})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-5 md:gap-6",children:f.map((s,i)=>{const m=s.icon;return e.jsx(o,{delay:i*.06,className:"sr-initial h-full",children:e.jsxs(y,{radius:24,exponent:2.7,kontur:"hsl(var(--border) / 0.2)",className:"group flex h-full flex-row items-center gap-5 md:gap-6 bg-background px-6 md:px-8 py-6 md:py-7",children:[e.jsx("div",{className:"shrink-0 inline-flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full bg-[hsl(215_25%_96%)] dark:bg-[hsl(220_4%_19%)]",children:e.jsx(S,{Icon:m,sequenceIndex:i,sequenceCount:f.length,className:"inline-flex items-center justify-center text-foreground"})}),e.jsxs("div",{className:"min-w-0",children:[e.jsx("h3",{className:"text-[15px] md:text-[17px] font-medium leading-snug text-foreground mb-1.5",children:s.title}),e.jsx("p",{className:"text-[13px] md:text-sm text-muted-foreground leading-relaxed",children:s.description})]})]})},i)})})]})}),e.jsx("div",{id:"bewertungen",className:"scroll-mt-24",children:e.jsx(x,{minHeight:500,children:e.jsx($,{})})}),e.jsx(x,{minHeight:500,children:e.jsx(ee,{})}),e.jsx("section",{className:"py-16 md:py-28 section-white cv-auto",children:e.jsx("div",{className:"max-w-[1120px] mx-auto px-5 md:px-8",children:e.jsxs("div",{className:"grid lg:grid-cols-12 gap-10 lg:gap-14 items-center",children:[e.jsx("div",{className:"lg:col-span-7",children:e.jsxs(o,{children:[e.jsxs("div",{className:"kicker-on-white mb-3 md:mb-4",children:[e.jsx(K,{className:"w-3 h-3"}),"Free"]}),e.jsx("h2",{className:"text-h2 tracking-[-0.02em] text-foreground mb-3 md:mb-4",children:"Is your website pulling its weight?"}),e.jsx("p",{className:"text-body-muted mb-6 md:mb-8 max-w-lg",children:"Our free website check looks at your site's performance, SEO, accessibility and legal pages, then gives you a report with clear, actionable tips. Takes about two minutes."}),e.jsx("ul",{className:"grid grid-cols-2 gap-x-5 gap-y-2.5 mb-6 md:mb-8 max-w-md",children:["Load time & performance","SEO basics","Accessibility","Legal pages"].map(s=>e.jsxs("li",{className:"flex items-center gap-2.5 text-sm text-foreground",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0","aria-hidden":"true"}),e.jsx("span",{children:s})]},s))}),e.jsxs("div",{className:"flex flex-col sm:flex-row gap-3 sm:gap-5 items-start sm:items-center",children:[e.jsx(b,{size:"lg",asChild:!0,children:e.jsxs(h,{to:"/en/contact/",children:["Get your free check",e.jsx(p,{className:"knopf-pfeil","aria-hidden":"true"})]})}),e.jsxs(h,{to:"/website-check/",hrefLang:"de",className:"pfeil-link inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground",children:["Use the tool yourself (in German)",e.jsx(p,{className:"w-4 h-4"})]})]})]})}),e.jsx("div",{className:"lg:col-span-5 mt-2 lg:mt-0",children:e.jsx(o,{children:e.jsx(k,{})})})]})})}),e.jsx(x,{minHeight:500,children:e.jsx(X,{})}),e.jsx("div",{id:"kontakt",className:"scroll-mt-24",children:e.jsx(x,{minHeight:500,children:e.jsx(se,{})})})]})};export{Ze as default};