bender/76b874eb-6d8f-4435-bd4e-74c2abe430bd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 5 commits from version_1 into main 2026-03-12 20:10:30 +00:00
Conversation 0 Commits 5 Files Changed 5 +79 -216
5 changed files with 79 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/contact/page.tsx
View File

@@ -32,9 +32,7 @@ export default function ContactPage() {
{ name: "YouTube", id: "/youtube" },
]}
button={{
text: "Contact Us",
href: "/contact",
}}
text: "Contact Us", href: "/contact"}}
/>
</div>
@@ -43,14 +41,13 @@ export default function ContactPage() {
tag="Get in Touch"
title="Connect with OkNeppo"
description="Have questions about sewing, tailoring, or our training programs? We'd love to hear from you! Reach out via WhatsApp for instant support, email us, or subscribe to our YouTube channel for daily tutorials and tips."
tagIcon="Mail"
tagIcon={Mail}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time."
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
/>
</div>
@@ -59,14 +56,13 @@ export default function ContactPage() {
tag="Connect Now"
title="Multiple Ways to Reach Us"
description="Choose your preferred contact method. Join our WhatsApp community for instant support, subscribe on YouTube for the latest tutorials, or send us an email with your questions and feedback."
tagIcon="Mail"
tagIcon={Mail}
useInvertedBackground={true}
inputPlaceholder="Your email address"
buttonText="Get Updates"
termsText="Stay connected with OkNeppo for exclusive tips and early access to new content."
background={{
variant: "animated-grid",
}}
variant: "animated-grid"}}
/>
</div>
@@ -75,14 +71,13 @@ export default function ContactPage() {
tag="Stay Updated"
title="Subscribe to Our Newsletter"
description="Never miss out on new sewing tutorials, tailoring tips, machine maintenance guides, and special announcements. Get weekly content delivered straight to your inbox!"
tagIcon="Mail"
tagIcon={Mail}
useInvertedBackground={false}
inputPlaceholder="your@email.com"
buttonText="Subscribe Now"
termsText="We promise to send only valuable sewing and tailoring content. Unsubscribe at any time with one click."
background={{
variant: "downward-rays-animated-grid",
}}
variant: "downward-rays-animated-grid"}}
/>
</div>
@@ -93,24 +88,16 @@ export default function ContactPage() {
socialLinks={[
{
icon: Youtube,
href: "https://www.youtube.com/@okneppo",
ariaLabel: "OkNeppo YouTube Channel",
},
href: "https://www.youtube.com/@okneppo", ariaLabel: "OkNeppo YouTube Channel"},
{
icon: MessageCircle,
href: "https://wa.me/1234567890",
ariaLabel: "OkNeppo WhatsApp",
},
href: "https://wa.me/1234567890", ariaLabel: "OkNeppo WhatsApp"},
{
icon: Facebook,
href: "https://facebook.com/okneppo",
ariaLabel: "OkNeppo Facebook",
},
href: "https://facebook.com/okneppo", ariaLabel: "OkNeppo Facebook"},
{
icon: Instagram,
href: "https://instagram.com/okneppo",
ariaLabel: "OkNeppo Instagram",
},
href: "https://instagram.com/okneppo", ariaLabel: "OkNeppo Instagram"},
]}
/>
</div>

59
src/app/training/page.tsx
View File

