Skip to content

S
sweepstake
Commit 112c7bb1 by Sandhyanepal
Options

dashboard slider and card

parent 4b61220d
Showing with 182 additions and 42 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() {
const [current, setCurrent] = useState(0);
return ( return (
<div className="dashboard__root"> <>
<h1>Dashboard Root</h1> {/* <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> </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 */
...@@ -57,19 +62,19 @@ ...@@ -57,19 +62,19 @@
--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.80); color: rgba(255, 255, 255, 0.8);
font-family: "Hiragino Sans"; font-family: "Hiragino Sans";
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
...@@ -142,15 +147,17 @@ ...@@ -142,15 +147,17 @@
.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%,
rgba(147, 224, 217, 0.2) 100%
);
} }
body { body {
@apply bg-white; @apply bg-white;
} }
} }
.general-content-box p { .general-content-box p {
...@@ -183,15 +190,15 @@ ...@@ -183,15 +190,15 @@
.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 {
...@@ -201,3 +208,14 @@ ...@@ -201,3 +208,14 @@
.user_table tr td:last-child { .user_table tr td:last-child {
border-radius: 0 24px 24px 0; 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