homepage updates

docs/Build_Guide/base.md

@@ -13,12 +13,11 @@ We'll start with assembling the base structure and making the required modificat
 
 <StepWithCarousel
   images={[
-    { src: '/img/step1/1_box.webp', caption: 'Unboxing' },
-	{ src: '/img/step1/2_toptray.webp', caption: 'Top tray walls laid out' },
-	{ src: '/img/step1/2_mark.webp', caption: 'Mark the required holes for the new combination' },
-	{ src: '/img/step1/3_plastic_piece.webp', caption: 'Use provided plastic pieces to fit the additional holes' },
+	{ src: '/img/step1/2_toptray.webp', caption: 'Adjusted layout of top tray walls on the floor' },
+	{ src: '/img/step1/2_mark.webp', caption: 'Mark the holes for the new wall combination and child height' },
+	{ src: '/img/step1/3_plastic_piece.webp', caption: 'Use provided plastic pieces to fix the top tray in the new holes' },
 	{ src: '/img/step1/4_top_done.webp', caption: 'When done, top tray looks like this' },
-	{ src: '/img/step1/6_trays.webp', caption: 'Rest of the trays adjusted would look like this' },
+	{ src: '/img/step1/6_trays.webp', caption: 'All three trays assembled' },
   ]}
 >
 
@@ -29,7 +28,7 @@ We'll start with assembling the base structure and making the required modificat
 	* **1.4 Mark location of additional holes to drill**: The new combination of the top tray walls requires at least 4 additional holes, if you make use of the existing holes. If not, you need to drill all 8 holes yourself. Mark the locations for the holes. If you're using existing holes, measure the distances of the new holes to the existing ones using a side piece of the tray.
 	* **1.5 Drill the additional holes**: Only drill on the inside of metal frame (no need to drill all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly) to be able to use the provided plastic pieces.
 	* **1.6 Install the top tray**: Only install the sides, and not the central surface since we’ll insert the washbasin there. For existing holes, use the scres Ikea provided.
-	* **1.7 Install the middle and bottom trays**: Given the customisation on the top tray, we used the pieces originally for the top tray on the bottom tray.
+	* **1.7 Install the middle and bottom trays**: Given the customisation on the top tray, we used the remaining pieces on the bottom tray.
 
 	⠀**Result**: The trolley is customized and ready for washbasin installation.
   </p>
@@ -70,11 +69,28 @@ Now we'll convert the plastic tray into a washbasin.
 <StepWithCarousel
   title="Step 3: Assemble the Electronics"
   images={[
-    { src: '/img/step3a.jpg', caption: 'Installing buttons' },
-    { src: '/img/step3b.jpg', caption: 'Final test' },
+	{ src: '/img/step3/step1.jpg', caption: 'Mark drill point on the horizontal center of the top trays' },
+	{ src: '/img/step3/step2.jpg', caption: 'Drill front hole' },
+	{ src: '/img/step3/step3.jpg', caption: 'Measure the height of the front hole and mark a hole matching it at the horizantal center of the back.' },
+	{ src: '/img/step3/step4.jpg', caption: 'After drilling the back hole, screw the washbasin through both holes' },
+	{ src: '/img/step3/step5.jpg', caption: 'When done, the washbasin is installed and tiltable' },
   ]}
 >
   <p>
-    Fit the electronic components like switches, scroll wheel, and PCB into the shell. Secure everything with screws or clips, then test the mouse.
+
+	In the middle of the tray, we'll make a pivoting hole which will hold the washbasin. With that, the tray can be rotated to each side to enable the 2 mode design:
+	* Tilted to **Left**: Clean water circulation for play (water recycles)
+	* Tilted to **Right**: Dirty water disposal or for washing with soap (drains to waste bucket)
+
+Here are the actions in this step: 
+	* **3.1 Mark drill points**: Locate the horizontal center of the top tray's front and back edges.
+	* **3.2 Drill front hole**: Drill through the front section at the marked center point as high as possible. This would maximize tilt range.
+	* **3.3 Measure and match**: Measure the height of the front hole from the bottom of the metal piece.
+	* **3.4 Drill back hole**: Using the same height measurement from the bottom of the metal piece at the back, drill the back hole to ensure the washbasin remains level when connected to the holes.
+	* **3.5 Install**: Screw the washbasin to the top tray through both holes to enable left-right rotation.
+
+	**Key point**: Higher hole placement = Greater tilt range for the wash person.
+
+	**Result**: Sink structure and washbasin are ready. Now it's time to install the pump, filter, switchbox and the faucet.
   </p>
 </StepWithCarousel>

