vv
This commit is contained in:
Flatlogic Bot
parent
0eb1c3df5b
commit
b024fbd9e5
@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
production: {
|
production: {
|
||||||
dialect: 'postgres',
|
dialect: 'postgres',
|
||||||
@ -12,11 +10,12 @@ module.exports = {
|
|||||||
seederStorage: 'sequelize',
|
seederStorage: 'sequelize',
|
||||||
},
|
},
|
||||||
development: {
|
development: {
|
||||||
username: 'postgres',
|
|
||||||
dialect: 'postgres',
|
dialect: 'postgres',
|
||||||
password: '',
|
username: process.env.DB_USER || 'postgres',
|
||||||
database: 'db_mobile_commerce_store',
|
password: process.env.DB_PASS || '',
|
||||||
|
database: process.env.DB_NAME || 'db_mobile_commerce_store',
|
||||||
host: process.env.DB_HOST || 'localhost',
|
host: process.env.DB_HOST || 'localhost',
|
||||||
|
port: process.env.DB_PORT || 5432,
|
||||||
logging: console.log,
|
logging: console.log,
|
||||||
seederStorage: 'sequelize',
|
seederStorage: 'sequelize',
|
||||||
},
|
},
|
||||||
|
|||||||
48
backend/src/db/migrations/1770657891319.js
Normal file
48
backend/src/db/migrations/1770657891319.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
module.exports = {
|
||||||
|
async up(queryInterface, Sequelize) {
|
||||||
|
const [roles] = await queryInterface.sequelize.query(
|
||||||
|
`SELECT id FROM "roles" WHERE name = 'Public' LIMIT 1;`
|
||||||
|
);
|
||||||
|
const [readProductsPerm] = await queryInterface.sequelize.query(
|
||||||
|
`SELECT id FROM "permissions" WHERE name = 'READ_PRODUCTS' LIMIT 1;`
|
||||||
|
);
|
||||||
|
const [readCategoriesPerm] = await queryInterface.sequelize.query(
|
||||||
|
`SELECT id FROM "permissions" WHERE name = 'READ_CATEGORIES' LIMIT 1;`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (roles.length && readProductsPerm.length) {
|
||||||
|
const [existing] = await queryInterface.sequelize.query(
|
||||||
|
`SELECT * FROM "rolesPermissionsPermissions" WHERE "roles_permissionsId" = '${roles[0].id}' AND "permissionId" = '${readProductsPerm[0].id}';`
|
||||||
|
);
|
||||||
|
if (!existing.length) {
|
||||||
|
await queryInterface.bulkInsert('rolesPermissionsPermissions', [
|
||||||
|
{
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
roles_permissionsId: roles[0].id,
|
||||||
|
permissionId: readProductsPerm[0].id,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (roles.length && readCategoriesPerm.length) {
|
||||||
|
const [existing] = await queryInterface.sequelize.query(
|
||||||
|
`SELECT * FROM "rolesPermissionsPermissions" WHERE "roles_permissionsId" = '${roles[0].id}' AND "permissionId" = '${readCategoriesPerm[0].id}';`
|
||||||
|
);
|
||||||
|
if (!existing.length) {
|
||||||
|
await queryInterface.bulkInsert('rolesPermissionsPermissions', [
|
||||||
|
{
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
roles_permissionsId: roles[0].id,
|
||||||
|
permissionId: readCategoriesPerm[0].id,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async down(queryInterface, Sequelize) {
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -131,9 +131,9 @@ app.use('/api/addresses', passport.authenticate('jwt', {session: false}), addres
|
|||||||
|
|
||||||
app.use('/api/brands', passport.authenticate('jwt', {session: false}), brandsRoutes);
|
app.use('/api/brands', passport.authenticate('jwt', {session: false}), brandsRoutes);
|
||||||
|
|
||||||
app.use('/api/categories', passport.authenticate('jwt', {session: false}), categoriesRoutes);
|
app.use('/api/categories', categoriesRoutes);
|
||||||
|
|
||||||
app.use('/api/products', passport.authenticate('jwt', {session: false}), productsRoutes);
|
app.use('/api/products', productsRoutes);
|
||||||
|
|
||||||
app.use('/api/product_variants', passport.authenticate('jwt', {session: false}), product_variantsRoutes);
|
app.use('/api/product_variants', passport.authenticate('jwt', {session: false}), product_variantsRoutes);
|
||||||
|
|
||||||
|
|||||||
36
frontend/src/components/WebPageComponents/Footer.tsx
Normal file
36
frontend/src/components/WebPageComponents/Footer.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
export default function WebSiteFooter({ projectName }: { projectName: string }) {
|
||||||
|
return (
|
||||||
|
<footer className="bg-gray-900 text-white py-12">
|
||||||
|
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
|
<div className="col-span-1 md:col-span-2">
|
||||||
|
<h3 className="text-2xl font-bold text-blue-400 mb-4">{projectName}</h3>
|
||||||
|
<p className="text-gray-400 max-w-sm">
|
||||||
|
The best mobile-first e-commerce experience. Buy products quickly and securely from your phone.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold mb-4 text-gray-200">Shop</h4>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><Link href="/" className="hover:text-blue-400">All Products</Link></li>
|
||||||
|
<li><Link href="/" className="hover:text-blue-400">Categories</Link></li>
|
||||||
|
<li><Link href="/" className="hover:text-blue-400">Featured</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold mb-4 text-gray-200">Legal</h4>
|
||||||
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
<li><Link href="/privacy-policy" className="hover:text-blue-400">Privacy Policy</Link></li>
|
||||||
|
<li><Link href="/terms-of-use" className="hover:text-blue-400">Terms of Use</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="container mx-auto px-4 mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
|
||||||
|
© 2026 {projectName}. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
frontend/src/components/WebPageComponents/Header.tsx
Normal file
44
frontend/src/components/WebPageComponents/Header.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { mdiAccount, mdiCart, mdiMenu, mdiClose } from '@mdi/js';
|
||||||
|
import BaseIcon from '../BaseIcon';
|
||||||
|
|
||||||
|
export default function WebSiteHeader({ projectName }: { projectName: string }) {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-white shadow-sm sticky top-0 z-50 dark:bg-dark-900">
|
||||||
|
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||||
|
<Link href="/" className="text-2xl font-bold text-blue-600 flex items-center space-x-2">
|
||||||
|
<span>{projectName}</span>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop Nav */}
|
||||||
|
<nav className="hidden md:flex items-center space-x-8 text-gray-600 dark:text-gray-300">
|
||||||
|
<Link href="/" className="hover:text-blue-600 transition-colors">Home</Link>
|
||||||
|
<Link href="/search" className="hover:text-blue-600 transition-colors">Products</Link>
|
||||||
|
<Link href="/login" className="hover:text-blue-600 transition-colors">Admin Dashboard</Link>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Link href="/login" className="p-2 hover:bg-gray-100 rounded-full dark:hover:bg-dark-800">
|
||||||
|
<BaseIcon path={mdiAccount} size="24" />
|
||||||
|
</Link>
|
||||||
|
<button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
|
||||||
|
<BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size="24" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Nav */}
|
||||||
|
{isMenuOpen && (
|
||||||
|
<div className="md:hidden bg-white border-t p-4 space-y-4 dark:bg-dark-900 dark:border-dark-700">
|
||||||
|
<Link href="/" className="block text-gray-600 dark:text-gray-300">Home</Link>
|
||||||
|
<Link href="/search" className="block text-gray-600 dark:text-gray-300">Products</Link>
|
||||||
|
<Link href="/login" className="block text-gray-600 dark:text-gray-300">Login</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,166 +1,230 @@
|
|||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import type { ReactElement } from 'react';
|
import type { ReactElement } from 'react';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BaseButton from '../components/BaseButton';
|
import axios from 'axios';
|
||||||
import CardBox from '../components/CardBox';
|
import { mdiMagnify, mdiCartOutline, mdiArrowRight, mdiStar } from '@mdi/js';
|
||||||
import SectionFullScreen from '../components/SectionFullScreen';
|
import BaseIcon from '../components/BaseIcon';
|
||||||
import LayoutGuest from '../layouts/Guest';
|
import LayoutGuest from '../layouts/Guest';
|
||||||
import BaseDivider from '../components/BaseDivider';
|
import WebSiteHeader from '../components/WebPageComponents/Header';
|
||||||
import BaseButtons from '../components/BaseButtons';
|
import WebSiteFooter from '../components/WebPageComponents/Footer';
|
||||||
import { getPageTitle } from '../config';
|
import LoadingSpinner from '../components/LoadingSpinner';
|
||||||
import { useAppSelector } from '../stores/hooks';
|
import { useAppSelector } from '../stores/hooks';
|
||||||
import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
|
|
||||||
import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
|
|
||||||
|
|
||||||
|
export default function LandingPage() {
|
||||||
|
const [products, setProducts] = useState([]);
|
||||||
|
const [categories, setCategories] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [activeCategory, setActiveCategory] = useState('All');
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const projectName = useAppSelector((state) => state.style.projectName) || 'MobileStore';
|
||||||
|
|
||||||
export default function Starter() {
|
|
||||||
const [illustrationImage, setIllustrationImage] = useState({
|
|
||||||
src: undefined,
|
|
||||||
photographer: undefined,
|
|
||||||
photographer_url: undefined,
|
|
||||||
})
|
|
||||||
const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
|
|
||||||
const [contentType, setContentType] = useState('video');
|
|
||||||
const [contentPosition, setContentPosition] = useState('left');
|
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor);
|
|
||||||
|
|
||||||
const title = 'Mobile Commerce Store'
|
|
||||||
|
|
||||||
// Fetch Pexels image/video
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
const image = await getPexelsImage();
|
try {
|
||||||
const video = await getPexelsVideo();
|
setLoading(true);
|
||||||
setIllustrationImage(image);
|
const [productsRes, categoriesRes] = await Promise.all([
|
||||||
setIllustrationVideo(video);
|
axios.get('/products'),
|
||||||
|
axios.get('/categories')
|
||||||
|
]);
|
||||||
|
setProducts(productsRes.data.rows || []);
|
||||||
|
setCategories(categoriesRes.data.rows || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching data:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
fetchData();
|
fetchData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const imageBlock = (image) => (
|
const filteredProducts = products.filter(product => {
|
||||||
<div
|
const matchesCategory = activeCategory === 'All' ||
|
||||||
className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
|
product.categories?.some(c => c.name === activeCategory);
|
||||||
style={{
|
const matchesSearch = product.name?.toLowerCase().includes(searchQuery.toLowerCase());
|
||||||
backgroundImage: `${
|
return matchesCategory && matchesSearch;
|
||||||
image
|
});
|
||||||
? `url(${image?.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={image?.photographer_url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Photo by {image?.photographer} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const videoBlock = (video) => {
|
const featuredProducts = products.filter(p => p.is_featured).slice(0, 4);
|
||||||
if (video?.video_files?.length > 0) {
|
|
||||||
return (
|
|
||||||
<div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
|
|
||||||
<video
|
|
||||||
className='absolute top-0 left-0 w-full h-full object-cover'
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
muted
|
|
||||||
>
|
|
||||||
<source src={video?.video_files[0]?.link} type='video/mp4'/>
|
|
||||||
Your browser does not support the video tag.
|
|
||||||
</video>
|
|
||||||
<div className='flex justify-center w-full bg-blue-300/20 z-10'>
|
|
||||||
<a
|
|
||||||
className='text-[8px]'
|
|
||||||
href={video?.user?.url}
|
|
||||||
target='_blank'
|
|
||||||
rel='noreferrer'
|
|
||||||
>
|
|
||||||
Video by {video.user.name} on Pexels
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="flex flex-col min-h-screen bg-white dark:bg-dark-900">
|
||||||
style={
|
|
||||||
contentPosition === 'background'
|
|
||||||
? {
|
|
||||||
backgroundImage: `${
|
|
||||||
illustrationImage
|
|
||||||
? `url(${illustrationImage.src?.original})`
|
|
||||||
: 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
|
|
||||||
}`,
|
|
||||||
backgroundSize: 'cover',
|
|
||||||
backgroundPosition: 'left center',
|
|
||||||
backgroundRepeat: 'no-repeat',
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Starter Page')}</title>
|
<title>{projectName} - Best Mobile Shop</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg='violet'>
|
<WebSiteHeader projectName={projectName} />
|
||||||
<div
|
|
||||||
className={`flex ${
|
|
||||||
contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
|
|
||||||
} min-h-screen w-full`}
|
|
||||||
>
|
|
||||||
{contentType === 'image' && contentPosition !== 'background'
|
|
||||||
? imageBlock(illustrationImage)
|
|
||||||
: null}
|
|
||||||
{contentType === 'video' && contentPosition !== 'background'
|
|
||||||
? videoBlock(illustrationVideo)
|
|
||||||
: null}
|
|
||||||
<div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
|
|
||||||
<CardBox className='w-full md:w-3/5 lg:w-2/3'>
|
|
||||||
<CardBoxComponentTitle title="Welcome to your Mobile Commerce Store app!"/>
|
|
||||||
|
|
||||||
<div className="space-y-3">
|
<main className="flex-grow">
|
||||||
<p className='text-center text-gray-500'>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
|
{/* Hero Section */}
|
||||||
<p className='text-center text-gray-500'>For guides and documentation please check
|
<section className="relative bg-blue-600 text-white py-20 px-4 overflow-hidden">
|
||||||
your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
|
<div className="absolute top-0 right-0 -mt-20 -mr-20 w-64 h-64 bg-blue-500 rounded-full opacity-50 blur-3xl"></div>
|
||||||
|
<div className="container mx-auto relative z-10 text-center">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-extrabold mb-6">
|
||||||
|
Your Next Favorite Tech <br /> is Just a Click Away
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl text-blue-100 mb-8 max-w-2xl mx-auto">
|
||||||
|
Browse the latest smartphones, tablets, and accessories. Fast delivery and secure payments guaranteed.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="max-w-xl mx-auto flex bg-white rounded-full p-1 shadow-lg dark:bg-dark-800">
|
||||||
|
<div className="flex items-center pl-4 text-gray-400">
|
||||||
|
<BaseIcon path={mdiMagnify} size="24" />
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
<BaseButtons>
|
type="text"
|
||||||
<BaseButton
|
placeholder="Search for products..."
|
||||||
href='/login'
|
className="w-full py-3 px-4 rounded-full focus:outline-none text-gray-800 dark:bg-dark-800 dark:text-white"
|
||||||
label='Login'
|
value={searchQuery}
|
||||||
color='info'
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
className='w-full'
|
|
||||||
/>
|
/>
|
||||||
|
<button className="bg-blue-600 text-white px-8 py-3 rounded-full font-bold hover:bg-blue-700 transition-colors hidden sm:block">
|
||||||
|
Search
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</BaseButtons>
|
{/* Categories Chips */}
|
||||||
</CardBox>
|
<section className="py-8 bg-gray-50 dark:bg-dark-800 border-b dark:border-dark-700">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex overflow-x-auto pb-2 space-x-4 no-scrollbar">
|
||||||
|
<button
|
||||||
|
onClick={() => setActiveCategory('All')}
|
||||||
|
className={`px-6 py-2 rounded-full whitespace-nowrap font-medium transition-all ${
|
||||||
|
activeCategory === 'All'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-white text-gray-600 hover:bg-gray-100 dark:bg-dark-700 dark:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
All Products
|
||||||
|
</button>
|
||||||
|
{categories.map(cat => (
|
||||||
|
<button
|
||||||
|
key={cat.id}
|
||||||
|
onClick={() => setActiveCategory(cat.name)}
|
||||||
|
className={`px-6 py-2 rounded-full whitespace-nowrap font-medium transition-all ${
|
||||||
|
activeCategory === cat.name
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-white text-gray-600 hover:bg-gray-100 dark:bg-dark-700 dark:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cat.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
</section>
|
||||||
<div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
|
|
||||||
<p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
|
{/* Product Grid */}
|
||||||
<Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
|
<section className="py-16 container mx-auto px-4">
|
||||||
Privacy Policy
|
<div className="flex items-center justify-between mb-8">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-800 dark:text-white">
|
||||||
|
{activeCategory === 'All' ? 'Featured Products' : activeCategory}
|
||||||
|
</h2>
|
||||||
|
<Link href="/search" className="text-blue-600 font-semibold flex items-center hover:underline">
|
||||||
|
View All <BaseIcon path={mdiArrowRight} size="20" />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex justify-center py-20">
|
||||||
|
<LoadingSpinner />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{filteredProducts.length > 0 ? filteredProducts.map(product => (
|
||||||
|
<div key={product.id} className="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 overflow-hidden dark:bg-dark-800 dark:border-dark-700 flex flex-col h-full">
|
||||||
|
<Link href={`/products/products-view/?id=${product.id}`} className="relative h-64 bg-gray-100 block overflow-hidden">
|
||||||
|
{/* Fallback image if no gallery_images */}
|
||||||
|
<img
|
||||||
|
src={product.gallery_images?.[0]?.url || `https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&w=600`}
|
||||||
|
alt={product.name}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
{product.is_featured && (
|
||||||
|
<span className="absolute top-4 left-4 bg-amber-500 text-white text-xs font-bold px-3 py-1 rounded-full uppercase">
|
||||||
|
Featured
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
<div className="p-6 flex flex-col flex-grow">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-sm text-gray-500 font-medium">
|
||||||
|
{product.categories?.[0]?.name || 'Electronics'}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center text-amber-500">
|
||||||
|
<BaseIcon path={mdiStar} size="16" />
|
||||||
|
<span className="text-xs font-bold ml-1">4.8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Link href={`/products/products-view/?id=${product.id}`}>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800 dark:text-white mb-2 group-hover:text-blue-600 transition-colors truncate">
|
||||||
|
{product.name}
|
||||||
|
</h3>
|
||||||
|
</Link>
|
||||||
|
<p className="text-gray-500 text-sm mb-4 line-clamp-2 dark:text-gray-400">
|
||||||
|
{product.short_description || 'High-quality product for your everyday needs.'}
|
||||||
|
</p>
|
||||||
|
<div className="mt-auto flex items-center justify-between">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-2xl font-black text-gray-900 dark:text-white">
|
||||||
|
${product.base_price}
|
||||||
|
</span>
|
||||||
|
{product.compare_at_price && (
|
||||||
|
<span className="text-sm text-gray-400 line-through">
|
||||||
|
${product.compare_at_price}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button className="bg-gray-900 text-white p-3 rounded-xl hover:bg-blue-600 transition-colors shadow-sm dark:bg-dark-700 dark:hover:bg-blue-600">
|
||||||
|
<BaseIcon path={mdiCartOutline} size="24" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)) : (
|
||||||
|
<div className="col-span-full py-20 text-center">
|
||||||
|
<p className="text-gray-500 text-xl">No products found for this category.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features Section */}
|
||||||
|
<section className="bg-gray-50 py-16 dark:bg-dark-800">
|
||||||
|
<div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
|
||||||
|
<div>
|
||||||
|
<div className="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-blue-900/30">
|
||||||
|
<BaseIcon path={mdiStar} size="32" className="text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 dark:text-white">Premium Quality</h3>
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">We only sell products from trusted brands with high customer ratings.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-green-900/30">
|
||||||
|
<BaseIcon path={mdiCartOutline} size="32" className="text-green-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 dark:text-white">Fast Delivery</h3>
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">Get your tech delivered to your doorstep within 24-48 hours.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="w-16 h-16 bg-amber-100 rounded-2xl flex items-center justify-center mx-auto mb-6 dark:bg-amber-900/30">
|
||||||
|
<BaseIcon path={mdiStar} size="32" className="text-amber-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-3 dark:text-white">Secure Payments</h3>
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">All transactions are encrypted and processed through secure gateways.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<WebSiteFooter projectName={projectName} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Starter.getLayout = function getLayout(page: ReactElement) {
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
||||||
return <LayoutGuest>{page}</LayoutGuest>;
|
return <LayoutGuest>{page}</LayoutGuest>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user