Landing Page for E-commerce

"I want a landing page that incrporates the following design elements with a neo-brutalism lens : Full-Screen Imagery: The homepage prominently features large, high-quality images that span the entire viewport, creating an immersive experience.​ Smooth Scrolling and Parallax Effects: As users navigate, the site exhibits smooth scrolling with subtle parallax effects, adding depth and engagement.​ Responsive Design: The layout adapts seamlessly across devices, ensuring a consistent experience on desktops, tablets, and smartphones.​ Interactive Elements: Features like image sliders and hover effects enhance user interaction. Using the following color pallette and fonts : --color-base-100: hsl(40, 96%, 10%); --color-base-200: hsl(41, 95%, 22%); --color-base-300: hsl(256, 55%, 23%); --color-base-content: hsl(255, 55%, 77%); --color-primary: hsl(41, 94%, 42%); --color-primary-content: hsl(41, 94%, 6%); --color-secondary: hsl(255, 55%, 52%); --color-secondary-content: hsl(41, 96%, 82%); --color-accent: hsl(309, 100%, 42%); --color-accent-content: hsl(41, 94%, 6%); --color-neutral: hsl(256, 55%, 23%); --color-neutral-content: hsl(41, 96%, 82%); --color-info: oklch(98% 0.003 247.858); --color-info-content: oklch(97% 0.014 254.604); --color-success: oklch(98% 0.003 247.858); --color-success-content: oklch(98% 0.014 180.72); --color-warning: oklch(98% 0.003 247.858); --color-warning-content: oklch(98% 0.026 102.212); --color-error: oklch(98% 0.003 247.858); --color-error-content: oklch(96% 0.015 12.422); /* Primary heading - Montserrat Alternate */ h1 { font-family: 'Montserrat Alternate', sans-serif; font-size: 3rem; /* 48px */ letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; } /* Secondary headings - Montserrat Alternate */ h2, h3, h4 { font-family: 'Montserrat Alternate', sans-serif; font-weight: 600; } h2 { font-size: 2.25rem; /* 36px */ letter-spacing: -0.01em; line-height: 1.2; } h3 { font-size: 1.75rem; /* 28px */ letter-spacing: 0; line-height: 1.3; } /* Long-form text - Dosis */ .long-text { font-family: 'Dosis', sans-serif; font-size: 1.125rem; /* 18px */ letter-spacing: 0.01em; line-height: 1.65; font-weight: 400; } /* Special occasion - Glock Grotesque */ .special-text { font-family: 'Glock Grotesque', sans-serif; font-size: 1.25rem; /* 20px */ letter-spacing: 0.02em; line-height: 1.4; font-weight: 500; } /* Special occasion headings */ .special-heading { font-family: 'Glock Grotesque', sans-serif; font-size: 2.5rem; /* 40px */ letter-spacing: -0.01em; line-height: 1.2; font-weight: 700; text-transform: uppercase; /* Optional for extra impact */ }"