Skip to content

Commit 32668d7

Browse files
w3bdesignw3bdesign
committed
Improve overall design
1 parent 5c481e0 commit 32668d7

File tree

7 files changed

+91
-92
lines changed

7 files changed

+91
-92
lines changed

‎src/components/Footer/Footer.component.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
* @returns {JSX.Element} - Rendered component
55
*/
66
const Footer = () => (
7-
<footer className="bg-white mb-4 hidden md:block px-4">
8-
<div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 border border-gray-200 rounded lg:max-w-[1490px]">
9-
<div className="text-gray-600 mx-auto">
10-
&copy; {new Date().getFullYear()} Daniel / w3bdesign
7+
<footer className="w-full bg-white border-t border-gray-200 mt-12">
8+
<div className="container mx-auto px-6">
9+
<div className="py-4">
10+
<div className="text-gray-600 text-center">
11+
&copy; {new Date().getFullYear()} Daniel / w3bdesign
12+
</div>
1113
</div>
1214
</div>
1315
</footer>

‎src/components/Header/Header.component.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ const Header = ({ title }: IHeaderProps) => (
2525
key="pagetitle"
2626
/>
2727
</Head>
28-
<Navbar />
28+
<div className="container mx-auto px-6">
29+
<Navbar />
30+
</div>
2931
</>
3032
);
3133

‎src/components/Header/Navbar.component.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,46 +16,30 @@ import useIsMobile from '@/utils/hooks/useIsMobile';
1616
const Navbar = () => {
1717
const isMobile = useIsMobile();
1818
return (
19-
<header>
20-
<nav id="header" className="top-0 z-50 w-full py-1 bg-white ">
21-
<div className="container flex flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96">
22-
<div
23-
className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1"
24-
id="menu"
25-
>
26-
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0">
19+
<header className="border-b border-gray-200">
20+
<nav id="header" className="top-0 z-50 w-full bg-white">
21+
<div className="container flex flex-col md:flex-row items-center justify-between px-6 py-4 mx-auto mt-0">
22+
<div className="order-3 hidden w-full md:flex md:items-center md:w-auto md:order-1" id="menu">
23+
<ul className="items-center justify-between pt-4 text-base text-gray-700 md:flex md:pt-0 space-x-8">
2724
<li>
2825
<Link href="/produkter">
29-
<span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
26+
<span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
3027
Produkter
3128
</span>
3229
</Link>
3330
</li>
3431
<li>
3532
<Link href="/kategorier">
36-
<span className="inline-block py-2 pr-4 text-xl font-bold no-underline hover:underline">
33+
<span className="inline-block py-2 text-sm uppercase tracking-wider hover:text-gray-500 transition-colors">
3734
Kategorier
3835
</span>
3936
</Link>
4037
</li>
4138
</ul>
4239
</div>
43-
<div className="order-1 md:order-2 md:hidden lg:block">
40+
<div className="order-1 md:order-2">
4441
<Link href="/">
45-
<span className="flex items-center text-xl font-bold tracking-wide text-gray-800 no-underline hover:no-underline ">
46-
<svg
47-
className="mr-2 text-gray-800 fill-current"
48-
xmlns="https://www.w3.org/2000/svg"
49-
width="24"
50-
height="24"
51-
viewBox="0 0 24 24"
52-
aria-label="Nettbutikk logo"
53-
>
54-
<path
55-
d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
56-
aria-label="Nettbutikk logo"
57-
/>
58-
</svg>
42+
<span className="flex items-center text-xl font-bold tracking-widest text-gray-900 no-underline hover:text-gray-700 transition-colors">
5943
NETTBUTIKK
6044
</span>
6145
</Link>

‎src/components/Index/Hero.component.tsx‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,36 @@
1+
import Image from 'next/image';
2+
import Link from 'next/link';
3+
14
/**
25
* Renders Hero section for Index page
3-
* @function PageTitle
6+
* @function Hero
47
* @returns {JSX.Element} - Rendered component
58
*/
69
const Hero = () => (
7-
<section
8-
id="hero"
9-
className="flex w-full mx-auto bg-right bg-cover mt-14 md:pt-0 md:items-center bg-hero-background h-[24rem] lg:max-w-[1490px]"
10-
>
11-
<div className="container mx-auto">
12-
<div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
13-
<h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
10+
<section className="relative w-full h-[60vh] overflow-hidden">
11+
<div className="absolute inset-0">
12+
<Image
13+
src="/images/hero.jpg"
14+
alt="Hero image"
15+
fill
16+
priority
17+
className="object-cover object-center"
18+
quality={90}
19+
/>
20+
<div className="absolute inset-0 bg-black bg-opacity-30" />
21+
</div>
22+
23+
<div className="relative h-full container mx-auto flex items-center">
24+
<div className="max-w-xl">
25+
<h1 className="text-3xl md:text-4xl lg:text-5xl font-light text-white mb-6">
1426
Stripete Zig Zag Pute Sett
1527
</h1>
16-
17-
<a
18-
className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
19-
href="#"
28+
<Link
29+
href="/produkter"
30+
className="inline-block px-8 py-4 text-sm tracking-wider uppercase bg-white text-gray-900 hover:bg-gray-100 transition-colors duration-200"
2031
>
21-
se utvalget
22-
</a>
32+
Se Utvalget
33+
</Link>
2334
</div>
2435
</div>
2536
</section>

‎src/components/Layout/Layout.component.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,21 @@ const Layout = ({ children, title }: ILayoutProps) => {
5757

5858
return (
5959
<div className="flex flex-col min-h-screen w-full mx-auto">
60-
<div className="container min-w-[140vw] sm:min-w-[95vw] md:px-4 lg:px-6 py-2 lg:max-w-[1600px] mx-auto">
61-
<Header title={title} />
62-
<PageTitle title={title} />
63-
<main className="flex-grow">{children}</main>
64-
<Footer />
65-
<Stickynav />
66-
</div>
60+
<Header title={title} />
61+
{title === 'Hjem' ? (
62+
<>
63+
<main className="flex-grow">
64+
{children}
65+
</main>
66+
</>
67+
) : (
68+
<div className="container mx-auto px-6">
69+
<PageTitle title={title} />
70+
<main className="flex-grow">{children}</main>
71+
</div>
72+
)}
73+
<Footer />
74+
<Stickynav />
6775
</div>
6876
);
6977
};

‎src/components/Layout/PageTitle.component.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,12 @@ interface IPageTitleProps {
1111
* @returns {JSX.Element} - Rendered component
1212
*/
1313
const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
14-
<section
15-
className={`container ${
16-
marginLeft ? 'p-4' : 'p-0'
17-
} pl-4 mx-auto mt-24 text-center bg-white`}
18-
>
19-
<span className="py-2 text-2xl font-bold tracking-wide text-center text-gray-800 no-underline uppercase hover:no-underline">
20-
{title}
21-
</span>
14+
<section className="w-full bg-white border-b border-gray-200">
15+
<div className="container mx-auto py-12 px-6">
16+
<h1 className="text-2xl text-center tracking-wider text-gray-900 uppercase">
17+
{title}
18+
</h1>
19+
</div>
2220
</section>
2321
);
2422

‎src/components/Product/DisplayProducts.component.tsx‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,10 @@ interface IDisplayProductsProps {
4747
*/
4848

4949
const DisplayProducts = ({ products }: IDisplayProductsProps) => (
50-
<section className="container mx-auto bg-white">
50+
<section className="container mx-auto bg-white py-12">
5151
<div
5252
id="product-container"
53-
className="flex flex-wrap items-center mb-[120px] md:mb-0"
53+
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
5454
>
5555
{products ? (
5656
products.map(
@@ -77,67 +77,61 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
7777
}
7878

7979
return (
80-
<div
81-
key={uuidv4()}
82-
className="flex flex-col p-6 md:w-1/2 xl:w-1/4"
83-
>
80+
<div key={uuidv4()} className="group">
8481
<Link
8582
href={`/produkt/${encodeURIComponent(
8683
slug,
8784
)}?id=${encodeURIComponent(databaseId)}`}
8885
>
89-
<span>
86+
<div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
9087
{image ? (
9188
<img
9289
id="product-image"
93-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
90+
className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
9491
alt={name}
9592
src={image.sourceUrl}
9693
/>
9794
) : (
9895
<img
9996
id="product-image"
100-
className="transition duration-500 ease-in-out transform cursor-pointer hover:grow hover:shadow-lg hover:scale-105"
97+
className="w-full h-full object-cover object-center transition duration-300 group-hover:scale-105"
10198
alt={name}
102-
src={
103-
process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL
104-
}
99+
src={process.env.NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL}
105100
/>
106101
)}
107-
</span>
102+
</div>
108103
</Link>
109104
<Link
110105
href={`/produkt/${encodeURIComponent(
111106
slug,
112107
)}?id=${encodeURIComponent(databaseId)}`}
113108
>
114109
<span>
115-
<div className="flex justify-center pt-3">
116-
<p className="font-bold text-center cursor-pointer text-2xl">
110+
<div className="mt-4">
111+
<p className="text-base text-center cursor-pointer hover:text-gray-600 transition-colors">
117112
{name}
118113
</p>
119114
</div>
120115
</span>
121116
</Link>
122-
{/* Display sale price when on sale */}
123-
{onSale && (
124-
<div className="flex justify-center">
125-
<div className="pt-1 text-gray-900 text-xl">
126-
{variations && filteredVariantPrice(price, '')}
127-
{!variations && salePrice}
117+
<div className="mt-2 text-center">
118+
{onSale ? (
119+
<div className="flex justify-center items-center space-x-2">
120+
<span className="text-red-600">
121+
{variations && filteredVariantPrice(price, '')}
122+
{!variations && salePrice}
123+
</span>
124+
<span className="text-gray-500 text-sm line-through">
125+
{variations && filteredVariantPrice(price, 'right')}
126+
{!variations && regularPrice}
127+
</span>
128128
</div>
129-
<div className="pt-1 ml-2 text-gray-500 line-through text-lg">
130-
{variations && filteredVariantPrice(price, 'right')}
131-
{!variations && regularPrice}
132-
</div>
133-
</div>
134-
)}
135-
{/* Display regular price when not on sale */}
136-
{!onSale && (
137-
<p className="pt-1 text-center text-gray-900 text-xl">
138-
{price}
139-
</p>
140-
)}
129+
) : (
130+
<span className="text-gray-900">
131+
{price}
132+
</span>
133+
)}
134+
</div>
141135
</div>
142136
);
143137
},

0 commit comments

Comments
 (0)