(Feat) Init WebSite
This commit is contained in:
+248
@@ -0,0 +1,248 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* HERO */}
|
||||
<section className="relative isolate min-h-screen flex items-center justify-center overflow-hidden">
|
||||
{/* Background video */}
|
||||
<video
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
preload="auto"
|
||||
aria-hidden
|
||||
className="absolute inset-0 z-0 w-full h-full object-cover"
|
||||
>
|
||||
<source src="/Video/Header_Video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
{/* Dark overlay for text readability */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 z-10 bg-background/60"
|
||||
/>
|
||||
{/* Vignette / radial fade to deepen the edges */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 z-10"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at 50% 50%, rgba(10,10,10,0) 30%, rgba(10,10,10,0.85) 100%)",
|
||||
}}
|
||||
/>
|
||||
{/* Grain / noise overlay via CSS gradient */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 z-10 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 1px, transparent 3px)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-20 max-w-5xl w-full px-6 lg:px-10 flex flex-col items-center text-center pt-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.92, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 1.1, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="mb-10"
|
||||
>
|
||||
<Image
|
||||
src="/image/Studio/Logo Flat.png"
|
||||
alt="Highland Games Studio"
|
||||
width={180}
|
||||
height={120}
|
||||
priority
|
||||
className="drop-shadow-[0_0_40px_rgba(196,184,150,0.15)]"
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.3, ease: "easeOut" }}
|
||||
className="font-display text-6xl sm:text-7xl lg:text-8xl tracking-wider leading-[0.95] text-balance"
|
||||
>
|
||||
HIGHLAND GAMES
|
||||
<br />
|
||||
<span className="text-accent">STUDIO</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.6, ease: "easeOut" }}
|
||||
className="mt-8 text-lg sm:text-xl text-foreground-muted tracking-wide max-w-xl text-balance"
|
||||
>
|
||||
Where summits become worlds.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.9, delay: 0.9, ease: "easeOut" }}
|
||||
className="mt-12 flex flex-col sm:flex-row gap-4"
|
||||
>
|
||||
<Link
|
||||
href="/games"
|
||||
className="px-8 py-3 bg-accent text-background font-display tracking-widest text-sm hover:bg-foreground hover:scale-[1.03] transition duration-200"
|
||||
>
|
||||
EXPLORE OUR GAMES
|
||||
</Link>
|
||||
<Link
|
||||
href="/studio"
|
||||
className="px-8 py-3 border border-border text-foreground font-display tracking-widest text-sm hover:border-accent hover:text-accent hover:scale-[1.03] transition duration-200"
|
||||
>
|
||||
MEET THE STUDIO
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Scroll indicator - positioned relative to the section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.5, duration: 1 }}
|
||||
className="absolute z-20 bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 text-foreground-muted text-xs tracking-widest"
|
||||
>
|
||||
<span className="font-display">SCROLL</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="w-px h-8 bg-foreground-muted"
|
||||
/>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* STUDIO INTRO */}
|
||||
<section className="py-24 px-6 lg:px-10">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— THE STUDIO
|
||||
</p>
|
||||
<h2 className="font-display text-4xl sm:text-5xl lg:text-6xl tracking-wider leading-tight mb-8">
|
||||
Worlds beyond
|
||||
<br />
|
||||
the summit.
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-muted leading-relaxed max-w-2xl">
|
||||
We build worlds where every horizon hides a story. Hand-crafted
|
||||
games made to be lived in, not just played through. Each one a
|
||||
different summit, a different climb.
|
||||
</p>
|
||||
<Link
|
||||
href="/studio"
|
||||
className="inline-block mt-8 font-display text-sm tracking-widest text-accent hover:text-foreground transition-colors"
|
||||
>
|
||||
LEARN MORE →
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FEATURED GAME */}
|
||||
<section className="py-24 px-6 lg:px-10 border-t border-border">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— IN DEVELOPMENT
|
||||
</p>
|
||||
<h2 className="font-display text-4xl sm:text-5xl lg:text-6xl tracking-wider mb-12">
|
||||
OUR FIRST WORLD
|
||||
</h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.9, delay: 0.1 }}
|
||||
>
|
||||
<Link
|
||||
href="/games/project-one"
|
||||
className="group relative aspect-[16/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors duration-500"
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Image
|
||||
src="/image/Studio/Logo Flat.png"
|
||||
alt="Game placeholder"
|
||||
width={120}
|
||||
height={80}
|
||||
className="opacity-20 group-hover:opacity-30 group-hover:scale-105 transition-all duration-700 ease-out"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-accent/0 group-hover:bg-accent/[0.03] transition-colors duration-500"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-background via-background/70 to-transparent">
|
||||
<p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
|
||||
SURVIVAL · CRAFTING · EXPLORATION
|
||||
</p>
|
||||
<h3 className="font-display text-3xl sm:text-4xl tracking-wider mb-4 group-hover:text-accent transition-colors duration-300">
|
||||
PROJECT ONE
|
||||
</h3>
|
||||
<p className="text-foreground-muted max-w-xl mb-6">
|
||||
Inspired by Raft and Aloft. Build, explore, and survive across
|
||||
shifting horizons. A new survival adventure, currently in early
|
||||
development.
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-2 font-display text-sm tracking-widest text-foreground group-hover:text-accent transition-colors">
|
||||
LEARN MORE
|
||||
<span className="inline-block transition-transform duration-300 group-hover:translate-x-1">
|
||||
→
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* DEVBLOG TEASER */}
|
||||
<section className="py-24 px-6 lg:px-10 border-t border-border">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
|
||||
— DEVBLOG
|
||||
</p>
|
||||
<h2 className="font-display text-4xl sm:text-5xl tracking-wider mb-6">
|
||||
FOLLOW THE JOURNEY
|
||||
</h2>
|
||||
<p className="text-lg text-foreground-muted leading-relaxed max-w-2xl mx-auto mb-8">
|
||||
Behind-the-scenes updates, design decisions, and milestones from
|
||||
the studio. Every step of the climb, documented.
|
||||
</p>
|
||||
<Link
|
||||
href="/devblog"
|
||||
className="inline-block px-8 py-3 border border-border text-foreground font-display tracking-widest text-sm hover:border-accent hover:text-accent hover:scale-[1.03] transition duration-200"
|
||||
>
|
||||
READ THE DEVBLOG
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user