diff --git a/app/layout.tsx b/app/layout.tsx index f631c42..72367e0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,9 @@ -import "./globals.css"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import { ClerkProvider } from "@clerk/nextjs"; -import { ThemeProvider } from "@/components/providers/theme-provider"; -import { cn } from "@/lib/utils"; -import { ModalProvider } from "@/components/providers/modal-provider"; -import { SocketProvider } from "@/components/providers/socket-provider"; -import { QueryProvider } from "@/components/providers/query-provider"; +import "./globals.css"; +import '@radix-ui/themes/styles.css'; +import { Theme } from '@radix-ui/themes'; + const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { @@ -16,26 +13,16 @@ export const metadata: Metadata = { export default function RootLayout({ children, -}: { +}: Readonly<{ children: React.ReactNode; -}) { +}>) { return ( - - - - - - - {children} - - + + + + {children} + - - + ); } diff --git a/components/home-layouts/LandingPage.tsx b/components/home-layouts/LandingPage.tsx new file mode 100644 index 0000000..0ba6307 --- /dev/null +++ b/components/home-layouts/LandingPage.tsx @@ -0,0 +1,383 @@ +"use client" + +import React from 'react'; +import {Box,Card,Flex,Text} from '@radix-ui/themes'; + +export default function LandingPage(){ + return ( + <> +
+ + + +{/* Intro div */} +
+
+

GROUP CHAT
THAT’S ALL
FUN & GAMES

+

Discord is great for playing games and
chilling with friends, or even building a
worldwide community. Customize your
own space to talk, play, and hang out.

+
+ +
+ pic1 +
+
+
+ + + +
+ + + +{/* Card 1 */} + {/* DiscordGIF */} +
+ discordgif +
+
+ + + + + + + + + + + + + MAKE YOUR
GROUP CHATS
MORE FUN + + + Use custom emoji, stickers,
soundboard effects and more to add
your personality to your voice, video,
or text chat. Set your avatar and a
custom status, and write your own
profile to show up in chat your way. + + + + + + + +
+ +{/* Card 2 */} +
+ + + + + + + + + STREAM LIKE
YOU’RE IN THE
SAME ROOM + + + High quality and low latency
streaming makes it feel like you're
hanging out on the couch with
friends while playing a game,
watching shows, looking at photos,
or idk doing homework or
something. + + + + + + + + + + + +
+ +{/* Card 3 */} +
+ + + + + + + + + + + + + HOP IN WHEN
YOU'RE FREE,
NO NEED TO
CALL + + + Easily hop in and out of voice or text
chats without having to call or invite
anyone, so your party chat lasts
before, during, and after your game
session. + + + + + + + +
+ +{/* Moving Tag Line */} +
+ + + +
+ + +{/* Card 4 */} +
+ + + + + + + + + SEE WHO'S
AROUND TO
CHILL + + + See who's around, playing games,
or just hanging out. For supported
games, you can see what modes
or characters your friends are
playing and directly join up. + + + + + + + + + + + +
+ +{/* Card 5 */} +
+ + + + + + + + + + + + + ALWAYS HAVE
SOMETHING TO
DO TOGETHER + + + Watch videos, play built-in games,
listen to music, or just scroll
together and spam memes.
Seamlessly text, call, video chat, and
play games, all in one group chat. + + + + + + + +
+ +{/* Card 6 */} +
+ + + + + + + + + WHEREVER YOU
GAME, HANG
OUT HERE + + + On your PC, phone, or console, you
can still hang out on Discord. Easily
switch between devices and use
tools to manage multiple group chats
with friends. + + + + + + + + + + + +
+ + +{/* End Div */} +
+

YOU CAN'T SCROLL ANYMORE.
BETTER GO CHAT.

+ +
+ +{/* End Image */} +
+ endImage + +
+ +{/* Footer */} + + +
+ + ) +} diff --git a/public/download.svg b/public/download.svg new file mode 100644 index 0000000..9da2aea --- /dev/null +++ b/public/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/whitedownload.svg b/public/whitedownload.svg new file mode 100644 index 0000000..f024527 --- /dev/null +++ b/public/whitedownload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 0377ea1..54d380c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,76 +1,32 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ["class"], content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + + // Or if using `src` directory: + "./src/**/*.{js,ts,jsx,tsx,mdx}", + ], theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, extend: { - colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, keyframes: { - "accordion-down": { - from: { height: 0 }, - to: { height: "var(--radix-accordion-content-height)" }, - }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, - }, + moveLeft: { + '0%': { transform: 'translateX(0%)' }, + '100%': { transform: 'translateX(-100%)' }, + } }, animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", + 'move-left': 'moveLeft 100s linear infinite ', + }, + animationDelay:{ + '200ms': '200ms', + '400ms': '400ms', + '600ms': '600ms', + '800ms': '800ms', + '5000ms': '5000ms', // For the "HANGOUT" text }, }, }, - plugins: [require("tailwindcss-animate")], + plugins: [], } \ No newline at end of file