nfcycle-web/blog.html at main · NajimovOtabek/nfcycle-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NFCycle Blog | Eco-Wellness & Sustainability Insights</title>
  <meta name="description"
    content="Discover insights on sustainable living, hair health, and mindful wellness from the NFCycle team.">
  <meta name="keywords" content="sustainability blog, eco-friendly living, hair health, wellness tips, NFCycle blog">
  <meta name="author" content="NFCycle">
  <link rel="canonical" href="https://nfcycle.netlify.app/blog.html">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://nfcycle.netlify.app/blog.html">
  <meta property="og:title" content="NFCycle Blog | Eco-Wellness & Sustainability Insights">
  <meta property="og:description"
    content="Discover insights on sustainable living, hair health, and mindful wellness from the NFCycle team.">
  <meta property="og:image" content="https://nfcycle.netlify.app/assets/images/logo.png">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://nfcycle.netlify.app/blog.html">
  <meta property="twitter:title" content="NFCycle Blog | Eco-Wellness & Sustainability Insights">
  <meta property="twitter:description"
    content="Discover insights on sustainable living, hair health, and mindful wellness from the NFCycle team.">
  <meta property="twitter:image" content="https://nfcycle.netlify.app/assets/images/logo.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!-- Header -->
  <header class="scrolled">
    <div class="container">
      <nav>
        <a href="index.html" class="logo">
          <img src="assets/images/logo.png" alt="NFCycle Logo" style="height: 60px;">
        </a>
        <div class="nav-links" id="navLinks">
          <a href="index.html#problem">The Problem</a>
          <a href="index.html#solution">Our Solution</a>
          <a href="index.html#products">Products</a>
          <a href="index.html#process">Process</a>
          <a href="index.html#team">Team</a>
          <a href="blog.html" class="active">Blog</a>
          <a href="index.html#preorder" class="btn btn-sm">Pre-Order</a>
        </div>
        <div class="hamburger" id="hamburger">
          <i class="fas fa-bars"></i>
        </div>
      </nav>
    </div>
  </header>


  <!-- Blog Posts -->
  <section class="section-padding" style="background-color: var(--color-light-gray);">
    <div class="container">
      <div class="blog-grid">

        <!-- Post 1: Hydration & Hair Health -->
        <article class="blog-card" data-aos="fade-up">
          <div class="blog-card-image">
            <img src="assets/images/blog/hydration-science.png" alt="The Science of Hydration and Hair Health">
          </div>
          <div class="blog-card-content">
            <div class="blog-meta">
              <span class="blog-category">Science</span>
              <span class="blog-date">November 2025</span>
            </div>
            <h2>The Science of Hydration & Hair Health</h2>
            <p>Discover the biological connection between proper hydration and preventing premature greying. Learn how
              cellular water balance affects melanin production in your hair follicles.</p>
            <a href="pages/blog/hydration-hair.html" class="btn">Read Article →</a>
          </div>
        </article>

        <!-- Post 2: Ocean Plastic -->
        <article class="blog-card" data-aos="fade-up" data-aos-delay="100">
          <div class="blog-card-image">
            <img src="assets/images/blog/ocean-plastic.png" alt="Breaking the Cycle: The Truth About Ocean Plastic">
          </div>
          <div class="blog-card-content">
            <div class="blog-meta">
              <span class="blog-category">Sustainability</span>
              <span class="blog-date">November 2025</span>
            </div>
            <h2>Breaking the Cycle: The Truth About Ocean Plastic</h2>
            <p>An in-depth look at how single-use plastics are destroying our oceans, and how circular economy models
              like NFCycle are creating real solutions for a sustainable future.</p>
            <a href="pages/blog/ocean-plastic.html" class="btn">Read Article →</a>
          </div>
        </article>

        <!-- Post 3: Mindful Wellness -->
        <article class="blog-card" data-aos="fade-up" data-aos-delay="200">
          <div class="blog-card-image"
            style="background: linear-gradient(135deg, #A8B5A2 0%, #C6E4C7 100%); display: flex; align-items: center; justify-content: center; min-height: 300px;">
            <i class="fas fa-spa" style="font-size: 4rem; color: white; opacity: 0.6;"></i>
          </div>
          <div class="blog-card-content">
            <div class="blog-meta">
              <span class="blog-category">Wellness</span>
              <span class="blog-date">November 2025</span>
            </div>
            <h2>Mindful Sips: Integrating Wellness into Your Daily Routine</h2>
            <p>Explore the connection between stress reduction, mindful hydration, and overall well-being. Learn
              practical techniques to transform drinking water into a moment of self-care.</p>
            <a href="pages/blog/mindful-wellness.html" class="btn">Read Article →</a>
          </div>
        </article>

      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-brand">
          <h3>NFCycle</h3>
          <p>Eco-Friendly Today, Grey-Free Tomorrow.</p>
        </div>
        <div class="footer-links">
          <h4>Company</h4>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="how-it-works.html">How It Works</a></li>
            <li><a href="blog.html">Blog</a></li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 NFCycle. All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init({ duration: 800, once: true });

    // Sticky header
    window.addEventListener('scroll', () => {
      const header = document.querySelector('header');
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });

    // Mobile menu
    document.getElementById('hamburger').addEventListener('click', () => {
      document.getElementById('navLinks').classList.toggle('active');
    });
  </script>
</body>

</html>