@@ -6,7 +6,7 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Youtube, MessageCircle, Facebook, Instagram } from "lucide-react";
import { Youtube, MessageCircle, Facebook, Instagram, Award, Zap } from "lucide-react";
export default function TrainingPage() {
const navItems = [
@@ -35,9 +35,7 @@ export default function TrainingPage() {
brandName="OkNeppo"
navItems={navItems}
button={{
text: "Contact Us",
href: "/contact",
}}
text: "Contact Us", href: "/contact"}}
/>
</div>
@@ -45,40 +43,22 @@ export default function TrainingPage() {
<FeatureCardOne
features={[
{
title: "Beginner Sewing Essentials",
description: "A comprehensive course covering sewing machine operation, basic stitches, fabric selection, and simple project creation for absolute beginners.",
imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg?_wi=3",
imageAlt: "Beginner Sewing Training",
button: {
text: "Enroll Now",
href: "https://wa.me/1234567890",
},
title: "Beginner Sewing Essentials", description: "A comprehensive course covering sewing machine operation, basic stitches, fabric selection, and simple project creation for absolute beginners.", imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg", imageAlt: "Beginner Sewing Training", button: {
text: "Enroll Now", href: "https://wa.me/1234567890"},
},
{
title: "Professional Tailoring Training",
description: "Master advanced tailoring techniques including pattern making, custom fitting, garment alterations, and professional finishing methods.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg?_wi=3",
imageAlt: "Professional Tailoring Course",
button: {
text: "Join Course",
href: "https://wa.me/1234567890",
},
title: "Professional Tailoring Training", description: "Master advanced tailoring techniques including pattern making, custom fitting, garment alterations, and professional finishing methods.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg", imageAlt: "Professional Tailoring Course", button: {
text: "Join Course", href: "https://wa.me/1234567890"},
},
{
title: "Embroidery & Decorative Arts",
description: "Explore creative embroidery techniques, hand stitching art, decorative designs, and personalization methods for custom creations.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg?_wi=3",
imageAlt: "Embroidery Training",
button: {
text: "Start Learning",
href: "https://wa.me/1234567890",
},
title: "Embroidery & Decorative Arts", description: "Explore creative embroidery techniques, hand stitching art, decorative designs, and personalization methods for custom creations.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg", imageAlt: "Embroidery Training", button: {
text: "Start Learning", href: "https://wa.me/1234567890"},
},
]}
title="Professional Training & Courses"
description="Comprehensive training programs designed to take you from beginner to skilled sewers and tailors with hands-on learning and expert guidance."
tag="Skill Development"
tagIcon="Award"
tagIcon={Award}
gridVariant="three-columns-all-equal-width"
textboxLayout="default"
animationType="slide-up"
@@ -91,14 +71,13 @@ export default function TrainingPage() {
tag="Ready to Learn?"
title="Start Your Training Journey Today"
description="Join our training programs and transform your sewing skills. Subscribe to get updates on new courses, class schedules, and exclusive training offers."
tagIcon="Zap"
tagIcon={Zap}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Get Updates"
termsText="We respect your privacy. Unsubscribe at any time."
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
/>
</div>
@@ -109,24 +88,16 @@ export default function TrainingPage() {
socialLinks={[
{
icon: Youtube,
href: "https://www.youtube.com/@okneppo",
ariaLabel: "OkNeppo YouTube Channel",
},
href: "https://www.youtube.com/@okneppo", ariaLabel: "OkNeppo YouTube Channel"},
{
icon: MessageCircle,
href: "https://wa.me/1234567890",
ariaLabel: "OkNeppo WhatsApp",
},
href: "https://wa.me/1234567890", ariaLabel: "OkNeppo WhatsApp"},
{
icon: Facebook,
href: "https://facebook.com/okneppo",
ariaLabel: "OkNeppo Facebook",
},
href: "https://facebook.com/okneppo", ariaLabel: "OkNeppo Facebook"},
{
icon: Instagram,
href: "https://instagram.com/okneppo",
ariaLabel: "OkNeppo Instagram",
},
href: "https://instagram.com/okneppo", ariaLabel: "OkNeppo Instagram"},
]}
/>
</div>

69
src/app/tutorials/page.tsx
View File