docs/Build_Guide/bom.md

@@ -1,5 +1,5 @@
 ---
-title: List of materials (BOM)
+title: Bill of materials (BOM)
 description: Add description
 sidebar_position: 1
 ---
@@ -17,6 +17,7 @@ sidebar_position: 1
 
 - [DC pump (5V)](https://www.amazon.es/dp/B0B24G8WP7)
 - 1m of hose in adequate size for the pump you purchase, can be found in local hardware or aquiarium stores
+- Cloth mesh to filter out solid particles - We used a surgical cap for this: Cheap and does the job to perfection.
 
 **For the Switch Box**
 

docs/Build_Guide/del.md

@@ -1,59 +0,0 @@
----
-title: Delete later
-description: ...
-sidebar_position: 2
----
-
-Here's a step by step guide to build the base structure of the sink yourself.
-
-## Step 1 - Assemble and Customise the Base
-
-**1** **Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There will be some changes you need to make in order to customise the piece into a sink.
-
-**2** **Modify top tray (Turn it into a washbasin)**:
-	* Position top tray at your child's height. See if you can use some of the existing holes that are in place for the top tray. We were able to make use of the existing holes as my son was sufficiently high. 
-	* Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping the front piece lower will allow easier access to the faucet.
-	* This new combination of the top tray requires at least 4 additional holes. If you’re doing all the holes yourself, you’ll need to drill 8 holes. 
-	* Mark the locations for the holes, measuring the distances of the new holes to the existing ones.
-	* Drill the additional holes. Only drill on the inside of metal frame only (holes don’t need to go all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly)
-	* Install the tray sides. Only install the sides of the tray, and not the central piece since we’ll insert the washbasin there. For the holes you drilled, you can use the included plastic caps—no need to use extra screws. For existing holes, Ikea provided some screws to use.
-- Install the other trays as in original instructions with the remaining pieces.
-
-⠀**Result**: A customized cart ready for washbasin installation.
-
-## Step 2
-
-- **Prepare the Washbasin**
-- **Converting Plastic Tray to Washbasin**
-
-Now we'll convert the plastic tray into a washbasin.
-
-
-⠀**Steps**:
-**1** **Drill drainage holes**: Create 7 holes on each side of the tray at the deepest edge points to ensure complete water drainage.
-**2** **Check fit**: The modified tray should now resemble a washbasin and sit properly on the top cart frame.
-**3** **Drill pivot holes**: Locate the center of the plastic tray and drill holes slightly offset from center (to avoid the plastic bumper). Ensure holes align on both sides (offset the bumper to the same side on both sides) and match your screw diameter.
-**4** **Secure nuts**:
-	* Screw nuts onto bolts in the washbasin holes
-	* Apply hot glue around each nut to lock in position
-	* Once glue dries, remove screws—nuts stay permanently fixed
-
-⠀**Result**: Washbasin ready for pivot installation with secure, glued-in-place nuts.
-
-
-
-import ImageCarousel from '@site/src/components/ImageCarousel';
-
-<ImageCarousel
-  images={[
-    { src: '/img/sink1.jpg', alt: 'Melt the plastic', caption: 'Step 1: Melt the plastic' },
-    { src: '/img/try.JPG', alt: 'Shape the shell', caption: 'Step 2: Shape the shell' },
-    { src: '/img/step3.png', alt: 'Add electronics', caption: 'Step 3: Add electronics' },
-    { src: '/img/step4.png', alt: 'Finished mouse', caption: 'Step 4: Final product' },
-  ]}
-/>
-<!-- truncate -->
-
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::

docusaurus.config.js

@@ -44,7 +44,6 @@ const config = {
         docs: {
 			sidebarPath: require.resolve('./sidebars.js'), // ✅ Must point to your sidebars.js
 			routeBasePath: 'docs', // or '/' if you moved docs to root
-			toc: false,
         },
         blog: {
           showReadingTime: true,

src/pages/index.js

@@ -1,43 +1,187 @@
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React, { useEffect } from 'react';
+import Head from '@docusaurus/Head';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import Heading from '@theme/Heading';
-import styles from './index.module.css';
-
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext(); // test
-  return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/start">
-            Build your own! ⏱️
-          </Link>
-        </div>
-      </div>
-    </header>
-  );
-}
+import './toddlerSinkHome.css';
 
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  useEffect(() => {
+    // Scroll animations
+    const observerOptions = {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.opacity = '1';
+          entry.target.style.transform = 'translateY(0)';
+        }
+      });
+    }, observerOptions);
+
+    const cards = document.querySelectorAll('.feature-card, .cta-card');
+    cards.forEach(card => {
+      card.style.opacity = '0';
+      card.style.transform = 'translateY(20px)';
+      card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+      observer.observe(card);
+    });
+
+    // Feature navigation
+    const navItems = document.querySelectorAll('.feature-nav-item');
+    const demoContents = document.querySelectorAll('.demo-content');
+
+    navItems.forEach(item => {
+      item.addEventListener('click', () => {
+        navItems.forEach(nav => nav.classList.remove('active'));
+        item.classList.add('active');
+        demoContents.forEach(demo => demo.classList.remove('active'));
+        const feature = item.getAttribute('data-feature');
+        const targetDemo = document.getElementById(`demo-${feature}`);
+        if (targetDemo) {
+          targetDemo.classList.add('active');
+        }
+      });
+    });
+
+    // Video placeholder
+    const playButton = document.querySelector('.play-button');
+    if (playButton) {
+      playButton.addEventListener('click', () => {
+        alert('Video player would open here!');
+      });
+    }
+  }, []);
+
   return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <HomepageHeader />
