<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 🔖 TITEL & SEO -->
    <title>StudyCodingDad – Studium, Apps & Familienleben vereint</title>
    <meta name="description"
        content="Effektive Strategien für Studium, App-Empfehlungen für Smart Devices und ehrliche Einblicke in das Familienleben als Student.">
    <meta name="keywords"
        content="Studium, Produktivität, Familie, iPad, Apps, Studentenleben, Smart Devices, StudyCodingDad">
    <meta name="robots" content="index, follow">
    <meta name="p:domain_verify" content="6f5069b0752622cb9d943c8b62df5d13"/>
    <link rel="canonical" href="https://studycodingdad.de/" />

    <!-- 🔗 Open Graph (Pinterest, Facebook etc.) -->
    <meta property="og:title" content="StudyCodingDad – Studium, Apps & Familienleben vereint" />
    <meta property="og:description"
        content="Entdecke effektive Lernstrategien, App-Reviews und ehrliche Geschichten aus dem Leben eines studierenden Familienvaters." />
    <meta property="og:image" content="https://studycodingdad.de/assets/images/studycodingdad-hero.webp" />
    <meta property="og:url" content="https://studycodingdad.de/" />
    <meta property="og:type" content="website" />

    <!-- 🐦 Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="StudyCodingDad – Studium, Apps & Familienleben vereint">
    <meta name="twitter:description"
        content="Erhalte praxisnahe Tipps für Studium, Produktivität und smarte Tools für Familienväter im Unialltag.">
    <meta name="twitter:image" content="https://studycodingdad.de/assets/images/studycodingdad-hero.webp">

    <!-- 🧠 JSON-LD: Strukturierte Daten (WebSite + Person) -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "StudyCodingDad",
        "url": "https://studycodingdad.de/",
        "description": "Effektive Strategien für Studium, App-Empfehlungen für Smart Devices und ehrliche Einblicke in das Familienleben als Student.",
        "publisher": {
            "@type": "Person",
            "name": "StudyCodingDad"
        }
    }
    </script>

    <!-- Icons / Manifest -->
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="StudyCodingDad" />
    <link rel="manifest" href="/site.webmanifest" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="css/firebaseloginform.css">
    <link rel="stylesheet" href="css/viewsections.css">
    <link rel="stylesheet" href="css/legal.css">
    <link rel="stylesheet" href="css/aboutcard.css">
    <link rel="stylesheet" href="css/navigation.css">
    <link rel="stylesheet" href="css/animations.css">
</head>

<body>
    <!-- Main Navigation -->
    <div id="navbar"></div>

    <!-- View Containers - Content loaded dynamically -->
    <!-- Home View -->
    <div id="home-view">
        <!-- Hero Section -->
        <section class="hero">
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>
            <div class="floating-element"></div>

            <div class="hero-content">
                <h1>StudyCodingDad</h1>
                <p>Studium meistern, Smart Devices-Produktivität maximieren und Familie rocken – alles unter einem Hut.
                    Hier findest du praktische Tipps, App-Reviews und ehrliche Einblicke in das Leben eines studierenden
                    Familienvaters.</p>
                <div class="tags">
                    <span class="tag tag-studium">📚 Studium</span>
                    <span class="tag tag-smartdevices">📱 Smart Devices</span>
                    <span class="tag tag-familie">👨‍👩‍👧‍👦 Familie</span>
                    <span class="tag tag-coding">💻 Coding</span>
                </div>
                <a href="#blog" class="cta-button">Zum Blog</a>
            </div>
        </section>

        <!-- About Section -->
        <section class="about">
            <div class="container">
                <h2 class="animate-on-scroll">Was dich hier erwartet</h2>
                <div class="about-content">
                    <div class="about-card animate-on-scroll">
                        <h3>📚 Studium & Produktivität</h3>
                        <p>Bewährte Strategien für effektives Lernen, Zeitmanagement und das Meistern von Prüfungen –
                            auch mit Familie im Hintergrund. Micro-Learning, realistische Pläne und ehrliche Einblicke
                            in das, was wirklich funktioniert.</p>
                    </div>
                    <div class="about-card animate-on-scroll">
                        <h3>📱 Smart Devices & Apps</h3>
                        <p>Die besten Apps und Workflows für deine Smart Devices. Von Notizen-Apps bis hin zu
                            Coding-Tools – alles getestet und für gut befunden. Praktische Reviews ohne Bullshit, dafür
                            mit echten Praxiserfahrungen.</p>
                    </div>
                    <div class="about-card animate-on-scroll">
                        <h3>👨‍👩‍👧‍👦 Familie & Balance</h3>
                        <p>Ehrliche Einblicke in den Spagat zwischen Studium, beruflicher Weiterentwicklung und Familie.
                            Real talk, keine Schönfärberei. Wie es wirklich ist, wenn die Kinder schreien und die
                            Deadline näher rückt.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Blog Section -->
        <section class="blog-section" id="blog">
            <div class="container">
                <h2 class="section-title">Neueste Artikel</h2>
                <div class="blog-grid" id="blog-grid">
                    <!-- Posts werden hier dynamisch eingefügt -->
                </div>
            </div>
        </section>
    </div>

    <!-- Legal Footer -->
    <div id="footer"></div>

    <!-- Cookie Banner -->
    <div id="cookie-banner-container"></div>

    <script type="application/json" id="post-data">
    {
        "title": "Startseite",
        "excerpt": "",
        "author": "StudyCodingDad",
        "date": "2025-07-05",
        "category": "",
        "url": "/",
        "tags": [],
        "readTime": "",
        "featuredImage": "" 
    }
    </script>

    <script>
        // Smooth scroll for CTA button
        document.addEventListener('click', (e) => {
            if (e.target.matches('.cta-button')) {
                e.preventDefault();
                document.querySelector('#blog').scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>

    <!-- JavaScript Module -->
    <script type="module" src="js/homepage.js"></script>
    <script type="module" src="/js/universal-post-loader.js"></script>
</body>

</html>