diff --git a/docs/Build_Guide/first2.md b/docs/Build_Guide/base.md similarity index 64% rename from docs/Build_Guide/first2.md rename to docs/Build_Guide/base.md index 077d766..7b8f72a 100644 --- a/docs/Build_Guide/first2.md +++ b/docs/Build_Guide/base.md @@ -13,12 +13,11 @@ We'll start with assembling the base structure and making the required modificat @@ -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.

@@ -70,11 +69,28 @@ Now we'll convert the plastic tray into a washbasin.

- 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.

diff --git a/docs/Build_Guide/bom.md b/docs/Build_Guide/bom.md index 0a98dee..d490c83 100644 --- a/docs/Build_Guide/bom.md +++ b/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 --- diff --git a/docs/Build_Guide/del.md b/docs/Build_Guide/del.md deleted file mode 100644 index 68aaa21..0000000 --- a/docs/Build_Guide/del.md +++ /dev/null @@ -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'; - - - - -:::info[materials] -Here's a list of materials needed to construct this sink: -::: diff --git a/docusaurus.config.js b/docusaurus.config.js index 9237c19..0412a76 100644 --- a/docusaurus.config.js +++ b/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, diff --git a/src/pages/index.js b/src/pages/index.js index 8f1d0c1..14ec5a3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,43 +1,200 @@ -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 ( -
-
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Build your own! ⏱️ - -
-
-
- ); -} +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 ( - - -
- -
+ + + Smart Toddler Sink - Independence & Water Conservation + + +
+ {/* Header */} +
+
+
+
Smart Toddler Sink
+
+
+
+ + {/* Hero Section */} +
+
+
+
+

Smart Toddler Sink

+

The water-saving sink for your child - portable, playful, and supporting independence

+

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.

+ +
+
+

See It In Action

+

Watch how the Smart Toddler Sink transforms daily routines

+
▶
+
+
+
+
+ + {/* How It Works */} +
+
+

How It Works

+
+
+
+

🚿 Perfect Height

+

Designed specifically for toddlers aged 1+ with adjustable height settings

+
+
+

💧 Water Conservation

+

Intelligent water recycling system for endless play with minimal waste

+
+
+

🔄 Dual Mode

+

Switch between play mode and cleaning mode with a simple flip

+
+
+

🌍 Portable Design

+

No plumbing required - use anywhere in your home or garden

+
+
+
+
+
🚿
+

Perfect Height for Little Hands

+

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.

+
+
+
💧
+

Smart Water Recycling

+

Clean water circulates through the system, allowing hours of play while teaching conservation. Dirty water is collected separately for easy disposal.

+
+
+
🔄
+

Play & Clean Modes

+

Simply flip the washbasin angle to switch between water play and actual hand washing. The system automatically directs water to the appropriate container.

+
+
+
🌍
+

Take It Anywhere

+

Battery-powered pump means no plumbing connections needed. Perfect for terraces, gardens, playrooms, or any space where your child wants to play.

+
+
+
+
+
+ + {/* Features */} +
+
+

Why Kids & Parents Love It

+
+ {[ + ['🚿', '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) => ( +
+ {icon} +

{title}

+

{desc}

+
+ ))} +
+
+
+ + {/* CTA Section */} +
+
+

Choose Your Path

+
+
+

🔨 Build One

+

Get the complete DIY instructions and build your own Piqpoc Toddler Sink

+ Go to Documentation +
+
+

📦 Buy a Kit

+

Skip the hard parts! Get the pump, switch, and faucet delivered, and just do basic assembly

+ Order Kit +
+
+

🚚 Buy Complete

+

If desired, we can build one for you. Get the finished product delivered to your door. Currently available only in Spain.

+ Buy Complete +
+
+
+
+ + {/* Footer */} +
+
+

© 2025 Piqpoc Toddler Sink. Helping families have fun, sustainably.

+
+
+
); } diff --git a/src/pages/index_oldVersion.js b/src/pages/index_oldVersion.js new file mode 100644 index 0000000..8f1d0c1 --- /dev/null +++ b/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 ( +
+
+ + {siteConfig.title} + +

{siteConfig.tagline}

+
+ + Build your own! ⏱️ + +
+
+
+ ); +} + +export default function Home() { + const {siteConfig} = useDocusaurusContext(); + return ( + + +
+ +
+ + ); +} diff --git a/src/pages/toddlerSinkHome.css b/src/pages/toddlerSinkHome.css new file mode 100644 index 0000000..b13ecd2 --- /dev/null +++ b/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; + } +} diff --git a/static/img/step3/IMG_8231.HEIC b/static/img/step3/IMG_8231.HEIC deleted file mode 100644 index 5c290e6..0000000 Binary files a/static/img/step3/IMG_8231.HEIC and /dev/null differ diff --git a/static/img/step3/IMG_8234.HEIC b/static/img/step3/IMG_8234.HEIC deleted file mode 100644 index f75774b..0000000 Binary files a/static/img/step3/IMG_8234.HEIC and /dev/null differ diff --git a/static/img/step3/IMG_8237.HEIC b/static/img/step3/IMG_8237.HEIC deleted file mode 100644 index 107d781..0000000 Binary files a/static/img/step3/IMG_8237.HEIC and /dev/null differ diff --git a/static/img/step3/step1.jpg b/static/img/step3/step1.jpg new file mode 100644 index 0000000..a9a06ee Binary files /dev/null and b/static/img/step3/step1.jpg differ diff --git a/static/img/step3/step2.jpg b/static/img/step3/step2.jpg new file mode 100644 index 0000000..274132f Binary files /dev/null and b/static/img/step3/step2.jpg differ diff --git a/static/img/step3/step3.jpg b/static/img/step3/step3.jpg new file mode 100644 index 0000000..f0447c8 Binary files /dev/null and b/static/img/step3/step3.jpg differ diff --git a/static/img/step3/step4.jpg b/static/img/step3/step4.jpg new file mode 100644 index 0000000..20ca285 Binary files /dev/null and b/static/img/step3/step4.jpg differ diff --git a/static/img/step3/step5.jpg b/static/img/step3/step5.jpg new file mode 100644 index 0000000..a8de748 Binary files /dev/null and b/static/img/step3/step5.jpg differ diff --git a/static/img/step3/step5_sec.jpg b/static/img/step3/step5_sec.jpg new file mode 100644 index 0000000..01ed52d Binary files /dev/null and b/static/img/step3/step5_sec.jpg differ