diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..3d3b226 Binary files /dev/null and b/public/logo.png differ diff --git a/src/App.tsx b/src/App.tsx index d711852..8f6f56b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,26 +1,27 @@ import { useState } from 'react'; -import type { Course, CartItem, ViewMode } from './types/course'; +import { Routes, Route } from 'react-router'; +import type { Course, CartItem } from './types/course'; import { mockCourses } from './data/mockCourses'; import { Navbar } from './components/layout/Navbar'; import { Footer } from './components/layout/Footer'; -import { HeroSection } from './components/buyer/HeroSection'; -import { CourseGrid } from './components/buyer/CourseGrid'; -import { FeaturesBanner } from './components/buyer/FeaturesBanner'; +import { HomeView } from './views/HomeView'; +import { BuyerView } from './views/BuyerView'; +import { SellerView } from './views/SellerView'; +import { CourseDetailView } from './views/CourseDetailView'; +import { CreateCourseView } from './views/CreateCourseView'; +import { AdminDashboardView } from './views/AdminDashboardView'; +import { LoginView } from './views/LoginView'; +import { RegisterView } from './views/RegisterView'; import { CourseModal } from './components/buyer/CourseModal'; import { CartDrawer } from './components/buyer/CartDrawer'; -import { SellerHero } from './components/seller/SellerHero'; -import { SellerDashboard } from './components/seller/SellerDashboard'; -import { SellerCalculator } from './components/seller/SellerCalculator'; -import { SellerCourseList } from './components/seller/SellerCourseList'; import { CreateCourseModal } from './components/seller/CreateCourseModal'; -import { FiCheckCircle} from 'react-icons/fi'; +import { FiCheckCircle } from 'react-icons/fi'; export function App() { - const [viewMode, setViewMode] = useState('buyer'); const [courses, setCourses] = useState(mockCourses); const [cartItems, setCartItems] = useState([]); const [searchQuery, setSearchQuery] = useState(''); - + // Modals & Drawers state const [selectedCourseForModal, setSelectedCourseForModal] = useState(null); const [isCartOpen, setIsCartOpen] = useState(false); @@ -72,20 +73,6 @@ export function App() { showToast('Curso eliminado correctamente'); }; - const handleScrollToCatalog = () => { - const el = document.getElementById('catalog-section'); - if (el) { - el.scrollIntoView({ behavior: 'smooth' }); - } - }; - - const handleScrollToCalculator = () => { - const el = document.getElementById('seller-calculator'); - if (el) { - el.scrollIntoView({ behavior: 'smooth' }); - } - }; - const cartCourseIds = cartItems.map((i) => i.course.id); return ( @@ -101,8 +88,6 @@ export function App() { {/* Main Navigation Bar */} setIsCartOpen(true)} onOpenCreateCourseModal={() => setIsCreateModalOpen(true)} @@ -110,52 +95,89 @@ export function App() { onSearchChange={setSearchQuery} /> - {/* Main Content Area */} + {/* Main Views Container */}
- {viewMode === 'buyer' ? ( - /* ==================== MODO ESTUDIANTE (COMPRAR) ==================== */ - <> - { - const target = courses.find((c) => c.id === courseId) || courses[0]; - setSelectedCourseForModal(target); - }} - /> - - setSelectedCourseForModal(course)} - onClearSearch={() => setSearchQuery('')} - /> - - - - ) : ( - /* ==================== MODO INSTRUCTOR (VENDER) ==================== */ - <> - setIsCreateModalOpen(true)} - onScrollToCalculator={handleScrollToCalculator} - /> - - - - setIsCreateModalOpen(true)} - onPreviewCourse={(course) => setSelectedCourseForModal(course)} - onDeleteCourse={handleDeleteCourse} - /> - - setIsCreateModalOpen(true)} - /> - - )} + + { + const target = courses.find((c) => c.id === courseId) || courses[0]; + setSelectedCourseForModal(target); + }} + onOpenDetails={(course) => setSelectedCourseForModal(course)} + onClearSearch={() => setSearchQuery('')} + /> + } + /> + setSelectedCourseForModal(course)} + onClearSearch={() => setSearchQuery('')} + /> + } + /> + + } + /> + + } + /> + setIsCreateModalOpen(true)} + onPreviewCourse={(course) => setSelectedCourseForModal(course)} + onDeleteCourse={handleDeleteCourse} + /> + } + /> + + } + /> + } + /> + } + /> +
{/* Course Detail Modal */} diff --git a/src/components/buyer/CourseCard.tsx b/src/components/buyer/CourseCard.tsx index e4f4f86..c63af81 100644 --- a/src/components/buyer/CourseCard.tsx +++ b/src/components/buyer/CourseCard.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useNavigate } from 'react-router'; import { FiStar, FiClock, @@ -14,15 +15,19 @@ interface CourseCardProps { course: Course; isInCart: boolean; onAddToCart: (course: Course) => void; - onOpenDetails: (course: Course) => void; + onOpenDetails?: (course: Course) => void; } export const CourseCard: React.FC = ({ course, isInCart, onAddToCart, - onOpenDetails, }) => { + const navigate = useNavigate(); + + const handleCourseClick = () => { + navigate(`/course/${course.id}`); + }; const discountPercent = Math.round( ((course.originalPrice - course.price) / course.originalPrice) * 100 ); @@ -47,7 +52,7 @@ export const CourseCard: React.FC = ({ {/* Top Image Section */}
-
onOpenDetails(course)}> +
{course.title} = ({
@@ -112,7 +117,7 @@ export const CourseCard: React.FC = ({ {/* Title */}

onOpenDetails(course)} + onClick={handleCourseClick} className="text-base font-bold text-white group-hover:text-cyan-300 transition-colors line-clamp-2 cursor-pointer leading-snug" > {course.title} diff --git a/src/components/common/BrandLogo.tsx b/src/components/common/BrandLogo.tsx new file mode 100644 index 0000000..00fc6dc --- /dev/null +++ b/src/components/common/BrandLogo.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +interface BrandLogoProps { + size?: 'sm' | 'md' | 'lg'; + showSubtitle?: boolean; +} + +export const BrandLogo: React.FC = ({ size = 'md', showSubtitle = true }) => { + const iconSizes = { + sm: 'w-8 h-8', + md: 'w-10 h-10', + lg: 'w-12 h-12', + }; + + const textSizes = { + sm: 'text-lg', + md: 'text-xl', + lg: 'text-2xl', + }; + + return ( +
+ {/* Official PNG Logo Image with sleek container styling */} +
+ RyCourses Emblem +
+ + {/* Typography */} +
+
+ + RyCourses + +
+ {showSubtitle && ( +

Plataforma Educativa

+ )} +
+
+ ); +}; diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index d904edd..3513fa7 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { - FiBookOpen, FiMail, FiCheckCircle, FiGlobe, @@ -10,6 +9,8 @@ import { } from 'react-icons/fi'; import { FaTwitter, FaYoutube, FaGithub, FaLinkedin, FaDiscord } from 'react-icons/fa'; +import { BrandLogo } from '../common/BrandLogo'; + export const Footer: React.FC = () => { const [email, setEmail] = useState(''); const [subscribed, setSubscribed] = useState(false); @@ -25,52 +26,6 @@ export const Footer: React.FC = () => { return (