|
1 |
| -<?php |
2 |
| - |
3 |
| -/** |
4 |
| - * The header for our theme |
5 |
| - * |
6 |
| - * This is the template that displays all of the <head> section and everything up until <div id="content"> |
7 |
| - * |
8 |
| - * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials |
9 |
| - * |
10 |
| - * @package cjt |
11 |
| - */ |
12 |
| - |
13 |
| -?> |
14 |
| -<!doctype html> |
15 |
| -<html <?php language_attributes(); ?>> |
16 |
| - |
17 |
| - <head> |
18 |
| - <meta charset="<?php bloginfo('charset'); ?>"> |
19 |
| - <meta name="viewport" content="width=device-width, initial-scale=1"> |
20 |
| - <link rel="profile" href="https://gmpg.org/xfn/11"> |
21 |
| - |
22 |
| - <link rel="preconnect" href="https://fonts.googleapis.com"> |
23 |
| - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
24 |
| - <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> |
25 |
| - <?php wp_head(); ?> |
26 |
| - </head> |
27 |
| - |
28 |
| - <body <?php body_class(); ?>> |
29 |
| - <?php wp_body_open(); ?> |
30 |
| - <div id="page" class="site"> |
31 |
| - <a class="sr-only" href="#primary"> |
32 |
| - <?php esc_html_e('Skip to content', 'cjt'); ?> |
33 |
| - </a> |
34 |
| - |
35 |
| - <?php get_template_part('template-parts/components/component', 'announcement-bar'); ?> |
36 |
| - <header class="bg-white"> |
37 |
| - <div class="mx-auto max-w-7xl md:p-5 py-2.5 px-5"> |
38 |
| - <div class="flex items-center justify-between"> |
39 |
| - <div class="flex-1 md:flex md:items-center md:gap-12"> |
40 |
| - <a class="md:block hidden" href="<?= home_url(); ?>"> |
41 |
| - <img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/logo.png" class="object-cover w-60" /> |
42 |
| - </a> |
43 |
| - <a class="block md:hidden" href="<?= home_url(); ?>"> |
44 |
| - <img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/logo-mobile.png" class="object-cover w-16" /> |
45 |
| - </a> |
46 |
| - </div> |
47 |
| - |
48 |
| - <div class="md:flex md:items-center gap-5"> |
49 |
| - <nav aria-label="Global" class="hidden md:block"> |
50 |
| - <?php |
51 |
| - wp_nav_menu(array( |
52 |
| - 'menu_class' => 'menu', |
53 |
| - 'menu_id' => 'nav-menu', |
54 |
| - )); |
55 |
| - ?> |
56 |
| - </nav> |
57 |
| - |
58 |
| - <div class="flex items-center gap-4"> |
59 |
| - <div class="sm:gap-4 md:flex hidden"> |
60 |
| - <a class="rounded-md bg-brand-blue shadow-md lg:px-6 px-3 lg:text-lg text-sm lg:py-3.5 py-2 font-semibold text-white" href="<?php echo site_url('/pricing'); ?>"> |
61 |
| - Get CJT PLUS |
62 |
| - </a> |
63 |
| - </div> |
64 |
| - |
65 |
| - <div class="flex items-center md:hidden"> |
66 |
| - <?php |
67 |
| - wp_nav_menu(array( |
68 |
| - 'container' => 'nav', |
69 |
| - 'container_class' => 'block md:hidden peer shadow-xl bg-white duration-300 transition-all translate-x-full fixed right-0 top-0 h-full w-[calc(100%-50px)] z-50', |
70 |
| - 'container_aria_label' => 'Global', |
71 |
| - 'menu_class' => 'block text-center py-20 px-5', |
72 |
| - 'item_spacing' => 80, |
73 |
| - 'add_li_class' => 'text-2xl py-2' |
74 |
| - )); |
75 |
| - ?> |
76 |
| - <button class="text-neutral-500 transition hidden peer-aria-hidden:block peer-aria-hidden:z-[100]" data-toggle-menu> |
77 |
| - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#171717" class="size-8"> |
78 |
| - <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> |
79 |
| - </svg> |
80 |
| - </button> |
81 |
| - <button class="text-neutral-800 rounded-full bg-neutral-100 transition peer-aria-hidden:hidden relative block -top-16 z-[100] p-1.5" data-toggle-menu> |
82 |
| - <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 stroke-current"> |
83 |
| - <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> |
84 |
| - </svg> |
85 |
| - </button> |
86 |
| - |
87 |
| - </div> |
88 |
| - </div> |
89 |
| - </div> |
90 |
| - </div> |
91 |
| - </div> |
92 |
| - </header> |
93 |
| - |
94 |
| - <script> |
95 |
| - document.addEventListener( 'DOMContentLoaded', () => { |
96 |
| - const toggleBtns = document.querySelectorAll( 'button[data-toggle-menu]' ) |
97 |
| - const mobileMenu = toggleBtns[ 0 ].previousElementSibling |
98 |
| - mobileMenu.setAttribute( 'aria-hidden', 'true' ) |
99 |
| - toggleBtns.forEach( btn => btn.addEventListener( 'click', () => { |
100 |
| - if ( mobileMenu.hasAttribute( 'aria-hidden' ) ) { |
101 |
| - mobileMenu.removeAttribute( 'aria-hidden' ) |
102 |
| - document.documentElement.classList.add( 'overflow-hidden' ) |
103 |
| - } else { |
104 |
| - document.documentElement.classList.remove( 'overflow-hidden' ) |
105 |
| - mobileMenu.setAttribute( 'aria-hidden', 'true' ) |
106 |
| - } |
107 |
| - mobileMenu.classList.toggle( 'translate-x-full' ) |
108 |
| - } ) ) |
109 |
| - } ) |
110 |
| - </script> |
| 1 | +<?php |
| 2 | + |
| 3 | +/** |
| 4 | + * The header for our theme |
| 5 | + * |
| 6 | + * This is the template that displays all of the <head> section and everything up until <div id="content"> |
| 7 | + * |
| 8 | + * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials |
| 9 | + * |
| 10 | + * @package cjt |
| 11 | + */ |
| 12 | + |
| 13 | +?> |
| 14 | +<!doctype html> |
| 15 | +<html <?php language_attributes(); ?>> |
| 16 | + |
| 17 | + <head> |
| 18 | + <meta charset="<?php bloginfo('charset'); ?>"> |
| 19 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 20 | + <link rel="profile" href="https://gmpg.org/xfn/11"> |
| 21 | + |
| 22 | + <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 23 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 24 | + <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> |
| 25 | + <link href="https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap" rel="stylesheet"> |
| 26 | + <?php wp_head(); ?> |
| 27 | + </head> |
| 28 | + |
| 29 | + <body <?php body_class('font-body'); ?>> |
| 30 | + <?php wp_body_open(); ?> |
| 31 | + <div id="page" class="site"> |
| 32 | + <a class="sr-only" href="#primary"> |
| 33 | + <?php esc_html_e('Skip to content', 'cjt'); ?> |
| 34 | + </a> |
| 35 | + |
| 36 | + <!--<?php get_template_part('template-parts/components/component', 'announcement-bar'); ?>--> |
| 37 | + <header class="bg-white"> |
| 38 | + <div class="mx-auto max-w-7xl md:p-5 py-2.5 px-5"> |
| 39 | + <div class="flex items-center justify-between"> |
| 40 | + <div class="flex-1 md:flex md:items-center md:gap-12"> |
| 41 | + <a class="md:block hidden" href="<?= home_url(); ?>"> |
| 42 | + <img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/logo.png" class="object-cover w-60" /> |
| 43 | + </a> |
| 44 | + <a class="block md:hidden" href="<?= home_url(); ?>"> |
| 45 | + <img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/logo-mobile.png" class="object-cover w-16" /> |
| 46 | + </a> |
| 47 | + </div> |
| 48 | + |
| 49 | + <div class="md:flex md:items-center gap-5"> |
| 50 | + <nav aria-label="Global" class="hidden md:block"> |
| 51 | + <?php |
| 52 | + wp_nav_menu(array( |
| 53 | + 'menu_class' => 'menu', |
| 54 | + 'menu_id' => 'nav-menu', |
| 55 | + )); |
| 56 | + ?> |
| 57 | + </nav> |
| 58 | + |
| 59 | + <div class="flex items-center gap-4"> |
| 60 | + <div class="sm:gap-4 md:flex hidden"> |
| 61 | + <a class="rounded-md bg-brand-blue shadow-md lg:px-6 px-3 lg:text-lg text-sm lg:py-3.5 py-2 font-semibold text-white" href="<?php echo site_url('/pricing'); ?>"> |
| 62 | + Get CJT PLUS |
| 63 | + </a> |
| 64 | + </div> |
| 65 | + |
| 66 | + <div class="flex items-center md:hidden"> |
| 67 | + <?php |
| 68 | + wp_nav_menu(array( |
| 69 | + 'container' => 'nav', |
| 70 | + 'container_class' => 'block md:hidden peer shadow-xl bg-white duration-300 transition-all translate-x-full fixed right-0 top-0 h-full w-[calc(100%-50px)] z-50', |
| 71 | + 'container_aria_label' => 'Global', |
| 72 | + 'menu_class' => 'block text-center py-20 px-5', |
| 73 | + 'item_spacing' => 80, |
| 74 | + 'add_li_class' => 'text-2xl py-2' |
| 75 | + )); |
| 76 | + ?> |
| 77 | + <button class="text-neutral-500 transition hidden peer-aria-hidden:block peer-aria-hidden:z-[100]" data-toggle-menu> |
| 78 | + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#171717" class="size-8"> |
| 79 | + <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> |
| 80 | + </svg> |
| 81 | + </button> |
| 82 | + <button class="text-neutral-800 rounded-full bg-neutral-100 transition peer-aria-hidden:hidden relative block -top-16 z-[100] p-1.5" data-toggle-menu> |
| 83 | + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8 stroke-current"> |
| 84 | + <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /> |
| 85 | + </svg> |
| 86 | + </button> |
| 87 | + |
| 88 | + </div> |
| 89 | + </div> |
| 90 | + </div> |
| 91 | + </div> |
| 92 | + </div> |
| 93 | + </header> |
| 94 | + |
| 95 | + <script> |
| 96 | + document.addEventListener( 'DOMContentLoaded', () => { |
| 97 | + const toggleBtns = document.querySelectorAll( 'button[data-toggle-menu]' ) |
| 98 | + const mobileMenu = toggleBtns[ 0 ].previousElementSibling |
| 99 | + mobileMenu.setAttribute( 'aria-hidden', 'true' ) |
| 100 | + toggleBtns.forEach( btn => btn.addEventListener( 'click', () => { |
| 101 | + if ( mobileMenu.hasAttribute( 'aria-hidden' ) ) { |
| 102 | + mobileMenu.removeAttribute( 'aria-hidden' ) |
| 103 | + document.documentElement.classList.add( 'overflow-hidden' ) |
| 104 | + } else { |
| 105 | + document.documentElement.classList.remove( 'overflow-hidden' ) |
| 106 | + mobileMenu.setAttribute( 'aria-hidden', 'true' ) |
| 107 | + } |
| 108 | + mobileMenu.classList.toggle( 'translate-x-full' ) |
| 109 | + } ) ) |
| 110 | + } ) |
| 111 | + </script> |
0 commit comments