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 { 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() {
return (
<div className="dashboard__root">
<h1>Dashboard Root</h1>
</div>
);
const [current, setCurrent] = useState(0);
return (
<>
{/* <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";
:root {
--white: #FFF;
--black: #000;
--gray: #E0E0E3;
--light-gray: #F3F4F6;
--primary-light: #F8B1FE;
--primary: #B801C0;
--primary-dark: #3A013F;
--title: #0E0E11;
--para-light: #71717A;
/* Additional variables for dark mode */
--primary-grad: linear-gradient(90deg, #B801C0 0%, #E046DC 100%);
--secondary-grad: linear-gradient(90deg, #69A29D 0%, #93E0D9 100%);
--secondary: #93E0D8;
--text-regular: rgba(0, 0, 0, 0.80);
--text-title: rgba(0, 0, 0, 0.90);
--gray-scale: #7E7181;
--white: #fff;
--black: #000;
--gray: #e0e0e3;
--light-gray: #f3f4f6;
--primary-light: #f8b1fe;
--primary: #b801c0;
--primary-dark: #3a013f;
--title: #0e0e11;
--para-light: #71717a;
/* Additional variables for dark mode */
--primary-grad: linear-gradient(90deg, #b801c0 0%, #e046dc 100%);
--secondary-grad: linear-gradient(90deg, #69a29d 0%, #93e0d9 100%);
--secondary: #93e0d8;
--text-regular: rgba(0, 0, 0, 0.8);
--text-title: rgba(0, 0, 0, 0.9);
--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 {
--white: #000;
--black: #FFF;
--gray: #2D2D30;
--light-gray: #1F1F23;
--primary-light: #F8B1FE;
--primary: #D958DF;
--primary-dark: #7D0182;
--title: #F0F0F0;
/* Dark mode specific variables */
--primary-grad: linear-gradient(90deg, #B100B8 0%, #F335ED 100%);
--secondary-grad: linear-gradient(90deg, #69A29D 0%, #93E0D9 100%);
--secondary: #93E0D8;
--text-regular: rgba(255, 255, 255, 0.80);
--text-title: rgba(255, 255, 255, 0.90);
--gray-scale: #7E7181;
--para-light: #71717A;
--white: #000;
--black: #fff;
--gray: #2d2d30;
--light-gray: #1f1f23;
--primary-light: #f8b1fe;
--primary: #d958df;
--primary-dark: #7d0182;
--title: #f0f0f0;
/* Dark mode specific variables */
--primary-grad: linear-gradient(90deg, #b100b8 0%, #f335ed 100%);
--secondary-grad: linear-gradient(90deg, #69a29d 0%, #93e0d9 100%);
--secondary: #93e0d8;
--text-regular: rgba(255, 255, 255, 0.8);
--text-title: rgba(255, 255, 255, 0.9);
--gray-scale: #7e7181;
--para-light: #71717a;
}
/* Map CSS vars to Tailwind theme tokens */
@theme {
--color-white: var(--white);
--color-black: var(--black);
--color-gray: var(--gray);
--color-title: var(--title);
--color-light-gray: var(--light-gray);
--color-primary-light: var(--primary-light);
--color-primary: var(--primary);
--color-primary-dark: var(--primary-dark);
--color-text: var(--text);
--color-secondary: var(--secondary);
--color-text-regular: var(--text-regular);
--color-text-title: var(--text-title);
--color-gray-scale: var(--gray-scale);
--color-para-light: var(--para-light)
--color-white: var(--white);
--color-black: var(--black);
--color-gray: var(--gray);
--color-title: var(--title);
--color-light-gray: var(--light-gray);
--color-primary-light: var(--primary-light);
--color-primary: var(--primary);
--color-primary-dark: var(--primary-dark);
--color-text: var(--text);
--color-secondary: var(--secondary);
--color-text-regular: var(--text-regular);
--color-text-title: var(--text-title);
--color-gray-scale: var(--gray-scale);
--color-para-light: var(--para-light);
/* --bg-slider-dots: var(--slider-dots); */
}
@layer base {
h1,
h2,
h3 {
@apply font-[700]
}
label {
color: rgba(255, 255, 255, 0.80);
font-family: "Hiragino Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: block;
margin-bottom: 4px;
}
input {
display: block;
width: 100%;
border-radius: 4px;
padding: 12px 16px;
}
/* input.rounded {
h1,
h2,
h3 {
@apply font-[700];
}
label {
color: rgba(255, 255, 255, 0.8);
font-family: "Hiragino Sans";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
display: block;
margin-bottom: 4px;
}
input {
display: block;
width: 100%;
border-radius: 4px;
padding: 12px 16px;
}
/* input.rounded {
border-radius: 27px !important;
border: 0.576px solid rgba(255, 255, 255, 0.04);
background: rgba(118, 107, 120, 0.55);
......@@ -103,101 +108,114 @@
@apply outline-secondary
} */
.error {
@apply text-[12px] leading-[120%] text-red-500 block mt-1;
}
button,
.ss-btn {
padding: 12px 24px;
border-radius: 27px;
text-align: center;
width: 100%;
display: block;
}
:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error {
@apply text-[12px] leading-[120%] text-red-500 block mt-1;
}
button,
.ss-btn {
padding: 12px 24px;
border-radius: 27px;
text-align: center;
width: 100%;
display: block;
}
:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
@layer utilities {
.dark {
background-color: var(--primary);
}
.bg-primary-grad {
background: var(--primary-grad);
}
.bg-secondary-grad {
background: var(--secondary-grad);
}
.menu__wrapper li {
border-radius: 6px;
overflow: hidden;
}
.support__btn {
border-radius: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.30);
background: linear-gradient(90deg, rgba(105, 162, 157, 0.20) 0%, rgba(147, 224, 217, 0.20) 100%);
}
body {
@apply bg-white;
}
.dark {
background-color: var(--primary);
}
.bg-primary-grad {
background: var(--primary-grad);
}
.bg-secondary-grad {
background: var(--secondary-grad);
}
.menu__wrapper li {
border-radius: 6px;
overflow: hidden;
}
.support__btn {
border-radius: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
background: linear-gradient(
90deg,
rgba(105, 162, 157, 0.2) 0%,
rgba(147, 224, 217, 0.2) 100%
);
}
body {
@apply bg-white;
}
}
.general-content-box p {
font-size: 14px;
font-weight: 400;
line-height: 120%;
color: var(--para-light);
font-size: 14px;
font-weight: 400;
line-height: 120%;
color: var(--para-light);
}
.tab__link {
@apply relative text-para-light;
@apply relative text-para-light;
}
.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: "";
transform-origin: bottom right;
content: "";
transform-origin: bottom right;
}
.tab__link.active {
@apply text-primary;
@apply text-primary;
}
.tab__link.active::after,
.tab__link:hover::after {
@apply opacity-100 translate-x-1;
transform-origin: bottom left;
@apply opacity-100 translate-x-1;
transform-origin: bottom left;
}
.status.paid,
.status.success {
background-color: #12A211;
background-color: #12a211;
}
.status.fail {
background-color: #D03538;
background-color: #d03538;
}
.status.active {
background-color: #F2BF53;
background-color: #f2bf53;
}
.user_table tr td:first-child {
border-radius: 24px 0 0 24px;
border-radius: 24px 0 0 24px;
}
.user_table tr td:last-child {
border-radius: 0 24px 24px 0;
}
\ No newline at end of file
border-radius: 0 24px 24px 0;
}
/* .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