├── .eslintrc.json ├── src ├── app │ ├── favicon.ico │ ├── globals.css │ ├── base.css │ ├── blog │ │ └── page.jsx │ ├── layout.jsx │ ├── work │ │ └── page.jsx │ ├── contact │ │ └── page.jsx │ ├── not-found.jsx │ ├── process │ │ └── page.jsx │ ├── page.jsx │ └── about │ │ └── page.jsx ├── images │ ├── laptop.jpg │ ├── meeting.jpg │ ├── whiteboard.jpg │ ├── team │ │ ├── blake-reid.jpeg │ │ ├── angela-fisher.jpeg │ │ ├── chelsea-hagon.jpeg │ │ ├── dries-vincent.jpeg │ │ ├── emma-dorsey.jpeg │ │ ├── jeffrey-webb.jpeg │ │ ├── benjamin-russel.jpeg │ │ ├── kathryn-murphy.jpeg │ │ ├── leonard-krasner.jpeg │ │ ├── michael-foster.jpeg │ │ ├── whitney-francis.jpeg │ │ └── leslie-alexander.jpeg │ └── clients │ │ ├── family-fund │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── unseal │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── green-life │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── mail-smirk │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── north-adventures │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── phobia │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ ├── bright-path │ │ ├── logomark-dark.svg │ │ ├── logomark-light.svg │ │ ├── logo-dark.svg │ │ └── logo-light.svg │ │ └── home-work │ │ ├── logomark-light.svg │ │ ├── logomark-dark.svg │ │ ├── logo-light.svg │ │ └── logo-dark.svg ├── fonts │ └── Mona-Sans.var.woff2 ├── components │ ├── Container.jsx │ ├── TagList.jsx │ ├── RadioInput.jsx │ ├── Button.jsx │ ├── Logo.jsx │ ├── StatList.jsx │ ├── Border.jsx │ ├── List.jsx │ ├── Offices.jsx │ ├── FooterNavigation.jsx │ ├── TextInput.jsx │ ├── PageIntro.jsx │ ├── ContactSection.jsx │ ├── GridList.jsx │ ├── FadeIn.jsx │ ├── Testimonials.jsx │ ├── Cultures.jsx │ ├── Section.jsx │ ├── SocialMedia.jsx │ ├── SectionIntro.jsx │ ├── Build.jsx │ ├── ContactDetails.jsx │ ├── ContactForm.jsx │ ├── Discover.jsx │ ├── Clients.jsx │ ├── Blockquote.jsx │ ├── Deliver.jsx │ ├── Services.jsx │ ├── Values.jsx │ ├── Footer.jsx │ ├── GridPattern.jsx │ ├── StylizedImage.jsx │ └── RootLayout.jsx └── constants │ └── index.jsx ├── jsconfig.json ├── next.config.js ├── postcss.config.js ├── .gitignore ├── package.json ├── public ├── vercel.svg └── next.svg ├── tailwind.config.js └── README.md /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @import "./base.css"; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/images/laptop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/laptop.jpg -------------------------------------------------------------------------------- /src/images/meeting.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/meeting.jpg -------------------------------------------------------------------------------- /src/images/whiteboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/whiteboard.jpg -------------------------------------------------------------------------------- /src/fonts/Mona-Sans.var.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/fonts/Mona-Sans.var.woff2 -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/images/team/blake-reid.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/blake-reid.jpeg -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /src/images/team/angela-fisher.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/angela-fisher.jpeg -------------------------------------------------------------------------------- /src/images/team/chelsea-hagon.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/chelsea-hagon.jpeg -------------------------------------------------------------------------------- /src/images/team/dries-vincent.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/dries-vincent.jpeg -------------------------------------------------------------------------------- /src/images/team/emma-dorsey.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/emma-dorsey.jpeg -------------------------------------------------------------------------------- /src/images/team/jeffrey-webb.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/jeffrey-webb.jpeg -------------------------------------------------------------------------------- /src/images/team/benjamin-russel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/benjamin-russel.jpeg -------------------------------------------------------------------------------- /src/images/team/kathryn-murphy.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/kathryn-murphy.jpeg -------------------------------------------------------------------------------- /src/images/team/leonard-krasner.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/leonard-krasner.jpeg -------------------------------------------------------------------------------- /src/images/team/michael-foster.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/michael-foster.jpeg -------------------------------------------------------------------------------- /src/images/team/whitney-francis.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/whitney-francis.jpeg -------------------------------------------------------------------------------- /src/images/team/leslie-alexander.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noorjsdivs/studioyt/HEAD/src/images/team/leslie-alexander.jpeg -------------------------------------------------------------------------------- /src/app/base.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @font-face { 4 | font-family: "Mona Sans"; 5 | font-weight: 200 900; 6 | font-display: block; 7 | font-style: normal; 8 | font-stretch: 75% 125%; 9 | src: url("../fonts//Mona-Sans.var.woff2"); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Container.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | const Container = ({ as: Component = "div", className, children }) => { 4 | return ( 5 | 6 |
{children}
7 | 8 | ); 9 | }; 10 | 11 | export default Container; 12 | -------------------------------------------------------------------------------- /src/images/clients/family-fund/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/clients/family-fund/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/app/blog/page.jsx: -------------------------------------------------------------------------------- 1 | import PageIntro from "@/components/PageIntro"; 2 | 3 | const BlogPage = () => { 4 | return ( 5 | <> 6 | 7 |

8 | Stay up-to-date with the latest industry news as our marketing teams 9 | finds new ways to re-purpose old CSS tricks articles. 10 |

11 | 12 | 13 | ); 14 | }; 15 | 16 | export default BlogPage; 17 | -------------------------------------------------------------------------------- /src/images/clients/unseal/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/clients/unseal/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /src/components/TagList.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | export function TagList({ className, children }) { 4 | return ( 5 | 8 | ); 9 | } 10 | 11 | export function TagListItem({ className, children }) { 12 | return ( 13 |
  • 19 | {children} 20 |
    • 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/RadioInput.jsx: -------------------------------------------------------------------------------- 1 | const RadioInput = ({ label, ...props }) => { 2 | return ( 3 | 11 | ); 12 | }; 13 | 14 | export default RadioInput; 15 | -------------------------------------------------------------------------------- /src/images/clients/green-life/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/app/layout.jsx: -------------------------------------------------------------------------------- 1 | import RootLayout from "@/components/RootLayout"; 2 | import "./globals.css"; 3 | 4 | export const metadata = { 5 | title: { 6 | template: "blog_app", 7 | default: "Personal Blog - A feature to make you famous", 8 | }, 9 | }; 10 | 11 | export default function Layout({ children }) { 12 | return ( 13 | 17 | 18 | {children} 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/images/clients/green-life/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "studioyt", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "10.4.15", 13 | "clsx": "^2.0.0", 14 | "eslint": "8.47.0", 15 | "eslint-config-next": "13.4.18", 16 | "framer-motion": "^10.16.0", 17 | "next": "13.4.18", 18 | "postcss": "8.4.28", 19 | "react": "18.2.0", 20 | "react-dom": "18.2.0", 21 | "react-icons": "^4.10.1", 22 | "tailwindcss": "3.3.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/work/page.jsx: -------------------------------------------------------------------------------- 1 | import PageIntro from "@/components/PageIntro"; 2 | import React from "react"; 3 | 4 | const WorkPage = () => { 5 | return ( 6 | <> 7 | 11 |

    12 | We believe in efficiency and maximizing our resources to provide the 13 | best value to our clients. The primary way we do that is by re-using 14 | the same five projects we’ve been developing for the past decade. 15 |

    16 |     17 | 18 | ); 19 | }; 20 | 21 | export default WorkPage; 22 | -------------------------------------------------------------------------------- /src/images/clients/mail-smirk/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /src/images/clients/mail-smirk/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require("tailwindcss/defaultTheme"); 2 | /** @type {import('tailwindcss').Config} */ 3 | module.exports = { 4 | content: [ 5 | "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./src/components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./src/app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | borderRadius: { 12 | "4xl": "2.5rem", 13 | }, 14 | fontFamily: { 15 | sans: ["Mona Sans", ...defaultTheme.fontFamily.sans], 16 | display: [ 17 | ["Mona Sans", ...defaultTheme.fontFamily.sans], 18 | { fontVariationSettings: '"wdth" 125' }, 19 | ], 20 | }, 21 | }, 22 | }, 23 | plugins: [], 24 | }; 25 | -------------------------------------------------------------------------------- /src/app/contact/page.jsx: -------------------------------------------------------------------------------- 1 | import ContactDetails from "@/components/ContactDetails"; 2 | import ContactForm from "@/components/ContactForm"; 3 | import Container from "@/components/Container"; 4 | import PageIntro from "@/components/PageIntro"; 5 | 6 | const ContactPage = () => { 7 | return ( 8 | <> 9 | 10 |

    We can not wait to hear from you.

    11 |     12 | 13 |
    14 | 15 | 16 |
    17 |     18 | 19 | ); 20 | }; 21 | 22 | export default ContactPage; 23 | -------------------------------------------------------------------------------- /src/components/Button.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import clsx from "clsx"; 3 | 4 | const Button = ({ invert, href, className, children, ...props }) => { 5 | className = clsx( 6 | className, 7 | "inline-flex rounded-full px-4 py-1.5 text-sm font-semibold transition", 8 | invert 9 | ? "bg-white text-neutral-950 hover:bg-neutral-200" 10 | : "bg-neutral-950 text-white hover:bg-neutral-800" 11 | ); 12 | 13 | let inner = {children}; 14 | if (href) { 15 | return ( 16 | 17 | {inner} 18 | 19 | ); 20 | } 21 | return ( 22 | 25 | ); 26 | }; 27 | 28 | export default Button; 29 | -------------------------------------------------------------------------------- /src/components/Logo.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import Link from "next/link"; 3 | 4 | const Logo = ({ invert, href, className, children, ...props }) => { 5 | className = clsx( 6 | className, 7 | "black", 8 | invert ? "text-white hover:text-blue-600" : "text-black hover:text-blue-600" 9 | ); 10 | const inner = {children}; 11 | if (href) { 12 | return ( 13 | 14 | {inner} 15 | 16 | ); 17 | } 18 | return ( 19 |

    26 | {inner} 27 |

    28 | ); 29 | }; 30 | 31 | export default Logo; 32 | -------------------------------------------------------------------------------- /src/components/StatList.jsx: -------------------------------------------------------------------------------- 1 | import Border from "./Border"; 2 | import FadeIn, { FadeInStagger } from "./FadeIn"; 3 | 4 | export function StatList({ children, ...props }) { 5 | return ( 6 | 7 |
    8 | {children} 9 |
    10 |     11 | ); 12 | } 13 | 14 | export function StatListItem({ label, value }) { 15 | return ( 16 | 17 |
    {label}
    18 |
    19 | {value} 20 |
    21 |     22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /src/images/clients/north-adventures/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/clients/north-adventures/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/clients/phobia/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/phobia/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Border.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | const Border = ({ 4 | className, 5 | position = "top", 6 | invert = false, 7 | as: Component = "div", 8 | ...props 9 | }) => { 10 | return ( 11 | 25 | ); 26 | }; 27 | 28 | export default Border; 29 | -------------------------------------------------------------------------------- /src/images/clients/bright-path/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/images/clients/bright-path/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/List.jsx: -------------------------------------------------------------------------------- 1 | import FadeIn, { FadeInStagger } from "./FadeIn"; 2 | import Border from "./Border"; 3 | import clsx from "clsx"; 4 | 5 | const List = ({ className, children }) => { 6 | return ( 7 | 8 | 11 | 12 | ); 13 | }; 14 | 15 | export const ListItem = ({ title, children }) => { 16 | return ( 17 |
  • 18 | 19 | 20 | {title && ( 21 | {`${title}. `} 22 | )} 23 | {children} 24 | 25 | 26 |
    • 27 | ); 28 | }; 29 | 30 | export default List; 31 | -------------------------------------------------------------------------------- /src/images/clients/home-work/logomark-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/constants/index.jsx: -------------------------------------------------------------------------------- 1 | import { SocialMediaProfiles } from "@/components/SocialMedia"; 2 | 3 | export const navigation = [ 4 | { 5 | title: "Work", 6 | links: [ 7 | { title: "Amazon Clone", href: "/work/amazonclone" }, 8 | { title: "Bazar e-commerce", href: "/work/bazar" }, 9 | { title: "Blog 101", href: "/work/blog101" }, 10 | { 11 | title: ( 12 | <> 13 | See all 14 | 15 | ), 16 | href: "/work", 17 | }, 18 | ], 19 | }, 20 | { 21 | title: "Company", 22 | links: [ 23 | { title: "About", href: "/about" }, 24 | { title: "Process", href: "/process" }, 25 | { title: "Blog", href: "/blog" }, 26 | { title: "Contact us", href: "/contact" }, 27 | ], 28 | }, 29 | { 30 | title: "Connect", 31 | links: SocialMediaProfiles, 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /src/images/clients/home-work/logomark-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/components/Offices.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | function Office({ name, children, invert = false }) { 4 | return ( 5 |
    11 | 12 | {name} 13 | 14 |
    15 | {children} 16 |
    17 | ); 18 | } 19 | 20 | const Offices = ({ invert = false, ...props }) => { 21 | return ( 22 | 38 | ); 39 | }; 40 | 41 | export default Offices; 42 | -------------------------------------------------------------------------------- /src/app/not-found.jsx: -------------------------------------------------------------------------------- 1 | import Container from "@/components/Container"; 2 | import FadeIn from "@/components/FadeIn"; 3 | import Link from "next/link"; 4 | import React from "react"; 5 | 6 | const NotFound = () => { 7 | return ( 8 | 9 | 10 |

    11 | 404 12 |

    13 |

    14 | Page not found 15 |

    16 |

    17 | Sorry, we could ont find the page you are looking for. 18 |

    19 | 23 | Go to the home page 24 | 25 |     26 |     27 | ); 28 | }; 29 | 30 | export default NotFound; 31 | -------------------------------------------------------------------------------- /src/components/FooterNavigation.jsx: -------------------------------------------------------------------------------- 1 | import { navigation } from "@/constants"; 2 | import Link from "next/link"; 3 | 4 | const FooterNavigation = () => { 5 | return ( 6 | 29 | ); 30 | }; 31 | 32 | export default FooterNavigation; 33 | -------------------------------------------------------------------------------- /src/app/process/page.jsx: -------------------------------------------------------------------------------- 1 | import Build from "@/components/Build"; 2 | import ContactSection from "@/components/ContactSection"; 3 | import Deliver from "@/components/Deliver"; 4 | import Discover from "@/components/Discover"; 5 | import PageIntro from "@/components/PageIntro"; 6 | import Values from "@/components/Values"; 7 | import React from "react"; 8 | 9 | const ProcessPage = () => { 10 | return ( 11 | <> 12 | 13 |

    14 | We believe in efficiency and maximizing our resources to provide the 15 | best value to our clients. The primary way we do that is by re-using 16 | the same five projects we’ve been developing for the past decade. 17 |

    18 |     19 |
    20 | {/* Discover */} 21 | 22 | {/* Build */} 23 | 24 | {/* Deliver */} 25 | 26 |
    27 | {/* Values */} 28 | 29 | 30 | 31 | ); 32 | }; 33 | 34 | export default ProcessPage; 35 | -------------------------------------------------------------------------------- /src/components/TextInput.jsx: -------------------------------------------------------------------------------- 1 | import React, { useId } from "react"; 2 | 3 | const TextInput = ({ label, ...props }) => { 4 | const id = useId(); 5 | return ( 6 |
    7 | 14 | 20 |
    21 | ); 22 | }; 23 | 24 | export default TextInput; 25 | -------------------------------------------------------------------------------- /src/components/PageIntro.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import clsx from "clsx"; 5 | 6 | const PageIntro = ({ eyebrow, title, children, centered = false }) => { 7 | return ( 8 | 11 | 12 |

    13 | 14 | {eyebrow} 15 | 16 | - 17 | 23 | {title} 24 | 25 |

    26 |
    32 | {children} 33 |
    34 |     35 |     36 | ); 37 | }; 38 | 39 | export default PageIntro; 40 | -------------------------------------------------------------------------------- /src/components/ContactSection.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import Button from "./Button"; 5 | import Offices from "./Offices"; 6 | 7 | const ContactSection = () => { 8 | return ( 9 | 10 | 11 |
    12 |

    13 | Tell us about your project 14 |

    15 |
    16 | 19 |
    20 |
    21 |

    22 | Our offices 23 |

    24 | 28 |
    29 |
    30 |     31 |     32 | ); 33 | }; 34 | 35 | export default ContactSection; 36 | -------------------------------------------------------------------------------- /src/components/GridList.jsx: -------------------------------------------------------------------------------- 1 | import FadeIn, { FadeInStagger } from "./FadeIn"; 2 | import clsx from "clsx"; 3 | import Border from "./Border"; 4 | 5 | export function GridList({ className, children }) { 6 | return ( 7 | 8 |
      15 | {children} 16 |
    17 |     18 | ); 19 | } 20 | 21 | export function GridListItem({ title, children, className, invert = false }) { 22 | return ( 23 |
  • 32 | 33 | 34 | 40 | {title}. 41 | {" "} 42 | {children} 43 | 44 | 45 |
    • 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/FadeIn.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { createContext, useContext } from "react"; 4 | import { motion, useReducedMotion } from "framer-motion"; 5 | const FadeInStaggerContext = createContext(false); 6 | 7 | const viewport = { once: true, margin: "0px 0px -200px" }; 8 | 9 | const FadeIn = (props) => { 10 | const shouldReduceMotion = useReducedMotion(); 11 | const isInStaggerGroup = useContext(FadeInStaggerContext); 12 | return ( 13 | 28 | ); 29 | }; 30 | 31 | export const FadeInStagger = ({ faster = false, ...props }) => { 32 | return ( 33 | 34 | 41 | 42 | ); 43 | }; 44 | 45 | export default FadeIn; 46 | -------------------------------------------------------------------------------- /src/components/Testimonials.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import GridPattern from "./GridPattern"; 3 | import clsx from "clsx"; 4 | import Container from "./Container"; 5 | import FadeIn from "./FadeIn"; 6 | import Image from "next/image"; 7 | 8 | const Testimonials = ({ children, client, className }) => { 9 | return ( 10 |
    16 | 20 | 21 | 22 |
    23 |
    24 |

    25 | {children} 26 |

    27 |
    28 |
    29 | {client.name} 30 |
    31 |
    32 |     33 |     34 |
    35 | ); 36 | }; 37 | 38 | export default Testimonials; 39 | -------------------------------------------------------------------------------- /src/components/Cultures.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SectionIntro from "./SectionIntro"; 3 | import Container from "./Container"; 4 | import { GridList, GridListItem } from "./GridList"; 5 | 6 | const Cultures = () => { 7 | return ( 8 |
    9 | 14 |

    15 | We are a group of like-minded people who share the same core values. 16 |

    17 |     18 | 19 | 20 | 21 | Our team has been with us since the beginning because none of them 22 | are allowed to have LinkedIn profiles. 23 | 24 | 25 | We don’t care when our team works just as long as they are working 26 | every waking second. 27 | 28 | 29 | You never know what someone is going through at home and we make 30 | sure to never find out. 31 | 32 | 33 | 34 |
    35 | ); 36 | }; 37 | 38 | export default Cultures; 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | ``` 14 | 15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 16 | 17 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. 18 | 19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /src/components/Section.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import StylizedImage from "./StylizedImage"; 5 | 6 | const Section = ({ title, image, children }) => { 7 | return ( 8 | 9 |
    10 |
    11 | 12 | 17 | 18 |
    19 |
    20 | 21 | 31 |
    32 | 33 | ); 34 | }; 35 | 36 | export default Section; 37 | -------------------------------------------------------------------------------- /src/app/page.jsx: -------------------------------------------------------------------------------- 1 | import Clients from "@/components/Clients"; 2 | import ContactSection from "@/components/ContactSection"; 3 | import Container from "@/components/Container"; 4 | import FadeIn from "@/components/FadeIn"; 5 | import Services from "@/components/Services"; 6 | import Testimonials from "@/components/Testimonials"; 7 | import logoPhobiaDark from "@/images/clients/phobia/logo-dark.svg"; 8 | 9 | export default function Home() { 10 | return ( 11 |
    12 | 13 | 14 |

    15 | Make your online presence a reality with us! 16 |

    17 |

    18 | We are a group of developer working at the intersection of design 19 | and technology. It is a really busy intersection though — a lot of 20 | our staff have been involved in hit and runs. 21 |

    22 |     23 |     24 | 25 | 29 | The team at Studio went above and beyond with our onboarding, even 30 | finding a way to access the user microphone without triggering one of 31 | those annoying permission dialogs. 32 | 33 | 34 | 35 |
    36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/components/SocialMedia.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import clsx from "clsx"; 3 | import { 4 | BsFacebook, 5 | BsTwitter, 6 | BsGithub, 7 | BsYoutube, 8 | BsLinkedin, 9 | } from "react-icons/bs"; 10 | 11 | export const SocialMediaProfiles = [ 12 | { 13 | title: "Youtube", 14 | href: "https://www.youtube.com/@reactjsBD/", 15 | icon: BsYoutube, 16 | }, 17 | { title: "GitHub", href: "https://github.com/noorjsdivs/", icon: BsGithub }, 18 | { 19 | title: "Facebook", 20 | href: "https://www.facebook.com/Noorlalu143/", 21 | icon: BsFacebook, 22 | }, 23 | { 24 | title: "Instagram", 25 | href: "https://www.linkedin.com/in/noor-mohammad-ab2245193/", 26 | icon: BsLinkedin, 27 | }, 28 | { title: "Twitter", href: "https://twitter.com", icon: BsTwitter }, 29 | ]; 30 | 31 | const SocialMedia = ({ className, invert = false }) => { 32 | return ( 33 |
      41 | {SocialMediaProfiles.map((item) => ( 42 |
    • 43 | 51 | 52 | 53 |
      • 54 | ))} 55 |
    56 | ); 57 | }; 58 | 59 | export default SocialMedia; 60 | -------------------------------------------------------------------------------- /src/components/SectionIntro.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import clsx from "clsx"; 5 | 6 | const SectionIntro = ({ 7 | eyebrow, 8 | title, 9 | children, 10 | smaller = false, 11 | invert = false, 12 | ...props 13 | }) => { 14 | return ( 15 | 16 | 17 |

    18 | {eyebrow && ( 19 | <> 20 | 26 | {eyebrow} 27 | 28 | - 29 | 30 | )} 31 | 40 | {title} 41 | 42 |

    43 | {children && ( 44 |
    50 | {children} 51 |
    52 | )} 53 |     54 |     55 | ); 56 | }; 57 | 58 | export default SectionIntro; 59 | -------------------------------------------------------------------------------- /src/components/Build.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageLaptop from "@/images/laptop.jpg"; 4 | import Blockquote from "./Blockquote"; 5 | 6 | const Build = () => { 7 | return ( 8 |
    9 |
    10 |

    11 | Based off of the discovery phase, we develop a comprehensive roadmap 12 | for each product and start working towards delivery. The roadmap is an 13 | intricately tangled mess of technical nonsense designed to drag the 14 | project out as long as possible. 15 |

    16 |

    17 | Each client is assigned a key account manager to keep lines of 18 | communication open and obscure the actual progress of the project. 19 | They act as a buffer between the client’s incessant nagging and the 20 | development team who are hard at work scouring open source projects 21 | for code to re-purpose. 22 |

    23 |

    24 | Our account managers are trained to only reply to client emails after 25 | 9pm, several days after the initial email. This reinforces the general 26 | aura that we are very busy and dissuades clients from asking for 27 | changes. 28 |

    29 |
    30 |
    34 | Studio_clone were so regular with their progress updates we almost began 35 | to think they were automated! 36 |
    37 |
    38 | ); 39 | }; 40 | 41 | export default Build; 42 | -------------------------------------------------------------------------------- /src/app/about/page.jsx: -------------------------------------------------------------------------------- 1 | import ContactSection from "@/components/ContactSection"; 2 | import Container from "@/components/Container"; 3 | import Cultures from "@/components/Cultures"; 4 | import PageIntro from "@/components/PageIntro"; 5 | import { StatList, StatListItem } from "@/components/StatList"; 6 | import React from "react"; 7 | 8 | const AboutPage = () => { 9 | return ( 10 | <> 11 | 12 |

    13 | We believe that our strength lies in our collaborative approach, which 14 | puts our clients at the center of everything we do. 15 |

    16 |
    17 |

    18 | Studio was started by three friends who noticed that developer 19 | studios were charging clients double what an in-house team would 20 | cost. Since the beginning, we have been committed to doing things 21 | differently by charging triple instead. 22 |

    23 |

    24 | At Studio, we’re more than just colleagues — we’re a family. This 25 | means we pay very little and expect people to work late. We want our 26 | employees to bring their whole selves to work. In return, we just 27 | ask that they keep themselves there until at least 6:30pm. 28 |

    29 |
    30 |     31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default AboutPage; 45 | -------------------------------------------------------------------------------- /src/components/ContactDetails.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FadeIn from "./FadeIn"; 3 | import Offices from "./Offices"; 4 | import Border from "./Border"; 5 | import Link from "next/link"; 6 | import SocialMedia from "./SocialMedia"; 7 | 8 | const ContactDetails = () => { 9 | return ( 10 | 11 |

    12 | Our offices 13 |

    14 |

    15 | Prefer doing things in person? We don’t but we have to list our 16 | addresses here for legal reasons. 17 |

    18 | 19 | 20 |

    21 | Email us 22 |

    23 |
    24 | {[ 25 | ["Careers", "reactjsbd.com"], 26 | ["Press", "noorjsdivs@gmail.com"], 27 | ].map(([label, email]) => ( 28 |
    29 |
    {label}
    30 |
    31 | 35 | {email} 36 | 37 |
    38 |
    39 | ))} 40 |
    41 |     42 | 43 |

    44 | Follow us 45 |

    46 | 47 |     48 |     49 | ); 50 | }; 51 | 52 | export default ContactDetails; 53 | -------------------------------------------------------------------------------- /src/components/ContactForm.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import FadeIn from "./FadeIn"; 3 | import TextInput from "./TextInput"; 4 | import RadioInput from "./RadioInput"; 5 | import Button from "./Button"; 6 | 7 | const ContactForm = () => { 8 | return ( 9 | 10 |
    11 |

    12 | Work inquiries 13 |

    14 |
    15 | 16 | 22 | 27 | 28 | 29 |
    30 |
    31 | Budget 32 |
    33 |
    34 | 35 | 36 | 37 | 38 |
    39 |
    40 |
    41 | 44 |
    45 |     46 | ); 47 | }; 48 | 49 | export default ContactForm; 50 | -------------------------------------------------------------------------------- /src/components/Discover.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageWhiteboard from "@/images/whiteboard.jpg"; 4 | import { TagList, TagListItem } from "./TagList"; 5 | 6 | const Discover = () => { 7 | return ( 8 |
    9 |
    10 |

    11 | We work closely with our clients to understand their{" "} 12 | needs and 13 | goals, embedding ourselves in their every day operations to understand 14 | what makes their business tick. 15 |

    16 |

    17 | Our team of private investigators shadow the company director’s for 18 | several weeks while our account managers focus on going through their 19 | trash. Our senior security experts then perform social engineering 20 | hacks to gain access to their{" "} 21 | business 22 | accounts — handing that information over to our forensic accounting 23 | team. 24 |

    25 |

    26 | Once the full audit is complete, we report back with a comprehensive 27 | plan and, 28 | more importantly, a budget. 29 |

    30 |
    31 |

    32 | Included in this phase 33 |

    34 | 35 | In-depth questionnaires 36 | Feasibility studies 37 | Blood samples 38 | Employee surveys 39 | Proofs-of-concept 40 | Forensic audit 41 | 42 |
    43 | ); 44 | }; 45 | 46 | export default Discover; 47 | -------------------------------------------------------------------------------- /src/components/Clients.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import logoBrightPath from "../images/clients/bright-path/logo-light.svg"; 3 | import logoFamilyFund from "../images/clients/family-fund/logo-light.svg"; 4 | import logoGreenLife from "../images/clients/green-life/logo-light.svg"; 5 | import logoHomeWork from "../images/clients/home-work/logo-light.svg"; 6 | import logoMailSmirk from "../images/clients/mail-smirk/logo-light.svg"; 7 | import logoNorthAdventures from "../images/clients/north-adventures/logo-light.svg"; 8 | import logoPhobiaLight from "../images/clients/phobia/logo-light.svg"; 9 | import logoUnseal from "../images/clients/unseal/logo-light.svg"; 10 | import Container from "./Container"; 11 | import FadeIn, { FadeInStagger } from "./FadeIn"; 12 | 13 | const clients = [ 14 | ["Phobia", logoPhobiaLight], 15 | ["Family Fund", logoFamilyFund], 16 | ["Unseal", logoUnseal], 17 | ["Mail Smirk", logoMailSmirk], 18 | ["Home Work", logoHomeWork], 19 | ["Green Life", logoGreenLife], 20 | ["Bright Path", logoBrightPath], 21 | ["North Adventures", logoNorthAdventures], 22 | ]; 23 | 24 | const Clients = () => { 25 | return ( 26 |
    27 | 28 | 29 |

    30 | We have worked with hundreds of amazing people 31 |

    32 |
    33 | 34 | 35 |
      39 | {clients.map(([client, logo]) => ( 40 |
    • 41 | 42 | {client} 43 | 44 |
      • 45 | ))} 46 |
    47 |     48 | 49 |
    50 | ); 51 | }; 52 | 53 | export default Clients; 54 | -------------------------------------------------------------------------------- /src/images/clients/mail-smirk/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/clients/mail-smirk/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Blockquote.jsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import clsx from "clsx"; 3 | import Border from "./Border"; 4 | 5 | function BlockquoteWithImage({ author, image, children, className }) { 6 | return ( 7 |
    13 |
    14 | {typeof children === "string" ?

    {children}

    : children} 15 |
    16 |
    17 | 23 |
    24 |
    25 | {author.name} 26 | , 27 |
    28 | {author.role} 29 |
    30 |
    31 | ); 32 | } 33 | 34 | function BlockquoteWithoutImage({ author, children, className }) { 35 | return ( 36 | 37 |
    38 |
    39 | {typeof children === "string" ?

    {children}

    : children} 40 |
    41 |
    42 | {author.name}, {author.role} 43 |
    44 |
    45 |     46 | ); 47 | } 48 | 49 | const Blockquote = (props) => { 50 | if (props.image) { 51 | return ; 52 | } 53 | return ; 54 | }; 55 | 56 | export default Blockquote; 57 | -------------------------------------------------------------------------------- /src/components/Deliver.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Section from "./Section"; 3 | import imageMeeting from "@/images/meeting.jpg"; 4 | import List, { ListItem } from "./List"; 5 | 6 | const Deliver = () => { 7 | return ( 8 |
    9 |
    10 |

    11 | About halfway through the Build phase, we push each project out by 6 12 | weeks due to a change in{" "} 13 | 14 | requirements 15 | 16 | . This allows us to increase the budget a final time before launch. 17 |

    18 |

    19 | Despite largely using pre-built components, most of the{" "} 20 | progress{" "} 21 | on each project takes place in the final 24 hours. The development 22 | time allocated to each client is actually spent making augmented 23 | reality demos that go viral on Twitter. 24 |

    25 |

    26 | We ensure that the main pages of the site are{" "} 27 | 28 | fully functional 29 | {" "} 30 | at launch — the auxiliary pages will, of course, be lorem ipusm shells 31 | which get updated as part of our exorbitant{" "} 32 | 33 | maintenance 34 | {" "} 35 | retainer. 36 |

    37 |
    38 |

    39 | Included in this phase 40 |

    41 | 42 | 43 | Our projects always have 100% test coverage, which would be impressive 44 | if our tests weren’t as porous as a sieve. 45 | 46 | 47 | To ensure reliability we only use the best Digital Ocean droplets that 48 | $4 a month can buy. 49 | 50 | 51 | Because we hold the API keys for every critical service your business 52 | uses, you can expect a lifetime of support, and invoices, from us. 53 | 54 | 55 |
    56 | ); 57 | }; 58 | 59 | export default Deliver; 60 | -------------------------------------------------------------------------------- /src/components/Services.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SectionIntro from "./SectionIntro"; 3 | import Container from "./Container"; 4 | import FadeIn from "./FadeIn"; 5 | import StylizedImage from "./StylizedImage"; 6 | import imageLaptop from "../images/laptop.jpg"; 7 | import List, { ListItem } from "./List"; 8 | 9 | const Services = () => { 10 | return ( 11 | <> 12 | 17 |

    18 | As long as those opportunities involve giving us money to re-purpose 19 | old projects — we can come up with an endless number of those. 20 |

    21 |     22 | 23 |
    24 |
    25 | 26 | 31 | 32 |
    33 | {/* List item */} 34 | 35 | 36 | We specialise in crafting beautiful, high quality marketing pages. 37 | The rest of the website will be a shell that uses lorem ipsum 38 | everywhere. 39 | 40 | 41 | We have a team of skilled developers who are experts in the latest 42 | app frameworks, like Angular 1 and Google Web Toolkit. 43 | 44 | 45 | We are at the forefront of modern e-commerce development. Which 46 | mainly means adding your logo to the Shopify store template we’ve 47 | used for the past six years. 48 | 49 | 50 | At Studio we understand the importance of having a robust and 51 | customised CMS. That’s why we run all of our client projects out 52 | of a single, enormous Joomla instance. 53 | 54 | 55 |
    56 |     57 | 58 | ); 59 | }; 60 | 61 | export default Services; 62 | -------------------------------------------------------------------------------- /src/components/Values.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import GridPattern from "./GridPattern"; 3 | import SectionIntro from "./SectionIntro"; 4 | import Container from "./Container"; 5 | import { GridList, GridListItem } from "./GridList"; 6 | 7 | const Values = () => { 8 | return ( 9 |
    10 |
    11 | 15 |
    16 | 20 |

    21 | We strive to stay at the forefront of emerging trends and 22 | technologies, while completely ignoring them and forking that old 23 | Rails project we feel comfortable using. We stand by our core values 24 | to justify that decision. 25 |

    26 |     27 | 28 | 29 | 30 | The first part of any partnership is getting our designer to put 31 | your logo in our template. The second step is getting them to do the 32 | colors. 33 | 34 | 35 | We pride ourselves on never missing a deadline which is easy because 36 | most of the work was done years ago. 37 | 38 | 39 | Every business has unique needs and our greatest challenge is 40 | shoe-horning those needs into something we already built. 41 | 42 | 43 | We are transparent about all of our processes, banking on the simple 44 | fact our clients never actually read anything. 45 | 46 | 47 | We foster long-term relationships with our clients that go beyond 48 | just delivering a product, allowing us to invoice them for decades. 49 | 50 | 51 | The technological landscape is always evolving and so are we. We are 52 | constantly on the lookout for new open source projects to clone. 53 | 54 | 55 | 56 |
    57 | ); 58 | }; 59 | 60 | export default Values; 61 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Container from "./Container"; 3 | import FadeIn from "./FadeIn"; 4 | import FooterNavigation from "./FooterNavigation"; 5 | import Logo from "./Logo"; 6 | import Link from "next/link"; 7 | 8 | const ArrowIcon = (props) => { 9 | return ( 10 | 18 | ); 19 | }; 20 | 21 | const NewsletterForm = () => { 22 | return ( 23 |
    24 |

    25 | Sign up for our newsletter 26 |

    27 |

    28 | Subscribe to get the latest design news, articles, resources and 29 | inspiration. 30 |

    31 |
    32 | 39 |
    40 | 47 |
    48 |
    49 |
    50 | ); 51 | }; 52 | 53 | const Footer = () => { 54 | return ( 55 | 56 | 57 |
    58 | 59 |
    60 | 61 |
    62 |
    63 |
    64 | 65 | 66 | Studio_clone 67 | 68 | 69 |

    70 | © Studio Agency Inc. {new Date().getFullYear()} 71 |

    72 |
    73 |     74 |     75 | ); 76 | }; 77 | 78 | export default Footer; 79 | -------------------------------------------------------------------------------- /src/components/GridPattern.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useId, useRef, useState } from "react"; 4 | import { motion } from "framer-motion"; 5 | function Block({ x, y, ...props }) { 6 | return ( 7 | 12 | ); 13 | } 14 | 15 | const GridPattern = ({ yOffset = 0, interactive = false, ...props }) => { 16 | let id = useId(); 17 | let ref = useRef(); 18 | let currentBlock = useRef(); 19 | let counter = useRef(0); 20 | let [hoveredBlocks, setHoveredBlocks] = useState([]); 21 | let staticBlocks = [ 22 | [1, 1], 23 | [2, 2], 24 | [4, 3], 25 | [6, 2], 26 | [7, 4], 27 | [5, 5], 28 | ]; 29 | return ( 30 | 65 | ); 66 | }; 67 | 68 | export default GridPattern; 69 | -------------------------------------------------------------------------------- /src/images/clients/green-life/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/clients/home-work/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/clients/green-life/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/clients/home-work/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/StylizedImage.jsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import Image from "next/image"; 3 | import React, { useId } from "react"; 4 | 5 | const shapes = [ 6 | { 7 | width: 655, 8 | height: 680, 9 | path: "M537.827 9.245A11.5 11.5 0 0 1 549.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 586.87 151h-28.275a15.999 15.999 0 0 0-15.689 12.862l-59.4 297c-1.98 9.901 5.592 19.138 15.689 19.138h17.275l.127.001c.85.009 1.701.074 2.549.009 11.329-.874 21.411-7.529 24.88-25.981.002-.012.016-.016.023-.007.008.009.022.005.024-.006l24.754-123.771A11.5 11.5 0 0 1 580.104 321h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 617.87 472H559c-22.866 0-28.984 7.98-31.989 25.931-.004.026-.037.035-.052.014-.015-.02-.048-.013-.053.012l-24.759 123.798A11.5 11.5 0 0 1 490.87 631h-29.132a14.953 14.953 0 0 0-14.664 12.021c-4.3 21.502-23.18 36.979-45.107 36.979H83.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C145.096 91.477 163.975 76 185.902 76h318.465c10.136 0 21.179-5.35 23.167-15.288l10.293-51.467Zm-512 160A11.5 11.5 0 0 1 37.104 160h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 74.87 311H11.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128Z", 10 | }, 11 | { 12 | width: 719, 13 | height: 680, 14 | path: "M89.827 9.245A11.5 11.5 0 0 1 101.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 138.87 151H75.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128Zm-64 321A11.5 11.5 0 0 1 37.104 321h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 74.87 472H11.504c-7.257 0-12.7-6.639-11.277-13.755l25.6-128ZM526.795 470a15.999 15.999 0 0 0-15.689 12.862l-32.032 160.159c-4.3 21.502-23.18 36.979-45.107 36.979H115.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C177.096 91.477 195.975 76 217.902 76h318.465c29.028 0 50.8 26.557 45.107 55.021l-33.768 168.841c-1.98 9.901 5.592 19.138 15.689 19.138h17.075l.127.001c.85.009 1.701.074 2.549.009 11.329-.874 21.411-7.529 24.88-25.981.002-.012.016-.016.023-.007.008.009.022.005.024-.006l24.754-123.771A11.5 11.5 0 0 1 644.104 160h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 311H623c-22.866 0-28.984 7.98-31.989 25.931-.004.026-.037.035-.052.014-.015-.02-.048-.013-.053.012l-24.759 123.798A11.5 11.5 0 0 1 554.87 470h-28.075Z", 15 | }, 16 | { 17 | width: 719, 18 | height: 680, 19 | path: "M632.827 9.245A11.5 11.5 0 0 1 644.104 0h63.366c7.257 0 12.7 6.64 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 151h-28.275a15.999 15.999 0 0 0-15.689 12.862l-95.832 479.159c-4.3 21.502-23.18 36.979-45.107 36.979H178.502c-29.028 0-50.8-26.557-45.107-55.021l102.4-512C240.096 91.477 258.975 76 280.902 76h318.465c10.136 0 21.179-5.35 23.167-15.288l10.293-51.467Zm0 479A11.5 11.5 0 0 1 644.104 479h63.366c7.257 0 12.7 6.639 11.277 13.755l-25.6 128A11.5 11.5 0 0 1 681.87 630h-63.366c-7.257 0-12.7-6.639-11.277-13.755l25.6-128ZM37.104 159a11.5 11.5 0 0 0-11.277 9.245l-25.6 128C-1.196 303.361 4.247 310 11.504 310H74.87a11.5 11.5 0 0 0 11.277-9.245l24.76-123.798a.03.03 0 0 1 .052-.012c.015.021.048.012.052-.014C114.016 158.98 120.134 151 143 151h58.87a11.5 11.5 0 0 0 11.277-9.245l25.6-128C240.17 6.64 234.727 0 227.47 0h-63.366a11.5 11.5 0 0 0-11.277 9.245l-24.754 123.771c-.002.011-.016.015-.024.006-.007-.009-.021-.005-.023.007-3.469 18.452-13.551 25.107-24.88 25.981-.848.065-1.699 0-2.549-.009l-.127-.001H37.104Z", 20 | }, 21 | ]; 22 | const StylizedImage = ({ shape = 0, className, ...props }) => { 23 | const id = useId(); 24 | const { width, height, path } = shapes[shape]; 25 | return ( 26 |
    32 | 33 | 34 | 35 | 36 | 42 | 43 | 44 | 49 | 50 | 51 | 52 | 58 | 59 | 60 | 61 |
    62 | ); 63 | }; 64 | 65 | export default StylizedImage; 66 | -------------------------------------------------------------------------------- /src/images/clients/unseal/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/unseal/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/family-fund/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/family-fund/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/bright-path/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/clients/bright-path/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/RootLayout.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { usePathname } from "next/navigation"; 3 | import { useEffect, useId, useRef, useState } from "react"; 4 | import { motion, MotionConfig, useReducedMotion } from "framer-motion"; 5 | import Container from "./Container"; 6 | import Link from "next/link"; 7 | import Logo from "./Logo"; 8 | import { HiMenuAlt4 } from "react-icons/hi"; 9 | import { IoMdClose } from "react-icons/io"; 10 | import Button from "./Button"; 11 | import clsx from "clsx"; 12 | import Offices from "./Offices"; 13 | import SocialMedia from "./SocialMedia"; 14 | import Footer from "./Footer"; 15 | 16 | const Header = ({ 17 | panelId, 18 | invert = false, 19 | icon: Icon, 20 | expanded, 21 | onToggle, 22 | toggleRef, 23 | }) => { 24 | // Container 25 | return ( 26 | 27 |
    28 | {/* Logo */} 29 | 30 | Studio_clone 31 | 32 |
    33 | 36 | 57 |
    58 |
    59 |     60 | ); 61 | }; 62 | const NavigationRow = ({ children }) => { 63 | return ( 64 |
    65 | 66 |
    {children}
    67 |     68 |
    69 | ); 70 | }; 71 | 72 | const NavigationItem = ({ href, children }) => { 73 | return ( 74 | 78 | {children} 79 | 80 | 81 | ); 82 | }; 83 | 84 | const Navigation = () => { 85 | return ( 86 | 96 | ); 97 | }; 98 | 99 | const RootLayoutInner = ({ children }) => { 100 | const panelId = useId(); 101 | const [expanded, setExpanded] = useState(false); 102 | const openRef = useRef(); 103 | const closeRef = useRef(); 104 | const navRef = useRef(); 105 | const shouldReduceMotion = useReducedMotion(); 106 | useEffect(() => { 107 | function onClick(event) { 108 | if (event.target.closest("a")?.href === window.location.href) { 109 | setExpanded(false); 110 | } 111 | } 112 | window.addEventListener("click", onClick); 113 | 114 | return () => { 115 | window.removeEventListener("click", onClick); 116 | }; 117 | }, []); 118 | return ( 119 | 120 |
    121 |
    126 | {/* Header */} 127 |
    { 133 | setExpanded((expanded) => !expanded); 134 | window.setTimeout(() => 135 | closeRef.current?.focus({ preventScroll: true }) 136 | ); 137 | }} 138 | /> 139 |
    140 | 148 | 149 |
    150 |
    { 157 | setExpanded((expanded) => !expanded); 158 | window.setTimeout(() => 159 | openRef.current?.focus({ preventScroll: true }) 160 | ); 161 | }} 162 | /> 163 |
    164 | {/* Navigation */} 165 | 166 |
    167 | 168 |
    169 |
    170 |

    171 | Our offices 172 |

    173 | 177 |
    178 |
    179 |

    180 | Follow us 181 |

    182 | 183 |
    184 |
    185 |     186 |
    187 |     188 |     189 |
    190 | 195 | 199 |
    {children}
    200 | {/* Footer */} 201 |