Skip to content

Commit

Permalink
made misc section more sleek
Browse files Browse the repository at this point in the history
  • Loading branch information
@KeshariPiyush24
KeshariPiyush24 committed Oct 20, 2024
1 parent 304d242 commit b9639d6
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 51 deletions.
51 changes: 33 additions & 18 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCaretDown, faCaretRight, faIndianRupeeSign } from '@fortawesome/free-solid-svg-icons';
import { faCaretDown, faCaretRight, faIndianRupeeSign, faGlobe, faPhone, faEnvelope, faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';

function App() {
Expand All @@ -14,7 +14,7 @@ function App() {

const fetchProducts = async () => {
try {
const response = await axios.get('http://localhost:3000/common/products?status=ALL');
const response = await axios.get('http://api.newrajshreesweets.com/common/products?status=ALL');
const products = response.data.data;

// Group products by category and sort products within each category
Expand Down Expand Up @@ -61,35 +61,50 @@ function App() {
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f3d9ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d9e3ff;stop-opacity:1" />
<stop offset="0%" style="stop-color:#ffe4e6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#fef3c7;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#grad)"/>
<text x="100" y="90" font-family="Arial, sans-serif" font-size="18" fill="#2d3436" text-anchor="middle" font-weight="bold">Image not found</text>
<text x="100" y="130" font-family="Arial, sans-serif" font-size="24" fill="#6c5ce7" text-anchor="middle">(•︵•)</text>
<text x="100" y="90" font-family="Arial, sans-serif" font-size="18" fill="#e11d48" text-anchor="middle" font-weight="bold">Image not found</text>
<text x="100" y="130" font-family="Arial, sans-serif" font-size="24" fill="#e11d48" text-anchor="middle">•︵•</text>
</svg>
`;
e.target.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgPlaceholder)}`;
};

if (loading) {
return <div className="loading">Loading...</div>;
return <div className="loading">Loading delicious treats...</div>;
}

return (
<div className="menu-container">
<div className="misc-details">
<img src={require('./assets/logo.png')} alt='logo' className='logo' />
<h1 className='text-3xl font-bold menu-title mb-3'>NEW RAJSHREE SWEETS PRIVATE LIMITED</h1>
<p className='text-xl font-bold'>S 6/109-110 ORDERLY BAZAR ROAD</p>
<p className='text-xl font-bold'>GOLGHAR KACHAHARI</p>
<p className='text-xl font-bold mb-5'>VARANASI - 221002</p>
<p className='text-l'><span className='font-bold'>CIN :</span> U15490UP2021PTC156096</p>
<p className='text-l'><span className='font-bold'>GSTIN :</span> 09AAHCN9500A1ZP</p>
<p className='text-l'><span className='font-bold'>FSSAI LIC NO :</span> 12714038000517</p>
<p className='text-l'><span className='font-bold'>Phone :</span> 0542-2504477</p>
<p className='text-l'><span className='font-bold'>Email :</span> [email protected]</p>
<h1 className='text-3xl md:text-4xl font-bold menu-title'>NEW RAJSHREE SWEETS</h1>
<div className="contact-info">
<div className="contact-item">
<FontAwesomeIcon icon={faMapMarkerAlt} className="contact-icon" />
<p>S 6/109-110 Orderly Bazar Road, Golghar Kachahari, Varanasi - 221002</p>
</div>
<div className="contact-item">
<FontAwesomeIcon icon={faPhone} className="contact-icon" />
<a href="tel:+919792677770">+91-9792677770</a>
</div>
<div className="contact-item">
<FontAwesomeIcon icon={faEnvelope} className="contact-icon" />
<a href="mailto:[email protected]">[email protected]</a>
</div>
<div className="contact-item">
<FontAwesomeIcon icon={faGlobe} className="contact-icon" />
<a href="https://newrajshreesweets.com" target="_blank" rel="noopener noreferrer">newrajshreesweets.com</a>
</div>
</div>
<div className="company-info">
<p><span>CIN:</span> U15490UP2021PTC156096</p>
<p><span>GSTIN:</span> 09AAHCN9500A1ZP</p>
<p><span>FSSAI:</span> 12714038000517</p>
</div>
</div>
{Object.keys(categories).map((category) => (
<div key={category} className="category-container">
Expand All @@ -98,7 +113,7 @@ function App() {
<FontAwesomeIcon icon={showMenu[category] ? faCaretDown : faCaretRight} className='caret' />
</div>
{showMenu[category] && (
<div className="items-container grid">
<div className="items-container">
{categories[category].map((item) => (
<div key={item.id} className="item-wrapper">
<img
Expand All @@ -109,7 +124,7 @@ function App() {
/>
<div className="item-details">
<h3 className='item-title'>{item.name}</h3>
<p className='shelf-life'>Shelf Life: {item.shelfLife} Days</p>
<p className='shelf-life'><strong>Shelf Life</strong>: {item.shelfLife} Days</p>
<p className='item-rate'>
<FontAwesomeIcon icon={faIndianRupeeSign} /> {item.price.toLocaleString('en-IN')} / {item.quantityType}
</p>
Expand Down
160 changes: 127 additions & 33 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@
@import "tailwindcss/utilities";

:root {
--primary-color: #f8f9fa;
--secondary-color: #6c5ce7;
--text-color: #2d3436;
--palette-1: #e11d48;
--palette-2: #f59e0b;
--text-color: #333333;
--background-color: #f8f9fa;
--item-bg-color: #ffffff;
--border-color: #e0e0e0;
}
Expand All @@ -17,13 +18,13 @@ body {
margin: 0;
padding: 0;
text-align: center;
background-color: var(--primary-color);
background-color: var(--background-color);
color: var(--text-color);
}

.logo {
width: 150px;
margin: 20px auto;
width: 120px;
margin: 0 auto 15px;
display: block;
}

Expand All @@ -35,82 +36,175 @@ body {

.misc-details {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 40px;
padding: 20px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}

.menu-title {
color: var(--palette-1);
margin-bottom: 15px;
}

.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}

.contact-item {
display: flex;
align-items: center;
font-size: 0.9rem;
color: var(--text-color);
}

.contact-icon {
color: var(--palette-2);
margin-right: 8px;
font-size: 1rem;
}

.contact-item a {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s ease;
}

.contact-item a:hover {
color: var(--palette-2);
}

.company-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
font-size: 0.8rem;
color: #666;
}

.company-info p {
margin: 0;
}

.company-info span {
font-weight: 600;
color: var(--palette-1);
}

@media (max-width: 768px) {
.misc-details {
padding: 15px;
}

.menu-title {
font-size: 1.5rem;
}

.contact-info {
flex-direction: column;
align-items: center;
}

.company-info {
flex-direction: column;
align-items: center;
}
}

.category-container {
margin-top: 30px;
margin-top: 40px;
}

.category-title-wrapper {
background-color: var(--secondary-color);
background-color: var(--palette-2);
color: #FFF;
padding: 15px 20px;
border-radius: 10px;
font-size: 1.2rem;
padding: 15px 25px;
border-radius: 15px;
font-size: 1.3rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-title-wrapper:hover {
background-color: #5b4cc7;
background-color: #e69009;
transform: translateY(-2px);
}

.items-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
margin-top: 25px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-top: 30px;
}

.item-wrapper {
background-color: var(--item-bg-color);
border-radius: 15px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}

.item-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.item-image {
width: 100%;
height: 200px;
height: 220px;
object-fit: cover;
}

.item-details {
padding: 20px;
padding: 25px;
}

.item-title {
font-size: 1.1rem;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--secondary-color);
margin-bottom: 12px;
color: var(--palette-1);
}

.shelf-life {
font-size: 0.9rem;
font-size: 0.95rem;
color: #6b7280;
margin-bottom: 10px;
margin-bottom: 12px;
}

.item-rate {
font-size: 1.1rem;
font-size: 1.2rem;
font-weight: 700;
color: var(--text-color);
color: var(--palette-2);
}

.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 1.5rem;
color: var(--secondary-color);
font-size: 1.8rem;
color: var(--palette-1);
}

.caret {
transition: transform 0.3s ease;
}

.category-title-wrapper.active .caret {
transform: rotate(180deg);
}

0 comments on commit b9639d6

Please sign in to comment.