Skip to content

S
sweepstake
Commit 112c7bb1 by Sandhyanepal
Options

dashboard slider and card

parent 4b61220d
Showing with 282 additions and 143 deletions
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
"use client";
import Image from "next/image"; import Image from "next/image";
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";
const slides = [
{
id: 1,
image: "/assets/images/slider1.png",
},
{
id: 2,
image: "/assets/images/slider2.jpg",
},
{
id: 3,
image: "/assets/images/slider1.png",
},
];
export default function Home() { export default function Home() {
return ( const [current, setCurrent] = useState(0);
<div className="dashboard__root"> return (
<h1>Dashboard Root</h1> <>
</div> {/* <h1>Dashboard Root</h1> */}
); <div className="dashboard__root relative w-full max-w-6xl mx-auto rounded-2xl mb-32">
<div className="relative h-[240px] w-full overflow-hidden rounded-[50px]">
<AnimatePresence mode="wait">
<motion.img
key={slides[current].id}
src={slides[current].image}
alt={`slide-${slides[current].id}`}
initial={{ opacity: 0, x: 100 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -100 }}
transition={{ duration: 0.6 }}
className="absolute inset-0 w-full h-full object-cover rounded-2xl"
/>
</AnimatePresence>
</div>
{/* Dots */}
<div className="absolute bottom-[-24px] left-1/2 -translate-x-1/2 flex gap-2">
{slides.map((_, i) => (
<button
key={i}
onClick={() => setCurrent(i)}
className={`h-[8px] p-0 ${
i === current ? "bg-white w-[24px]" : "bg-gray-400 w-[8px]"
}`}
/>
))}
</div>
</div>
<div className="dashboard-card-wrapper flex flex-wrap gap-5 justify-center">
<div
className="dashboard-card1 flex px-10 gap-2 rounded-[24px]"
style={{
maxWidth: "520px",
background: "rgba(255, 255, 255, 0.20)",
}}>
<div className="py-7 gap-6">
<h1
className="text-[40px] mb-[8px]"
style={{
color: "#FBD230",
lineHeight: "96%",
letterSpacing: "-0.682px",
}}>
Welcome BONUS!!
</h1>
<p
className="text-[13px] mb-[12px]"
style={{ lineHeight: "120%", color: "#FBD230" }}>
10$ on first play.
</p>
<a
href="#"
className="px-[18px] py-[11px] rounded-[28px]"
style={{
background:
"linear-gradient(270deg, #F9B901 0.09%, #D09F12 95.19%)",
}}>
Play Now
</a>
</div>
<div className="dashboard-card-img ">
<img src="/assets/images/card1.png" alt="" />
</div>
</div>
<div
className="dashboard-card2 flex px-[45px] gap-2 rounded-[24px]"
style={{
maxWidth: "520px",
background: "rgba(255, 255, 255, 0.10)",
}}>
<div className="py-[45px] gap-6">
<h1
className="text-[40px] mb-[10px]"
style={{
color: "#1AF7FE",
letterSpacing: "-0.682px",
lineHeight: "96%",
}}>
Easy.Set.Play
</h1>
<p
className="text-[13px] mb-[12px]"
style={{ color: "#E7BCFE", lineHeight: "120%" }}>
Join the Fun today.
</p>
<a
href="#"
className="px-[18px] py-[11px] rounded-[28px]"
style={{
background:
"linear-gradient(270deg, #D620D9 0.09%, #B40EF0 95.19%)",
}}>
Play Now
</a>
</div>
<div className="dashboard-card-img w-[204px] h-[204px]">
<img src="/assets/images/card2.png" alt="" />
</div>
</div>
</div>
</>
);
} }
src/app/globals.css
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
--white: #FFF; --white: #fff;
--black: #000; --black: #000;
--gray: #E0E0E3; --gray: #e0e0e3;
--light-gray: #F3F4F6; --light-gray: #f3f4f6;
--primary-light: #F8B1FE; --primary-light: #f8b1fe;
--primary: #B801C0; --primary: #b801c0;
--primary-dark: #3A013F; --primary-dark: #3a013f;
--title: #0E0E11; --title: #0e0e11;
--para-light: #71717A; --para-light: #71717a;
/* Additional variables for dark mode */ /* Additional variables for dark mode */
--primary-grad: linear-gradient(90deg, #B801C0 0%, #E046DC 100%); --primary-grad: linear-gradient(90deg, #b801c0 0%, #e046dc 100%);
--secondary-grad: linear-gradient(90deg, #69A29D 0%, #93E0D9 100%); --secondary-grad: linear-gradient(90deg, #69a29d 0%, #93e0d9 100%);
--secondary: #93E0D8; --secondary: #93e0d8;
--text-regular: rgba(0, 0, 0, 0.80); --text-regular: rgba(0, 0, 0, 0.8);
--text-title: rgba(0, 0, 0, 0.90); --text-title: rgba(0, 0, 0, 0.9);
--gray-scale: #7E7181; --gray-scale: #7e7181;
/* --slider-dots: linear-gradient(
0deg,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.2) 100%
),
rgba(255, 255, 255, 0.1); */
} }
/* === Dark Theme === */ /* === Dark Theme === */
.dark { .dark {
--white: #000; --white: #000;
--black: #FFF; --black: #fff;
--gray: #2D2D30; --gray: #2d2d30;
--light-gray: #1F1F23; --light-gray: #1f1f23;
--primary-light: #F8B1FE; --primary-light: #f8b1fe;
--primary: #D958DF; --primary: #d958df;
--primary-dark: #7D0182; --primary-dark: #7d0182;
--title: #F0F0F0; --title: #f0f0f0;
/* Dark mode specific variables */ /* Dark mode specific variables */
--primary-grad: linear-gradient(90deg, #B100B8 0%, #F335ED 100%); --primary-grad: linear-gradient(90deg, #b100b8 0%, #f335ed 100%);
--secondary-grad: linear-gradient(90deg, #69A29D 0%, #93E0D9 100%); --secondary-grad: linear-gradient(90deg, #69a29d 0%, #93e0d9 100%);
--secondary: #93E0D8; --secondary: #93e0d8;
--text-regular: rgba(255, 255, 255, 0.80); --text-regular: rgba(255, 255, 255, 0.8);
--text-title: rgba(255, 255, 255, 0.90); --text-title: rgba(255, 255, 255, 0.9);
--gray-scale: #7E7181; --gray-scale: #7e7181;
--para-light: #71717A; --para-light: #71717a;
} }
/* Map CSS vars to Tailwind theme tokens */ /* Map CSS vars to Tailwind theme tokens */
@theme { @theme {
--color-white: var(--white); --color-white: var(--white);
--color-black: var(--black); --color-black: var(--black);
--color-gray: var(--gray); --color-gray: var(--gray);
--color-title: var(--title); --color-title: var(--title);
--color-light-gray: var(--light-gray); --color-light-gray: var(--light-gray);
--color-primary-light: var(--primary-light); --color-primary-light: var(--primary-light);
--color-primary: var(--primary); --color-primary: var(--primary);
--color-primary-dark: var(--primary-dark); --color-primary-dark: var(--primary-dark);
--color-text: var(--text); --color-text: var(--text);
--color-secondary: var(--secondary); --color-secondary: var(--secondary);
--color-text-regular: var(--text-regular); --color-text-regular: var(--text-regular);
--color-text-title: var(--text-title); --color-text-title: var(--text-title);
--color-gray-scale: var(--gray-scale); --color-gray-scale: var(--gray-scale);
--color-para-light: var(--para-light) --color-para-light: var(--para-light);
/* --bg-slider-dots: var(--slider-dots); */
} }
@layer base { @layer base {
h1,
h1, h2,
h2, h3 {
h3 { @apply font-[700];
@apply font-[700] }
}
label {
label { color: rgba(255, 255, 255, 0.8);
color: rgba(255, 255, 255, 0.80); font-family: "Hiragino Sans";
font-family: "Hiragino Sans"; font-size: 12px;
font-size: 12px; font-style: normal;
font-style: normal; font-weight: 400;
font-weight: 400; line-height: normal;
line-height: normal; display: block;
display: block; margin-bottom: 4px;
margin-bottom: 4px; }
}
input {
input { display: block;
display: block; width: 100%;
width: 100%; border-radius: 4px;
border-radius: 4px; padding: 12px 16px;
padding: 12px 16px; }
}
/* input.rounded {
/* input.rounded {
border-radius: 27px !important; border-radius: 27px !important;
border: 0.576px solid rgba(255, 255, 255, 0.04); border: 0.576px solid rgba(255, 255, 255, 0.04);
background: rgba(118, 107, 120, 0.55); background: rgba(118, 107, 120, 0.55);
...@@ -103,101 +108,114 @@ ...@@ -103,101 +108,114 @@
@apply outline-secondary @apply outline-secondary
} */ } */
.error { .error {
@apply text-[12px] leading-[120%] text-red-500 block mt-1; @apply text-[12px] leading-[120%] text-red-500 block mt-1;
} }
button, button,
.ss-btn { .ss-btn {
padding: 12px 24px; padding: 12px 24px;
border-radius: 27px; border-radius: 27px;
text-align: center; text-align: center;
width: 100%; width: 100%;
display: block; display: block;
} }
:disabled { :disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
} }
@layer utilities { @layer utilities {
.dark { .dark {
background-color: var(--primary); background-color: var(--primary);
} }
.bg-primary-grad { .bg-primary-grad {
background: var(--primary-grad); background: var(--primary-grad);
} }
.bg-secondary-grad { .bg-secondary-grad {
background: var(--secondary-grad); background: var(--secondary-grad);
} }
.menu__wrapper li { .menu__wrapper li {
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
.support__btn { .support__btn {
border-radius: 6px; border-radius: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.30); border-top: 1px solid rgba(255, 255, 255, 0.3);
background: linear-gradient(90deg, rgba(105, 162, 157, 0.20) 0%, rgba(147, 224, 217, 0.20) 100%); background: linear-gradient(
} 90deg,
rgba(105, 162, 157, 0.2) 0%,
body { rgba(147, 224, 217, 0.2) 100%
@apply bg-white; );
} }
body {
@apply bg-white;
}
} }
.general-content-box p { .general-content-box p {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 120%; line-height: 120%;
color: var(--para-light); color: var(--para-light);
} }
.tab__link { .tab__link {
@apply relative text-para-light; @apply relative text-para-light;
} }
.tab__link::after { .tab__link::after {
@apply absolute left-0 bottom-0 w-full h-[2px] bg-primary opacity-0 translate-x-0 transition-all; @apply absolute left-0 bottom-0 w-full h-[2px] bg-primary opacity-0 translate-x-0 transition-all;
content: ""; content: "";
transform-origin: bottom right; transform-origin: bottom right;
} }
.tab__link.active { .tab__link.active {
@apply text-primary; @apply text-primary;
} }
.tab__link.active::after, .tab__link.active::after,
.tab__link:hover::after { .tab__link:hover::after {
@apply opacity-100 translate-x-1; @apply opacity-100 translate-x-1;
transform-origin: bottom left; transform-origin: bottom left;
} }
.status.paid, .status.paid,
.status.success { .status.success {
background-color: #12A211; background-color: #12a211;
} }
.status.fail { .status.fail {
background-color: #D03538; background-color: #d03538;
} }
.status.active { .status.active {
background-color: #F2BF53; background-color: #f2bf53;
} }
.user_table tr td:first-child { .user_table tr td:first-child {
border-radius: 24px 0 0 24px; border-radius: 24px 0 0 24px;
} }
.user_table tr td:last-child { .user_table tr td:last-child {
border-radius: 0 24px 24px 0; border-radius: 0 24px 24px 0;
} }
\ No newline at end of file
/* .dashboard-card-wrapper .dashboard-card-img {
aspect-ratio: 204/204;
overflow: hidden;
} */
/* .dashboard-card-wrapper .dashboard-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
} */
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment