Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
61
src/app/about/page.tsx
Normal file
61
src/app/about/page.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Cpu } from "lucide-react";
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="PROTO-TRANSIT"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Designer Bio & Background"
|
||||
metrics={[
|
||||
{ icon: Cpu, label: "Design Experience", value: "10+ Years" },
|
||||
{ icon: Cpu, label: "Concept Renders", value: "500+" },
|
||||
{ icon: Cpu, label: "Industry Projects", value: "25+" }
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
className="py-20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Contact", items: [{ label: "Email", href: "mailto:info@proto.design" }] }
|
||||
]}
|
||||
logoText="PROTO-TRANSIT"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
60
src/app/contact/page.tsx
Normal file
60
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="PROTO-TRANSIT"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Get in Touch"
|
||||
description="Ready to build the future? Send us your project details."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your project ideas...", rows: 5 }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Contact", items: [{ label: "Email", href: "mailto:info@proto.design" }] }
|
||||
]}
|
||||
logoText="PROTO-TRANSIT"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
135
src/app/page.tsx
135
src/app/page.tsx
@@ -30,12 +30,9 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Portfolio", id: "portfolio"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="PROTO-TRANSIT"
|
||||
/>
|
||||
@@ -43,22 +40,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Redefining Motion Architecture."
|
||||
description="Crafting the next generation of transportation with computational design and cinematic precision."
|
||||
tag="Transport Conceptualization"
|
||||
buttons={[
|
||||
{
|
||||
text: "View Portfolio", href: "#portfolio"},
|
||||
{
|
||||
text: "Contact", href: "#contact"},
|
||||
{ text: "View Portfolio", href: "#portfolio" },
|
||||
{ text: "Contact", href: "/contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=1", imageAlt: "futuristic concept car dark studio"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=1", imageAlt: "futuristic vehicle concept dark studio"}
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=1", imageAlt: "futuristic concept car dark studio" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=1", imageAlt: "futuristic vehicle concept dark studio" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
@@ -74,6 +66,7 @@ export default function LandingPage() {
|
||||
tag="Design Vision"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/monitors-photovoltaics-factory-used-manage-performance-robot-arms_482257-125090.jpg?_wi=1"
|
||||
imageAlt="transportation designer working at desk"
|
||||
buttons={[{ text: "Read More", href: "/about" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -83,16 +76,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1", title: "Concept Sketches", description: "Rapid ideation using digital and analog techniques.", tag: "Process", imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151483065.jpg", imageAlt: "Off-road car in the wilderness"},
|
||||
{
|
||||
id: "f2", title: "3D Modeling", description: "High-fidelity surfacing for manufacturing-ready prototypes.", tag: "Precision", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=2", imageAlt: "Off-road car in the wilderness"},
|
||||
{
|
||||
id: "f3", title: "Cinematic Renders", description: "Storytelling through lighting, texture, and environment.", tag: "Vision", imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=2", imageAlt: "Off-road car in the wilderness"},
|
||||
{
|
||||
id: "f4", title: "Aerodynamic Optimization", description: "Wind tunnel simulation for peak efficiency.", tag: "Aerodynamics", imageSrc: "http://img.b2bpic.net/free-photo/monitors-photovoltaics-factory-used-manage-performance-robot-arms_482257-125090.jpg?_wi=2", imageAlt: "Off-road car in the wilderness"},
|
||||
{
|
||||
id: "f5", title: "Material Innovation", description: "Exploring sustainable carbon-neutral composites.", tag: "Sustainability", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=1", imageAlt: "Off-road car in the wilderness"},
|
||||
{ id: "f1", title: "Concept Sketches", description: "Rapid ideation using digital and analog techniques.", tag: "Process", imageSrc: "http://img.b2bpic.net/free-photo/off-road-car-wilderness_23-2151483065.jpg", imageAlt: "Off-road car in the wilderness" },
|
||||
{ id: "f2", title: "3D Modeling", description: "High-fidelity surfacing for manufacturing-ready prototypes.", tag: "Precision", imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-car-night_23-2149001289.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
|
||||
{ id: "f3", title: "Cinematic Renders", description: "Storytelling through lighting, texture, and environment.", tag: "Vision", imageSrc: "http://img.b2bpic.net/free-photo/batmobile-concept-car-with-neon-lights_23-2151649843.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
|
||||
{ id: "f4", title: "Aerodynamic Optimization", description: "Wind tunnel simulation for peak efficiency.", tag: "Aerodynamics", imageSrc: "http://img.b2bpic.net/free-photo/monitors-photovoltaics-factory-used-manage-performance-robot-arms_482257-125090.jpg?_wi=2", imageAlt: "Off-road car in the wilderness" },
|
||||
{ id: "f5", title: "Material Innovation", description: "Exploring sustainable carbon-neutral composites.", tag: "Sustainability", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=1", imageAlt: "Off-road car in the wilderness" },
|
||||
]}
|
||||
title="Design Capabilities"
|
||||
description="Comprehensive design services for future-facing mobility."
|
||||
@@ -106,18 +94,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Autonomous Pod", price: "2024", variant: "Mobility", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=2"},
|
||||
{
|
||||
id: "p2", name: "Hyperloop Aero", price: "2024", variant: "Transport", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg"},
|
||||
{
|
||||
id: "p3", name: "Velocity Racer", price: "2023", variant: "Race", imageSrc: "http://img.b2bpic.net/free-photo/sunset-race_23-2151952483.jpg"},
|
||||
{
|
||||
id: "p4", name: "Red Shift Moto", price: "2023", variant: "Motorcycle", imageSrc: "http://img.b2bpic.net/free-vector/dark-black-wallpaper-with-abstract-shiny-metallic-design_1017-59672.jpg"},
|
||||
{
|
||||
id: "p5", name: "Urban Glide", price: "2022", variant: "Urban", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599322.jpg"},
|
||||
{
|
||||
id: "p6", name: "V-Plane Concept", price: "2022", variant: "Aviation", imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-looking-spaceship_23-2150675505.jpg"},
|
||||
{ id: "p1", name: "Autonomous Pod", price: "2024", variant: "Mobility", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-mean-transportation-ultra-modern-city_23-2151065392.jpg?_wi=2" },
|
||||
{ id: "p2", name: "Hyperloop Aero", price: "2024", variant: "Transport", imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg" },
|
||||
{ id: "p3", name: "Velocity Racer", price: "2023", variant: "Race", imageSrc: "http://img.b2bpic.net/free-photo/sunset-race_23-2151952483.jpg" },
|
||||
{ id: "p4", name: "Red Shift Moto", price: "2023", variant: "Motorcycle", imageSrc: "http://img.b2bpic.net/free-vector/dark-black-wallpaper-with-abstract-shiny-metallic-design_1017-59672.jpg" },
|
||||
{ id: "p5", name: "Urban Glide", price: "2022", variant: "Urban", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-time-machines-design_23-2151599322.jpg" },
|
||||
{ id: "p6", name: "V-Plane Concept", price: "2022", variant: "Aviation", imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-looking-spaceship_23-2150675505.jpg" },
|
||||
]}
|
||||
title="Project Gallery"
|
||||
description="Select case studies showcasing our design development journey."
|
||||
@@ -130,18 +112,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "15+", title: "Global Projects", items: [
|
||||
"Concept Ideation", "Manufacturing Ready", "Strategic Consulting"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "8k+", title: "Render Hours", items: [
|
||||
"3D Modeling", "Lighting Simulation", "Texture Mapping"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "100%", title: "Client Satisfaction", items: [
|
||||
"Vision Alignment", "Iterative Workflow", "Final Delivery"],
|
||||
},
|
||||
{ id: "m1", value: "15+", title: "Global Projects", items: ["Concept Ideation", "Manufacturing Ready", "Strategic Consulting"] },
|
||||
{ id: "m2", value: "8k+", title: "Render Hours", items: ["3D Modeling", "Lighting Simulation", "Texture Mapping"] },
|
||||
{ id: "m3", value: "100%", title: "Client Satisfaction", items: ["Vision Alignment", "Iterative Workflow", "Final Delivery"] },
|
||||
]}
|
||||
title="Project Statistics"
|
||||
description="Key achievements in our design practice."
|
||||
@@ -154,29 +127,16 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Sarah Miller", role: "Creative Director", company: "AutoDesign Lab", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg"},
|
||||
{
|
||||
id: "t2", name: "David Chen", role: "Head of R&D", company: "NextMotion", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg"},
|
||||
{
|
||||
id: "t3", name: "Alex Riviera", role: "Lead Architect", company: "Veloce Corp", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg"},
|
||||
{
|
||||
id: "t4", name: "Elena Rossi", role: "Project Manager", company: "SkyTransport", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/successful-architect-with-safety-helmet_23-2148242912.jpg"},
|
||||
{
|
||||
id: "t5", name: "Marcus Thorne", role: "Design Lead", company: "Velocity Systems", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-bald-man-suit-wearing-glasses-looking-front-with-serious-confident-expression-standing-pink-wall_141793-62172.jpg"},
|
||||
{ id: "t1", name: "Sarah Miller", role: "Creative Director", company: "AutoDesign Lab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/african-guy-wears-trendy-wristwatch-posing-with-smile-near-beige-wall-outdoor-portrait-black-man-good-mood-standing-with-arms-crossed_197531-21794.jpg" },
|
||||
{ id: "t2", name: "David Chen", role: "Head of R&D", company: "NextMotion", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg" },
|
||||
{ id: "t3", name: "Alex Riviera", role: "Lead Architect", company: "Veloce Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
|
||||
{ id: "t4", name: "Elena Rossi", role: "Project Manager", company: "SkyTransport", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-architect-with-safety-helmet_23-2148242912.jpg" },
|
||||
{ id: "t5", name: "Marcus Thorne", role: "Design Lead", company: "Velocity Systems", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-bald-man-suit-wearing-glasses-looking-front-with-serious-confident-expression-standing-pink-wall_141793-62172.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "5.0", label: "Avg Rating"},
|
||||
{
|
||||
value: "20+", label: "Partners"},
|
||||
{
|
||||
value: "100%", label: "On Time"},
|
||||
{ value: "5.0", label: "Avg Rating" },
|
||||
{ value: "20+", label: "Partners" },
|
||||
{ value: "100%", label: "On Time" },
|
||||
]}
|
||||
title="Client Voices"
|
||||
description="Partners who trust our design process."
|
||||
@@ -186,14 +146,12 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready for the Future?"
|
||||
description="Collaborate with us on your next automotive design innovation. We're ready to define the next era of mobility."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us", href: "#"},
|
||||
{ text: "Contact Us", href: "/contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -201,30 +159,9 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Portfolio", href: "#portfolio"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Email", href: "mailto:info@proto.design"},
|
||||
{
|
||||
label: "Twitter", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Portfolio", href: "#portfolio" }] },
|
||||
{ title: "Contact", items: [{ label: "Email", href: "mailto:info@proto.design" }, { label: "Contact Page", href: "/contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="PROTO-TRANSIT"
|
||||
/>
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-nunito), sans-serif;
|
||||
font-family: var(--font-orbitron), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-nunito), sans-serif;
|
||||
font-family: var(--font-orbitron), sans-serif;
|
||||
}
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #141414;
|
||||
--card: #171717;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #e63946;
|
||||
--primary-cta: #ff0000;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #262626;
|
||||
--secondary-cta: #7f1d1d;
|
||||
--secondary-cta-text: #f5f5f5;
|
||||
--accent: #333333;
|
||||
--background-accent: #e63946;
|
||||
--accent: #ff3333;
|
||||
--background-accent: #1f0000;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user