@@ -6,7 +6,7 @@ import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatin
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Youtube, MessageCircle, Facebook, Instagram } from "lucide-react";
import { Youtube, MessageCircle, Facebook, Instagram, Sparkles, Mail } from "lucide-react";
export default function TutorialsPage() {
const navItems = [
@@ -35,9 +35,7 @@ export default function TutorialsPage() {
brandName="OkNeppo"
navItems={navItems}
button={{
text: "Contact Us",
href: "/contact",
}}
text: "Contact Us", href: "/contact"}}
/>
</div>
@@ -45,50 +43,26 @@ export default function TutorialsPage() {
<FeatureCardOne
features={[
{
title: "Sewing Machine Basics",
description: "Master the fundamentals of operating a sewing machine, threading, and basic stitch techniques for beginners.",
imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg?_wi=2",
imageAlt: "Sewing Machine Tutorial",
button: {
text: "Watch Tutorial",
href: "https://www.youtube.com/@okneppo",
},
title: "Sewing Machine Basics", description: "Master the fundamentals of operating a sewing machine, threading, and basic stitch techniques for beginners.", imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg", imageAlt: "Sewing Machine Tutorial", button: {
text: "Watch Tutorial", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Basic Stitching Techniques",
description: "Learn essential hand stitches, embroidery basics, and how to create beautiful decorative patterns with needle and thread.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg?_wi=2",
imageAlt: "Hand Stitching Guide",
button: {
text: "Watch Tutorial",
href: "https://www.youtube.com/@okneppo",
},
title: "Basic Stitching Techniques", description: "Learn essential hand stitches, embroidery basics, and how to create beautiful decorative patterns with needle and thread.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg", imageAlt: "Hand Stitching Guide", button: {
text: "Watch Tutorial", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Tailoring & Fitting",
description: "Discover professional tailoring techniques, pattern cutting, measurements, and how to fit garments perfectly.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg?_wi=2",
imageAlt: "Tailoring Basics",
button: {
text: "Watch Tutorial",
href: "https://www.youtube.com/@okneppo",
},
title: "Tailoring & Fitting", description: "Discover professional tailoring techniques, pattern cutting, measurements, and how to fit garments perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg", imageAlt: "Tailoring Basics", button: {
text: "Watch Tutorial", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Machine Maintenance & Repair",
description: "Keep your sewing machine in perfect condition with our maintenance guide, troubleshooting tips, and repair hacks.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4653.jpg?_wi=2",
imageAlt: "Machine Maintenance",
button: {
text: "Watch Tutorial",
href: "https://www.youtube.com/@okneppo",
},
title: "Machine Maintenance & Repair", description: "Keep your sewing machine in perfect condition with our maintenance guide, troubleshooting tips, and repair hacks.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4653.jpg", imageAlt: "Machine Maintenance", button: {
text: "Watch Tutorial", href: "https://www.youtube.com/@okneppo"},
},
]}
title="Featured Sewing Tutorials"
description="Learn essential sewing and tailoring skills through our comprehensive, step-by-step video guides and tutorials designed for beginners."
tag="Popular Guides"
tagIcon="Sparkles"
tagIcon={Sparkles}
gridVariant="two-columns-alternating-heights"
textboxLayout="default"
animationType="slide-up"
@@ -101,14 +75,13 @@ export default function TutorialsPage() {
tag="Get in Touch"
title="Connect with OkNeppo"
description="Have questions or want to start your sewing journey? Reach out to us via WhatsApp, email, or subscribe to our YouTube channel for daily tutorials and tips."
tagIcon="Mail"
tagIcon={Mail}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time."
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
/>
</div>
@@ -119,24 +92,16 @@ export default function TutorialsPage() {
socialLinks={[
{
icon: Youtube,
href: "https://www.youtube.com/@okneppo",
ariaLabel: "OkNeppo YouTube Channel",
},
href: "https://www.youtube.com/@okneppo", ariaLabel: "OkNeppo YouTube Channel"},
{
icon: MessageCircle,
href: "https://wa.me/1234567890",
ariaLabel: "OkNeppo WhatsApp",
},
href: "https://wa.me/1234567890", ariaLabel: "OkNeppo WhatsApp"},
{
icon: Facebook,
href: "https://facebook.com/okneppo",
ariaLabel: "OkNeppo Facebook",
},
href: "https://facebook.com/okneppo", ariaLabel: "OkNeppo Facebook"},
{
icon: Instagram,
href: "https://instagram.com/okneppo",
ariaLabel: "OkNeppo Instagram",
},
href: "https://instagram.com/okneppo", ariaLabel: "OkNeppo Instagram"},
]}
/>
</div>

78
src/app/youtube/page.tsx
View File

@@ -7,7 +7,7 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Youtube, MessageCircle, Facebook, Instagram } from "lucide-react";
import { Youtube, MessageCircle, Facebook, Instagram, Sparkles, Mail } from "lucide-react";
export default function YouTubePage() {
return (
@@ -34,9 +34,7 @@ export default function YouTubePage() {
{ name: "YouTube", id: "/youtube" },
]}
button={{
text: "Contact Us",
href: "/contact",
}}
text: "Contact Us", href: "/contact"}}
/>
</div>
@@ -45,47 +43,23 @@ export default function YouTubePage() {
title="Featured Video Playlists"
description="Explore our comprehensive YouTube playlists covering everything from beginner sewing machine basics to advanced tailoring techniques. Subscribe to never miss a new tutorial!"
tag="Video Content"
tagIcon="Sparkles"
tagIcon={Sparkles}
features={[
{
title: "Sewing Machine Basics",
description: "Master the fundamentals of operating a sewing machine, threading, and basic stitch techniques for beginners.",
imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg?_wi=4",
imageAlt: "Sewing Machine Tutorial",
button: {
text: "Watch Playlist",
href: "https://www.youtube.com/@okneppo",
},
title: "Sewing Machine Basics", description: "Master the fundamentals of operating a sewing machine, threading, and basic stitch techniques for beginners.", imageSrc: "http://img.b2bpic.net/free-photo/making-pasta_23-2147985254.jpg", imageAlt: "Sewing Machine Tutorial", button: {
text: "Watch Playlist", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Basic Stitching Techniques",
description: "Learn essential hand stitches, embroidery basics, and how to create beautiful decorative patterns with needle and thread.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg?_wi=4",
imageAlt: "Hand Stitching Guide",
button: {
text: "Watch Playlist",
href: "https://www.youtube.com/@okneppo",
},
title: "Basic Stitching Techniques", description: "Learn essential hand stitches, embroidery basics, and how to create beautiful decorative patterns with needle and thread.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-crocheting-high-angle_23-2148754112.jpg", imageAlt: "Hand Stitching Guide", button: {
text: "Watch Playlist", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Tailoring & Fitting",
description: "Discover professional tailoring techniques, pattern cutting, measurements, and how to fit garments perfectly.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg?_wi=4",
imageAlt: "Tailoring Basics",
button: {
text: "Watch Playlist",
href: "https://www.youtube.com/@okneppo",
},
title: "Tailoring & Fitting", description: "Discover professional tailoring techniques, pattern cutting, measurements, and how to fit garments perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543697.jpg", imageAlt: "Tailoring Basics", button: {
text: "Watch Playlist", href: "https://www.youtube.com/@okneppo"},
},
{
title: "Machine Maintenance & Repair",
description: "Keep your sewing machine in perfect condition with our maintenance guide, troubleshooting tips, and repair hacks.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4653.jpg?_wi=3",
imageAlt: "Machine Maintenance",
button: {
text: "Watch Playlist",
href: "https://www.youtube.com/@okneppo",
},
title: "Machine Maintenance & Repair", description: "Keep your sewing machine in perfect condition with our maintenance guide, troubleshooting tips, and repair hacks.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-worker-near-metalworking-machine_176420-4653.jpg", imageAlt: "Machine Maintenance", button: {
text: "Watch Playlist", href: "https://www.youtube.com/@okneppo"},
},
]}
gridVariant="two-columns-alternating-heights"
@@ -103,14 +77,7 @@ export default function YouTubePage() {
textboxLayout="default"
useInvertedBackground={true}
names={[
"YouTube Subscribers",
"WhatsApp Group Members",
"Active Students",
"Tutorial Views",
"Success Stories",
"Training Graduates",
"Community Partners",
]}
"YouTube Subscribers", "WhatsApp Group Members", "Active Students", "Tutorial Views", "Success Stories", "Training Graduates", "Community Partners"]}
speed={40}
showCard={true}
/>
@@ -121,14 +88,13 @@ export default function YouTubePage() {
tag="Get in Touch"
title="Connect with OkNeppo"
description="Have questions or want to start your sewing journey? Reach out to us via WhatsApp, email, or subscribe to our YouTube channel for daily tutorials and tips."
tagIcon="Mail"
tagIcon={Mail}
useInvertedBackground={false}
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe at any time."
background={{
variant: "rotated-rays-animated-grid",
}}
variant: "rotated-rays-animated-grid"}}
/>
</div>
@@ -139,24 +105,16 @@ export default function YouTubePage() {
socialLinks={[
{
icon: Youtube,
href: "https://www.youtube.com/@okneppo",
ariaLabel: "OkNeppo YouTube Channel",
},
href: "https://www.youtube.com/@okneppo", ariaLabel: "OkNeppo YouTube Channel"},
{
icon: MessageCircle,
href: "https://wa.me/1234567890",
ariaLabel: "OkNeppo WhatsApp",
},
href: "https://wa.me/1234567890", ariaLabel: "OkNeppo WhatsApp"},
{
icon: Facebook,
href: "https://facebook.com/okneppo",
ariaLabel: "OkNeppo Facebook",
},
href: "https://facebook.com/okneppo", ariaLabel: "OkNeppo Facebook"},
{
icon: Instagram,
href: "https://instagram.com/okneppo",
ariaLabel: "OkNeppo Instagram",
},
href: "https://instagram.com/okneppo", ariaLabel: "OkNeppo Instagram"},
]}
/>
</div>

54
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,33 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from 'react';
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
className?: string;
textClassName?: string;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
textClassName = '',
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 100"
className={`w-full h-auto ${className}`}
aria-label={text}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="50%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
className={`text-3xl font-bold fill-current ${textClassName}`}
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;