Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feed test

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-03-19 16:15:19 +01:00
parent f1e3320ce0
commit 1af6ae3854
16 changed files with 946 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Profice WebSite/sites/automatisation.html
View File

@@ -93,6 +93,12 @@
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#interaction" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">

6
Profice WebSite/sites/datenschutz.html
View File

@@ -149,6 +149,12 @@
<a href="../index.html#fit" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#demo-section" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>

809
Profice WebSite/sites/feed.html Normal file
View File

@@ -0,0 +1,809 @@
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Cookiebot -->
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d6499c25-b3c2-41ac-8edf-60a4209f74c9" data-blockingmode="auto" type="text/javascript"></script>
<script>
window.addEventListener('CookiebotOnDialogDisplay', function() {
var dialog = document.getElementById('CybotCookiebotDialog');
if (dialog) {
dialog.style.setProperty('position', 'fixed', 'important');
dialog.style.setProperty('bottom', '0', 'important');
dialog.style.setProperty('top', 'auto', 'important');
dialog.style.setProperty('left', '0', 'important');
dialog.style.setProperty('right', '0', 'important');
dialog.style.setProperty('width', '100%', 'important');
dialog.style.setProperty('transform', 'none', 'important');
dialog.style.setProperty('margin', '0', 'important');
}
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PNJK5FN7');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Profice Feed - Aktuelle Einblicke in KI-Automatisierung, digitale Prozesse und intelligente Lösungen für Unternehmen.">
<meta name="keywords" content="Profice, KI, Automatisierung, Feed, Neuigkeiten, digitale Mitarbeiter, Prozessoptimierung">
<meta name="author" content="Profice">
<meta property="og:title" content="Feed - Profice">
<meta property="og:description" content="Aktuelle Einblicke und Impulse rund um KI-Automatisierung und digitale Prozesse.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
<meta name="robots" content="index, follow">
<title>Feed - Profice</title>
<!-- Favicon with multiple sizes for better visibility -->
<link rel="icon" type="image/png" sizes="32x32" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="icon" type="image/png" sizes="16x16" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="icon" type="image/png" sizes="192x192" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="icon" type="image/png" sizes="512x512" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="180x180" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="152x152" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="144x144" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="120x120" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="114x114" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="76x76" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="72x72" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="60x60" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="apple-touch-icon" sizes="57x57" href="../images/logo/Appicon 1024X1024-01.png">
<link rel="shortcut icon" href="../images/logo/Appicon 1024X1024-01.png">
<!-- Preload critical resources -->
<link rel="preload" href="../style/design.css?v=20260304" as="style">
<link rel="preload" href="../style/cursor.css?v=20260304" as="style">
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
<!-- Stylesheets -->
<link rel="stylesheet" href="../style/design.css?v=20260304">
<link rel="stylesheet" href="../style/cursor.css?v=20260304">
<style>
/* Feed Page Styles */
.feed-content {
max-width: 1100px;
margin: 0 auto;
padding: 130px 30px 60px;
}
.feed-header {
text-align: center;
margin-bottom: 60px;
}
.feed-label {
display: inline-block;
color: var(--accent-orange);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 16px;
}
.feed-title {
font-size: 42px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 16px;
line-height: 1.2;
}
.feed-subtitle {
font-size: 18px;
color: var(--primary-mid);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
/* Hero Visual — side by side */
.hero-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-bottom: 70px;
background: rgba(255,255,255,0.85);
border-radius: 24px;
padding: 48px;
border: 1px solid rgba(79,71,71,0.08);
}
.hero-visual-text h2 {
font-size: 26px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 14px;
line-height: 1.3;
}
.hero-visual-text p {
font-size: 15px;
color: var(--primary-mid);
line-height: 1.7;
}
.hero-visual-graphic { text-align: center; }
/* Section Block */
.feed-section {
margin-bottom: 24px;
}
.feed-section.spaced { margin-bottom: 60px; }
.feed-section-label {
display: inline-block;
color: var(--accent-orange);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}
.feed-section-title {
font-size: 28px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 8px;
line-height: 1.3;
}
.feed-section-text {
font-size: 16px;
color: var(--primary-mid);
line-height: 1.7;
max-width: 800px;
}
/* Feature Grid */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 70px;
}
.feature-card {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(79, 71, 71, 0.08);
border-radius: 18px;
padding: 32px 28px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 35px rgba(79, 71, 71, 0.1);
}
.feature-card .feature-icon-wrap {
width: 64px;
height: 64px;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.feature-icon-wrap.teal { background: rgba(90,158,150,0.12); }
.feature-icon-wrap.orange { background: rgba(212,134,74,0.12); }
.feature-icon-wrap.green { background: rgba(127,184,130,0.12); }
.feature-card h3 {
font-size: 17px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 8px;
}
.feature-card p {
font-size: 14px;
color: var(--primary-mid);
line-height: 1.6;
}
/* Segment Visual */
.segment-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
margin-bottom: 70px;
}
.segment-graphic { text-align: center; }
.segment-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.seg-card {
display: flex;
align-items: center;
gap: 18px;
background: rgba(255,255,255,0.9);
border-radius: 16px;
padding: 22px 24px;
border-left: 4px solid;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.seg-card:hover {
transform: translateX(6px);
box-shadow: 0 8px 24px rgba(79,71,71,0.08);
}
.seg-card.core { border-color: var(--accent-green); }
.seg-card.longtail { border-color: var(--accent-orange); }
.seg-card.feeder { border-color: var(--accent-teal); }
.seg-card .seg-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.seg-card.core .seg-icon { background: rgba(127,184,130,0.15); }
.seg-card.longtail .seg-icon { background: rgba(212,134,74,0.15); }
.seg-card.feeder .seg-icon { background: rgba(90,158,150,0.15); }
.seg-card .seg-text h3 {
font-size: 16px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 3px;
}
.seg-card .seg-text p {
font-size: 13px;
color: var(--primary-mid);
line-height: 1.5;
}
/* Pipeline Visual */
.pipeline-wrap {
margin-bottom: 70px;
}
.pipeline {
display: flex;
align-items: stretch;
gap: 0;
position: relative;
}
.pipeline-step {
flex: 1;
text-align: center;
padding: 36px 20px;
background: rgba(255,255,255,0.88);
border: 1px solid rgba(79,71,71,0.08);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pipeline-step:first-child { border-radius: 18px 0 0 18px; }
.pipeline-step:last-child { border-radius: 0 18px 18px 0; }
.pipeline-step:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(79,71,71,0.08);
z-index: 2;
}
.pipeline-step .pipe-icon {
width: 56px;
height: 56px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.pipeline-step:nth-child(1) .pipe-icon { background: rgba(212,134,74,0.12); }
.pipeline-step:nth-child(2) .pipe-icon { background: rgba(90,158,150,0.12); }
.pipeline-step:nth-child(3) .pipe-icon { background: rgba(127,184,130,0.12); }
.pipeline-step h3 {
font-size: 16px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 6px;
}
.pipeline-step p {
font-size: 13px;
color: var(--primary-mid);
line-height: 1.5;
}
.pipeline-arrow {
display: flex;
align-items: center;
z-index: 3;
margin: 0 -8px;
}
/* Highlight Section */
.feed-highlight {
background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--accent-green);
border-radius: 24px;
padding: 48px;
text-align: center;
margin-bottom: 60px;
}
.feed-highlight h2 {
font-size: 28px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 14px;
}
.feed-highlight p {
font-size: 16px;
color: var(--primary-mid);
max-width: 600px;
margin: 0 auto 28px;
line-height: 1.7;
}
.feed-highlight .highlight-btn {
display: inline-block;
padding: 14px 32px;
background: var(--accent-teal);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
}
.feed-highlight .highlight-btn:hover {
background: #4a8e86;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(90, 158, 150, 0.3);
}
/* ROI Section */
.roi-section {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: center;
margin-bottom: 70px;
background: rgba(255,255,255,0.9);
border-radius: 24px;
border: 1px solid rgba(79,71,71,0.08);
overflow: hidden;
}
.roi-box {
padding: 44px 36px;
text-align: center;
}
.roi-box .roi-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 10px;
}
.roi-box .roi-amount {
font-size: 40px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 6px;
}
.roi-box .roi-desc {
font-size: 14px;
color: var(--primary-mid);
}
.roi-box.cost .roi-label { color: var(--accent-orange); }
.roi-box.cost .roi-amount { color: var(--primary-dark); }
.roi-box.profit .roi-label { color: var(--accent-green); }
.roi-box.profit .roi-amount { color: var(--accent-green); }
.roi-arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
/* Responsive */
@media (max-width: 768px) {
.feed-content { padding: 110px 20px 40px; }
.feed-title { font-size: 30px; }
.hero-visual { grid-template-columns: 1fr; padding: 32px 24px; }
.hero-visual-graphic { order: -1; }
.feature-grid { grid-template-columns: 1fr; }
.segment-visual { grid-template-columns: 1fr; }
.segment-graphic { order: -1; }
.pipeline { flex-direction: column; }
.pipeline-step:first-child { border-radius: 18px 18px 0 0; }
.pipeline-step:last-child { border-radius: 0 0 18px 18px; }
.pipeline-arrow { transform: rotate(90deg); margin: -8px 0; justify-content: center; }
.roi-section { grid-template-columns: 1fr; }
.roi-arrow { transform: rotate(90deg); padding: 10px 0; }
.roi-box .roi-amount { font-size: 30px; }
.feed-highlight { padding: 32px 24px; }
}
</style>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNJK5FN7"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Hexagonal Background Canvas -->
<canvas id="hexCanvas"></canvas>
<!-- Top Banner -->
<header class="top-banner dark-theme">
<div class="top-banner-left">
<div class="banner-left">
<a href="../index.html" class="logo-link">
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
</a>
</div>
</div>
<div class="top-banner-center">
<nav class="main-nav">
<a href="../index.html#hero" class="nav-link">Start</a>
<a href="../index.html#problems" class="nav-link">Systeme</a>
<a href="../index.html#fit" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#demo-section" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link active" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">
<button id="cursorToggle">
<img src="../images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
</button>
</div>
</header>
<div class="overlay" id="overlay"></div>
<!-- Feed Content -->
<main class="feed-content">
<div class="feed-header">
<span class="feed-label">Profice Feed</span>
<h1 class="feed-title">Intelligentes Feed-Management für Google Shopping</h1>
<p class="feed-subtitle">Mehr Profit aus Ihren Google-Shopping-Kampagnen — durch automatisierte, datenbasierte Steuerung Ihres Produktfeeds.</p>
</div>
<!-- Hero Visual: Text + Graphic -->
<div class="hero-visual">
<div class="hero-visual-text">
<h2>Ihr Produktfeed — auf Profitabilität optimiert</h2>
<p>Feed erkennt automatisch, welche Produkte Gewinn bringen und welche Budget verbrennen. Ihr Werbebudget fließt gezielt in die Artikel, die sich wirklich lohnen.</p>
</div>
<div class="hero-visual-graphic">
<svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Bar chart showing budget optimization -->
<rect x="20" y="160" width="280" height="1" rx="0.5" fill="#8a8a7a" opacity="0.3"/>
<!-- Before bars -->
<text x="70" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Vorher</text>
<rect x="30" y="60" width="28" height="100" rx="6" fill="#d4864a" opacity="0.35"/>
<rect x="62" y="40" width="28" height="120" rx="6" fill="#d4864a" opacity="0.55"/>
<rect x="94" y="80" width="28" height="80" rx="6" fill="#d4864a" opacity="0.25"/>
<!-- Arrow -->
<path d="M145 100 L175 100" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="4 3"/>
<path d="M172 94 L180 100 L172 106" stroke="#8a8a7a" stroke-width="2" fill="none"/>
<!-- After bars — optimized -->
<text x="250" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Nachher</text>
<rect x="200" y="25" width="28" height="135" rx="6" fill="#7fb882" opacity="0.8"/>
<rect x="232" y="55" width="28" height="105" rx="6" fill="#d4864a" opacity="0.7"/>
<rect x="264" y="120" width="28" height="40" rx="6" fill="#4a7db8" opacity="0.3"/>
<!-- Labels -->
<text x="214" y="18" font-size="9" fill="#7fb882" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Core</text>
<text x="246" y="48" font-size="9" fill="#d4864a" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Feeder</text>
<text x="278" y="114" font-size="9" fill="#4a7db8" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Longtail</text>
</svg>
</div>
</div>
<!-- Features with SVG icons -->
<div class="feed-section">
<span class="feed-section-label">Vorteile</span>
<h2 class="feed-section-title">Was Feed für Sie leistet</h2>
</div>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon-wrap teal">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="14" width="4" height="6" rx="1"/><rect x="10" y="9" width="4" height="11" rx="1"/><rect x="16" y="4" width="4" height="16" rx="1"/></svg>
</div>
<h3>Profitabilität pro Produkt</h3>
<p>Jedes Produkt wird individuell bewertet — basierend auf echtem Gewinn.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrap orange">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
</div>
<h3>Intelligente Segmentierung</h3>
<p>Automatische Einteilung in profitable, neue und unprofitable Gruppen.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrap green">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 12 6 12 8 5 11 19 14 9 16 14 18 12 22 12"/></svg>
</div>
<h3>Live-Daten</h3>
<p>Performance-Daten werden automatisch abgerufen — immer aktuell.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrap teal">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><polyline points="7 13 10.5 16.5 17 9"/></svg>
</div>
<h3>Feed-Qualität gesichert</h3>
<p>Fehlerhafte Produktdaten werden automatisch korrigiert.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrap orange">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
</div>
<h3>Voll automatisiert</h3>
<p>Läuft eigenständig — mit Benachrichtigungen bei Bedarf.</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrap green">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
</div>
<h3>Direkt einsatzbereit</h3>
<p>Sofort kompatibel mit Google Merchant Center.</p>
</div>
</div>
<!-- Segment Visual: Donut Chart + Cards -->
<div class="feed-section">
<span class="feed-section-label">Strategie</span>
<h2 class="feed-section-title">Drei Segmente. Eine klare Logik.</h2>
</div>
<div class="segment-visual">
<div class="segment-graphic">
<svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Background track -->
<circle cx="130" cy="130" r="95" stroke="#EBEBDE" stroke-width="30" fill="none"/>
<!--
Woven donut: each arc split at its midpoint into two halves.
Render order (back → front) creates the over/under effect at each junction:
Teal over Green (at top / 0°)
Green over Orange (at ~144°)
Orange over Teal (at ~270°)
Circumference ≈ 597 units.
Green: 0–239 | Orange: 239–448 | Teal: 448–597
-->
<g>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 130 130"
to="360 130 130"
dur="20s"
repeatCount="indefinite"/>
<!-- BACK halves (rendered first = underneath at their far junction) -->
<!-- Green back half: units 0 → 119.5 -->
<circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
stroke-dasharray="119.5 477.5" stroke-dashoffset="0"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
<!-- Orange back half: units 239 → 343.5 -->
<circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
stroke-dasharray="104.5 492.5" stroke-dashoffset="-239"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
<!-- Teal back half: units 448 → 522.5 -->
<circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
stroke-dasharray="74.5 522.5" stroke-dashoffset="-448"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
<!-- FRONT halves (rendered last = on top at their leading junction) -->
<!-- Green front half: units 119.5 → 239 → Green over Orange at 144° -->
<circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
stroke-dasharray="119.5 477.5" stroke-dashoffset="-119.5"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
<!-- Orange front half: units 343.5 → 448 → Orange over Teal at 270° -->
<circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
stroke-dasharray="104.5 492.5" stroke-dashoffset="-343.5"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
<!-- Teal front half: units 522.5 → 597 → Teal over Green at 0°/top -->
<circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
stroke-dasharray="74.5 522.5" stroke-dashoffset="-522.5"
transform="rotate(-90 130 130)" stroke-linecap="round"/>
</g>
<!-- Center text (static, outside animated group) -->
<text x="130" y="122" font-size="28" fill="#5a5252" text-anchor="middle" font-weight="700" font-family="Montserrat,sans-serif">POAS</text>
<text x="130" y="146" font-size="12" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Segmentierung</text>
</svg>
</div>
<div class="segment-cards">
<div class="seg-card core">
<div class="seg-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
</div>
<div class="seg-text">
<h3>Core — Gewinnbringer</h3>
<p>Maximale Sichtbarkeit und höchstes Budget</p>
</div>
</div>
<div class="seg-card longtail">
<div class="seg-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
</div>
<div class="seg-text">
<h3>Feeder — Neue Chancen</h3>
<p>Gezieltes Testing nach Preisniveau</p>
</div>
</div>
<div class="seg-card feeder">
<div class="seg-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
</div>
<div class="seg-text">
<h3>Longtail — Budgetfresser</h3>
<p>Budget begrenzen oder umleiten</p>
</div>
</div>
</div>
</div>
<!-- Pipeline Visual -->
<div class="feed-section">
<span class="feed-section-label">Ablauf</span>
<h2 class="feed-section-title">So funktioniert es</h2>
</div>
<div class="pipeline-wrap">
<div class="pipeline">
<div class="pipeline-step">
<div class="pipe-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
</div>
<h3>Daten verbinden</h3>
<p>Shop-Feed, Einkaufspreise und Google-Ads-Daten</p>
</div>
<div class="pipeline-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</div>
<div class="pipeline-step">
<div class="pipe-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
</div>
<h3>Gewinn berechnen</h3>
<p>POAS-Wert pro Produkt ermitteln</p>
</div>
<div class="pipeline-arrow">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</div>
<div class="pipeline-step">
<div class="pipe-icon">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<h3>Feed optimieren</h3>
<p>Optimierter Feed für Google Merchant Center</p>
</div>
</div>
</div>
<!-- ROI Section -->
<div class="feed-section">
<span class="feed-section-label">Investition</span>
<h2 class="feed-section-title">Kleine Investition. Großer Effekt.</h2>
</div>
<div class="roi-section">
<div class="roi-box cost">
<div class="roi-label">Investition</div>
<div class="roi-amount">ab 1.000 &euro;</div>
<div class="roi-desc">Einrichtung &amp; Optimierung</div>
</div>
<div class="roi-arrow">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
<circle cx="24" cy="24" r="22" fill="rgba(127,184,130,0.1)" stroke="#7fb882" stroke-width="1.5"/>
<line x1="14" y1="24" x2="34" y2="24" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round"/>
<polyline points="28,18 34,24 28,30" fill="none" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="roi-box profit">
<div class="roi-label">Ergebnis</div>
<div class="roi-amount">+527 %</div>
<div class="roi-desc">Mehr Gewinn aus dem gleichen Werbebudget</div>
</div>
</div>
<!-- CTA -->
<div class="feed-highlight">
<h2>Feed-Optimierung für Ihren Shop?</h2>
<p>Wir richten das System für Ihren Google-Shopping-Account ein — vollautomatisiert und auf Ihre Produkte abgestimmt.</p>
<a href="offers.html" class="highlight-btn">Unverbindlich anfragen</a>
</div>
</main>
<!-- Footer Banner -->
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
<style>
.footer-banner a { color: white !important; }
</style>
<div class="footer-container">
<div class="footer-content">
<!-- Company Info Section -->
<div class="footer-section">
<div class="footer-description">
<p>Intelligente Prozesse für nachhaltiges Wachstum</p>
</div>
</div>
<!-- Quick Links Section -->
<div class="footer-section">
<h4 class="footer-title">Services</h4>
<nav class="footer-nav">
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
<a href="../index.html#interaction" class="footer-link">Demo</a>
</nav>
</div>
<!-- Legal Section -->
<div class="footer-section">
<h4 class="footer-title">Rechtliches</h4>
<nav class="footer-nav">
<a href="datenschutz.html" class="footer-link">Datenschutzerklärung</a>
<a href="impressum.html" class="footer-link">Impressum</a>
</nav>
</div>
<!-- Contact Section -->
<div class="footer-section">
<h4 class="footer-title">Kontakt</h4>
<div class="footer-contact">
<div class="contact-item">
<img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
<span><a href="mailto:info@profice.de">info@profice.de</a></span>
</div>
</div>
<div class="social-media">
<div class="social-icons">
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
<img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
</a>
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
<img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
</a>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="footer-bottom-content">
<p>&copy; 2026 Profice. Alle Rechte vorbehalten.</p>
<div class="footer-bottom-links">
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
<span class="separator">•</span>
<a href="impressum.html" class="footer-link">Impressum</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Optimized script loading -->
<script src="../scripts/hex-background.js?v=20260304" defer></script>
<script src="../scripts/script.js?v=20260304" defer></script>
<script src="../scripts/cursor.js?v=20260304" defer></script>
<script src="../scripts/scroll-header.min.js?v=20260304" defer></script>
</body>
</html>

6
Profice WebSite/sites/impressum.html
View File

@@ -148,6 +148,12 @@
<a href="../index.html#fit" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#demo-section" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>

6
Profice WebSite/sites/ki-integration.html
View File

@@ -93,6 +93,12 @@
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#interaction" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">

6
Profice WebSite/sites/leads.html
View File

@@ -94,6 +94,12 @@
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#interaction" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">

6
Profice WebSite/sites/offers.html
View File

@@ -93,6 +93,12 @@
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#interaction" class="nav-link active">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">

6
Profice WebSite/sites/website.html
View File

@@ -93,6 +93,12 @@
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
<a href="../index.html#process" class="nav-link">Prozess</a>
<a href="../index.html#interaction" class="nav-link">Kontakt</a>
<div class="nav-dropdown">
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
<div class="dropdown-menu">
<a href="feed.html" class="dropdown-item">Google Feed</a>
</div>
</div>
</nav>
</div>
<div class="top-banner-right">