-      <main>
-        <HomepageFeatures />
-      </main>
+    <Layout>
+      <Head>
+        <title>Smart Toddler Sink - Independence & Water Conservation</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      </Head>
+      <div className="custom-landing-page">
+        {/* Hero Section */}
+        <section className="hero">
+          <div className="container">
+            <div className="hero-layout">
+              <div className="hero-content">
+                <h1>The ultimate child sink</h1>
+                <h2>Piqpoc is a water-saving sink for toddlers that support their playtime and independence. Build it with ease, and place it anywhere since no plumbing is required.</h2>
+                <p className="hero-description">Enable your children to use water independently as soon as they start walking and save water while having fun.</p>
+                <div className="cta-buttons">
+                  <a href="#" className="btn btn-primary">Get Started</a>
+                  <a href="#" className="btn btn-secondary">Learn More</a>
+                </div>
+              </div>
+              <div className="video-placeholder">
+                <h3>Piqpoq Intro</h3>
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/F98diWo9d2I?si=uK8vXJUAjty3QRIk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className="how-it-works">
+          <div className="container">
+            <h2>Unique Features of Piqpoc</h2>
+            <div className="how-it-works-content">
+              <div className="features-nav">
+                <div className="feature-nav-item active" data-feature="height">
+                  <h3>🚿 Perfect Height and Pressure</h3>
+                  <p>The sink is designed with a lower and adjustable height for toddlers, eliminating the need for stools or assistance. Your child can independently and safely reach the faucet and washbasin. The pressure of the faucet is also adequate for their little hands, eliminating waste in each wash.</p>
+                </div>
+                <div className="feature-nav-item" data-feature="water-saving">
+                  <h3>🔄 Play Mode</h3>
+                  <p>A simple water filtering and circulation mechanism enables endless play with minimal waste. As long as the sink is tilted to play-mode, the same water gets circulated forever.</p>
+                </div>
+                <div className="feature-nav-item" data-feature="dual-mode">
+                  <h3>💧 Cleaning mode</h3>
+                  <p>Switch between play-mode and cleaning-mode with an easy action. Simply tilt the washbasin to the right to switch to hand washing. The sink directs the water to the disposal container in this mode.</p>
+                </div>
+                <div className="feature-nav-item" data-feature="portable">
+                  <h3>🌍 Take It Anywhere</h3>
+                  <p>No plumbing required - use it anywhere in your home or outdoors. The sink is powered through a USB port which means you can run it with a mobile phone charger or a 5V battery. Perfect for terraces, gardens, playrooms, or any space where your child wants to play.</p>
+                </div>
+              </div>
+		
+              <div className="feature-demo">
+                <div className="demo-content active" id="demo-height">
+                  <h3>Perfect for Little Ones</h3>
+				  <img src="/img/sink_height.jpg" height="600px" />
+                </div>
+                <div className="demo-content" id="demo-water-saving">
+                  <h3>Simple Water Recycling</h3>
+                  <img src="/img/waterplay.gif" height="600px" />
+                </div>
+                <div className="demo-content" id="demo-dual-mode">
+                  <h3>Wash Comfortably</h3>
+					<img src="/img/wash.gif" height="600px" />
+                </div>
+                <div className="demo-content" id="demo-portable">
+                  <h3>A sink with wheels</h3>
+					<img src="/img/move.gif" height="600px" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features */}
+        <section className="features">
+          <div className="container">
+            <h2>Why Kids & Parents Love It</h2>
+            <div className="features-grid">
+              {[
+                ['🚿', 'Independent kids, accessible cleaning', 'Designed so that little ones can indepently wash themselves. Stop kids from struggling with adult sinks and faucets. Turns on/off with a child friendly button.'],
+                ['🛟', 'Safer washes', 'No more climbing on stools or raising your child with one hand, while washing them with the other.'],
+				['💧', 'Reduced waste of water', 'Kids can play with water for hours while reusing the same clean water. No waste, endless fun. Cleaning mode also uses less water thanks to reduced pressure.'],
+				['🌍', 'Completely Portable', 'Place it wherever you want. No plumbing needed! Use it anywhere - garden, terrace, balcony, or move it room to room.'],
+				['🐠', 'Playful and Guiding', 'Bring your family up to speed on water conservation awareness and adapt sustainable practices together from a young age.'],
+				['🛠️', 'Designed for everyone', 'Built from simple, affordable materials that should be available in most places on earth, so that any family can have one. DIY or buy it, regardless of the path, you\'ll save a lot of water.'],
+              ].map(([icon, title, desc], idx) => (
+                <div className="feature-card" key={idx}>
+                  <span className="feature-icon">{icon}</span>
+                  <h3>{title}</h3>
+                  <p>{desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="cta-section">
+          <div className="container">
+            <h2>Choose Your Path</h2>
+            <div className="cta-grid">
+              <div className="cta-card">
+                <h3>🔨 Build One</h3>
+                <p>Get the complete DIY instructions and build your own Piqpoc Toddler Sink</p>
+                <a href="#" className="btn btn-primary">Go to Documentation</a>
+              </div>
+              <div className="cta-card">
+                <h3>📦 Buy a Kit</h3>
+                <p>Skip the hard parts! Get the pump, switch, and faucet delivered, and just do basic assembly</p>
+                <a href="#" className="btn btn-secondary">Order Kit</a>
+              </div>
+              <div className="cta-card">
+                <h3>🚚 Buy Complete</h3>
+                <p>If desired, we can build one for you. Get the finished product delivered to your door. Currently available only in Spain.</p>
+                <a href="#" className="btn btn-tertiary">Buy Complete</a>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer>
+          <div className="container">
+            <p>© 2025 Piqpoc Toddler Sink. Helping families have more fun.</p>
+          </div>
+        </footer>
+      </div>
     </Layout>
   );
 }

src/pages/index_oldVersion.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext(); // test
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/start">
+            Build your own! ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

src/pages/toddlerSinkHome.css

@@ -0,0 +1,494 @@
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.custom-landing-page body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Header */
+.custom-landing-page header {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  padding: 1rem 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #667eea;
+}
+
+/* Hero */
+.hero {
+  position: relative;
+  color: white;
+  padding: 80px 0;
+  background: url('/img/step3/step5.jpg') center/cover;
+  min-height: 80vh;
+  display: flex;
+  align-items: right;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(0, 151, 157, 0.8) 0%, rgba(0, 109, 117, 0.8) 100%);
+  z-index: 1;
+}
+
+.hero-layout {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+  width: 100%;
+}
+
+.hero-content h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  font-weight: 300;
+}
+
+.hero-content h2 {
+  font-size: 1.4rem;
+  margin-bottom: 2rem;
+  font-weight: 400;
+  opacity: 0.9;
+}
+
+.hero-description {
+  font-size: 1.1rem;
+  margin-bottom: 3rem;
+  opacity: 0.9;
+  line-height: 1.7;
+}
+
+/* Video Placeholder */
+.video-placeholder {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 2rem;
+  text-align: center;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  width: 560px;
+}
+
+.video-placeholder h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  opacity: 0.9;
+}
+
+.video-placeholder p {
+  opacity: 0.7;
+  margin-bottom: 2rem;
+}
+
+.play-button {
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.play-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: scale(1.1);
+}
+
+/* Buttons */
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+.btn {
+  padding: 15px 30px;
+  border: none;
+  border-radius: 50px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.btn:hover::before {
+  left: 100%;
+}
+
+.btn-primary {
+  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
+  color: white;
+  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
+}
+
+.btn-secondary {
+  background: linear-gradient(45deg, #4ecdc4, #6bcfcf);
+  color: white;
+  box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
+}
+
+.btn-tertiary {
+  background: linear-gradient(45deg, #feca57, #ff9ff3);
+  color: white;
+  box-shadow: 0 5px 15px rgba(254, 202, 87, 0.4);
+}
+
+.btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+
+/* How it works */
+.how-it-works {
+  background: white;
+  padding: 80px 0;
+}
+
+.how-it-works h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 4rem;
+  color: #333;
+}
+
+.how-it-works-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+}
+
+.features-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.feature-nav-item {
+  background: #f8f9fa;
+  border: 2px solid transparent;
+  border-radius: 15px;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.feature-nav-item.active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-color: #667eea;
+}
+
+.feature-nav-item:hover {
+  transform: translateX(10px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.feature-demo {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-radius: 20px;
+  padding: 3rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-content {
+  display: none;
+}
+
+.demo-content.active {
+  display: block;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.demo-visual {
+  width: 200px;
+  height: 200px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 4rem;
+  color: white;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.demo-content h3 {
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.demo-content p {
+  color: #666;
+  line-height: 1.7;
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+/* Features Grid */
+.features {
+  background: white;
+  padding: 80px 0;
+}
+
+.features h2 {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  color: #333;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.feature-card {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  padding: 2rem;
+  border-radius: 20px;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+}
+
+.feature-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.feature-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  display: block;
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.feature-card p {
+  color: #666;
+  line-height: 1.7;
+}
+
+/* CTA */
+.cta-section {
+  background: #2c3e50;
+  color: white;
+  padding: 80px 0;
+  text-align: center;
+}
+
+.cta-section h2 {
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+}
+
+.cta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.cta-card {
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  padding: 2.5rem;
+  border-radius: 20px;
+  text-align: center;
+  transition: transform 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.cta-card::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+  transform: rotate(45deg);
+  transition: transform 0.5s ease;
+}
+
+.cta-card:hover::before {
+  transform: rotate(45deg) translate(20px, 20px);
+}
+
+.cta-card:hover {
+  transform: scale(1.05);
+}
+
+.cta-card h3 {
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  position: relative;
+  z-index: 1;
+}
+
+.cta-card p {
+  margin-bottom: 2rem;
+  opacity: 0.9;
+  position: relative;
+  z-index: 1;
+}
+
+.cta-card .btn {
+  position: relative;
+  z-index: 1;
+}
+
+/* Footer */
+footer {
+  background: #1a1a1a;
+  color: white;
+  padding: 2rem 0;
+  text-align: center;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero-layout {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .hero-content h1 {
+    font-size: 2.5rem;
+  }
+
+  .hero-content h2 {
+    font-size: 1.1rem;
+  }
+
+  .how-it-works-content {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+
+  .cta-buttons {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .btn {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .materials {
+    flex-direction: column;
+  }
+}