Updates to the main page and base instructions

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: 'Adjusted layout of top tray walls on the floor' },
-	{ src: '/img/step1/2_toptray.webp', caption: 'Top tray walls laid out' },
+	{ src: '/img/step1/2_mark.webp', caption: 'Mark the holes for the new wall combination and child height' },
-	{ 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 fix the top tray in the new holes' },
-	{ src: '/img/step1/3_plastic_piece.webp', caption: 'Use provided plastic pieces to fit the additional 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/step3/step1.jpg', caption: 'Mark drill point on the horizontal center of the top trays' },
-    { src: '/img/step3b.jpg', caption: 'Final test' },
+	{ 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
 ---

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,200 @@
-import clsx from 'clsx';
+import React, { useEffect } from 'react';
-import Link from '@docusaurus/Link';
+import Head from '@docusaurus/Head';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import './toddlerSinkHome.css';
 
-import Heading from '@theme/Heading';
+export default function Home() {
-import styles from './index.module.css';
+  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!');
+      });
+    }
+  }, []);
 
-function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext(); // test
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <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">
+        {/* Header */}
+        <header>
           <div className="container">
-        <Heading as="h1" className="hero__title">
+            <div className="header-content">
-          {siteConfig.title}
+              <div className="logo">Smart Toddler Sink</div>
-        </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() {
+        {/* Hero Section */}
-  const {siteConfig} = useDocusaurusContext();
+        <section className="hero">
-  return (
+          <div className="container">
-    <Layout
+            <div className="hero-layout">
-      title={`Hello from ${siteConfig.title}`}
+              <div className="hero-content">
-      description="Description will go into a meta tag in <head />">
+                <h1>Smart Toddler Sink</h1>
-      <HomepageHeader />
+                <h2>The water-saving sink for your child - portable, playful, and supporting independence</h2>
-      <main>
+                <p className="hero-description">Get started with water conservation and independence building for toddlers aged 1+. No plumbing needed - the sink guides your child through hands-on learning about water use, cleanliness, and responsibility while having fun.</p>
-        <HomepageFeatures />
+                <div className="cta-buttons">
-      </main>
+                  <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>See It In Action</h3>
+                <p>Watch how the Smart Toddler Sink transforms daily routines</p>
+                <div className="play-button">▶</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* How It Works */}
+        <section className="how-it-works">
+          <div className="container">
+            <h2>How It Works</h2>
+            <div className="how-it-works-content">
+              <div className="features-nav">
+                <div className="feature-nav-item active" data-feature="height">
+                  <h3>🚿 Perfect Height</h3>
+                  <p>Designed specifically for toddlers aged 1+ with adjustable height settings</p>
+                </div>
+                <div className="feature-nav-item" data-feature="water-saving">
+                  <h3>💧 Water Conservation</h3>
+                  <p>Intelligent water recycling system for endless play with minimal waste</p>
+                </div>
+                <div className="feature-nav-item" data-feature="dual-mode">
+                  <h3>🔄 Dual Mode</h3>
+                  <p>Switch between play mode and cleaning mode with a simple flip</p>
+                </div>
+                <div className="feature-nav-item" data-feature="portable">
+                  <h3>🌍 Portable Design</h3>
+                  <p>No plumbing required - use anywhere in your home or garden</p>
+                </div>
+              </div>
+              <div className="feature-demo">
+                <div className="demo-content active" id="demo-height">
+                  <div className="demo-visual">🚿</div>
+                  <h3>Perfect Height for Little Hands</h3>
+                  <p>The sink is designed at the ideal height for toddlers, eliminating the need for stools or assistance. Your child can independently reach the faucet and washbasin.</p>
+                </div>
+                <div className="demo-content" id="demo-water-saving">
+                  <div className="demo-visual">💧</div>
+                  <h3>Smart Water Recycling</h3>
+                  <p>Clean water circulates through the system, allowing hours of play while teaching conservation. Dirty water is collected separately for easy disposal.</p>
+                </div>
+                <div className="demo-content" id="demo-dual-mode">
+                  <div className="demo-visual">🔄</div>
+                  <h3>Play & Clean Modes</h3>
+                  <p>Simply flip the washbasin angle to switch between water play and actual hand washing. The system automatically directs water to the appropriate container.</p>
+                </div>
+                <div className="demo-content" id="demo-portable">
+                  <div className="demo-visual">🌍</div>
+                  <h3>Take It Anywhere</h3>
+                  <p>Battery-powered pump means no plumbing connections needed. Perfect for terraces, gardens, playrooms, or any space where your child wants to play.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features */}
+        <section className="features">
+          <div className="container">
+            <h2>Why Kids & Parents Love It</h2>
+            <div className="features-grid">
+              {[
+                ['🚿', 'Perfect Height & Pressure', 'Designed for little hands from age 1+. No more climbing on stools or struggling with adult sinks.'],
+                ['💧', 'Water-Saving Play Mode', 'Kids can play with water for hours while reusing the same clean water. No waste, endless fun.'],
+                ['🔄', 'Dual-Mode Design', 'Flip the washbasin angle to switch between water play and real cleaning. Dirty water goes to a separate container.'],
+                ['🌍', 'Completely Portable', 'No plumbing needed! Use it anywhere - garden, terrace, balcony, or move it room to room.'],
+                ['🛠️', 'DIY-Friendly', 'Built from simple, affordable materials so that any family can have one.'],
+                ['⚡', 'Water Education', 'Supporting children\'s independence and helping them understand water and its conservation from a young age.']
+              ].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 fun, sustainably.</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,492 @@
+/* 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('https://www.datocms-assets.com/32427/1604049232-student-kit-hero.jpg?auto=format&max-w=2000') center/cover;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+}
+
+.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;
+}
+
+.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;
+  }
+}