197 lines
9.5 KiB
TypeScript
197 lines
9.5 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Sparkles, User, Film, Layers, Linkedin, Github, Mail, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="slide-background"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Romet Kriks"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Process", id: "process" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Motion Graphics Studio"
|
|
bottomRightText="hello@rometkriks.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{ variant: "sparkles-gradient" }}
|
|
title="Motion Graphics & Technical Art"
|
|
description="Crafting dynamic visual experiences through cutting-edge motion design and technical artistry. Transform your vision into compelling animated narratives."
|
|
tag="Creative Direction"
|
|
tagIcon={Sparkles}
|
|
imageSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
|
|
imageAlt="Motion graphics hero visual"
|
|
buttons={[
|
|
{ text: "View Portfolio", href: "work" },
|
|
{ text: "Get in Touch", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
tag="About Me"
|
|
tagIcon={User}
|
|
title="Technical Artist with a Passion for Motion Design"
|
|
description="Romet Kriks"
|
|
subdescription="Motion Graphics & Animation Specialist"
|
|
icon={Zap}
|
|
imageSrc="https://img.b2bpic.net/free-photo/male-artist-painting-studio-with-watercolors_23-2149908447.jpg"
|
|
imageAlt="Romet Kriks - Technical Artist"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardFour
|
|
title="Featured Work"
|
|
description="Exploring the intersection of creative vision and technical precision through motion graphics and animation"
|
|
tag="Portfolio"
|
|
tagIcon={Film}
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
products={[
|
|
{
|
|
id: "1", name: "3D Character Animation", price: "2024", variant: "Character Rigging & Animation", imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148904313.jpg", imageAlt: "3D character animation project"
|
|
},
|
|
{
|
|
id: "2", name: "Motion Graphics Title Sequence", price: "2024", variant: "Broadcast Design & Animation", imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148904016.jpg", imageAlt: "Motion graphics title sequence"
|
|
},
|
|
{
|
|
id: "3", name: "Visual Effects Compositing", price: "2024", variant: "VFX & Post-Production", imageSrc: "https://img.b2bpic.net/free-vector/flat-motiongraphics-landing-page-template_23-2148887427.jpg", imageAlt: "Visual effects compositing project"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{ text: "View Full Portfolio", href: "https://behance.net" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureProcessSteps
|
|
tag="My Approach"
|
|
tagIcon={Layers}
|
|
title="Technical Excellence Meets Creative Vision"
|
|
description="A proven workflow combining conceptual ideation, technical implementation, and iterative refinement to deliver exceptional motion design solutions."
|
|
useInvertedBackground="noInvert"
|
|
steps={[
|
|
{
|
|
number: "01", title: "Concept & Direction", tag: "Planning", description: "Collaborate with clients to establish creative direction, visual style, and technical requirements for the project."
|
|
},
|
|
{
|
|
number: "02", title: "Design & Previsualization", tag: "Development", description: "Create detailed storyboards and animatics to communicate the vision and plan technical implementation strategies."
|
|
},
|
|
{
|
|
number: "03", title: "Production & Animation", tag: "Execution", description: "Build assets, rig characters, create animations, and compose visual effects using industry-standard software."
|
|
},
|
|
{
|
|
number: "04", title: "Refinement & Delivery", tag: "Polish", description: "Iterate based on feedback, optimize performance, and deliver final assets in required formats for all platforms."
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Discuss Your Project", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardFifteen
|
|
testimonial="Romet's technical expertise combined with creative instinct transformed our brand's visual identity. The animations are not only visually stunning but also perform flawlessly across all platforms."
|
|
rating={5}
|
|
author="Creative Director, Digital Studios"
|
|
avatars={[
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client testimonial"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Client testimonial"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client testimonial"
|
|
},
|
|
{
|
|
src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "Client testimonial"
|
|
}
|
|
]}
|
|
useInvertedBackground="invertDefault"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Let's Create Something Amazing"
|
|
description="Ready to bring your vision to life? I'm available for freelance projects, consultations, and full-time opportunities. Get in touch to discuss your motion graphics needs."
|
|
useInvertedBackground="noInvert"
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true
|
|
},
|
|
{
|
|
name: "company", type: "text", placeholder: "Company or Project Name", required: false
|
|
}
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell me about your project...", rows: 5,
|
|
required: true
|
|
}}
|
|
buttonText="Send Message"
|
|
mediaPosition="right"
|
|
imageSrc="https://img.b2bpic.net/free-vector/flat-timeline-infographic-template_23-2148914623.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Romet Kriks"
|
|
copyrightText="© 2025 Romet Kriks. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com/in/rometkriks", ariaLabel: "LinkedIn Profile"
|
|
},
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com/rometkriks", ariaLabel: "GitHub Profile"
|
|
},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:hello@rometkriks.com", ariaLabel: "Email Contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |