Merge version_2_1781894039407 into main #2

Merged
bender merged 1 commits from version_2_1781894039407 into main 2026-06-19 18:35:51 +00:00
9 changed files with 301 additions and 273 deletions

View File

@@ -16,9 +16,6 @@ export default function Layout() {
{
"name": "Projects", "href": "#projects"
},
{
"name": "Pricing", "href": "#pricing"
},
{
"name": "Metrics", "href": "#metrics"
},
@@ -38,7 +35,7 @@ export default function Layout() {
logo="CrochetBuddy"
logoImageSrc="http://img.b2bpic.net/free-photo/letter-made-from-gray-threads-isolated-top-view_169016-50643.jpg"
ctaButton={{
text: "Get Started", href: "#pricing"}}
text: "Get Started", href: "#guides"}}
navItems={navItems} />
</SectionErrorBoundary>
<main className="flex-grow">

View File

@@ -5,15 +5,15 @@
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #2b180a;
--primary-cta: #2b180a;
--primary-cta-text: #f6f0e9;
--secondary-cta: #efe7dd;
--secondary-cta-text: #2b180a;
--accent: #94877c;
--background-accent: #afa094;
--background: #ffffff;
--card: #f9f5f6;
--foreground: #4a1525;
--primary-cta: #722f37;
--primary-cta-text: #ffffff;
--secondary-cta: #f0e6e8;
--secondary-cta-text: #722f37;
--accent: #8c5e65;
--background-accent: #e6d9db;
/* @layout/border-radius/rounded */
--radius: 1rem;

View File

