adrianhajdin · April 5, 2025 12:55 · Aug 18, 2023 · Aug 18, 2023
diff --git a/script.js b/script.js
@@ -0,0 +1,15 @@
+// To showcase the demo of dark theme. Copy paste :)
+<script type="text/javascript">
+  document.addEventListener("DOMContentLoaded", () => {
+    const toggleDark = document.getElementById('toggleDark')
+    toggleDark.addEventListener('click', function() {
+      if(document.documentElement.classList.includes('dark')) {
+        document.documentElement.classList.remove('dark')
+      }
+      else {
+        document.documentElement.classList.add('dark')
+      }
+      alert("click!")
+    });
+  });
+</script>
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "react/prop-types": 0
+  },
+}
diff --git a/constants.index.js b/constants.index.js
@@ -0,0 +1,124 @@
+import { facebook, instagram, shieldTick, support, truckFast, twitter } from "../assets/icons";
+import { bigShoe1, bigShoe2, bigShoe3, customer1, customer2, shoe4, shoe5, shoe6, shoe7, thumbnailShoe1, thumbnailShoe2, thumbnailShoe3 } from "../assets/images";
+
+export const navLinks = [
+    { href: "#home", label: "Home" },
+    { href: "#about-us", label: "About Us" },
+    { href: "#products", label: "Products" },
+    { href: "#contact-us", label: "Contact Us" },
+];
+
+export const shoes = [
+    {
+        thumbnail: thumbnailShoe1,
+        bigShoe: bigShoe1,
+    },
+    {
+        thumbnail: thumbnailShoe2,
+        bigShoe: bigShoe2,
+    },
+    {
+        thumbnail: thumbnailShoe3,
+        bigShoe: bigShoe3,
+    },
+];
+
+export const statistics = [
+    { value: '1k+', label: 'Brands' },
+    { value: '500+', label: 'Shops' },
+    { value: '250k+', label: 'Customers' },
+];
+
+export const products = [
+    {
+        imgURL: shoe4,
+        name: "Nike Air Jordan-01",
+        price: "$200.20",
+    },
+    {
+        imgURL: shoe5,
+        name: "Nike Air Jordan-10",
+        price: "$210.20",
+    },
+    {
+        imgURL: shoe6,
+        name: "Nike Air Jordan-100",
+        price: "$220.20",
+    },
+    {
+        imgURL: shoe7,
+        name: "Nike Air Jordan-001",
+        price: "$230.20",
+    },
+];
+
+export const services = [
+    {
+        imgURL: truckFast,
+        label: "Free shipping",
+        subtext: "Enjoy seamless shopping with our complimentary shipping service."
+    },
+    {
+        imgURL: shieldTick,
+        label: "Secure Payment",
+        subtext: "Experience worry-free transactions with our secure payment options."
+    },
+    {
+        imgURL: support,
+        label: "Love to help you",
+        subtext: "Our dedicated team is here to assist you every step of the way."
+    },
+];
+
+export const reviews = [
+    {
+        imgURL: customer1,
+        customerName: 'Morich Brown',
+        rating: 4.5,
+        feedback: "The attention to detail and the quality of the product exceeded my expectations. Highly recommended!"
+    },
+    {
+        imgURL: customer2,
+        customerName: 'Lota Mongeskar',
+        rating: 4.5,
+        feedback: "The product not only met but exceeded my expectations. I'll definitely be a returning customer!"
+    }
+];
+
+
+export const footerLinks = [
+    {
+        title: "Products",
+        links: [
+            { name: "Air Force 1", link: "/" },
+            { name: "Air Max 1", link: "/" },
+            { name: "Air Jordan 1", link: "/" },
+            { name: "Air Force 2", link: "/" },
+            { name: "Nike Waffle Racer", link: "/" },
+            { name: "Nike Cortez", link: "/" },
+        ],
+    },
+    {
+        title: "Help",
+        links: [
+            { name: "About us", link: "/" },
+            { name: "FAQs", link: "/" },
+            { name: "How it works", link: "/" },
+            { name: "Privacy policy", link: "/" },
+            { name: "Payment policy", link: "/" },
+        ],
+    },
+    {
+        title: "Get in touch",
+        links: [
+            { name: "[email protected]", link: "mailto:[email protected]" },
+            { name: "+92554862354", link: "tel:+92554862354" },
+        ],
+    },
+];
+
+export const socialMedia = [
+    { src: facebook, alt: "facebook logo" },
+    { src: twitter, alt: "twitter logo" },
+    { src: instagram, alt: "instagram logo" },
+];
diff --git a/index.css b/index.css
@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Palanquin:wght@100;200;300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Palanquin:wght@100;200;300;400;500;600;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+@layer components {
+  .max-container {
+    max-width: 1440px;
+    margin: 0 auto;
+  }
+
+  .input {
+    @apply sm:flex-1 max-sm:w-full text-base leading-normal text-slate-gray pl-5 max-sm:p-5 outline-none sm:border-none border max-sm:border-slate-gray max-sm:rounded-full;
+  }
+}
+
+@layer utilities {
+  .padding {
+    @apply sm:px-16 px-8 sm:py-24 py-12;
+  }
+
+  .padding-x {
+    @apply sm:px-16 px-8;
+  }
+
+  .padding-y {
+    @apply sm:py-24 py-12;
+  }
+
+  .padding-l {
+    @apply sm:pl-16 pl-8;
+  }
+
+  .padding-r {
+    @apply sm:pr-16 pr-8;
+  }
+
+  .padding-t {
+    @apply sm:pt-24 pt-12;
+  }
+
+  .padding-b {
+    @apply sm:pb-24 pb-12;
+  }
+
+  .info-text {
+    @apply font-montserrat text-slate-gray text-lg leading-7;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    fontSize: {
+      xs: ['12px', '16px'],
+      sm: ['14px', '20px'],
+      base: ['16px', '19.5px'],
+      lg: ['18px', '21.94px'],
+      xl: ['20px', '24.38px'],
+      '2xl': ['24px', '29.26px'],
+      '3xl': ['28px', '50px'],
+      '4xl': ['48px', '58px'],
+      '8xl': ['96px', '106px']
+    },
+    extend: {
+      fontFamily: {
+        palanquin: ['Palanquin', 'sans-serif'],
+        montserrat: ['Montserrat', 'sans-serif'],
+      },
+      colors: {
+        'primary': "#ECEEFF",
+        "coral-red": "#FF6452",
+        "slate-gray": "#6D6D6D",
+        "pale-blue": "#F5F6FF",
+        "white-400": "rgba(255, 255, 255, 0.80)"
+      },
+      boxShadow: {
+        '3xl': '0 10px 40px rgba(0, 0, 0, 0.1)'
+      },
+      backgroundImage: {
+        'hero': "url('assets/images/collection-background.svg')",
+        'card': "url('assets/images/thumbnail-background.svg')",
+      },
+      screens: {
+        "wide": "1440px"
+      }
+    },
+  },
+  plugins: [],
+}