templates/landing-for-digital-product
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new marketing page

Browse Source
This commit is contained in:
me_1 me_1
2025-11-05 23:50:34 +03:00
parent e01aafdf01
commit cd42a191f9
3 changed files with 120 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -64,7 +64,7 @@
"@types/node": "^20", "@types/node": "^20",
"@types/react": "18.2.48", "@types/react": "18.2.48",
"@types/react-dom": "18.2.18", "@types/react-dom": "18.2.18",
"eslint": "^9", "eslint": "^8.57.0",
"eslint-config-next": "14.2.18", "eslint-config-next": "14.2.18",
"tailwindcss": "^4", "tailwindcss": "^4",
"tw-animate-css": "^1.4.0", "tw-animate-css": "^1.4.0",

10
src/app/(frontend)/layout.tsx
View File

@@ -1,10 +1,10 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Fira_Sans } from "next/font/google"; import { Roboto_Flex } from "next/font/google";
import "./globals.css"; import "./globals.css";
const firaSans = Fira_Sans({ const robotoFlex = Roboto_Flex({
variable: "--font-fira-sans", variable: "--font-roboto-flex",
weight: ["400", "500", "600", "700", "100", "200", "300", "800", "900"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
subsets: ["latin", "cyrillic"], subsets: ["latin", "cyrillic"],
}); });
@@ -20,7 +20,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="ru"> <html lang="ru">
<body className={`${firaSans.variable} antialiased`}>{children}</body> <body className={`${robotoFlex.variable} antialiased`}>{children}</body>
</html> </html>
); );
} }

137
src/app/(frontend)/page.tsx
View File

@@ -1,46 +1,137 @@
"use client"; "use client";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Server, Code } from "lucide-react";
export default function Home() { export default function Home() {
return ( return (
<div className="min-h-screen flex items-center justify-center p-8 pb-20 sm:p-20 bg-gradient-to-br from-background via-background to-muted/20"> <div className="min-h-screen flex items-center justify-center p-8 pb-20 sm:p-20 bg-linear-to-br from-background via-background to-muted/20 relative overflow-hidden">
<div className="max-w-4xl w-full space-y-8"> <div className="w-full space-y-16 relative z-10">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.5, ease: "easeOut" }}
className="text-center space-y-6" className="text-center w-fit mx-auto space-y-1"
> >
<motion.h1 <motion.h1
initial={{ opacity: 0, scale: 0.9 }} initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.5, delay: 0.1, ease: "easeOut" }}
className="text-6xl sm:text-7xl md:text-8xl font-bold bg-gradient-to-r from-foreground via-foreground to-foreground/40 bg-clip-text text-transparent tracking-tight" className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-foreground tracking-tight wrap-break-word"
> >
Tungulov.space <span className="block">Tungulov.space</span>
</motion.h1> </motion.h1>
<motion.p <motion.p
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }} transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
className="text-xl sm:text-2xl md:text-3xl text-muted-foreground font-medium" className="text-lg sm:text-xl md:text-2xl text-muted-foreground font-medium wrap-break-word"
> >
Избавляем вас от головной боли разработки Избавляем вас от головной боли разработки
</motion.p> </motion.p>
</motion.div> </motion.div>
<motion.div <div className="flex flex-col items-center">
initial={{ opacity: 0, y: 20 }} <motion.div
animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 10 }}
transition={{ duration: 0.6, delay: 0.6 }} animate={{ opacity: 1, y: 0 }}
className="text-center" transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
> className="flex items-start justify-center gap-8 sm:gap-20"
<p className="text-lg sm:text-xl md:text-2xl text-foreground/80 leading-relaxed max-w-2xl mx-auto"> >
Сконцентрируйтесь на бизнесе, а мы позаботимся о продукте <motion.div
</p> animate={{
</motion.div> y: [0, -2, 0],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
}}
whileHover={{ scale: 1.15, rotate: 5 }}
className="text-foreground/60 hover:text-foreground cursor-pointer transition-colors duration-300"
>
<Server
className="size-12 sm:size-14 md:size-20"
strokeWidth={1.5}
/>
</motion.div>
<div className="flex flex-col items-center gap-4">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.3, ease: "easeOut" }}
className="relative"
>
<motion.div
animate={{
boxShadow: [
"0 0 20px rgba(59, 130, 246, 0.3), 0 4px 6px -1px rgba(0, 0, 0, 0.1)",
"0 0 40px rgba(147, 51, 234, 0.4), 0 10px 15px -3px rgba(0, 0, 0, 0.1)",
"0 0 20px rgba(59, 130, 246, 0.3), 0 4px 6px -1px rgba(0, 0, 0, 0.1)",
],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
}}
className="relative px-8 py-5 sm:px-10 sm:py-6 rounded-2xl bg-linear-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 backdrop-blur-sm border border-blue-500/30 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
>
<div className="absolute inset-0 rounded-2xl bg-linear-to-r from-blue-500/20 via-purple-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
<span className="relative z-10 font-semibold text-base sm:text-lg md:text-xl bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent whitespace-nowrap">
Давайте приступим к воплощению вашей идеи
</span>
<motion.div
animate={{
backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: "linear",
}}
className="absolute inset-0 rounded-2xl bg-linear-to-r from-blue-500/0 via-purple-500/20 to-pink-500/0 bg-size-[200%_100%] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
/>
</motion.div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
className="text-center space-y-1"
>
<p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
Напишите о вашем проекте
</p>
<p className="text-sm sm:text-base text-muted-foreground leading-relaxed">
и уже через пару мгновений протестируйте демо
</p>
</motion.div>
</div>
<motion.div
animate={{
y: [0, 2, 0],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
delay: 0.5,
}}
whileHover={{ scale: 1.15, rotate: -5 }}
className="text-foreground/60 hover:text-foreground cursor-pointer transition-colors duration-300"
>
<Code
className="size-12 sm:size-14 md:size-20"
strokeWidth={1.5}
/>
</motion.div>
</motion.div>
</div>
</div> </div>
</div> </div>
); );