Added google analytics
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import '../globals.css';
|
||||
|
||||
import { GoogleAnalytics } from '@next/third-parties/google';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { Footer } from '@/components/footer';
|
||||
@ -27,6 +28,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
|
||||
</RegionProvider>
|
||||
<Footer />
|
||||
</body>
|
||||
<GoogleAnalytics gaId='G-R3FGFLLVRX' />
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import '../globals.css';
|
||||
|
||||
import { GoogleAnalytics } from '@next/third-parties/google';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { Footer } from '@/components/footer';
|
||||
@ -27,6 +28,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
|
||||
</RegionProvider>
|
||||
<Footer />
|
||||
</body>
|
||||
<GoogleAnalytics gaId='G-R3FGFLLVRX' />
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
.pillButton {
|
||||
@apply relative bg-white text-black rounded-full px-6 py-2 text-lg font-sans flex items-center justify-center shadow-md transition duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:not(:hover) .arrow {
|
||||
@apply hidden
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@apply ml-2 transform -translate-x-5 opacity-0 transition-transform duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:hover .arrow {
|
||||
@apply transform duration-300 translate-x-0 opacity-100 transition-transform ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:hover {
|
||||
@apply shadow-lg transform duration-300 transition-transform ease-in-out;
|
||||
}
|
||||
|
||||
@apply relative bg-white text-black rounded-full px-6 py-2 text-lg font-sans flex items-center justify-center shadow-md transition duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:not(:hover) .arrow {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
@apply ml-2 transform -translate-x-5 opacity-0 transition-transform duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:hover .arrow {
|
||||
@apply transform duration-300 translate-x-0 opacity-100 transition-transform ease-in-out;
|
||||
}
|
||||
|
||||
.pillButton:hover {
|
||||
@apply shadow-lg transform duration-300 transition-transform ease-in-out;
|
||||
}
|
||||
|
||||
/* Button style */
|
||||
/* .pillButton {
|
||||
@ -36,17 +35,17 @@
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
} */
|
||||
|
||||
/* Arrow style */
|
||||
/* .arrow {
|
||||
|
||||
/* Arrow style */
|
||||
/* .arrow {
|
||||
margin-left: 10px;
|
||||
transform: translateX(-20px);
|
||||
opacity: 0;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
} */
|
||||
|
||||
/* Hover effect */
|
||||
/* .pillButton:hover {
|
||||
|
||||
/* Hover effect */
|
||||
/* .pillButton:hover {
|
||||
background-color: black;
|
||||
color: white;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
@ -56,4 +55,4 @@
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
.productImage {
|
||||
width: 100%; /* Set the width of the image */
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%; /* Make the image circular */
|
||||
object-fit: cover; /* Ensure the image covers the container */
|
||||
margin-right: 1.5rem; /* Space between image and product name */
|
||||
display: inline-block;
|
||||
box-shadow: .5rem .5rem 1rem rgba(0,0,0,.1);
|
||||
}
|
||||
.productImage {
|
||||
width: 100%; /* Set the width of the image */
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%; /* Make the image circular */
|
||||
object-fit: cover; /* Ensure the image covers the container */
|
||||
margin-right: 1.5rem; /* Space between image and product name */
|
||||
display: inline-block;
|
||||
box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
.productImage {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (width >= 768px) {
|
||||
.productImage {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 2rem /* 32px */;
|
||||
/* grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4 columns */
|
||||
|
||||
padding-top: 3rem /* 48px */;
|
||||
padding-bottom: 3rem /* 48px */;
|
||||
padding-left: 1rem /* 16px */;
|
||||
padding-right: 1rem /* 16px */;
|
||||
|
||||
border-top-width: 2px;
|
||||
border-color: hsl(0, 0%, 0%);
|
||||
background-color: hsl(20, 18%, 97%);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 2rem /* 32px */;
|
||||
/* grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4 columns */
|
||||
|
||||
padding-top: 3rem /* 48px */;
|
||||
padding-bottom: 3rem /* 48px */;
|
||||
padding-left: 1rem /* 16px */;
|
||||
padding-right: 1rem /* 16px */;
|
||||
|
||||
|
||||
border-top-width: 2px;
|
||||
border-color: hsl(0, 0%, 0%);
|
||||
background-color: hsl(20, 18%, 97%);
|
||||
grid-template-columns: repeat(2, 1fr); /* Still 4 columns */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* Still 4 columns */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,81 +1,80 @@
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 1.5em;
|
||||
left: 2em;
|
||||
right: 2em;
|
||||
background-color: white;
|
||||
border-radius: 0px;
|
||||
padding: 1em 2em;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .center a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.navbar-center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
margin: 1em 0;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
top: 1.5em;
|
||||
left: 2em;
|
||||
right: 2em;
|
||||
background-color: white;
|
||||
border-radius: 0px;
|
||||
padding: 1em 2em;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0.5em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar .center a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
margin: 0 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
.center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.navbar-center .logo {
|
||||
height: 50px; /* Adjust the logo size as needed */
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar {
|
||||
border-radius: 25px; /* Makes the corners more rounded */
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 1.1em;
|
||||
|
||||
.navbar-center {
|
||||
margin: 1em 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 25px; /* Makes the corners more rounded */
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.fa-search,
|
||||
.fa-user {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
@ -1,78 +1,76 @@
|
||||
.navBar {
|
||||
@apply transition-all duration-300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
align-items: stretch;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 2rem;
|
||||
z-index: 1000;
|
||||
background: hsl(0 0% 100% / 1);
|
||||
/* background: hsl(0 0% 100% / .2);
|
||||
@apply transition-all duration-300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
align-items: stretch;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 2rem;
|
||||
z-index: 1000;
|
||||
background: hsl(0 0% 100% / 1);
|
||||
/* background: hsl(0 0% 100% / .2);
|
||||
backdrop-filter: blur(1rem); */
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (width < 768px) {
|
||||
.navBar {
|
||||
flex-direction: column;
|
||||
right: 30%;
|
||||
bottom: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 350ms ease-out;
|
||||
padding: min(30vh, 16rem) 2em;
|
||||
}
|
||||
.mobileNavToggle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 2rem;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
aspect-ratio: 1;
|
||||
z-index: 9999;
|
||||
background-image: url('/icons/menu.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain; /* Adjust as needed: cover, 100% 100%, etc. */
|
||||
background-position: center;
|
||||
}
|
||||
.navBar[data-visible='true'] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.mobileNavToggle[aria-expanded='true'] {
|
||||
background-image: url('/icons/close.svg');
|
||||
}
|
||||
}
|
||||
@media screen and (width >= 768px) {
|
||||
.navBar {
|
||||
right: 0;
|
||||
flex-direction: row;
|
||||
height: 5rem;
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
.navBar > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap, 2rem);
|
||||
}
|
||||
|
||||
@media screen and (width < 768px) {
|
||||
.navBar {
|
||||
flex-direction: column;
|
||||
right: 30%;
|
||||
bottom: 0;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 350ms ease-out;
|
||||
padding: min(30vh, 16rem) 2em;
|
||||
}
|
||||
.mobileNavToggle {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 2rem;
|
||||
top: 2rem;
|
||||
left: 2rem;
|
||||
aspect-ratio: 1;
|
||||
z-index: 9999;
|
||||
background-image: url('/icons/menu.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain; /* Adjust as needed: cover, 100% 100%, etc. */
|
||||
background-position: center;
|
||||
}
|
||||
.navBar[data-visible="true"] {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.mobileNavToggle[aria-expanded="true"] {
|
||||
background-image: url('/icons/close.svg');
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (width >= 768px) {
|
||||
.navBar {
|
||||
right: 0;
|
||||
flex-direction: row;
|
||||
height: 5rem;
|
||||
border-radius:0 0 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
.navBar > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--gap, 2rem);
|
||||
}
|
||||
|
||||
/* .navBarInitial {
|
||||
/* .navBarInitial {
|
||||
@apply bg-white/30 text-black rounded-lg shadow-lg absolute;
|
||||
}
|
||||
|
||||
.navBarScrolledUp {
|
||||
@apply bg-gradient-to-b from-black/30 to-black/10 text-white rounded-lg fixed;
|
||||
} */
|
||||
|
||||
/* Custom style */
|
||||
.navBarScrolledUp {
|
||||
backdrop-filter: blur(10px); /* Adds a blur effect */
|
||||
}
|
||||
|
||||
/* Custom style */
|
||||
.navBarScrolledUp {
|
||||
backdrop-filter: blur(10px); /* Adds a blur effect */
|
||||
}
|
||||
|
||||
/* Transparent / almost transparent to white
|
||||
.navBarInitial {
|
||||
@ -82,4 +80,4 @@
|
||||
.navBarScrolledUp {
|
||||
@apply bg-white text-black rounded-lg shadow-lg fixed;
|
||||
}
|
||||
*/
|
||||
*/
|
||||
|
||||
@ -3,5 +3,4 @@
|
||||
transition-property: transform;
|
||||
transition-duration: 1400ms;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user