Skip to content

Commit

Permalink
responsive pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@MiladSadeghi
MiladSadeghi committed Dec 12, 2022
1 parent d751223 commit b43e2ff
Show file tree
Hide file tree
Showing 23 changed files with 449 additions and 365 deletions.
2 changes: 1 addition & 1 deletion src/components/CCTPCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const CCTPCards: FC<FCTypes> = (props): ReactElement => {
const { data } = props;

return (
<div className="flex flex-col p-4 bg-white drop-shadow-[0_8px_40px_rgba(49,32,138,0.05)]">
<div className="flex flex-col p-4 bg-white drop-shadow-[0_-12px_5px_rgba(49,32,138,0.05)] sm:drop-shadow-[0_8px_40px_rgba(49,32,138,0.05)]">
<div className="w-full h-[244px] flex items-center justify-center bg-[#F5F6F8]">
<img
src={
Expand Down
45 changes: 30 additions & 15 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import React, { FC, ReactElement } from "react";
import { AiFillInstagram } from "react-icons/ai";
import { GrFacebookOption, GrTwitter } from "react-icons/gr";
import { Link } from "react-router-dom";

const Footer: FC = (): ReactElement => {
return (
<footer>
<div className="bg-[#EEEFFB] py-20 flex items-center">
<div className="container mx-auto">
<div className="flex">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-8 text-center sm:text-start">
<div className="w-full">
<ul>
<li className="mb-5 font-JosefinSans text-4xl text-black font-bold ">
Hekto
</li>
<li className="relative w-full mb-5">
<li className="relative mb-5">
<input
type="email"
className="w-full focus-within:outline-none py-3 rounded-[3px] pl-6 pr-32"
Expand Down Expand Up @@ -44,39 +45,53 @@ const Footer: FC = (): ReactElement => {
</li>
</ul>
</div>
<div className="w-full flex flex-col items-center">
<div className="flex flex-col items-center">
<div>
<h5 className="font-JosefinSans text-[22px] font-semibold mb-6">
Customer Care
</h5>
<ul>
<li className="footer-li">My Account</li>
<li className="footer-li">Discount</li>
<li className="footer-li">Returns</li>
<li className="footer-li">Orders History</li>
<li className="footer-li">Order Tracking</li>
<li className="footer-li">
<Link to="/faq">Faq</Link>
</li>
<li className="footer-li">
<Link to="/contact-us">Contact Us</Link>
</li>
<li className="footer-li">
<Link to="/about-us">About Us</Link>
</li>
</ul>
</div>
</div>
<div className="w-full flex flex-col items-center">
<div className="flex flex-col items-center sm:items-start lg:items-center">
<div>
<h5 className="font-JosefinSans text-[22px] font-semibold mb-6">
Pages
</h5>
<ul>
<li className="footer-li">Browse the Shop</li>
<li className="footer-li">Wishlist</li>
<li className="footer-li">Cart</li>
<li className="footer-li">Sign In</li>
<li className="footer-li">Sign Up</li>
<li className="footer-li">
<Link to="/products">Browse the shop</Link>
</li>
<li className="footer-li">
<Link to="/wishlist">Wishlist</Link>
</li>
<li className="footer-li">
<Link to="/cart">Cart</Link>
</li>
<li className="footer-li">
<Link to="/signin">Sign In</Link>
</li>
<li className="footer-li">
<Link to="/signup">Sign Up</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="bg-[#E7E4F8] py-2">
<div className="container mx-auto flex justify-between">
<div className="container mx-auto flex justify-between flex-wrap">
<p className="font-bold font-Lato text-[#9DA0AE]">
©MiladSadeghi - All Rights Reserved
</p>
Expand Down
9 changes: 3 additions & 6 deletions src/components/LPCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { FCTypes } from "../types/public.types";

const LPCards: FC<FCTypes> = (props) => {
const { data } = props;
const { wishlist, uid } = useAppSelector((state) => state.user);
const { wishlist } = useAppSelector((state) => state.user);
const dispatch = useAppDispatch();

return (
Expand Down Expand Up @@ -55,11 +55,8 @@ const LPCards: FC<FCTypes> = (props) => {
</div>
</div>
<div className="w-full flex items-center justify-between mt-3">
<Link
to={`product-details/${data.id}`}
className="flex items-center justify-center"
>
<h5 className="line-clamp-1 w-8/12 font-JosefinSans font-same text-navy-blue">
<Link to={`product-details/${data.id}`} className="flex items-center">
<h5 className="line-clamp-1 w-10/12 font-JosefinSans text-navy-blue">
{data.title}
</h5>
</Link>
Expand Down
16 changes: 8 additions & 8 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const Navbar: FC = (): ReactElement => {
<nav>
<div className="w-100 bg-[#7E33E0] py-2 font-JosefinSans">
<div className="container mx-auto">
<div className="flex justify-between items-center text-[#F1F1F1] text-base">
<div className="flex items-center">
<div className="flex justify-center sm:justify-between items-center text-[#F1F1F1] text-base flex-wrap ">
<div className="flex items-center flex-wrap justify-center sm:justify-start">
<p className="flex items-center">
<HiOutlineMail className="font-bold" />
<span className="ml-2 font-semibold">
Expand All @@ -35,7 +35,7 @@ const Navbar: FC = (): ReactElement => {
</a>
</p>
</div>
<div className="flex items-center">
<div className="flex items-center mt-4 sm:mt-0">
<div>
{!isLoggedIn ? (
<BounceLoader size={23} color="#FB2E86" />
Expand Down Expand Up @@ -67,11 +67,11 @@ const Navbar: FC = (): ReactElement => {
</div>
<div>
<div className="container mx-auto">
<div className="flex items-center justify-between py-[13.5px]">
<h1 className="font-JosefinSans text-[#0D0E43] font-bold text-[34px]">
<div className="items-center py-[13.5px] grid grid-cols-12">
<h1 className="font-JosefinSans text-[#0D0E43] font-bold text-[34px] sm:col-span-4 md:col-span-3 col-span-12 text-center sm:text-left">
Hekto
</h1>
<ul className="flex font-Lato text-[#0D0E43]">
<ul className="flex font-Lato text-[#0D0E43] items-center sm:col-span-8 md:col-span-6 sm:justify-self-end md:justify-self-start flex-wrap col-span-12 mb-4 sm:mb-0 justify-center sm:justify-start">
<li className="mr-9">
<NavLink
to="/"
Expand Down Expand Up @@ -113,10 +113,10 @@ const Navbar: FC = (): ReactElement => {
</NavLink>
</li>
</ul>
<div className="relative flex items-center pl-32">
<div className="relative flex items-center md:col-span-3 col-span-12">
<input
type="text"
className="border border-[#E7E6EF] focus:outline-none h-10 w-80 pl-5 pr-16 focus:border-[#7c7a7a] ease-in transition-[border] duration-200"
className="border border-[#E7E6EF] focus:outline-none h-10 pl-5 pr-16 focus:border-[#7c7a7a] ease-in transition-[border] w-full duration-200"
/>
<div className="absolute inset-y-0 right-0 flex items-center top-1/2 -translate-y-1/2 h-full bg-pink-cc px-5">
<SlMagnifier className="text-white text-lg" />
Expand Down
6 changes: 3 additions & 3 deletions src/routes/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ const About: FC = (): ReactElement => {
</div>
</div>
<div className="container mx-auto mt-32 mb-36">
<div className="flex w-full mb-28">
<div className="flex w-full mb-28 gap-8 flex-col md:flex-row">
<div className="w-full">
<div className="relative before:absolute before:top-0 before:right-14 before:bg-navy-blue before:w-[86%] before:h-[104%] before:rounded-md m-auto before:-z-10 ">
<img className="mx-auto " src={ManagementIMG} alt="management" />
<div className="relative before:absolute before:top-0 before:right-4 before:bg-navy-blue before:w-[98.7%] before:h-[104%] before:rounded-md m-auto before:-z-10 before:hidden md:before:block">
<img className="w-full" src={ManagementIMG} alt="management" />
</div>
</div>
<div className="w-full">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/Account/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const SignIn: FC = (): ReactElement => {
exit={{ opacity: 0, transition: { duration: 0.2 } }}
className="container mx-auto pt-28 pb-16 "
>
<div className="flex flex-col w-5/12 mx-auto p-14 shadow-[0_0_25px_10px_#f8f8fb] mb-16">
<div className="flex flex-col mx-auto p-14 shadow-[0_0_25px_10px_#f8f8fb] mb-16">
<div className="text-center mb-5">
<h5 className="font-JosefinSans font-bold text-3xl mb-1">Login</h5>
<p className="text-[17px] text-[#9096B2] font-Lato">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/Account/SignUp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const SignUp: FC = (): ReactElement => {
exit={{ opacity: 0, transition: { duration: 0.2 } }}
className="container mx-auto pt-28 pb-16 "
>
<div className="flex flex-col w-5/12 mx-auto p-14 shadow-[0_0_25px_10px_#f8f8fb] mb-16">
<div className="flex flex-col mx-auto p-14 shadow-[0_0_25px_10px_#f8f8fb] mb-16">
<div className="text-center mb-5">
<h5 className="font-JosefinSans font-bold text-3xl mb-1">Sign Up</h5>
</div>
Expand Down
Loading

0 comments on commit b43e2ff

Please sign in to comment.