@@ -1,271 +1,31 @@
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import GuidesSection from './HomePage/sections/Guides';
import ProjectsSection from './HomePage/sections/Projects';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import FaqSection from './HomePage/sections/Faq';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/medium-shot-young-woman-knitting-home_23-2149310960.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-knitting-home_23-2149299558.jpg",
"http://img.b2bpic.net/free-photo/impressed-young-slavic-female-gardener-wearing-gardening-hat-measuring-eggplant-with-tape-measure-olive-green_141793-93476.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-knitting-home_23-2149303895.jpg",
]}
avatarText="Join 5,000+ crafters"
title="Master the Art of Crochet, One Loop at a Time"
description="The ultimate beginner-friendly guide with expert video tutorials, material checklists, and patterns that will take you from novice to pro."
primaryButton={{
text: "Start Learning",
href: "#pricing",
}}
secondaryButton={{
text: "View Projects",
href: "#projects",
}}
names={[
"Sarah",
"Mike",
"Elena",
"David",
]}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-taking-photo-her-art_23-2148854518.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="guides" data-section="guides">
<SectionErrorBoundary name="guides">
<FeaturesRevealCards
tag="Learning Path"
title="Everything You Need to Get Started"
description="Our structured curriculum helps you master the foundations of crochet with ease."
items={[
{
title: "Comprehensive Video Guides",
description: "High-quality, slow-paced tutorials breaking down every stitch and technique.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150561887.jpg",
},
{
title: "Essential Material Lists",
description: "Don't get overwhelmed! We show you exactly which hooks and yarns to start with.",
imageSrc: "http://img.b2bpic.net/free-photo/fruits-made-wool_23-2147691735.jpg",
},
{
title: "Pattern Reading 101",
description: "Decipher complex patterns and stitch charts with our easy-to-follow guide.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-putting-torned-paper-into-glass-container_23-2147845447.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<GuidesSection />
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Projects"
title="Your Crochet Gallery"
description="Build your skills with beautiful projects tailored to your current level."
items={[
{
title: "Simple Coasters",
description: "Practice tension and basic stitches.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-crocheting-wooden-background_23-2148242077.jpg",
},
{
title: "Cozy Blanket",
description: "A perfect beginner multi-week project.",
imageSrc: "http://img.b2bpic.net/free-photo/zigzag-patterned-sand-textured-background-wellness-concept_53876-124290.jpg",
},
{
title: "Warm Beanies",
description: "Start making your own accessories.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doesn-t-like-winter-time_329181-59.jpg",
},
{
title: "Delicate Lace",
description: "Beautiful detailed practice pieces.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-top-view_23-2148754117.jpg",
},
{
title: "Yarn Storage",
description: "Stay organized with handmade baskets.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-basket-with-knife_1137-109.jpg",
},
{
title: "Flower Motifs",
description: "Fun little accents for any project.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503301.jpg",
},
{
title: "Color Scarf",
description: "Mastering color changes and edging.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sweater-scarf-face_23-2147969805.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ProjectsSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Our Impact"
title="Growing Community"
description="Join a supportive community of thousands learning to crochet together."
metrics={[
{
value: "5,000+",
description: "Active Learners",
},
{
value: "200+",
description: "Video Tutorials",
},
{
value: "50+",
description: "Starter Patterns",
},
{
value: "4.9/5",
description: "Average Rating",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="pricing" data-section="pricing">
<SectionErrorBoundary name="pricing">
<PricingSimpleCards
tag="Plans"
title="Choose Your Path"
description="Select the plan that fits your learning journey best."
plans={[
{
tag: "Essentials",
price: "$19",
description: "Perfect for casual learners.",
features: [
"Basic Stitch Videos",
"5 Starter Patterns",
"Community Access",
],
},
{
tag: "Mastery",
price: "$49",
description: "The full experience for serious hobbyists.",
features: [
"Advanced Techniques",
"All Patterns Unlocked",
"Personalized Q&A",
"Video Downloads",
],
},
{
tag: "Pro",
price: "$99",
description: "Complete guide including professional design.",
features: [
"Everything in Mastery",
"Design Your Own Patterns",
"1-on-1 Sessions",
],
},
]}
/>
</SectionErrorBoundary>
</div>
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialRatingCards
tag="Reviews"
title="What Our Students Say"
description="Real success stories from beginners just like you."
testimonials={[
{
name: "Sarah",
role: "Novice",
quote: "I never thought I could crochet until I found this platform. So easy!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-drawing-notebook-art-studio_839833-12141.jpg",
},
{
name: "Mike",
role: "Hobbyist",
quote: "The video quality is amazing, super clear and easy to follow.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-her-business-with-ceramic-kitchenware_23-2149060809.jpg",
},
{
name: "Elena",
role: "Beginner",
quote: "Loved the material checklists. Saved me so much time shopping.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-adults-knitting-outside_23-2149431840.jpg",
},
{
name: "David",
role: "Student",
quote: "The best tutorials I've found online for crochet basics.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-relaxed-woman-knitting_23-2148859252.jpg",
},
{
name: "Jessica",
role: "Artist",
quote: "Amazing community! Everyone is so helpful and encouraging.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-knitting-home_23-2149303897.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Support"
title="Frequently Asked Questions"
description="Answers to common questions about starting your journey."
categories={[
{
name: "Getting Started",
items: [
{
question: "Do I need a lot of space?",
answer: "No, crochet is a very portable hobby!",
},
{
question: "What's the best hook size?",
answer: "We recommend starting with a 5mm hook.",
},
],
},
{
name: "Materials",
items: [
{
question: "What kind of yarn is best?",
answer: "Cotton or soft acrylic yarn is best for beginners.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
</>
);
}

View File

@@ -0,0 +1,44 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "faq" section.
import React from 'react';
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Support"
title="Frequently Asked Questions"
description="Answers to common questions about starting your journey."
categories={[
{
name: "Getting Started",
items: [
{
question: "Do I need a lot of space?",
answer: "No, crochet is a very portable hobby!",
},
{
question: "What's the best hook size?",
answer: "We recommend starting with a 5mm hook.",
},
],
},
{
name: "Materials",
items: [
{
question: "What kind of yarn is best?",
answer: "Cotton or soft acrylic yarn is best for beginners.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,37 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "guides" section.
import React from 'react';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function GuidesSection(): React.JSX.Element {
return (
<div id="guides" data-section="guides">
<SectionErrorBoundary name="guides">
<FeaturesRevealCards
tag="Learning Path"
title="Everything You Need to Get Started"
description="Our structured curriculum helps you master the foundations of crochet with ease."
items={[
{
title: "Comprehensive Video Guides",
description: "High-quality, slow-paced tutorials breaking down every stitch and technique.",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-doing-creative-journaling_23-2150561887.jpg",
},
{
title: "Essential Material Lists",
description: "Don't get overwhelmed! We show you exactly which hooks and yarns to start with.",
imageSrc: "http://img.b2bpic.net/free-photo/fruits-made-wool_23-2147691735.jpg",
},
{
title: "Pattern Reading 101",
description: "Decipher complex patterns and stitch charts with our easy-to-follow guide.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-putting-torned-paper-into-glass-container_23-2147845447.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "hero" section.
import React from 'react';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/medium-shot-young-woman-knitting-home_23-2149310960.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-knitting-home_23-2149299558.jpg",
"http://img.b2bpic.net/free-photo/impressed-young-slavic-female-gardener-wearing-gardening-hat-measuring-eggplant-with-tape-measure-olive-green_141793-93476.jpg",
"http://img.b2bpic.net/free-photo/medium-shot-woman-knitting-home_23-2149303895.jpg",
]}
avatarText="Join 5,000+ crafters"
title="Master the Art of Crochet, One Loop at a Time"
description="The ultimate beginner-friendly guide with expert video tutorials, material checklists, and patterns that will take you from novice to pro."
primaryButton={{"href":"#guides","text":"Start Learning"}}
secondaryButton={{
text: "View Projects",
href: "#projects",
}}
names={[
"Sarah",
"Mike",
"Elena",
"David",
]}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-taking-photo-her-art_23-2148854518.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Our Impact"
title="Growing Community"
description="Join a supportive community of thousands learning to crochet together."
metrics={[
{
value: "5,000+",
description: "Active Learners",
},
{
value: "200+",
description: "Video Tutorials",
},
{
value: "50+",
description: "Starter Patterns",
},
{
value: "4.9/5",
description: "Average Rating",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "projects" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProjectsSection(): React.JSX.Element {
return (
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Projects"
title="Your Crochet Gallery"
description="Build your skills with beautiful projects tailored to your current level."
items={[
{
title: "Simple Coasters",
description: "Practice tension and basic stitches.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-crocheting-wooden-background_23-2148242077.jpg",
},
{
title: "Cozy Blanket",
description: "A perfect beginner multi-week project.",
imageSrc: "http://img.b2bpic.net/free-photo/zigzag-patterned-sand-textured-background-wellness-concept_53876-124290.jpg",
},
{
title: "Warm Beanies",
description: "Start making your own accessories.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doesn-t-like-winter-time_329181-59.jpg",
},
{
title: "Delicate Lace",
description: "Beautiful detailed practice pieces.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-top-view_23-2148754117.jpg",
},
{
title: "Yarn Storage",
description: "Stay organized with handmade baskets.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-basket-with-knife_1137-109.jpg",
},
{
title: "Flower Motifs",
description: "Fun little accents for any project.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-design_23-2149503301.jpg",
},
{
title: "Color Scarf",
description: "Mastering color changes and edging.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sweater-scarf-face_23-2147969805.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonials" section.
import React from 'react';
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialRatingCards
tag="Reviews"
title="What Our Students Say"
description="Real success stories from beginners just like you."
testimonials={[
{
name: "Sarah",
role: "Novice",
quote: "I never thought I could crochet until I found this platform. So easy!",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-woman-smiling-confident-drawing-notebook-art-studio_839833-12141.jpg",
},
{
name: "Mike",
role: "Hobbyist",
quote: "The video quality is amazing, super clear and easy to follow.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-photos-her-business-with-ceramic-kitchenware_23-2149060809.jpg",
},
{
name: "Elena",
role: "Beginner",
quote: "Loved the material checklists. Saved me so much time shopping.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-adults-knitting-outside_23-2149431840.jpg",
},
{
name: "David",
role: "Student",
quote: "The best tutorials I've found online for crochet basics.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-relaxed-woman-knitting_23-2148859252.jpg",
},
{
name: "Jessica",
role: "Artist",
quote: "Amazing community! Everyone is so helpful and encouraging.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-knitting-home_23-2149303897.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}